From 2fee785b73f335eb26dbf1f10b8af67efa2a73d2 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Wed, 21 Aug 2024 22:28:21 +0800
Subject: [PATCH] feat: allow required form field with default value hidden

---
 .../blocks/forms/form-field-options.svelte    | 19 +++++++++++++------
 .../blocks/forms/form-fields-editor.svelte    | 19 +++++++++++++------
 .../src/modules/forms/form/form-field.vo.ts   | 11 +++++++++++
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte b/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte
index 59bf6dcd4..a1fee25e6 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte
@@ -6,6 +6,7 @@
     type MaybeConditionGroup,
     toMaybeConditionGroup,
     parseValidViewFilter,
+    formOption,
   } from "@undb/table"
   import { Switch } from "$lib/components/ui/switch"
   import { Label } from "$lib/components/ui/label"
@@ -85,18 +86,24 @@
       <div class="flex items-center gap-3">
         <Label class="flex items-center gap-2 text-xs">
           {#if !previousFields.length}
-            <Switch disabled class="text-sm" checked={false} />
+            <Switch size="sm" disabled class="text-sm" checked={false} />
           {:else}
-            <Switch class="text-sm" bind:checked={formField.conditionEnabled} on:click={setForm} />
+            <Switch size="sm" class="text-sm" bind:checked={formField.conditionEnabled} on:click={setForm} />
           {/if}
-          <span>enable condition</span>
+          <span>Enable condition</span>
         </Label>
         <Label class="flex items-center gap-2 text-xs">
           <Switch
             class="text-sm"
-            bind:checked={formField.required}
+            size="sm"
+            checked={formField.getRequired(field)}
             disabled={field.required}
-            on:click={() => setForm()}
+            onCheckedChange={(checked) => {
+              formField.setRequired(field, checked)
+              form.option = formOption
+
+              setForm()
+            }}
           />
           <span>required</span>
         </Label>
@@ -106,7 +113,7 @@
             type="checkbox"
             class="hidden"
             bind:checked={formField.hidden}
-            disabled={formField.required}
+            disabled={formField.getRequired(field) && !formField.defaultValue}
             on:click={setForm}
           />
           {#if formField.hidden}
diff --git a/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte b/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
index e5622ac97..c2bad2d0f 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
@@ -121,7 +121,8 @@
       {#each filteredFields as formField (formField.fieldId)}
         {@const field = schema.get(formField.fieldId)}
         {#if field}
-          {@const disabled = formField.getRequired(field)}
+          {@const required = formField.getRequired(field)}
+          {@const hiddenDisabled = required && !formField.defaultValue}
           <button
             class={cn("flex w-full items-center justify-between text-pretty p-2 text-sm transition-all", {
               "bg-gray-50 shadow-inner": formField.fieldId === $selectedFieldId,
@@ -153,9 +154,9 @@
                 <Tooltip.Trigger>
                   <Switch
                     size="sm"
-                    bind:checked={formField.required}
-                    on:click={(e) => {
-                      e.stopPropagation()
+                    checked={formField.getRequired(field)}
+                    onCheckedChange={(checked) => {
+                      formField.setRequired(field, checked)
                       setForm()
                     }}
                     disabled={field.required}
@@ -165,8 +166,14 @@
                   <p>Required</p>
                 </Tooltip.Content>
               </Tooltip.Root>
-              <label class={cn(disabled ? "cursor-not-allowed" : "cursor-pointer")}>
-                <input type="checkbox" class="hidden" bind:checked={formField.hidden} {disabled} on:change={setForm} />
+              <label class={cn(hiddenDisabled ? "cursor-not-allowed" : "cursor-pointer")}>
+                <input
+                  type="checkbox"
+                  class="hidden"
+                  bind:checked={formField.hidden}
+                  disabled={hiddenDisabled}
+                  on:change={setForm}
+                />
                 {#if formField.hidden}
                   <EyeClosed class="h-4 w-4" />
                 {:else}
diff --git a/packages/table/src/modules/forms/form/form-field.vo.ts b/packages/table/src/modules/forms/form/form-field.vo.ts
index 4a3e193bf..0985c744f 100644
--- a/packages/table/src/modules/forms/form/form-field.vo.ts
+++ b/packages/table/src/modules/forms/form/form-field.vo.ts
@@ -38,6 +38,9 @@ export class FormFieldVO extends ValueObject<IFormField> {
 
   public set defaultValue(value: any) {
     this.props.defaultValue = value
+    if ((value === null || value === undefined) && this.required) {
+      this.hidden = false
+    }
   }
 
   public set hidden(value: boolean) {
@@ -59,6 +62,14 @@ export class FormFieldVO extends ValueObject<IFormField> {
     return this.props.required
   }
 
+  public setRequired(field: Field, value: boolean) {
+    if (field.required) {
+      this.props.required = true
+    } else {
+      this.props.required = value
+    }
+  }
+
   public get conditionEnabled() {
     return this.props.conditionEnabled ?? false
   }