From 62f7676cdf044086d47ef7dc556271773383fde7 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 16 Aug 2021 23:31:51 +0200
Subject: [PATCH] add autocomplete component and make it optional for
 optionsField and relationshipField

---
 .../bbui/src/Form/Core/Autocomplete.svelte    | 80 +++++++++++++++++++
 packages/bbui/src/Form/Core/Picker.svelte     | 31 ++++++-
 packages/bbui/src/Form/Core/Search.svelte     |  3 +
 packages/bbui/src/Form/Core/index.js          |  1 +
 packages/standard-components/manifest.json    | 10 +++
 .../src/forms/OptionsField.svelte             | 12 ++-
 .../src/forms/RelationshipField.svelte        | 10 ++-
 7 files changed, 142 insertions(+), 5 deletions(-)
 create mode 100644 packages/bbui/src/Form/Core/Autocomplete.svelte

diff --git a/packages/bbui/src/Form/Core/Autocomplete.svelte b/packages/bbui/src/Form/Core/Autocomplete.svelte
new file mode 100644
index 0000000000..ea36d82463
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Autocomplete.svelte
@@ -0,0 +1,80 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import Picker from "./Picker.svelte"
+
+  export let value = null
+  export let id = null
+  export let selectPlaceholder = "Choose an option"
+  export let autocompletePlaceholder = "Search an option"
+  export let disabled = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let getOptionIcon = () => null
+  export let readonly = false
+  export let quiet = false
+  export let autoWidth = false
+
+  const dispatch = createEventDispatcher()
+  let open = false
+  $: fieldText = getFieldText(value, options, selectPlaceholder)
+  $: fieldIcon = getFieldIcon(value, options, selectPlaceholder)
+
+  const getFieldText = (value, options, placeholder) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      return placeholder || "Choose an option"
+    }
+
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+
+    // Render the label if the selected option is found, otherwise raw value
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionLabel(options[index], index) : value
+  }
+
+  const getFieldIcon = (value, options) => {
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionIcon(options[index], index) : null
+  }
+
+  const selectOption = value => {
+    dispatch("change", value)
+    open = false
+  }
+</script>
+
+<Picker
+  on:click
+  bind:open
+  {quiet}
+  {id}
+  {error}
+  {disabled}
+  {readonly}
+  {fieldText}
+  {options}
+  {autoWidth}
+  {getOptionLabel}
+  {getOptionValue}
+  {getOptionIcon}
+  {fieldIcon}
+  autocomplete={true}
+  isPlaceholder={value == null || value === ""}
+  {autocompletePlaceholder}
+  placeholderOption={selectPlaceholder}
+  isOptionSelected={option => option === value}
+  onSelectOption={selectOption}
+/>
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 3de454668c..ce08a33c59 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -5,6 +5,7 @@
   import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
+  import Search from "./Search.svelte"
 
   export let id = null
   export let disabled = false
@@ -13,6 +14,7 @@
   export let fieldIcon = ""
   export let isPlaceholder = false
   export let placeholderOption = null
+  export let autocompletePlaceholder = ""
   export let options = []
   export let isOptionSelected = () => false
   export let onSelectOption = () => {}
@@ -23,10 +25,17 @@
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
+  export let autocomplete = false
 
   const dispatch = createEventDispatcher()
+  let searchTerm = null
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel)
+  $: filteredOptions = getFilteredOptions(
+    sortedOptions,
+    searchTerm,
+    getOptionLabel
+  )
 
   const onClick = () => {
     dispatch("click")
@@ -46,6 +55,16 @@
       return labelA > labelB ? 1 : -1
     })
   }
+
+  const getFilteredOptions = (options, term, getLabel) => {
+    if (autocomplete && term) {
+      const lowerCaseTerm = term.toLowerCase()
+      return options.filter(option =>
+        getLabel(option).toLowerCase().includes(lowerCaseTerm)
+      )
+    }
+    return options
+  }
 </script>
 
 <button
@@ -96,6 +115,14 @@
     class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
     class:auto-width={autoWidth}
   >
+    {#if autocomplete}
+      <Search
+        on:change={event => (searchTerm = event.detail)}
+        updateOnChange="true"
+        {disabled}
+        placeholder={autocompletePlaceholder}
+      />
+    {/if}
     <ul class="spectrum-Menu" role="listbox">
       {#if placeholderOption}
         <li
@@ -116,8 +143,8 @@
           </svg>
         </li>
       {/if}
-      {#if sortedOptions.length}
-        {#each sortedOptions as option, idx}
+      {#if filteredOptions.length}
+        {#each filteredOptions as option, idx}
           <li
             class="spectrum-Menu-item"
             class:is-selected={isOptionSelected(getOptionValue(option, idx))}
diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index b26c9567c0..dd70f1eaca 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -95,4 +95,7 @@
   .is-disabled {
     pointer-events: none;
   }
+  .spectrum-Search-clearButton {
+    position: absolute;
+  }
 </style>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index a31c5941ec..8e57ed26a7 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -9,3 +9,4 @@ export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
+export { default as CoreAutocomplete } from "./Autocomplete.svelte"
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 1b7a09cdef..9667db74a3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1914,6 +1914,10 @@
             "label": "Select",
             "value": "select"
           },
+          {
+            "label": "Autocomplete",
+            "value": "autocomplete"
+          },
           {
             "label": "Radio buttons",
             "value": "radio"
@@ -2135,6 +2139,12 @@
         "label": "Placeholder",
         "key": "placeholder"
       },
+      {
+        "type": "boolean",
+        "label": "Autocomplete",
+        "key": "autocomplete",
+        "defaultValue": false
+      },
       {
         "type": "boolean",
         "label": "Disabled",
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 04bb582190..ff6f8aa18b 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { CoreSelect, RadioGroup } from "@budibase/bbui"
+  import { CoreAutocomplete, CoreSelect, RadioGroup } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -37,6 +37,16 @@
         {placeholder}
         on:change={e => fieldApi.setValue(e.detail)}
       />
+    {:else if optionsType === "autocomplete"}
+      <CoreAutocomplete
+        value={$fieldState.value}
+        id={$fieldState.fieldId}
+        disabled={$fieldState.disabled}
+        error={$fieldState.error}
+        options={fieldSchema?.constraints?.inclusion ?? []}
+        {placeholder}
+        on:change={e => fieldApi.setValue(e.detail)}
+      />
     {:else if optionsType === "radio"}
       <RadioGroup
         value={$fieldState.value}
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index f7d6581c7a..add000b5ad 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
+  import { CoreAutocomplete, CoreSelect, CoreMultiselect } from "@budibase/bbui"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
 
@@ -10,6 +10,7 @@
   export let placeholder
   export let disabled = false
   export let validation
+  export let autocomplete = false
 
   let fieldState
   let fieldApi
@@ -24,6 +25,11 @@
   $: fetchTable(linkedTableId)
   $: singleValue = flatten($fieldState?.value)?.[0]
   $: multiValue = flatten($fieldState?.value) ?? []
+  $: component = multiselect
+    ? CoreMultiselect
+    : autocomplete
+    ? CoreAutocomplete
+    : CoreSelect
 
   const fetchTable = async id => {
     if (id) {
@@ -74,7 +80,7 @@
 >
   {#if fieldState}
     <svelte:component
-      this={multiselect ? CoreMultiselect : CoreSelect}
+      this={component}
       {options}
       value={multiselect ? multiValue : singleValue}
       on:change={multiselect ? multiHandler : singleHandler}