update: errors handling on forms.

2026-06-06 19:27:48 +00:00 · 2025-08-09 17:39:55 +05:30
parent dbc0dabda5
commit f4a2b8fbb7
7 changed files with 46 additions and 51 deletions
@@ -19,6 +19,5 @@ function isFlagEnabled(name: string) {
 }

 export const flags = {
-    showSites: isFlagEnabled('sites'),
-    showIndexLengths: isFlagEnabled('index-lengths')
+    showSites: isFlagEnabled('sites')
 };
@@ -352,7 +352,9 @@
    bind:show={$showCreateIndexSheet.show}
    submit={{
        text: 'Create',
-        onClick: async () => await createIndex.create()
+        onClick: async () => {
+            await createIndex.create();
+        }
    }}>
    <CreateIndex
        bind:this={createIndex}
@@ -174,7 +174,8 @@
            bind:value={key}
            autofocus
            disabled={selectedOption === 'Relationship'}
-            required />
+            required
+            pattern="^[A-Za-z0-9][A-Za-z0-9._\-]*$" />

        <InputSelect
            id="type"
@@ -62,15 +62,13 @@
        isSubmitting = true;

        try {
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .grids.createRow(
-                    page.params.database,
-                    page.params.table,
-                    $createRow.id ?? ID.unique(),
-                    $createRow.row,
-                    $createRow.permissions
-                );
+            await sdk.forProject(page.params.region, page.params.project).grids.createRow({
+                databaseId: page.params.database,
+                tableId: page.params.table,
+                rowId: $createRow.id ?? ID.unique(),
+                data: $createRow.row,
+                permissions: $createRow.permissions
+            });

            showSheet = false;
            addNotification({
@@ -111,9 +109,9 @@
            }}>
            <Layout.Stack gap="xxl">
                <ColumnForm
-                    bind:formValues={$createRow.row}
                    columns={$createRow.columns}
-                    bind:customId={$createRow.id} />
+                    bind:customId={$createRow.id}
+                    bind:formValues={$createRow.row} />

                <Layout.Stack gap="xl">
                    <Typography.Text>
@@ -76,14 +76,6 @@
        }
    }

-    const showLengths = flags.showIndexLengths(page.data);
-
-    onMount(() => {
-        if (!showLengths) {
-            columns = columns.filter((col) => col.id !== 'lengths');
-        }
-    });
-
    onDestroy(() => ($showCreateAttributeSheet.show = false));

    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
@@ -135,10 +127,8 @@
                            >Columns</Spreadsheet.Header.Cell>
                        <!--                        <Spreadsheet.Header.Cell column="orders" {root}-->
                        <!--                            >Orders</Spreadsheet.Header.Cell>-->
-                        {#if showLengths}
-                            <Spreadsheet.Header.Cell column="lengths" {root}
-                                >Lengths</Spreadsheet.Header.Cell>
-                        {/if}
+                        <Spreadsheet.Header.Cell column="lengths" {root}
+                            >Lengths</Spreadsheet.Header.Cell>
                        <Spreadsheet.Header.Cell column="actions" {root} />
                    </svelte:fragment>

@@ -173,11 +163,9 @@
                            <!--                            <Spreadsheet.Cell column="orders" {root} isEditable={false}>-->
                            <!--                                {index.orders}-->
                            <!--                            </Spreadsheet.Cell>-->
-                            {#if showLengths}
-                                <Spreadsheet.Cell column="lengths" {root} isEditable={false}>
-                                    {index.lengths}
-                                </Spreadsheet.Cell>
-                            {/if}
+                            <Spreadsheet.Cell column="lengths" {root} isEditable={false}>
+                                {index.lengths}
+                            </Spreadsheet.Cell>
                            <Spreadsheet.Cell column="actions" {root}>
                                <Popover let:toggle padding="none" placement="bottom-end">
                                    <Button text icon ariaLabel="more options" on:click={toggle}>
@@ -13,7 +13,6 @@
    import { table, indexes } from '../store';
    import { Icon, Layout } from '@appwrite.io/pink-svelte';
    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
-    import { flags } from '$lib/flags';

    export let showCreateIndex = false;
    export let externalColumnKey: string = null;
@@ -24,7 +23,7 @@
    let types = [
        { value: IndexType.Key, label: 'Key' },
        { value: IndexType.Unique, label: 'Unique' },
-        { value: IndexType.Fulltext, label: 'FullText' }
+        { value: IndexType.Fulltext, label: 'Fulltext' }
    ];

    let selectedType = IndexType.Key;
@@ -38,8 +37,6 @@

    let columnList = [{ value: '', order: '', length: null }];

-    const showLengths = flags.showIndexLengths(page.data);
-
    function generateIndexKey() {
        let indexKeys = $indexes.map((index) => index.key);

@@ -68,6 +65,10 @@

    export async function create() {
        if (!(key && selectedType && !addColumnDisabled)) {
+            addNotification({
+                type: 'error',
+                message: 'Selected column key or type invalid'
+            });
            return;
        }

@@ -87,9 +88,11 @@
                invalidate(Dependencies.DATABASE)
            ]);

-            goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table-${$table.$id}/indexes`
-            );
+            if (!page.route.id.includes('/indexes')) {
+                await goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table-${$table.$id}/indexes`
+                );
+            }

            addNotification({
                message: 'Creating index',
@@ -114,7 +117,15 @@
    }
 </script>

-<InputText required id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
+<InputText
+    required
+    id="key"
+    label="Index Key"
+    pattern="^[A-Za-z0-9][A-Za-z0-9._\-]*$"
+    placeholder="Enter Key"
+    bind:value={key}
+    autofocus />
+
 <InputSelect required options={types} id="type" label="Index type" bind:value={selectedType} />

 <Layout.Stack gap="s">
@@ -144,7 +155,7 @@
                bind:value={column.order}
                placeholder="Select order" />

-            {#if selectedType === IndexType.Key && showLengths}
+            {#if selectedType === IndexType.Key}
                <InputNumber
                    id={`length-${index}`}
                    label={index === 0 ? 'Length' : undefined}
@@ -10,8 +10,6 @@
    }: {
        selectedIndex: Models.ColumnIndex;
    } = $props();
-
-    const showLengths = flags.showIndexLengths(page.data);
 </script>

 <InputText
@@ -44,14 +42,12 @@
                id={`value-${selectedIndex.orders[i]}`}
                value={selectedIndex.orders[i]}
                readonly />
-            {#if showLengths}
-                <InputText
-                    required
-                    label={i === 0 ? 'Length' : ''}
-                    id={`value-${selectedIndex.lengths[i]}`}
-                    value={selectedIndex.lengths[i]?.toString() ?? null}
-                    readonly />
-            {/if}
+            <InputText
+                required
+                label={i === 0 ? 'Length' : ''}
+                id={`value-${selectedIndex.lengths[i]}`}
+                value={selectedIndex.lengths[i]?.toString() ?? null}
+                readonly />
        </Layout.Stack>
    {/each}
 {/if}