From 6fd265776d20e9c58b036aa744b3b8cd4fcc1072 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 09:58:59 +0100
Subject: [PATCH] Add bespoke component for selecting users in table conditions

---
 .../controls/TableConditionEditor.svelte        | 17 +++++++++++------
 packages/frontend-core/src/components/index.js  |  1 +
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 4edeaa37bb..7928e0300c 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -9,19 +9,16 @@
     Icon,
     DatePicker,
     Combobox,
-    Multiselect,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
   import ColorPicker from "./ColorPicker.svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { QueryUtils, Constants } from "@budibase/frontend-core"
+  import { QueryUtils, Constants, FilterUsers } from "@budibase/frontend-core"
   import { generate } from "shortid"
   import { FieldType, FormulaType } from "@budibase/types"
   import { dndzone } from "svelte-dnd-action"
   import { flip } from "svelte/animate"
-  import { getDatasourceForProvider } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
 
   export let componentInstance
   export let bindings
@@ -66,8 +63,6 @@
     // on the page, so adding this ensures formula columns get operators
     formulaType: FormulaType.STATIC,
   })
-  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: console.log(componentInstance)
 
   const getValueTypeOptions = type => {
     let options = [
@@ -235,6 +230,16 @@
                       ?.constraints?.inclusion || []}
                     bind:value={condition.referenceValue}
                   />
+                {:else if (type === FieldType.BB_REFERENCE || type === FieldType.BB_REFERENCE_SINGLE) && condition.valueType === type}
+                  <FilterUsers
+                    bind:value={condition.referenceValue}
+                    multiselect={[
+                      Constants.OperatorOptions.In.value,
+                      Constants.OperatorOptions.ContainsAny.value,
+                    ].includes(condition.operator)}
+                    disabled={condition.noValue}
+                    type={condition.valueType}
+                  />
                 {:else}
                   <DrawerBindableInput
                     {bindings}
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 06e1348988..d494abb82d 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -8,3 +8,4 @@ export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
 export { default as FilterBuilder } from "./FilterBuilder.svelte"
+export { default as FilterUsers } from "./FilterUsers.svelte"