remove unused code, document relationship creation, update pink

2026-06-06 19:27:48 +00:00 · 2023-03-13 15:06:39 +01:00
parent d9334116aa
commit 446c9c1963
15 changed files with 112 additions and 195 deletions
@@ -9,7 +9,7 @@
            "version": "0.0.1",
            "dependencies": {
                "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/pink": "^0.0.6-rc.2",
+                "@appwrite.io/pink": "^0.0.6-rc.3",
                "@aw-labs/appwrite-console": "^13.1.0",
                "@popperjs/core": "^2.11.6",
                "@sentry/svelte": "^7.36.0",
@@ -147,9 +147,9 @@
            "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
        },
        "node_modules/@appwrite.io/pink": {
-            "version": "0.0.6-rc.2",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.2.tgz",
-            "integrity": "sha512-PR2TVhLgRwXfdrB+0w9pZv7X2n6WOawArSJXq8jsRF58EzWcl4nf8XkjTsJ9BSU+in9fkmhxNIBywM707jqUcg==",
+            "version": "0.0.6-rc.3",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.3.tgz",
+            "integrity": "sha512-oeRwchmRdHjspYJFipc6k/oWOOdaD7TKFwJ1weZMJMF2/GmQ44zCYo2qJhN2tPRb73Wje2dTvnkV6MH/Rxg7vw==",
            "dependencies": {
                "@appwrite.io/pink-icons": "*",
                "normalize.css": "^8.0.1",
@@ -20,7 +20,7 @@
    },
    "dependencies": {
        "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/pink": "^0.0.6-rc.2",
+        "@appwrite.io/pink": "^0.0.6-rc.3",
        "@aw-labs/appwrite-console": "^13.1.0",
        "@popperjs/core": "^2.11.6",
        "@sentry/svelte": "^7.36.0",
@@ -77,7 +77,7 @@
    class="drop-tooltip"
    class:u-width-full-line={fullWidth}
    bind:this={tooltip}
-    style="z-index: 10">
+    style:z-index="10">
    <div class="drop-arrow" class:u-hide={!show || (show && noArrow)} bind:this={arrow} />
    {#if show}
        <slot name="list" />
@@ -5,7 +5,6 @@

    export let show = false;
    export let size: 'small' | 'big' = null;
-    // export let WASD = false;
    export let icon: string = null;
    export let state: 'success' | 'warning' | 'error' | 'info' = null;
    export let error: string = null;
@@ -24,7 +24,7 @@
        await goto(`${base}/console/project-${project}/databases/database-${event.detail.$id}`);
    }

-    $: prefs.subscribe((prefs) => {
+    prefs.subscribe((prefs) => {
        if (prefs?.preferredView) {
            invalidate(Dependencies.DATABASES);
        }
@@ -37,19 +37,13 @@
 <script lang="ts">
    import { InputChoice, InputSelect } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeBoolean = null;
+    export let editing = false;
    export let data: Partial<Models.AttributeBoolean> = {
        required: false,
        array: false,
        default: null
    };

-    $: if (selectedAttribute) {
-        data.required = selectedAttribute.required;
-        data.array = selectedAttribute.array;
-        data.default = selectedAttribute.default;
-    }
-
    $: if (data.required || data.array) {
        data.default = null;
    }
@@ -65,18 +59,10 @@
        { label: 'False', value: false }
    ]}
    bind:value={data.default}
-    disabled={!!selectedAttribute || data.array || data.required} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.array || data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -37,15 +37,9 @@
 <script lang="ts">
    import { InputChoice, InputDateTime } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeDatetime = null;
+    export let editing = false;
    export let data: Partial<Models.AttributeDatetime>;

-    $: if (selectedAttribute) {
-        data.required = selectedAttribute.required;
-        data.array = selectedAttribute.array;
-        data.default = selectedAttribute.default;
-    }
-
    $: if (data.required) {
        data.default = null;
    }
@@ -55,15 +49,10 @@
    id="default"
    label="Default value"
    bind:value={data.default}
-    disabled={data.required}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute}>
+    disabled={data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={!!selectedAttribute}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -38,37 +38,18 @@
 <script lang="ts">
    import { InputChoice, InputEmail } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeEmail = null;
+    export let editing = false;
    export let data: Partial<Models.AttributeEmail>;

-    $: if (selectedAttribute) {
-        data.required = selectedAttribute.required;
-        data.array = selectedAttribute.array;
-        data.default = selectedAttribute.default;
-    }
-
    $: if (data.required || data.array) {
        data.default = null;
    }
 </script>

-<InputEmail
-    id="default"
-    label="Default value"
-    bind:value={data.default}
-    disabled={data.required}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+<InputEmail id="default" label="Default value" bind:value={data.default} disabled={data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -39,7 +39,7 @@
 <script lang="ts">
    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeEnum;
+    export let editing = false;
    export let data: Partial<Models.AttributeEnum>;

    $: options =
@@ -48,15 +48,6 @@
            label: e
        })) ?? [];

-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            elements: data.elements,
-            default: data.default
-        } = selectedAttribute);
-    }
-
    $: if (data.required || data.array) {
        data.default = null;
    }
@@ -67,25 +58,16 @@
    label="Elements"
    bind:tags={data.elements}
    placeholder="Add elements here"
-    readonly={!!selectedAttribute}
    required />
 <InputSelect
    id="default"
    label="Default value"
    bind:options
    bind:value={data.default}
-    disabled={!!selectedAttribute || data.required} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -41,7 +41,7 @@
 <script lang="ts">
    import { InputNumber, InputChoice } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeFloat;
+    export let editing = false;
    export let data: Partial<Models.AttributeFloat> = {
        required: false,
        min: 0,
@@ -50,23 +50,13 @@
        array: false
    };

