Undo changes

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -1,11 +1,6 @@
 <script>
-  import {
+  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
-    CoreSelect,
+  import { fetchData } from "@budibase/frontend-core"
-    CoreMultiselect,
-    Input,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import { fetchData, Utils } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
   import { FieldTypes } from "../../../constants"
@@ -26,16 +21,6 @@
   let fieldApi
   let fieldSchema
   let tableDefinition
-  let primaryDisplay
-  let options
-  let selectedOptions = []
-  let isOpen = false
-  let hasFilter
-
-  let searchResults
-  let searchString
-  let searching = false
-  let lastSearchId
 
   $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
   $: linkedTableId = fieldSchema?.tableId
@@ -50,57 +35,13 @@
       limit: 100,
     },
   })
-  $: hasFilter = !!filter?.filter(f => !!f.field)?.length
   $: fetch.update({ filter })
-  $: {
+  $: options = $fetch.rows
-    options = searchResults ? searchResults : $fetch.rows
-    const nonMatchingOptions = selectedOptions.filter(
-      option => !options.map(opt => opt._id).includes(option._id)
-    )
-    // Append initially selected options if there is no filter
-    // and hasn't already been appended
-    if (!hasFilter) {
-      options = [...options, ...nonMatchingOptions]
-    }
-  }
   $: tableDefinition = $fetch.definition
-  $: primaryDisplay = tableDefinition?.primaryDisplay || "_id"
   $: singleValue = flatten(fieldState?.value)?.[0]
   $: multiValue = flatten(fieldState?.value) ?? []
   $: component = multiselect ? CoreMultiselect : CoreSelect
   $: expandedDefaultValue = expand(defaultValue)
-  $: debouncedSearch(searchString)
-  $: {
-    if (searching) {
-      isOpen = true
-    }
-  }
-
-  // Fetch the initially selected values
-  // as they may not be within the first 100 records
-  $: {
-    if (
-      primaryDisplay !== "_id" &&
-      fieldState?.value?.length &&
-      !selectedOptions?.length
-    ) {
-      API.searchTable({
-        paginate: false,
-        tableId: linkedTableId,
-        limit: 100,
-        query: {
-          oneOf: {
-            [`1:${primaryDisplay}`]: fieldState?.value?.map(
-              value => value.primaryDisplay
-            ),
-          },
-        },
-      }).then(response => {
-        const value = multiselect ? multiValue : singleValue
-        selectedOptions = response.rows.filter(row => value.includes(row._id))
-      })
-    }
-  }
 
   const flatten = values => {
     if (!values) {
@@ -136,66 +77,10 @@
 
   const handleChange = value => {
     const changed = fieldApi.setValue(value)
-    selectedOptions = value.map(val => ({
-      _id: val,
-      [primaryDisplay]: options.find(option => option._id === val)[
-        primaryDisplay
-      ],
-    }))
     if (onChange && changed) {
       onChange({ value })
     }
   }
-
-  // Search for rows based on the search string
-  const search = async searchString => {
-    // Reset state if this search is invalid
-    if (!linkedTableId || !searchString) {
-      searchResults = null
-      return
-    }
-
-    // If a filter exists, then do a client side search
-    if (hasFilter) {
-      searchResults = $fetch.rows.filter(option =>
-        option[primaryDisplay].startsWith(searchString)
-      )
-      isOpen = true
-      return
-    }
-
-    // Search for results, using IDs to track invocations and ensure we're
-    // handling the latest update
-    lastSearchId = Math.random()
-    searching = true
-    const thisSearchId = lastSearchId
-    const results = await API.searchTable({
-      paginate: false,
-      tableId: linkedTableId,
-      limit: 100,
-      query: {
-        string: {
-          [`1:${primaryDisplay}`]: searchString || "",
-        },
-      },
-    })
-    searching = false
-
-    // In case searching takes longer than our debounced update, abandon these
-    // results
-    if (thisSearchId !== lastSearchId) {
-      return
-    }
-
-    // Process results
-    searchResults = results.rows?.map(row => ({
-      ...row,
-      primaryDisplay: row[primaryDisplay],
-    }))
-  }
-
-  // Debounced version of searching
-  const debouncedSearch = Utils.debounce(search, 250)
 </script>
 
 <Field
@@ -210,63 +95,19 @@
   bind:fieldSchema
 >
   {#if fieldState}
-    <div class={autocomplete ? "field-with-search" : ""}>
+    <svelte:component
-      <svelte:component
+      this={component}
-        this={component}
+      {options}
-        bind:open={isOpen}
+      {autocomplete}
-        {options}
+      value={multiselect ? multiValue : singleValue}
-        autocomplete={false}
+      on:change={multiselect ? multiHandler : singleHandler}
-        value={multiselect ? multiValue : singleValue}
+      id={fieldState.fieldId}
-        on:change={multiselect ? multiHandler : singleHandler}
+      disabled={fieldState.disabled}
-        id={fieldState.fieldId}
+      error={fieldState.error}
-        disabled={fieldState.disabled}
+      getOptionLabel={getDisplayName}
-        error={fieldState.error}
+      getOptionValue={option => option._id}
-        getOptionLabel={getDisplayName}
+      {placeholder}
-        getOptionValue={option => option._id}
+      sort={true}
-        {placeholder}
+    />
-        customPopoverOffsetBelow={autocomplete ? 32 : null}
-        customPopoverMaxHeight={autocomplete ? 240 : null}
-        sort={true}
-      />
-      {#if autocomplete}
-        <div class="search">
-          <Input
-            autofocus
-            quiet
-            type="text"
-            bind:value={searchString}
-            placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
-          />
-          {#if searching}
-            <div>
-              <ProgressCircle size="S" />
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
   {/if}
 </Field>
-
-<style>
-  .search {
-    flex: 0 0 calc(var(--default-row-height) - 1px);
-    display: flex;
-    align-items: center;
-    margin: 4px var(--cell-padding);
-    width: calc(100% - 2 * var(--cell-padding));
-  }
-  .search :global(.spectrum-Textfield) {
-    min-width: 0;
-    width: 100%;
-  }
-  .search :global(.spectrum-Textfield-input) {
-    font-size: 13px;
-  }
-  .search :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-  }
-  .field-with-search {
-    min-height: 80px;
-  }
-</style>