feat: datetime attribute

src/lib/elements/forms/inputDateTime.svelte

@@ -21,7 +21,7 @@
         }
     });
 
-    const handleInvalid = (event: Event) => {
+    function handleInvalid(event: Event) {
         event.preventDefault();
 
         if (element.validity.valueMissing) {
@@ -30,7 +30,7 @@
         }
 
         error = element.validationMessage;
-    };
+    }
 
     $: if (value) {
         error = null;
@@ -45,6 +45,7 @@
             {disabled}
             {readonly}
             {required}
+            step=".001"
             autocomplete={autocomplete ? 'on' : 'off'}
             type="datetime-local"
             class="input-text"

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte

@@ -16,7 +16,7 @@
 
     const dispatch = createEventDispatcher();
 
-    let xdefault: boolean,
+    let xdefault: boolean | null,
         required = false,
         array = false;
 
@@ -28,7 +28,7 @@
                 $collection.$id,
                 key,
                 required,
-                xdefault ? xdefault : undefined,
+                xdefault ?? undefined,
                 array
             );
             dispatch('created', attribute);
@@ -49,7 +49,7 @@
         xdefault = selectedAttribute.default;
     }
 
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 
@@ -61,12 +61,13 @@
     label="Default value"
     placeholder="Select a value"
     options={[
+        { label: 'Select a value', value: null },
         { label: 'True', value: true },
         { label: 'False', value: false }
     ]}
     bind:value={xdefault}
