fix: fix nested filter

undb-io · Nov 21, 2024 · 646a2e2 · 646a2e2
1 parent 4255fef
commit 646a2e2
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 36 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -33,7 +33,7 @@
 
   let open = false
 
-  function onChange() {
+  function onChange(value: string | Date | undefined | null) {
     if (!includeTime) {
       open = false
     }
@@ -63,21 +63,23 @@
   <Popover.Content class="p-0" side="bottom" align="start">
     <div class="p-1">
       <DateMacroPicker
-        onValueChange={() => {
-          onChange()
+        onValueChange={(v) => {
+          onChange(v)
         }}
         bind:value
       />
     </div>
     <Calendar
       value={isString(internalDate) && isDateFieldMacro(internalDate) ? undefined : internalDate}
       onValueChange={(v) => {
+        let vv: string | undefined
         if (v) {
-          value = v.toString()
+          vv = v.toString()
         } else {
-          value = undefined
+          vv = undefined
         }
-        onChange()
+        value = vv
+        onChange(vv)
       }}
       initialFocus
     />
@@ -90,8 +92,9 @@
           }}
           onValueChange={(v) => {
             if (!value) return
-            value = new Date(new Date(value).setHours(v.hour, v.minute, 0, 0)).toISOString()
-            onValueChange?.(value)
+            const vv = new Date(new Date(value).setHours(v.hour, v.minute, 0, 0)).toISOString()
+            value = vv
+            onValueChange?.(vv)
           }}
         />
       </div>
@@ -101,8 +104,9 @@
         class="flex-1"
         variant="outline"
         on:click={() => {
-          value = today(getLocalTimeZone()).toString()
-          onChange()
+          const v = today(getLocalTimeZone()).toString()
+          value = v
+          onChange(v)
         }}>Today</Button
       >
       <Button
@@ -111,7 +115,7 @@
         on:click={() => {
           if (value) {
             value = null
-            onValueChange?.(value)
+            onValueChange?.(null)
           }
           open = false
         }}

diff --git a/apps/frontend/src/lib/components/blocks/field-control/number-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/number-control.svelte
@@ -5,8 +5,9 @@
   export let value: number
   export let onValueChange: (value: number) => void
   const onInput = (event: Event) => {
-    value = +(event.target as HTMLInputElement).value
-    onValueChange?.(value)
+    const v = Number((event.target as HTMLInputElement).value)
+    value = v
+    onValueChange?.(v)
   }
 </script>
 

diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/condition-group.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/condition-group.svelte
@@ -29,19 +29,19 @@
             <div class="col-span-9 grid grid-cols-12 items-center">
               <FilterField
                 disabled
-                value={child.field}
+                bind:value={child.field}
                 class={cn(!!child.field && "col-span-4 rounded-r-none border-r-0")}
               />
               <OpPicker
                 disabled
                 {field}
-                value={child.op}
+                bind:value={child.op}
                 class={cn("col-span-3 rounded-l-none", !!child.value && "rounded-r-none")}
               />
               <FilterInput
                 disabled
                 {field}
-                value={child.value}
+                bind:value={child.value}
                 op={child.op}
                 class="col-span-5 bg-white text-xs font-medium"
               />

diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/field-filter-control.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/field-filter-control.svelte
@@ -12,6 +12,10 @@
   export let value: any | undefined = undefined
   export let disabled = false
 
+  export let onOptionChange: ((option: any) => void) | undefined = undefined
+  export let onValueChange: ((value: any) => void) | undefined = undefined
+  export let onOpChange: ((op: IOpType) => void) | undefined = undefined
+
   $: conditionOps = field?.conditionOps ?? []
   $: ops = conditionOps.map((op) => ({ value: op, label: $LL.table.ops[op]() })) ?? []
 
@@ -24,8 +28,14 @@
 
 <div class={cn("col-span-8 flex flex-1 items-center gap-0", $$restProps.class)}>
   <FieldFilterOption {field} bind:option class="h-8 w-20 font-semibold" />
-  <OpPicker {disabled} {field} bind:value={op} class={cn("rounded-l-none", hasValue && "rounded-r-none")} />
+  <OpPicker
+    {disabled}
+    {field}
+    bind:value={op}
+    class={cn("rounded-l-none", hasValue && "rounded-r-none")}
+    onValueChange={onOpChange}
+  />
   {#if hasValue}
-    <FilterInput {disabled} class="flex-1" {field} bind:value {op} />
+    <FilterInput {disabled} class="flex-1" {field} bind:value {op} {onValueChange} />
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/filter-field.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/filter-field.svelte
@@ -5,7 +5,7 @@
 
   export let value: string | undefined
   export let filter: ((field: any) => boolean) | undefined = undefined
-  export let onValueChange: ((value: FieldType | undefined, prev: FieldType) => void) | undefined = undefined
+  export let onValueChange: ((value: string | undefined, prev: string) => void) | undefined = undefined
   export let sameWidth = true
   export let table: Writable<TableDo> | undefined = undefined
   export let disabled = false

diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte
@@ -35,6 +35,7 @@
   import OptionFilterInput from "./variants/option-filter-input.svelte"
   import OptionsFilterInput from "./variants/options-filter-input.svelte"
   import DurationInput from "$lib/components/blocks/duration/duration-input.svelte"
+  import StringControl from "$lib/components/blocks/field-control/string-control.svelte"
 
   export let field: Field | undefined
   export let recordId: string | undefined = undefined
@@ -43,15 +44,17 @@
   export let op: IOpType | undefined = undefined
   export let disabled = false
 
+  export let onValueChange: ((value: any) => void) | undefined = undefined
+
   const className = cn("h-8 rounded-l-none border-l-0 py-0 text-xs bg-background", $$restProps.class)
 
   const string: Record<IStringFieldConditionOp, ComponentType | null> = {
-    eq: Input,
-    neq: Input,
-    contains: Input,
-    does_not_contain: Input,
-    starts_with: Input,
-    ends_with: Input,
+    eq: StringControl,
+    neq: StringControl,
+    contains: StringControl,
+    does_not_contain: StringControl,
+    starts_with: StringControl,
+    ends_with: StringControl,
     is_empty: null,
     is_not_empty: null,
     min: NumberInput,
@@ -334,6 +337,6 @@
 
 {#if field && op}
   {#if component}
-    <svelte:component this={component} {disabled} bind:value class={className} {field} />
+    <svelte:component this={component} {disabled} bind:value class={className} {field} {onValueChange} />
   {/if}
 {/if}
diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/filters-editor.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/filters-editor.svelte
@@ -34,6 +34,8 @@
   export let disabled = false
   export let readonly = false
 
+  export let onValueChange: ((value: MaybeConditionGroup<any> | undefined) => void) | undefined = undefined
+
   $: filteredFields = table?.getOrderedVisibleFields().filter((f) => filter({ id: f.id.value, type: f.type })) ?? []
   export let disableGroup = false
 
@@ -126,11 +128,16 @@
                 {readonly}
                 table={table ? writable(table) : undefined}
                 {sameWidth}
-                onValueChange={(type, prev) => {
-                  if (type !== prev) {
-                    if (isMaybeFieldCondition(child)) {
+                onValueChange={async (field, prev) => {
+                  if (isMaybeFieldCondition(child)) {
+                    if (field !== prev) {
                       child.value = undefined
+                    } else {
+                      child.value = field
                     }
+
+                    child = child
+                    value = value
                   }
                 }}
                 {filter}
@@ -144,6 +151,30 @@
                 bind:option={child.option}
                 bind:op={child.op}
                 bind:value={child.value}
+                onOpChange={(o) => {
+                  if (isMaybeFieldCondition(child)) {
+                    child.op = o
+                    child = child
+                    value = value
+                    onValueChange?.(value)
+                  }
+                }}
+                onOptionChange={(o) => {
+                  if (isMaybeFieldCondition(child)) {
+                    child.option = o
+                    child = child
+                    value = value
+                    onValueChange?.(value)
+                  }
+                }}
+                onValueChange={(v) => {
+                  if (isMaybeFieldCondition(child)) {
+                    child.value = v
+                    child = child
+                    value = value
+                    onValueChange?.(value)
+                  }
+                }}
               />
             </div>
             <div class="col-span-1 flex items-center gap-2">
@@ -184,7 +215,7 @@
                 {/if}
               </div>
             </div>
-            <svelte:self bind:value={child} {table} level={level + 1} {readonly} {disabled} />
+            <svelte:self {onValueChange} bind:value={child} {table} level={level + 1} {readonly} {disabled} {filter} />
           </div>
         {/if}
       {/each}

diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/op-picker.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/op-picker.svelte
@@ -14,6 +14,8 @@
   $: ops = conditionOps.map((op) => ({ value: op, label: $LL.table.ops[op]() })) ?? []
   export let disabled = false
 
+  export let onValueChange: ((value: IOpType) => void) | undefined = undefined
+
   let open = false
   export let value: IOpType | undefined = undefined
 
@@ -57,6 +59,7 @@
             onSelect={(currentValue) => {
               value = currentValue
               closeAndFocusTrigger(ids.trigger)
+              onValueChange?.(currentValue)
             }}
           >
             <Check class={cn("mr-2 h-4 w-4", value !== framework.value && "text-transparent")} />

diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/variants/option-filter-input.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/variants/option-filter-input.svelte
@@ -5,6 +5,8 @@
   export let field: SelectField
   export let value: any
   export let disabled = false
+
+  export let onValueChange: (value: any) => void = () => {}
 </script>
 
-<OptionPicker {disabled} {...$$restProps} bind:value options={field.options} />
+<OptionPicker {disabled} {...$$restProps} bind:value options={field.options} {onValueChange} />
diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/variants/options-filter-input.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/variants/options-filter-input.svelte
@@ -5,6 +5,8 @@
   export let field: SelectField
   export let value: any
   export let disabled = false
+
+  export let onValueChange: (value: string[] | null) => void = () => {}
 </script>
 
-<OptionsPicker {disabled} {...$$restProps} bind:value options={field.options} />
+<OptionsPicker {disabled} {...$$restProps} bind:value options={field.options} {onValueChange} />
diff --git a/apps/frontend/src/lib/components/blocks/option/options-picker.svelte b/apps/frontend/src/lib/components/blocks/option/options-picker.svelte
@@ -60,10 +60,11 @@
           <Command.Item
             value={option.id}
             onSelect={(currentValue) => {
-              value = value?.includes(currentValue)
+              const v = value?.includes(currentValue)
                 ? value?.filter((v) => v !== currentValue)
                 : [...(value ?? []), currentValue]
-              onValueChange(value ?? [])
+              value = v
+              onValueChange(v ?? [])
             }}
           >
             <Check class={cn("text-primary mr-2 h-4 w-4", !value?.includes(option.id) && "text-transparent")} />

diff --git a/apps/frontend/src/lib/components/ui/input/number-input.svelte b/apps/frontend/src/lib/components/ui/input/number-input.svelte
@@ -2,10 +2,13 @@
   import Input from "./input.svelte"
 
   export let value: number | undefined
+  export let onValueChange: ((value: number) => void) | undefined = undefined
 
   function onInput(e: Event) {
-    value = +(e.target as HTMLInputElement).value
+    const v = Number((e.target as HTMLInputElement).value)
+    value = v
+    onValueChange?.(v)
   }
 </script>
 
-<Input {...$$restProps} type="number" {value} on:input={onInput} />
+<Input {...$$restProps} type="number" {value} on:change on:input={onInput} />