From 465f2a6fbdb96a65461aac79f4d9e04a65b0cc00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 3 Nov 2020 09:42:46 +0000
Subject: [PATCH] Add multi option select and multi table view field select
 components

---
 .../userInterface/MultiOptionSelect.svelte    | 39 +++++++++++++++++++
 .../MultiTableViewFieldSelect.svelte          |  5 +++
 .../userInterface/TableViewFieldSelect.svelte | 11 ++++--
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/MultiOptionSelect.svelte
 create mode 100644 packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte

diff --git a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte b/packages/builder/src/components/userInterface/MultiOptionSelect.svelte
new file mode 100644
index 0000000000..30ad7672ff
--- /dev/null
+++ b/packages/builder/src/components/userInterface/MultiOptionSelect.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { Multiselect } from "@budibase/bbui"
+
+  export let options = []
+  export let value = []
+  export let styleBindingProperty
+  export let onChange = () => {}
+
+  let boundValue = getValidOptions(value, options)
+  $: setValue(boundValue)
+  $: sanitiseOptions(options)
+
+  function getValidOptions(selectedOptions, allOptions) {
+    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
+  }
+
+  function setValue(val) {
+    console.log(val)
+    onChange(val)
+  }
+
+  function sanitiseOptions(options) {
+    boundValue = getValidOptions(value, options)
+  }
+</script>
+
+<div>
+  <Multiselect extraThin secondary bind:value={boundValue}>
+    {#each options as option}
+      <option value={option}>{option}</option>
+    {/each}
+  </Multiselect>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte b/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte
new file mode 100644
index 0000000000..7d2f17a02b
--- /dev/null
+++ b/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import TableViewFieldSelect from "./TableViewFieldSelect.svelte"
+</script>
+
+<TableViewFieldSelect {...$$props} multiselect />
diff --git a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
index 30e1becca8..756936be82 100644
--- a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
@@ -1,11 +1,12 @@
 <script>
   import OptionSelect from "./OptionSelect.svelte"
   import { backendUiStore } from "builderStore"
-  import { onMount } from "svelte"
+  import MultiOptionSelect from "./MultiOptionSelect.svelte"
 
   export let componentInstance = {}
   export let value = ""
-  export let onChange = (val = {})
+  export let onChange = () => {}
+  export let multiselect = false
 
   const tables = $backendUiStore.tables
 
@@ -24,4 +25,8 @@
   }
 </script>
 
-<OptionSelect {value} {onChange} {options} />
+{#if multiselect}
+  <MultiOptionSelect {value} {onChange} {options} />
+{:else}
+  <OptionSelect {value} {onChange} {options} />
+{/if}