Add initial work on dynamically updating any setting via conditional UI

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -1,32 +1,12 @@
 <script>
   import { isEmpty } from "lodash/fp"
-  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
+  import { Input, DetailSummary } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
-  import TableSelect from "./PropertyControls/TableSelect.svelte"
-  import DataSourceSelect from "./PropertyControls/DataSourceSelect.svelte"
-  import DataProviderSelect from "./PropertyControls/DataProviderSelect.svelte"
-  import FieldSelect from "./PropertyControls/FieldSelect.svelte"
-  import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte"
-  import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
-  import SectionSelect from "./PropertyControls/SectionSelect.svelte"
-  import NavigationEditor from "./PropertyControls/NavigationEditor/NavigationEditor.svelte"
-  import EventsEditor from "./PropertyControls/EventsEditor"
-  import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte"
-  import { IconSelect } from "./PropertyControls/IconSelect"
-  import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
-  import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
-  import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
-  import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
-  import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
-  import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
-  import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
-  import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
   import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
-  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
+  import { getComponentForSettingType } from "./PropertyControls/componentSettings"
-  import URLSelect from "./PropertyControls/URLSelect.svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -45,40 +25,9 @@
   $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
 
   const updateProp = store.actions.components.updateProp
-  const controlMap = {
-    text: Input,
-    select: Select,
-    dataSource: DataSourceSelect,
-    dataProvider: DataProviderSelect,
-    boolean: Checkbox,
-    number: Input,
-    event: EventsEditor,
-    table: TableSelect,
-    color: ColorPicker,
-    icon: IconSelect,
-    field: FieldSelect,
-    multifield: MultiFieldSelect,
-    schema: SchemaSelect,
-    section: SectionSelect,
-    navigation: NavigationEditor,
-    filter: FilterEditor,
-    url: URLSelect,
-    "field/string": StringFieldSelect,
-    "field/number": NumberFieldSelect,
-    "field/options": OptionsFieldSelect,
-    "field/boolean": BooleanFieldSelect,
-    "field/longform": LongFormFieldSelect,
-    "field/datetime": DateTimeFieldSelect,
-    "field/attachment": AttachmentFieldSelect,
-    "field/link": RelationshipFieldSelect,
-  }
-
-  const getControl = type => {
-    return controlMap[type]
-  }
 
   const canRenderControl = setting => {
-    const control = getControl(setting?.type)
+    const control = getComponentForSettingType(setting?.type)
     if (!control) {
       return false
     }
@@ -105,7 +54,7 @@
       {#if canRenderControl(setting)}
         <PropertyControl
           type={setting.type}
-          control={getControl(setting.type)}
+          control={getComponentForSettingType(setting.type)}
           label={setting.label}
           key={setting.key}
           value={componentInstance[setting.key] ??

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte

@@ -7,7 +7,9 @@
   import ColorPicker from "./ColorPicker.svelte"
   import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
   import { getBindableProperties } from "../../../../builderStore/dataBinding"
-  import { currentAsset, store } from "../../../../builderStore"
+  import { currentAsset, selectedComponent, store } from "builderStore"
+  import { getComponentForSettingType } from "./componentSettings"
+  import PropertyControl from "./PropertyControl.svelte"
 
   export let conditions = []
 
@@ -27,6 +29,15 @@
     },
   ]
 
+  $: definition = store.actions.components.getDefinition(
+    $selectedComponent?._component
+  )
+  $: settings = (definition?.settings ?? []).map(setting => {
+    return {
+      label: setting.label,
+      value: setting.key,
+    }
+  })
   $: operatorOptions = getValidOperatorsForType("string")
   $: bindableProperties = getBindableProperties(
     $currentAsset,
@@ -38,6 +49,17 @@
     }
   })
 