-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            min: data.min,
-            max: data.max
-        } = selectedAttribute);
-        data.default = selectedAttribute.default;
-    }
-
    $: if (data.required || data.array) {
        data.default = null;
    }
 </script>

-<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
-<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
+<InputNumber id="min" label="Min" bind:value={data.min} />
+<InputNumber id="max" label="Max" bind:value={data.max} />

 <InputNumber
    id="default"
@@ -75,19 +65,10 @@
    max={data.max}
    bind:value={data.default}
    disabled={data.required || data.array}
-    readonly={!!selectedAttribute}
    step="any" />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -41,7 +41,6 @@
 <script lang="ts">
    import { InputNumber, InputChoice } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeInteger;
    export let data: Partial<Models.AttributeInteger> = {
        required: false,
        min: 0,
@@ -49,23 +48,15 @@
        default: 0,
        array: false
    };
+    export let editing = false;

-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            min: data.min,
-            max: data.max,
-            default: data.default
-        } = selectedAttribute);
-    }
    $: if (data.required || data.array) {
        data.default = null;
    }
 </script>

-<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
-<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
+<InputNumber id="min" label="Min" bind:value={data.min} />
+<InputNumber id="max" label="Max" bind:value={data.max} />

 <InputNumber
    id="default"
@@ -73,19 +64,10 @@
    min={data.min}
    max={data.max}
    bind:value={data.default}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -36,12 +36,9 @@
 <script lang="ts">
    import { InputText, InputChoice } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeIp;
+    export let editing = false;
    export let data: Partial<Models.AttributeIp>;

-    $: if (selectedAttribute) {
-        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
-    }
    $: if (data.required || data.array) {
        data.default = null;
    }
@@ -51,19 +48,10 @@
    id="default"
    label="Default value"
    bind:value={data.default}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -38,7 +38,6 @@
 <script lang="ts">
    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeString;
    export let data: Partial<Models.AttributeString> = {
        required: false,
        size: 0,
@@ -47,43 +46,21 @@
    };
    export let editing = false;

-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            size: data.size,
-            default: data.default
-        } = selectedAttribute);
-    }
    $: if (data.required || data.array) {
        data.default = null;
    }
 </script>

-<InputNumber
-    id="size"
-    label="Size"
-    bind:value={data.size}
-    required
-    readonly={!!selectedAttribute || editing} />
+<InputNumber id="size" label="Size" bind:value={data.size} required readonly={editing} />
 <InputText
    id="default"
    label="Default value"
    bind:value={data.default}
    maxlength={data.size}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -37,12 +37,9 @@
 <script lang="ts">
    import { InputText, InputChoice } from '$lib/elements/forms';

-    export let selectedAttribute: Models.AttributeUrl;
    export let data: Partial<Models.AttributeUrl>;
+    export let editing = false;

-    $: if (selectedAttribute) {
-        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
-    }
    $: if (data.required || data.array) {
        data.default = null;
    }
@@ -52,19 +49,10 @@
    id="default"
    label="Default value"
    bind:value={data.default}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
    Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
    Indicate whether this attribute should act as an array
 </InputChoice>
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSelectSearch } from '$lib/elements/forms';
+    import { Button, InputSelectSearch } from '$lib/elements/forms';
    import type { Models } from '@aw-labs/appwrite-console';

    export let id: string;
@@ -7,6 +7,70 @@
    export let value: number;
    export let attribute: Models.AttributeInteger;
    export let optionalText: string | undefined = undefined;
+
+    let addRelationship = false;
 </script>

-<InputSelectSearch {id} {label} {optionalText} required={attribute.required} bind:value />
+{#if attribute.direction === 'one'}
+    <InputSelectSearch {id} {label} {optionalText} required={attribute.required} bind:value />
+{:else if attribute.direction === 'many'}
+    <div class="u-width-full-line u-max-width-600" />
+
+    <div class="u-flex u-cross-baseline u-gap-16">
+        <div class="u-flex u-cross-baseline u-gap-8">
+            <label class="label" for="relationship">{label}</label>
+            <span class="optional u-x-small">Relation</span>
+        </div>
+        <button
+            on:click|preventDefault={() => {
+                addRelationship = true;
+            }}
+            class="button is-text u-padding-inline-0 u-margin-inline-start-auto"
+            type="button">
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add item</span>
+        </button>
+
+        <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
+            {#if addRelationship === false}
+                <InputSelectSearch {id} {label} {optionalText} required bind:value />
+            {/if}
+            {#each attribute?.relationships as relationship}
+                <li class="u-flex u-gap-16">
+                    <output class="input-text is-read-only">
+                        <div class="u-flex u-cross-baseline u-gap-12">
+                            <span
+                                class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">
+                                {realationship.label}
+                            </span>
+                            <span class="u-flex-1 u-trim-1">
+                                {#each relationship.data as info}
+                                    {info}
+                                {/each}
+                            </span>
+                        </div>
+                    </output>
+                    <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                </li>
+            {/each}
+        </ul>
+
+        <div class="u-flex u-cross-baseline u-gap-16 u-margin-block-start-8">
+            <p class="u-small">Total results: {attribute?.relationships?.length}</p>
+
+            <nav class="pagination u-margin-inline-start-auto" style="--button-size: 2.5rem;">
+                <Button text disabled noMargin ariaLabel="prev page">
+                    <span class="icon-cheveron-left" aria-hidden="true" />
+                    <span class="text">Prev</span>
+                </Button>
+
+                <Button text disabled noMargin ariaLabel="next page">
+                    <span class="text">Next</span>
+                    <span class="icon-cheveron-right" aria-hidden="true" />
+                </Button>
+            </nav>
+        </div>
+    </div>
+{/if}