Merge pull request #2698 from appwrite/fix-disabled-states

Author: ItzNotABug

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

@@ -82,6 +82,10 @@
     let editRelatedRow: EditRelatedRow;
     let editRowPermissions: EditRowPermissions;
 
+    let editRowDisabled = true;
+    let editRelatedRowDisabled = true;
+    let editRowPermissionsDisabled = true;
+
     let createIndex: CreateIndex;
     let createColumn: CreateColumn;
     let selectedOption: Option['name'] = 'String';
@@ -436,7 +440,7 @@
     bind:show={$databaseRowSheetOptions.show}
     submit={{
         text: 'Update',
-        disabled: editRow?.isDisabled(),
+        disabled: editRowDisabled,
         onClick: async () => await editRow?.update()
     }}
     topAction={{
@@ -501,6 +505,7 @@
             bind:this={editRow}
             bind:row={$databaseRowSheetOptions.row}
             bind:rowId={$databaseRowSheetOptions.rowId}
+            bind:disabled={editRowDisabled}
             autoFocus={$databaseRowSheetOptions.autoFocus} />
     {/key}
 </SideSheet>
@@ -511,13 +516,14 @@
     bind:show={$databaseRelatedRowSheetOptions.show}
     submit={{
         text: 'Update',
-        disabled: editRelatedRow?.isDisabled(),
+        disabled: editRelatedRowDisabled,
         onClick: async () => await editRelatedRow?.update()
     }}>
     <EditRelatedRow
         bind:this={editRelatedRow}
         rows={$databaseRelatedRowSheetOptions.rows}
-        tableId={$databaseRelatedRowSheetOptions.tableId} />
+        tableId={$databaseRelatedRowSheetOptions.tableId}
+        bind:disabledState={editRelatedRowDisabled} />
 </SideSheet>
 
 <SideSheet
@@ -542,10 +548,13 @@
     bind:show={$rowPermissionSheet.show}
     submit={{
         text: 'Update',
-        disabled: editRowPermissions?.disableSubmit(),
+        disabled: editRowPermissionsDisabled,
         onClick: async () => editRowPermissions?.updatePermissions()
     }}>
-    <EditRowPermissions bind:this={editRowPermissions} bind:row={$rowPermissionSheet.row} />
+    <EditRowPermissions
+        bind:this={editRowPermissions}
+        bind:row={$rowPermissionSheet.row}
+        bind:arePermsDisabled={editRowPermissionsDisabled} />
 </SideSheet>
 
 <SideSheet title="Row activity" bind:show={$rowActivitySheet.show} closeOnBlur>

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

@@ -19,25 +19,33 @@
     import { Layout, Skeleton } from '@appwrite.io/pink-svelte';
     import { deepClone } from '$lib/helpers/object';
     import deepEqual from 'deep-equal';
+    import { onMount } from 'svelte';
 
     const tableId = page.params.table;
     const databaseId = page.params.database;
 
     let {
         row = $bindable(),
         rowId = $bindable(null),
-        autoFocus = true
+        autoFocus = true,
+        disabled = $bindable(true)
     }: {
         row?: Models.Row | null;
         rowId?: string | null;
         autoFocus?: boolean;
+        disabled?: boolean;
     } = $props();
 
     let loading = $state(false);
 
     let work = $state<Writable<Models.Row> | null>(null);
     let columnFormWrapper = $state<HTMLElement | null>(null);
 
+    onMount(() => {
+        /* silences the not read error warning */
+        disabled;
+    });
+
     function initWork() {
         const filteredKeys = Object.keys(row).filter((key) => {
             return !PROHIBITED_ROW_KEYS.includes(key);
@@ -157,11 +165,14 @@
         }
     }
 
-    export function isDisabled(): boolean {
-        if (!work || !row || !$table?.columns?.length) return true;
+    $effect(() => {
+        if (!work || !row || !$table?.columns?.length) {
+            disabled = true;
+            return;
+        }
 
-        return $table.columns.every((column) => compareColumns(column, $work, row));
-    }
+        disabled = $table.columns.every((column) => compareColumns(column, $work, row));
+    });
 
     function focusFirstInput() {
         const firstInput = columnFormWrapper?.querySelector<HTMLInputElement | HTMLTextAreaElement>(

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

@@ -10,20 +10,23 @@
     import { addNotification } from '$lib/stores/notifications';
     import { symmetricDifference } from '$lib/helpers/array';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { onMount } from 'svelte';
 
     let {
-        row = $bindable(null)
+        row = $bindable(null),
+        arePermsDisabled = $bindable(true)
     }: {
         row: Models.DefaultRow | Models.Row;
+        arePermsDisabled?: boolean;
     } = $props();
 
-    let permissions = $state(row.$permissions);
-    let arePermsDisabled = $state(true);
     let showPermissionAlert = $state(true);
+    let permissions = $state(row.$permissions);
 
-    export function disableSubmit() {
-        return arePermsDisabled;
-    }
+    onMount(() => {
+        /* silences the not read error warning */
+        arePermsDisabled;
+    });
 
     export async function updatePermissions() {
         try {

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

@@ -14,26 +14,32 @@
     import { Accordion, Layout, Skeleton } from '@appwrite.io/pink-svelte';
     import { deepClone } from '$lib/helpers/object';
     import { preferences } from '$lib/stores/preferences';
+    import { onMount } from 'svelte';
 
     const databaseId = page.params.database;
 
     let {
         rows,
-        tableId
+        tableId,
+        disabledState = $bindable(true)
     }: {
         rows: string | Models.Row[];
         tableId: string;
+        disabledState?: boolean;
     } = $props();
 
     let loading = $state(false);
     let fetchedRows = $state<Models.Row[]>([]);
     let relatedTable = $state<Models.Table | null>(null);
 
-    let disabledState = $state(calculateAndCompareDisabledState());
-
     let workData = $state<Map<string, Writable<Models.Row>>>(new Map());
     let columnFormWrapper = $state<HTMLElement | null>(null);
 
+    onMount(() => {
+        /* silences the not read error warning */
+        disabledState;
+    });
+
     function isSingleStore() {
         return typeof rows === 'string';
     }
@@ -287,10 +293,6 @@
         }
     }
 
-    export function isDisabled(): boolean {
-        return disabledState;
-    }
-
     function focusFirstInput() {
         const firstInput = columnFormWrapper?.querySelector<HTMLInputElement | HTMLTextAreaElement>(
             'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
@@ -335,6 +337,10 @@
             });
         }
     });
+
+    $effect(() => {
+        disabledState = calculateAndCompareDisabledState();
+    });
 </script>
 
 {#if loading}