-    disabled={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    disabled={overview || array || required} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttribute.svelte

@@ -4,7 +4,6 @@
     import { Button, InputText, FormList, InputSelect } from '$lib/elements/forms';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
 
     export let showCreate = false;
 
@@ -15,10 +14,6 @@
     const created = async () => {
         invalidate(Dependencies.COLLECTION);
         showCreate = false;
-        addNotification({
-            type: 'success',
-            message: `Attribute has been created`
-        });
     };
 
     $: if (selectedOption) {
@@ -72,6 +67,6 @@
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        <Button submit>Create</Button>
+        <Button submit disabled={!selectedOption}>Create</Button>
     </svelte:fragment>
 </Modal>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { InputChoice, InputDateTime } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
+
+    export let key: string;
+    export let submitted = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeDatetime;
+
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
+    let xdefault: string,
+        required = false,
+        array = false;
+
+    const submit = async () => {
+        submitted = false;
+        try {
+            const attribute = await sdkForProject.databases.createDatetimeAttribute(
+                databaseId,
+                $collection.$id,
+                key,
+                required,
+                xdefault ? xdefault : undefined,
+                array
+            );
+            dispatch('created', attribute);
+            addNotification({
+                type: 'success',
+                message: `${key} has been created`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+
+    $: if (submitted) {
+        submit();
+    }
+
+    $: if (overview) {
+        ({ required, array } = selectedAttribute);
+        xdefault = selectedAttribute.default;
+    }
+
+    $: if (required) {
+        xdefault = null;
+    }
+</script>
+
+<InputDateTime
+    id="default"
+    label="Default value"
+    bind:value={xdefault}
+    disabled={required}
+    readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import { InputText, InputChoice } from '$lib/elements/forms';
+    import { InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
     import { page } from '$app/stores';
+    import InputEmail from '$lib/elements/forms/inputEmail.svelte';
 
     export let key: string;
     export let submitted = false;
@@ -52,18 +53,18 @@
         xdefault = selectedAttribute.default;
     }
 
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
 
-<InputText
+<InputEmail
     id="default"
     label="Default value"
     bind:value={xdefault}
     disabled={required}
     readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte

@@ -58,7 +58,7 @@
         ({ required, array, elements } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
@@ -75,7 +75,7 @@
     bind:options
     bind:value={xdefault}
     disabled={overview || required} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte

@@ -56,7 +56,7 @@
         xdefault = selectedAttribute.default;
     }
 
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
@@ -67,11 +67,13 @@
 <InputNumber
     id="default"
     label="Default value"
+    {min}
+    {max}
     bind:value={xdefault}
-    disabled={required}
+    disabled={required || array}
     readonly={overview}
     step="any" />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte

@@ -55,7 +55,7 @@
         ({ required, array, min, max } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
@@ -66,10 +66,12 @@
 <InputNumber
     id="default"
     label="Default value"
+    {min}
+    {max}
     bind:value={xdefault}
-    disabled={required}
+    disabled={required || array}
     readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte

@@ -51,7 +51,7 @@
         ({ required, array } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
@@ -60,9 +60,9 @@
     id="default"
     label="Default value"
     bind:value={xdefault}
-    disabled={required}
+    disabled={required || array}
     readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts

@@ -8,11 +8,12 @@ import Integer from './integer.svelte';
 import Ip from './ip.svelte';
 import String from './string.svelte';
 import Url from './url.svelte';
+import Datetime from './datetime.svelte';
 
 export type Option = {
     name: string;
     component: typeof SvelteComponent;
-    type: 'string' | 'integer' | 'double' | 'boolean';
+    type: 'string' | 'integer' | 'double' | 'boolean' | 'datetime';
     format?: 'email' | 'ip' | 'url' | 'enum';
 };
 
@@ -37,6 +38,11 @@ export const options: Option[] = [
         component: Boolean,
         type: 'boolean'
     },
+    {
+        name: 'Datetime',
+        component: Datetime,
+        type: 'datetime'
+    },
     {
         name: 'Email',
         component: Email,

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte

@@ -53,7 +53,7 @@
         ({ required, array, size } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
@@ -63,9 +63,10 @@
     id="default"
     label="Default value"
     bind:value={xdefault}
-    disabled={required}
+    maxlength={size}
+    disabled={required || array}
     readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte

@@ -51,7 +51,7 @@
         ({ required, array } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
-    $: if (required) {
+    $: if (required || array) {
         xdefault = null;
     }
 </script>
@@ -60,9 +60,9 @@
     id="default"
     label="Default value"
     bind:value={xdefault}
-    disabled={required}
+    disabled={required || array}
     readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
     Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
     Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.ts

@@ -4,20 +4,37 @@ import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
 import { error } from '@sveltejs/kit';
+import type { Attributes } from '../store';
 
 export const load: LayoutLoad = async ({ params, parent, depends }) => {
-    await parent();
     depends(Dependencies.DOCUMENT);
+    const { collection } = await parent();
+    const document = await sdkForProject.databases.getDocument(
+        params.database,
+        params.collection,
+        params.document
+    );
 
+    /**
+     * Sanitize DateTime to remove UTC Timezone section.
+     */
+    collection.attributes.forEach((attribute) => {
+        const { type, key, array } = attribute as unknown as Attributes;
+        if (type === 'datetime') {
+            if (array) {
+                document[key] = document[key].map((n: string) => {
+                    return new Date(n).toISOString().slice(0, 23);
+                });
+            } else {
+                document[key] = new Date(document[key]).toISOString().slice(0, 23);
+            }
+        }
+    });
     try {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
-            document: await sdkForProject.databases.getDocument(
-                params.database,
-                params.collection,
-                params.document
-            )
+            document
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attribute.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
     import Boolean from './attributes/_boolean.svelte';
+    import Datetime from './attributes/_datetime.svelte';
     import Enum from './attributes/_enum.svelte';
     import Integer from './attributes/_integer.svelte';
     import String from './attributes/_string.svelte';
@@ -17,13 +18,15 @@
         | Models.AttributeInteger
         | Models.AttributeIp
         | Models.AttributeString
+        | Models.AttributeDatetime
         | Models.AttributeUrl;
 
     const attributesTypeMap = {
         string: String,
         integer: Integer,
         double: Integer,
-        boolean: Boolean
+        boolean: Boolean,
+        datetime: Datetime
     };
 
     const attributesFormatMap = {
@@ -35,7 +38,7 @@
 </script>
 
 {#if attribute.type in attributesTypeMap}
-    {#if 'format' in attribute}
+    {#if 'format' in attribute && attribute.format}
         <svelte:component
             this={attributesFormatMap[attribute.format]}
             {id}

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_datetime.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { InputDateTime } from '$lib/elements/forms';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export let id: string;
+    export let label: string;
+    export let value: string;
+    export let attribute: Models.AttributeDatetime;
+</script>
+
+<InputDateTime {id} {label} showLabel={!!label?.length} required={attribute.required} bind:value />

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte

@@ -8,10 +8,10 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { writable } from 'svelte/store';
-    import Attribute from './attribute.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
+    import Attribute from './attribute.svelte';
 
     let disableUpdate = true;
     let currentDoc: string;