From 9210dc84a56962ea57418450bb6c944af64f71b7 Mon Sep 17 00:00:00 2001
From: sahalsaad <caalshift@gmail.com>
Date: Sun, 29 Oct 2023 20:35:09 +0800
Subject: [PATCH 1/2] #7004 Add nullable option to datetime

---
 src/lib/elements/forms/inputDateTime.svelte   | 29 +++++++++++++++++--
 .../attributes/datetime.svelte                |  3 +-
 .../attributes/datetime.svelte                |  1 +
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index cd13a5f658..9a16376be4 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
+    import NullCheckbox from './nullCheckbox.svelte';
 
     export let label: string;
     export let showLabel = true;
@@ -8,6 +9,7 @@
     export let id: string;
     export let value = '';
     export let required = false;
+    export let nullable = false;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
@@ -33,9 +35,22 @@
         error = element.validationMessage;
     }
 
+    let prevValue = '';
+    function handleNullChange(e: CustomEvent<boolean>) {
+        const isNull = e.detail;
+        if (isNull) {
+            prevValue = value;
+            value = null;
+        } else {
+            value = prevValue;
+        }
+    }
+
     $: if (value) {
         error = null;
     }
+    
+    $: isNullable = nullable && !required;
 </script>
 
 <FormItem>
@@ -43,7 +58,7 @@
         {label}
     </Label>
 
-    <div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
+    <div class="input-text-wrapper">
         <input
             {id}
             {disabled}
@@ -55,7 +70,17 @@
             class="input-text"
             bind:value
             bind:this={element}
-            on:invalid={handleInvalid} />
+            on:invalid={handleInvalid}
+            style:--amount-of-buttons={isNullable ? 2.75 : 1}
+            style:--button-size={isNullable ? '2rem' : '1rem'} />
+        {#if isNullable}
+            <ul
+                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
+                <li class="buttons-list-item">
+                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
+                </li>
+            </ul>
+        {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
index b65ec28e12..6fc0798a68 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
@@ -69,7 +69,8 @@
     id="default"
     label="Default value"
     bind:value={data.default}
-    disabled={data.required || data.array} />
+    disabled={data.required || data.array}
+    nullable={!data.required && !data.array} />
 <InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
index f867768861..258241b6b9 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
@@ -15,4 +15,5 @@
     {optionalText}
     showLabel={!!label?.length}
     required={attribute.required}
+    nullable={!attribute.required}
     bind:value />

From 6419fad421391f7eb599c9a3c0d4e46e9538aac2 Mon Sep 17 00:00:00 2001
From: sahalsaad <caalshift@gmail.com>
Date: Sun, 29 Oct 2023 21:08:36 +0800
Subject: [PATCH 2/2] Remove extra white space.

---
 src/lib/elements/forms/inputDateTime.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index 9a16376be4..6548e2f5eb 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -49,7 +49,7 @@
     $: if (value) {
         error = null;
     }
-    
+
     $: isNullable = nullable && !required;
 </script>