Merge pull request #2962 from appwrite/fix/edit-related-request-loop

fix(console): stop related row request loop and correct load order

Author: HarshMN2345

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -529,11 +529,13 @@
         disabled: editRelatedRowDisabled,
         onClick: async () => await editRelatedRow?.update()
     }}>
-    <EditRelatedRow
-        bind:this={editRelatedRow}
-        rows={$databaseRelatedRowSheetOptions.rows}
-        tableId={$databaseRelatedRowSheetOptions.tableId}
-        bind:disabledState={editRelatedRowDisabled} />
+    {#if $databaseRelatedRowSheetOptions.show && $databaseRelatedRowSheetOptions.tableId && $databaseRelatedRowSheetOptions.rows != null}
+        <EditRelatedRow
+            bind:this={editRelatedRow}
+            rows={$databaseRelatedRowSheetOptions.rows}
+            tableId={$databaseRelatedRowSheetOptions.tableId}
+            bind:disabledState={editRelatedRowDisabled} />
+    {/if}
 </SideSheet>
 
 <SideSheet

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editRelated.svelte

@@ -9,17 +9,12 @@
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
     import { type Columns, PROHIBITED_ROW_KEYS } from '../store';
-    import ColumnItem from './columns/columnItem.svelte';
+    import RelatedRowColumns from './relatedRowColumns.svelte';
     import { buildWildcardColumnsQuery, isRelationship, isRelationshipToMany } from './store';
     import { Accordion, Layout, Skeleton } from '@appwrite.io/pink-svelte';
     import { deepClone } from '$lib/helpers/object';
     import { preferences } from '$lib/stores/preferences';
-    import {
-        type Entity,
-        type Field,
-        getTerminologies,
-        toRelationalField
-    } from '$database/(entity)';
+    import { type Entity, type Field, getTerminologies } from '$database/(entity)';
     import { onMount } from 'svelte';
 
     const databaseId = page.params.database;
@@ -63,6 +58,12 @@
 
         try {
             if (isSingleStore()) {
+                // Load schema first so relationship wildcard selects are correct.
+                relatedTable = await databaseSdk.getEntity({
+                    databaseId,
+                    entityId: tableId
+                });
+
                 const fetchedRow = await sdk
                     .forProject(page.params.region, page.params.project)
                     .tablesDB.getRow({
@@ -72,12 +73,6 @@
                         queries: buildWildcardColumnsQuery(relatedTable)
                     });
 
-                // cannot use page.data.entities!
-                relatedTable = await databaseSdk.getEntity({
-                    databaseId,
-                    entityId: tableId
-                });
-
                 fetchedRows = [fetchedRow];
             } else {
                 let fetchedTables = [];
@@ -314,11 +309,6 @@
         firstInput?.focus({ preventScroll: true });
     }
 
-    function getStore(id: string) {
-        const rowInstance = workData.get(id);
-        return get(rowInstance);
-    }
-
     function handleFormUpdate(rowId: string) {
         return (updatedFormValues: object) => {
             const workStore = workData.get(rowId);
@@ -343,14 +333,6 @@
         return `${values.join(' | ')} (...${row.$id.slice(-5)})`;
     }
 
-    $effect(() => {
-        if (rows && tableId) {
-            loadRelatedRow().then(() => {
-                focusFirstInput();
-            });
-        }
-    });
-
     $effect(() => {
         disabledState = calculateAndCompareDisabledState();
     });
@@ -375,40 +357,27 @@
 
     <div bind:this={columnFormWrapper}>
         {#if fetchedRows.length === 1}
-            {@const workStore = getStore(fetchedRows[0].$id)}
+            {@const workStore = workData.get(fetchedRows[0].$id)}
             {#if workStore}
-                <Layout.Stack direction="column" gap="l">
-                    {#each columnsToRender as column}
-                        {@const label = column.key}
-                        <ColumnItem
-                            {label}
-                            editing
-                            formValues={workStore}
-                            column={toRelationalField(column)}
-                            onUpdateFormValues={handleFormUpdate(fetchedRows[0].$id)} />
-                    {/each}
-                </Layout.Stack>
+                <RelatedRowColumns
+                    {workStore}
+                    {columnsToRender}
+                    onUpdateFormValues={handleFormUpdate(fetchedRows[0].$id)} />
             {/if}
         {:else}
             <Layout.Stack direction="column" gap="m" class="column-item-stack">
                 <Layout.Stack direction="column" gap="xs" class="column-item-stack">
                     {#each fetchedRows as row, index (row.$id)}
-                        {@const workStore = getStore(row.$id)}
+                        {@const workStore = workData.get(row.$id)}
                         <Accordion
                             title={getAccordionTitle(row)}
                             hideDivider={index >= fetchedRows.length - 1}>
                             {#if workStore}
-                                <Layout.Stack direction="column" gap="m">
-                                    {#each columnsToRender as column}
-                                        {@const label = column.key}
-                                        <ColumnItem
-                                            {label}
-                                            editing
-                                            formValues={workStore}
-                                            column={toRelationalField(column)}
-                                            onUpdateFormValues={handleFormUpdate(row.$id)} />
-                                    {/each}
-                                </Layout.Stack>
+                                <RelatedRowColumns
+                                    {workStore}
+                                    {columnsToRender}
+                                    gap="m"
+                                    onUpdateFormValues={handleFormUpdate(row.$id)} />
                             {/if}
                         </Accordion>
                     {/each}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/relatedRowColumns.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import ColumnItem from './columns/columnItem.svelte';
+    import { toRelationalField, type Field } from '$database/(entity)';
+    import type { Writable } from 'svelte/store';
+    import type { Models } from '@appwrite.io/console';
+
+    let {
+        workStore,
+        columnsToRender,
+        onUpdateFormValues,
+        gap = 'l'
+    }: {
+        workStore: Writable<Models.Row>;
+        columnsToRender: Field[];
+        onUpdateFormValues: (formValues: object) => void;
+        gap?: 'l' | 'm';
+    } = $props();
+</script>
+
+<Layout.Stack direction="column" {gap}>
+    {#each columnsToRender as column}
+        {@const label = column.key}
+        <ColumnItem
+            {label}
+            editing
+            formValues={$workStore}
+            column={toRelationalField(column)}
+            {onUpdateFormValues} />
+    {/each}
+</Layout.Stack>