fix: database attributes

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

@@ -43,8 +43,9 @@
                 <span
                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                     aria-hidden="true" />
-                <span class="text u-line-height-1-5"
-                    >Allowed characters: alphanumeric, hyphen, non-leading underscore, period</span>
+                <span class="text u-line-height-1-5">
+                    Allowed characters: alphanumeric, hyphen, non-leading underscore, period
+                </span>
             </div>
         </div>
 

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

@@ -37,9 +37,8 @@
 
 <Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
     <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
-
     <p>
-        Are you sure you want to delete <b>'{selectedAttribute.key}' from {$collection.name}</b>?
+        Are you sure you want to delete <b>'{selectedAttribute?.key}' from {$collection?.name}</b>?
     </p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>

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

@@ -1,31 +1,55 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { option, options } from './store';
-    import { InputText, FormList } from '$lib/elements/forms';
+    import { InputText, FormList, InputChoice, InputTags } from '$lib/elements/forms';
     import type { Attributes } from '../store';
 
     export let showOverview = false;
-    export let selectedAttribute: Attributes;
-
-    $: if (selectedAttribute) {
-        $option = options.find(
-            (option) => option.name.toLocaleLowerCase() === selectedAttribute.type
-        );
-    }
+    export let selectedAttribute: Attributes & {
+        min: string;
+        max: string;
+        format: string;
+        default: string;
+        value: string;
+        elements: string[];
+    };
 </script>
 
 <Modal size="big" bind:show={showOverview}>
     <svelte:fragment slot="header">Overview</svelte:fragment>
     <FormList>
-        <InputText
-            id="ID"
-            label="Attribute ID"
-            placeholder="Enter ID"
-            bind:value={selectedAttribute.key}
-            disabled />
-
         {#if selectedAttribute}
-            <svelte:component this={$option.component} overview={true} {selectedAttribute} />
+            <InputText
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={selectedAttribute.key}
+                disabled />
+            <InputText id="type" label="Type" value={selectedAttribute.type ?? ''} readonly />
+            {#if selectedAttribute.format}
+                <InputText id="format" label="Format" value={selectedAttribute.format} readonly />
+            {/if}
+            {#if selectedAttribute.min}
+                <InputText id="min" label="Min" value={selectedAttribute.min ?? ''} readonly />
+            {/if}
+            {#if selectedAttribute.max}
+                <InputText id="max" label="Max" value={selectedAttribute.max ?? ''} readonly />
+            {/if}
+            {#if selectedAttribute.elements}
+                <InputTags
+                    id="elements"
+                    label="Elements"
+                    tags={selectedAttribute.elements}
+                    readonly />
+            {/if}
+            <InputText
+                id="default"
+                label="Default value"
+                value={selectedAttribute.default}
+                readonly />
+            <InputChoice id="required" label="Required" value={selectedAttribute.required} disabled>
+                Indicate whether this is a required attribute</InputChoice>
+            <InputChoice id="array" label="Array" value={selectedAttribute.array} disabled>
+                Indicate whether this attribute should act as an array</InputChoice>
         {/if}
     </FormList>
 </Modal>

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

@@ -12,41 +12,55 @@ import Url from './url.svelte';
 export type Option = {
     name: string;
     component: typeof SvelteComponent;
+    type: 'string' | 'integer' | 'double' | 'boolean';
+    format?: 'email' | 'ip' | 'url' | 'enum';
 };
 
 export const options: Option[] = [
     {
         name: 'String',
-        component: String
+        component: String,
+        type: 'string'
     },
     {
         name: 'Integer',
-        component: Integer
+        component: Integer,
+        type: 'integer'
     },
     {
         name: 'Float',
-        component: Float
+        component: Float,
+        type: 'double'
     },
     {
         name: 'Boolean',
-        component: Boolean
+        component: Boolean,
+        type: 'boolean'
     },
     {
         name: 'Email',
-        component: Email
+        component: Email,
+        type: 'string',
+        format: 'email'
     },
     {
         name: 'IP',
-        component: Ip
+        component: Ip,
+        type: 'string',
+        format: 'ip'
     },
     {
         name: 'URL',
-        component: Url
+        component: Url,
+        type: 'string',
+        format: 'url'
     },
     {
         name: 'Enum',
-        component: Enum
+        component: Enum,
+        type: 'string',
+        format: 'enum'
     }
 ];
 
-export const option = writable<Option>({ name: null, component: null });
+export const option = writable<Option>();