Merge pull request #8726 from Budibase/feature/dynamic-filter-custom-labels

Dynamic filter custom labels

packages/builder/src/components/design/settings/componentSettings.js

@@ -19,6 +19,7 @@ import FormFieldSelect from "./controls/FormFieldSelect.svelte"
 import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
 import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
+import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 
 const componentMap = {
@@ -42,6 +43,7 @@ const componentMap = {
   filter: FilterEditor,
   url: URLSelect,
   columns: ColumnEditor,
+  "columns/basic": BasicColumnEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,

packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte

@@ -0,0 +1,10 @@
+<script>
+  import ColumnEditor from "./ColumnEditor.svelte"
+</script>
+
+<ColumnEditor
+  {...$$props}
+  on:change
+  allowCellEditing={false}
+  subject="Dynamic Filter"
+/>

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte

@@ -17,6 +17,7 @@
   export let columns = []
   export let options = []
   export let schema = {}
+  export let allowCellEditing = true
 
   const flipDurationMs = 150
   let dragDisabled = true
@@ -123,7 +124,9 @@
                   on:change={e => (column.displayName = e.detail)}
                 />
                 <Input bind:value={column.displayName} placeholder="Label" />
-                <CellEditor bind:column />
+                {#if allowCellEditing}
+                  <CellEditor bind:column />
+                {/if}
                 <Icon
                   name="Close"
                   hoverable

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

@@ -11,6 +11,8 @@
 
   export let componentInstance
   export let value = []
+  export let allowCellEditing = true
+  export let subject = "Table"
 
   const dispatch = createEventDispatcher()
 
@@ -68,10 +70,16 @@
 </script>
 
 <ActionButton on:click={open}>Configure columns</ActionButton>
-<Drawer bind:this={drawer} title="Table Columns">
+<Drawer bind:this={drawer} title="{subject} Columns">
   <svelte:fragment slot="description">
-    Configure the columns in your table.
+    Configure the columns in your {subject.toLowerCase()}.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
+  <ColumnDrawer
+    slot="body"
+    bind:columns={boundValue}
+    {options}
+    {schema}
+    {allowCellEditing}
+  />
 </Drawer>

packages/client/manifest.json

@@ -3932,10 +3932,10 @@
         "required": true
       },
       {
-        "type": "multifield",
+        "type": "columns/basic",
-        "label": "Allowed filter fields",
+        "label": "Allowed filter columns",
         "key": "allowedFields",
-        "placeholder": "All fields"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",

packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte

@@ -61,7 +61,10 @@
       clonedSchema = schema
     } else {
       allowedFields?.forEach(field => {
-        if (schema[field]) {
+        if (schema[field.name]) {
+          clonedSchema[field.name] = schema[field.name]
+          clonedSchema[field.name].displayName = field.displayName
+        } else if (schema[field]) {
           clonedSchema[field] = schema[field]
         }
       })

packages/client/src/components/app/dynamic-filter/FilterModal.svelte

@@ -25,7 +25,10 @@
         !BannedTypes.includes(field.type) ||
         (field.type === "formula" && field.formulaType === "static")
     )
-    .map(field => field.name)
+    .map(field => ({
+      label: field.displayName || field.name,
+      value: field.name,
+    }))
 
   const addFilter = () => {
     filters = [