#7004 Add nullable option to datetime

src/lib/elements/forms/inputDateTime.svelte

@@ -1,13 +1,15 @@
 <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;
     export let optionalText: string | undefined = undefined;
     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,17 +35,30 @@
         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>
     <Label {required} {optionalText} hide={!showLabel} for={id}>
         {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>

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>

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 />