Add initial work on dynamically updating any setting via conditional UI

2024-07-03 13:30:46 +12:00 · 2021-07-22 19:19:37 +01:00 · 2021-07-22 19:19:37 +01:00 · 204de7c4d3
parent 5f19ccc6d5
commit 204de7c4d3
5 changed files with 103 additions and 74 deletions
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/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 URLSelect from "./PropertyControls/URLSelect.svelte"
+  import { getComponentForSettingType } from "./PropertyControls/componentSettings"

  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] ??
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
+++ b/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} />
-                <div>TO</div>
-                <ColorPicker
-                  on:change={e => (condition.settingValue = e.detail)}
-                  value={condition.settingValue}
-                />
+                <Select options={settings} bind:value={condition.setting} />
+                {#if getSettingDefinition(condition.setting)}
+                  <div>TO</div>
+                  <PropertyControl
+                    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
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/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]
+}
--- a/packages/client/src/components/Component.svelte
+++ b/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) {
--- a/packages/client/src/utils/conditions.js
+++ b/packages/client/src/utils/conditions.js
@ -8,19 +8,17 @@ export const getActiveConditions = conditions => {
    return []
  }

-  const luceneCompatibleConditions = conditions.map(condition => {
-    return {
+  return conditions.filter(condition => {
+    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 => {