feat: create, delete attribute

2026-06-06 19:27:48 +00:00 · 2022-07-18 16:09:32 +02:00
parent e4432f6a7b
commit 498bd2e697
13 changed files with 206 additions and 77 deletions
@@ -1,32 +1,19 @@
 <script lang="ts">
    import { Modal } from '$lib/components';
-    // import { Pill } from '$lib/elements';
    import { option, options } from './attributes/store';
    import { Button, InputText, Form, FormList, InputSelect } 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 { Attributes } from './store';

    export let showCreate = false;

-    const dispatch = createEventDispatcher();
-
-    let name = '';
    let id: string = null;
-    let key: string = null;
    let selectedOption = '';
+    let submitted = false;

-    const create = async () => {
-        try {
-            console.log('test');
-            showCreate = false;
-            dispatch('created');
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
+    const created = async (event: CustomEvent<Attributes>) => {
+        collection.addAttribute(event.detail);
+        showCreate = false;
    };

    $: if (selectedOption) {
@@ -34,15 +21,15 @@
    }
 </script>

-<Form on:submit={create}>
+<Form on:submit={() => (submitted = true)}>
    <Modal size="big" bind:show={showCreate}>
        <svelte:fragment slot="header">Create Attribute</svelte:fragment>
        <FormList>
            <InputText
-                id="key"
-                label="Attribute key"
-                placeholder="Enter key"
-                bind:value={key}
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={id}
                autofocus
                required />

@@ -63,7 +50,9 @@
            {#if selectedOption}
                <svelte:component
                    this={$option.component}
-                    {key}
+                    {id}
+                    bind:submitted
+                    on:created={created}
                    on:close={() => ($option = null)} />
            {/if}
        </FormList>
@@ -15,7 +15,7 @@
            await sdkForProject.databases.deleteCollection($collection.$id);
            showDelete = false;
            await goto(
-                `${base}/console/${$page.params.project}/databases/${$page.params.database}`
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}`
            );
        } catch (error) {
            addNotification({
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { collection } from './store';
+    import type { Attributes } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let showDelete = false;
+    export let selectedAttribute: Attributes;
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.deleteAttribute($collection.$id, selectedAttribute.key);
+            collection.removeAttribute(selectedAttribute);
+            showDelete = false;
+            await goto(
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}/attributes`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
+
+        <p>
+            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>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { option, options } from './attributes/store';
+    import { Button, InputText, FormList } 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
+        );
+    }
+</script>
+
+{#if selectedAttribute}
+    <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} disabled={true} />
+            {/if}
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showOverview = false)}>Cancel</Button>
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+{/if}
@@ -10,25 +10,22 @@
    import { Button } from '$lib/elements/forms';
    import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
    import { collection } from './store';
-    // import type { Attributes } from './store';
+    import type { Attributes } from './store';
    import { Container } from '$lib/layout';
    import { Pill } from '$lib/elements';
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
    import Create from './_createAttribute.svelte';
-    import type { Models } from '@aw-labs/appwrite-console';
+    import Delete from './_deleteAttribute.svelte';
+    import Overview from './_overview.svelte';

    let offset = 0;
    const limit = 5;
    let showDropdown = [];
-    // let selectedAttribute: Attributes = null;
-    // let showDelete = false;
+    let selectedAttribute: Attributes = null;
    let showCreate = false;
-
-    const handleCreate = async (event: CustomEvent<Models.Collection>) => {
-        showCreate = false;
-        console.log(event);
-    };
+    let showDelete = false;
+    let showOverview = false;

    onMount(async () => {
        await collection.load($page.params.collection);
@@ -48,7 +45,7 @@
    {#if $collection?.attributes.length}
        <Table>
            <TableHeader>
-                <TableCellHead>Key</TableCellHead>
+                <TableCellHead>ID</TableCellHead>
                <TableCellHead>Type</TableCellHead>
                <TableCellHead>Default Value</TableCellHead>
                <TableCellHead width={30} />
@@ -66,6 +63,8 @@
                                    )}>
                                    {attribute.status}
                                </Pill>
+                            {:else if attribute.required}
+                                <Pill>Required</Pill>
                            {/if}
                        </TableCellText>
                        <TableCellText title="Type">{attribute.type}</TableCellText>
@@ -87,14 +86,20 @@
                                    <span class="icon-dots-horizontal" aria-hidden="true" />
                                </button>
                                <svelte:fragment slot="list">
-                                    <DropListItem icon="eye">Overview</DropListItem>
+                                    <DropListItem
+                                        icon="eye"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedAttribute = attribute;
+                                            showOverview = true;
+                                        }}>Overview</DropListItem>
                                    <DropListItem icon="plus">Create Index</DropListItem>
                                    <DropListItem
                                        icon="trash"
                                        on:click={(e) => {
                                            e.preventDefault();
-                                            // selectedAttribute = attribute;
-                                            // showDelete = true;
+                                            selectedAttribute = attribute;
+                                            showDelete = true;
                                        }}>Delete</DropListItem>
                                </svelte:fragment>
                            </DropList>
