wip

packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte

@@ -1,11 +1,10 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { messages } from "./columnInfo";
+  import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
   import { Column, Support, NotRequired, StringNumber } from "./lines"
   import subjects from './subjects';
 
-  export let support = {}
+  export let columnInfo
-
   export let columnIcon
   export let columnType
   export let columnName
@@ -15,6 +14,15 @@
 
   export let schema
 
+  let support
+  let messages = []
+
+  $: {
+    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, columnInfo)
+    support = columnInfoMessagesAndSupport.support
+    messages = columnInfoMessagesAndSupport.messages
+  }
+
   let root = null;
 
   let explanationModalSubject = subjects.none
@@ -38,15 +46,15 @@
     {setExplanationSubject}
   />
   <Support
-    support={support.support}
+    {support}
     {setExplanationSubject}
   />
-  {#if support?.messages?.includes(messages.stringAsNumber)}
+  {#if messages.includes(messageConstants.stringAsNumber)}
     <StringNumber
       {setExplanationSubject}
     />
   {/if}
-  {#if support?.messages?.includes(messages.notRequired)}
+  {#if messages.includes(messageConstants.notRequired)}
     <NotRequired
       {setExplanationSubject}
     />

packages/builder/src/components/design/settings/controls/FieldContext/index.js

@@ -1,2 +1 @@
 export { default as FieldContext } from "./FieldContext.svelte"
-export * from "./columnInfo"

packages/builder/src/components/design/settings/controls/FieldSelect.svelte

@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext'
+  import { FieldContext } from './FieldContext'
   import { debounce } from "lodash"
   import { goto, params } from "@roxi/routify"
   import { Constants } from "@budibase/frontend-core"
@@ -19,23 +19,9 @@
   let previousOption = null
   let contextTooltipVisible = false
 
-  const getFieldSupport = (schema, columnInfo) => {
-    if (columnInfo == null) {
-      return {}
-    }
-
-    const fieldSupport = {}
-    Object.entries(schema || {}).forEach(([key, value]) => {
-      fieldSupport[key] = getColumnInfoMessagesAndSupport(value)
-    })
-
-    return fieldSupport
-  }
-
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
-  $: fieldSupport = getFieldSupport(schema, columnInfo);
   $: options = Object.keys(schema || {})
   $: boundValue = getValidValue(value, options)
 
@@ -127,18 +113,18 @@
       explanationModal
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
-      support={fieldSupport[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
+      {columnInfo}
     />
     <FieldContext
       slot="previous"
       schema={schema[previousOption]}
-      support={fieldSupport[previousOption]}
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
+      {columnInfo}
     />
   </ContextTooltip>
 {/if}

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -5,7 +5,7 @@
     componentStore,
   } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext'
+  import { FieldContext } from './FieldContext'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
   import { debounce } from "lodash"
@@ -25,29 +25,12 @@
     componentInstance?._component
   )
 
-  const getFieldSupport = (schema, columnInfo) => {
-    if (columnInfo == null) {
-      return {}
-    }
-
-    const fieldSupport = {}
-    Object.entries(schema || {}).forEach(([key, value]) => {
-      // super TODO: nicer to do this at the component level jit and store each value seperately so i don't have this long ass name???
-      fieldSupport[key] = getColumnInfoMessagesAndSupport(value, columnInfo)
-    })
-
-    return fieldSupport
-  }
-
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
-  $: fieldSupport = getFieldSupport(schema, columnInfo);
   $: boundValue = getValidOptions(value, options)
 
-  $: console.log(fieldSupport)
-
 
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
@@ -92,18 +75,6 @@
     return ""
   }
 
-  const isOptionEnabled = optionKey => {
-    return true;
-    // Remain enabled if already selected, so it can be deselected
-    if (value?.includes(optionKey)) return true
-    const support = fieldSupport[optionKey]?.support;
-
-    if (support == null) return true
-    if (support === unsupported) return false
-
-    return true
-  }
-
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
         contextTooltipVisible = false;
@@ -145,18 +116,18 @@
       explanationModal
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
-      support={fieldSupport[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
+      {columnInfo}
     />
     <FieldContext
       slot="previous"
       schema={schema[previousOption]}
-      support={fieldSupport[previousOption]}
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
+      {columnInfo}
     />
   </ContextTooltip>
 {/if}