#7004 Add nullable option to datetime

appwrite · Oct 27, 2023 · 5d9bbcf · 5d9bbcf
1 parent 9810ce8
commit 5d9bbcf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/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,6 +35,17 @@
         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;
     }
@@ -43,7 +56,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 +68,17 @@
             class="input-text"
             bind:value
             bind:this={element}
-            on:invalid={handleInvalid} />
+            on:invalid={handleInvalid}
+            style:--amount-of-buttons={nullable && !required ? 2.75 : 1}
+            style:--button-size={nullable && !required ? '2rem' : '1rem'} />
+        {#if nullable && !required}
+            <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/...project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/...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/...atabase-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte b/...atabase-[database]/collection-[collection]/document-[document]/attributes/datetime.svelte
@@ -15,4 +15,5 @@
     {optionalText}
     showLabel={!!label?.length}
     required={attribute.required}
+    nullable={!attribute.required}
     bind:value />