+  const getSettingDefinition = key => {
+    return definition?.settings?.find(setting => {
+      return setting.key === key
+    })
+  }
+
+  const getComponentForSetting = key => {
+    const settingDefinition = getSettingDefinition(key)
+    return getComponentForSettingType(settingDefinition?.type || "text")
+  }
+
   const addCondition = () => {
     conditions = [
       ...conditions,
@@ -79,12 +101,23 @@
                 bind:value={condition.action}
               />
               {#if condition.action === "update"}
-                <Select options={["Color"]} bind:value={condition.setting} />
+                <Select options={settings} bind:value={condition.setting} />
-                <div>TO</div>
+                {#if getSettingDefinition(condition.setting)}
-                <ColorPicker
+                  <div>TO</div>
-                  on:change={e => (condition.settingValue = e.detail)}
+                  <PropertyControl
-                  value={condition.settingValue}
+                    type={getSettingDefinition(condition.setting).type}
-                />
+                    control={getComponentForSetting(condition.setting)}
+                    key={getSettingDefinition(condition.setting).key}
+                    value={condition.settingValue}
+                    componentInstance={$selectedComponent}
+                    onChange={val => (condition.settingValue = val)}
+                    props={{
+                      options: getSettingDefinition(condition.setting).options,
+                      placeholder: getSettingDefinition(condition.setting)
+                        .placeholder,
+                    }}
+                  />
+                {/if}
               {/if}
               <div>IF</div>
               <DrawerBindableInput

packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js

@@ -0,0 +1,54 @@
+import { Checkbox, Input, Select } from "@budibase/bbui"
+import DataSourceSelect from "./DataSourceSelect.svelte"
+import DataProviderSelect from "./DataProviderSelect.svelte"
+import EventsEditor from "./EventsEditor"
+import TableSelect from "./TableSelect.svelte"
+import ColorPicker from "./ColorPicker.svelte"
+import { IconSelect } from "./IconSelect"
+import FieldSelect from "./FieldSelect.svelte"
+import MultiFieldSelect from "./MultiFieldSelect.svelte"
+import SchemaSelect from "./SchemaSelect.svelte"
+import SectionSelect from "./SectionSelect.svelte"
+import NavigationEditor from "./NavigationEditor/NavigationEditor.svelte"
+import FilterEditor from "./FilterEditor/FilterEditor.svelte"
+import URLSelect from "./URLSelect.svelte"
+import StringFieldSelect from "./StringFieldSelect.svelte"
+import NumberFieldSelect from "./NumberFieldSelect.svelte"
+import OptionsFieldSelect from "./OptionsFieldSelect.svelte"
+import BooleanFieldSelect from "./BooleanFieldSelect.svelte"
+import LongFormFieldSelect from "./LongFormFieldSelect.svelte"
+import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte"
+import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
+import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
+
+const componentMap = {
+  text: Input,
+  select: Select,
+  dataSource: DataSourceSelect,
+  dataProvider: DataProviderSelect,
+  boolean: Checkbox,
+  number: Input,
+  event: EventsEditor,
+  table: TableSelect,
+  color: ColorPicker,
+  icon: IconSelect,
+  field: FieldSelect,
+  multifield: MultiFieldSelect,
+  schema: SchemaSelect,
+  section: SectionSelect,
+  navigation: NavigationEditor,
+  filter: FilterEditor,
+  url: URLSelect,
+  "field/string": StringFieldSelect,
+  "field/number": NumberFieldSelect,
+  "field/options": OptionsFieldSelect,
+  "field/boolean": BooleanFieldSelect,
+  "field/longform": LongFormFieldSelect,
+  "field/datetime": DateTimeFieldSelect,
+  "field/attachment": AttachmentFieldSelect,
+  "field/link": RelationshipFieldSelect,
+}
+
+export const getComponentForSettingType = type => {
+  return componentMap[type]
+}

packages/client/src/components/Component.svelte

@@ -154,9 +154,6 @@
   }
 
   const evaluateConditions = conditions => {
-    console.log("evaluating")
-    console.log(conditions)
-
     if (!conditions?.length) {
       return
     }
@@ -170,8 +167,6 @@
     }
 
     const activeConditions = getActiveConditions(conditions)
-    console.log(activeConditions)
-
     const result = reduceConditionActions(activeConditions)
     conditionalSettings = result.settingUpdates
     if (result.visible != null) {

packages/client/src/utils/conditions.js

@@ -8,19 +8,17 @@ export const getActiveConditions = conditions => {
     return []
   }
 
-  const luceneCompatibleConditions = conditions.map(condition => {
+  return conditions.filter(condition => {
-    return {
+    const luceneCompatibleCondition = {
       ...condition,
       type: "string",
       field: "newValue",
       value: condition.referenceValue,
     }
+    const query = buildLuceneQuery([luceneCompatibleCondition])
+    const result = luceneQuery([luceneCompatibleCondition], query)
+    return result.length > 0
   })
-
-  const query = buildLuceneQuery(luceneCompatibleConditions)
-  console.log(luceneQuery)
-
-  return luceneQuery(luceneCompatibleConditions, query)
 }
 
 export const reduceConditionActions = conditions => {