diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte index 63d3c23f4e..7a73c20c97 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte +++ b/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} @@ -511,13 +516,14 @@ bind:show={$databaseRelatedRowSheetOptions.show} submit={{ text: 'Update', - disabled: editRelatedRow?.isDisabled(), + disabled: editRelatedRowDisabled, onClick: async () => await editRelatedRow?.update() }}> + tableId={$databaseRelatedRowSheetOptions.tableId} + bind:disabledState={editRelatedRowDisabled} /> editRowPermissions?.updatePermissions() }}> - + diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/edit.svelte index ab3879962d..bfa9e7b4c5 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/edit.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/edit.svelte @@ -19,6 +19,7 @@ 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; @@ -26,11 +27,13 @@ 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); @@ -38,6 +41,11 @@ let work = $state | null>(null); let columnFormWrapper = $state(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( diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editPermissions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editPermissions.svelte index eb3f0d6537..e9edae26e7 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editPermissions.svelte +++ b/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 { diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editRelated.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editRelated.svelte index 4854855080..5011493482 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editRelated.svelte +++ b/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([]); let relatedTable = $state(null); - let disabledState = $state(calculateAndCompareDisabledState()); - let workData = $state>>(new Map()); let columnFormWrapper = $state(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( 'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])' @@ -335,6 +337,10 @@ }); } }); + + $effect(() => { + disabledState = calculateAndCompareDisabledState(); + }); {#if loading}