fix: fix button field condition

undb-io · Nov 22, 2024 · e34159f · e34159f
1 parent 27ae0c3
commit e34159f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/field-options/button-field-option.svelte b/apps/frontend/src/lib/components/blocks/field-options/button-field-option.svelte
@@ -17,7 +17,7 @@
   import { Button } from "$lib/components/ui/button"
   import Separator from "$lib/components/ui/separator/separator.svelte"
   import { writable } from "svelte/store"
-  import type { ZodUndefined } from "@undb/zod"
+  import { Switch } from "$lib/components/ui/switch"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { onMount, tick } from "svelte"
 
@@ -40,15 +40,18 @@
       confirm: true,
     },
   }
-  const value = writable<MaybeConditionGroup<ZodUndefined> | undefined>()
+  const value = writable<MaybeConditionGroup<any> | undefined>()
   $: validValue = $table && $value ? parseValidViewFilter($table.schema, $value) : undefined
   $: if (validValue) {
     option.disabled = validValue
   }
 
+  let disabledWhen = false
+
   onMount(() => {
     if (option.disabled) {
       value.set(toMaybeConditionGroup(option.disabled))
+      disabledWhen = true
     }
   })
 
@@ -63,14 +66,19 @@
   <Label for="label">Label</Label>
   <Input class="w-full" placeholder="Button" id="label" bind:value={option.label} />
 
-  <div class="space-y-2 rounded-sm border pt-2">
-    <Label class="pl-4 text-xs font-semibold" for="disabled">Disabled When...</Label>
-    <FiltersEditor
-      bind:value={$value}
-      table={$table}
-      filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
-    ></FiltersEditor>
-  </div>
+  <Label class="flex items-center gap-2 text-xs font-semibold" for="disabled">
+    <Switch id="disabled" bind:checked={disabledWhen} size="sm" />
+    Disabled When...
+  </Label>
+  {#if disabledWhen}
+    <div class="space-y-2 rounded-sm border pt-2">
+      <FiltersEditor
+        bind:value={$value}
+        table={$table}
+        filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
+      ></FiltersEditor>
+    </div>
+  {/if}
 
   <div class="space-y-2 rounded-md border px-4 py-3">
     <p class="text-xs font-semibold">Update Value when Click Button</p>

diff --git a/apps/frontend/src/lib/components/blocks/field-options/field-options.svelte b/apps/frontend/src/lib/components/blocks/field-options/field-options.svelte
@@ -31,7 +31,6 @@
   export let disabled = false
   export let type: NoneSystemFieldType
 
-
   const map: Record<NoneSystemFieldType, ComponentType> = {
     string: StringFieldOption,
     longText: LongTextFieldOption,
@@ -67,4 +66,5 @@
   bind:option
   {isNew}
   {field}
+  {...$$restProps}
 />
diff --git a/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte b/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
@@ -113,6 +113,7 @@
             bind:constraint={$formData.constraint}
             bind:display={$formData.display}
             bind:defaultValue={$formData.defaultValue}
+            {...attrs}
           />
         </Form.Control>
         <Form.Description />

diff --git a/packages/table/src/modules/schema/fields/variants/button-field/button-field.vo.ts b/packages/table/src/modules/schema/fields/variants/button-field/button-field.vo.ts
@@ -24,7 +24,7 @@ export const buttonFieldUpdateAction = z.object({
   confirm: z.boolean().optional(),
 })
 
-const buttonCondition = z.undefined()
+const buttonCondition = z.any()
 
 export const buttonDisabled = createConditionGroup(buttonCondition, buttonCondition)
 export type IButtonDisabled = z.infer<typeof buttonDisabled>