From e97b5ef91addc09f95a5f6bd3ff258f92ab72c15 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 20 Aug 2021 15:56:11 +0100
Subject: [PATCH] add multiselect component as option for form design

---
 .../screenTemplates/utils/commonComponents.js |   1 +
 .../backend/DataTable/RowFieldControl.svelte  |   1 +
 .../design/AppPreview/componentStructure.json |   3 +-
 .../PropertyControls/componentSettings.js     |   1 +
 packages/standard-components/manifest.json    | 106 ++++++++++++++++++
 .../src/forms/MultiFieldSelect.svelte         |  73 ++++++++++++
 .../standard-components/src/forms/index.js    |   1 +
 7 files changed, 185 insertions(+), 1 deletion(-)
 create mode 100644 packages/standard-components/src/forms/MultiFieldSelect.svelte

diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index 1a64a8958f..7d40995925 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -131,6 +131,7 @@ const fieldTypeToComponentMap = {
   string: "stringfield",
   number: "numberfield",
   options: "optionsfield",
+  array: "multifieldselect",
   boolean: "booleanfield",
   longform: "longformfield",
   datetime: "datetimefield",
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 66879b83cf..f2f7a6c687 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -36,6 +36,7 @@
 {:else if type === "array"}
   <Multiselect
     bind:value
+    {label}
     options={meta.constraints.inclusion.reduce((p, n) => p.concat(n), [])}
   />
 {:else if type === "link"}
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index c83686158f..881b6baa72 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -20,7 +20,8 @@
       "datetimefield",
       "attachmentfield",
       "relationshipfield",
-      "daterangepicker"
+      "daterangepicker",
+      "multifieldselect"
     ]
   },
   {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index 64668d05c8..3ca3f7f5c9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -43,6 +43,7 @@ const componentMap = {
   "field/datetime": FormFieldSelect,
   "field/attachment": FormFieldSelect,
   "field/link": FormFieldSelect,
+  "field/array": FormFieldSelect,
   // Some validation types are the same as others, so not all types are
   // explicitly listed here. e.g. options uses string validation
   "validation/string": ValidationEditor,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 95f41a85ef..8b2bb863a5 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -2005,6 +2005,112 @@
       }
     ]
   },
+  "multifieldselect": {
+    "name": "MultiField Picker",
+    "icon": "ViewList",
+    "styles": ["size"],
+    "illegalChildren": ["section"],
+    "settings": [
+      {
+        "type": "field/array",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder",
+        "placeholder": "Choose an option"
+      },
+      {
+        "type": "text",
+        "label": "Default value",
+        "key": "defaultValue"
+      },
+      {
+        "type": "boolean",
+        "label": "Autocomplete",
+        "key": "autocomplete",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "optionsType",
+          "value": "select"
+        }
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Options source",
+        "key": "optionsSource",
+        "defaultValue": "schema",
+        "placeholder": "Pick an options source",
+        "options": [
+          {
+            "label": "Schema",
+            "value": "schema"
+          },
+          {
+            "label": "Data provider",
+            "value": "provider"
+          },
+          {
+            "label": "Custom",
+            "value": "custom"
+          }
+        ]
+      },
+      {
+        "type": "dataProvider",
+        "label": "Options Provider",
+        "key": "dataProvider",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      },
+      {
+        "type": "field",
+        "label": "Label Column",
+        "key": "labelColumn",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      },
+      {
+        "type": "field",
+        "label": "Value Column",
+        "key": "valueColumn",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      }, 
+      {
+        "type": "options",
+        "key": "customOptions",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "custom"
+        }
+      },
+      {
+        "type": "validation/string",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",
diff --git a/packages/standard-components/src/forms/MultiFieldSelect.svelte b/packages/standard-components/src/forms/MultiFieldSelect.svelte
new file mode 100644
index 0000000000..d44f471304
--- /dev/null
+++ b/packages/standard-components/src/forms/MultiFieldSelect.svelte
@@ -0,0 +1,73 @@
+<script>
+  import { Multiselect } from "@budibase/bbui"
+  import Field from "./Field.svelte"
+
+  export let field
+  export let label
+  export let placeholder
+  export let disabled = false
+  export let validation
+  export let defaultValue
+  export let optionsSource = "schema"
+  export let dataProvider
+  export let labelColumn
+  export let valueColumn
+  export let customOptions
+  console.log(defaultValue)
+  let fieldState
+  let fieldApi
+  let fieldSchema
+  $: options = getOptions(
+    optionsSource,
+    fieldSchema,
+    dataProvider,
+    labelColumn,
+    valueColumn
+  )
+  const getOptions = (
+    optionsSource,
+    fieldSchema,
+    dataProvider,
+    labelColumn,
+    valueColumn
+  ) => {
+    // Take options from schema
+    if (optionsSource == null || optionsSource === "schema") {
+      return fieldSchema?.constraints?.inclusion ?? []
+    }
+
+    // Extract options from data provider
+    if (optionsSource === "provider" && valueColumn) {
+      let optionsSet = {}
+      dataProvider?.rows?.forEach(row => {
+        const value = row?.[valueColumn]
+        if (value) {
+          const label = row[labelColumn] || value
+          optionsSet[value] = { value, label }
+        }
+      })
+      return Object.values(optionsSet)
+    }
+
+    // Extract custom options
+    if (optionsSource === "custom" && customOptions) {
+      return customOptions
+    }
+
+    return []
+  }
+</script>
+
+<Field
+  {field}
+  {label}
+  {disabled}
+  {validation}
+  {defaultValue}
+  type="array"
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema
+>
+  <Multiselect {placeholder} options={options[0]} />
+</Field>
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index fed371278b..cbc278aa03 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -3,6 +3,7 @@ export { default as fieldgroup } from "./FieldGroup.svelte"
 export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
+export { default as multifieldselect } from "./MultiFieldSelect.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
 export { default as datetimefield } from "./DateTimeField.svelte"