@@ -126,4 +131,8 @@
    {/if}
 </Container>

-<Create bind:showCreate on:created={handleCreate} />
+<Create bind:showCreate />
+{#if selectedAttribute}
+    <Delete bind:showDelete {selectedAttribute} />
+    <Overview bind:showOverview {selectedAttribute} />
+{/if}
@@ -1,28 +1,31 @@
 <script lang="ts">
    import { InputSwitch } from '$lib/elements/forms';
    import { addNotification } from '$lib/stores/notifications';
-
    import { sdkForProject } from '$lib/stores/sdk';
    import { createEventDispatcher } from 'svelte';
    import { collection } from '../store';

-    export const dispatch = createEventDispatcher();
+    export let submitted = false;
+    export let id: string;
+    export let disabled = false;
+
+    const dispatch = createEventDispatcher();

-    let key: string;
    let def: boolean,
        required = false,
        array = false;

    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createBooleanAttribute(
+            const attribute = await sdkForProject.databases.createBooleanAttribute(
                $collection.$id,
-                key,
+                id,
                required,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -30,8 +33,12 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

-<InputSwitch id="required" label="Required" required bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputSwitch id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} {disabled} />
+<InputSwitch id="array" label="Array" bind:value={array} {disabled} />
+<InputSwitch id="default" label="Default" bind:value={def} {disabled} />
@@ -5,22 +5,24 @@
    import { createEventDispatcher } from 'svelte';
    import { collection } from '../store';

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let def: string,
        required = false,
        array = false;

    const dispatch = createEventDispatcher();
    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createEmailAttribute(
+            const attribute = await sdkForProject.databases.createEmailAttribute(
                $collection.$id,
-                key,
+                id,
                required,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -28,6 +30,10 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputSwitch id="required" label="Required" bind:value={required} />
@@ -5,7 +5,8 @@
    import { createEventDispatcher } from 'svelte';
    import { collection } from '../store';

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let def = '',
        elements: string[],
        required = false,
@@ -13,16 +14,17 @@

    const dispatch = createEventDispatcher();
    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createEnumAttribute(
+            const attribute = await sdkForProject.databases.createEnumAttribute(
                $collection.$id,
-                key,
+                id,
                elements,
                required,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -36,6 +38,10 @@
            value: e,
            label: e
        })) ?? [];
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
@@ -7,7 +7,8 @@

    const dispatch = createEventDispatcher();

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let min: number,
        max: number,
        def: number,
@@ -15,17 +16,18 @@
        array = false;

    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createFloatAttribute(
+            const attribute = await sdkForProject.databases.createFloatAttribute(
                $collection.$id,
-                key,
+                id,
                required,
                min,
                max,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -33,6 +35,10 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputNumber id="min" label="Min" bind:value={min} />
@@ -7,7 +7,8 @@

    const dispatch = createEventDispatcher();

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let min: number,
        max: number,
        def: number,
@@ -15,17 +16,18 @@
        array = false;

    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createIntegerAttribute(
+            const attribute = await sdkForProject.databases.createIntegerAttribute(
                $collection.$id,
-                key,
+                id,
                required,
                min,
                max,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -33,6 +35,10 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputNumber id="min" label="Min" bind:value={min} />
@@ -5,22 +5,24 @@
    import { createEventDispatcher } from 'svelte';
    import { collection } from '../store';

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let def: string,
        required = false,
        array = false;

    const dispatch = createEventDispatcher();
    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createIpAttribute(
+            const attribute = await sdkForProject.databases.createIpAttribute(
                $collection.$id,
-                key,
+                id,
                required,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -28,6 +30,10 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputSwitch id="required" label="Required" bind:value={required} />
@@ -5,7 +5,8 @@
    import { createEventDispatcher } from 'svelte';
    import { collection } from '../store';

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let def: string,
        size = 255,
        required = false,
@@ -13,16 +14,17 @@

    const dispatch = createEventDispatcher();
    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createStringAttribute(
+            const attribute = await sdkForProject.databases.createStringAttribute(
                $collection.$id,
-                key,
+                id,
                size,
                required,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -30,6 +32,10 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputNumber id="size" label="Size" bind:value={size} required />
@@ -5,22 +5,24 @@
    import { createEventDispatcher } from 'svelte';
    import { collection } from '../store';

-    export let key: string;
+    export let id: string;
+    export let submitted = false;
    let def: string,
        required = false,
        array = false;

    const dispatch = createEventDispatcher();
    const submit = async () => {
+        submitted = false;
        try {
-            await sdkForProject.databases.createUrlAttribute(
+            const attribute = await sdkForProject.databases.createUrlAttribute(
                $collection.$id,
-                key,
+                id,
                required,
                def ? def : undefined,
                array
            );
-            dispatch('close');
+            dispatch('created', attribute);
        } catch (error) {
            addNotification({
                type: 'error',
@@ -28,6 +30,10 @@
            });
        }
    };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>

 <InputSwitch id="required" label="Required" bind:value={required} />