fix: table-state-management add isSaving state to TableStateValues and update UI components to disable interactions during save operations

Author: kalinichenko88

src/codeblocks/TableWidget.ts

@@ -32,6 +32,7 @@ export class TableWidget extends WidgetType {
     const tableStateStore = writable<TableStateValues>({
       selectedRowId: null,
       isEditing: false,
+      isSaving: false,
     });
 
     return [tableStore, tableStateStore];

src/codeblocks/models/TableStateStore.ts

@@ -3,6 +3,7 @@ import type { Writable } from 'svelte/store';
 export type TableStateValues = {
   selectedRowId: string | null;
   isEditing: boolean;
+  isSaving: boolean;
 };
 
 export type TableStateStore = Writable<TableStateValues>;

src/codeblocks/models/UiState.ts

@@ -1,4 +1,5 @@
 export type UiState = {
   selectedRowId: string | null;
   isEditing: boolean;
+  isSaving: boolean;
 };

src/codeblocks/ui/componets/Table/AddRow/AddRow.svelte

@@ -4,13 +4,14 @@
   type Props = {
     text: string;
     onClick: () => void;
+    disabled?: boolean;
   };
 
-  const { text, onClick }: Props = $props();
+  const { text, onClick, disabled = false }: Props = $props();
 </script>
 
-<tr class="add-row">
-  <td colspan="4" onclick={onClick}>
+<tr class="add-row" class:disabled={disabled}>
+  <td colspan="4" onclick={() => (disabled ? undefined : onClick())}>
     <div class="button">
       <Icon name="circle-plus" />
       <span>{text}</span>
@@ -27,6 +28,14 @@
     background-color: var(--table-header-background-hover);
   }
 
+  .add-row.disabled,
+  .add-row.disabled:hover {
+    pointer-events: none;
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: inherit;
+  }
+
   .button {
     display: flex;
     align-items: center;

src/codeblocks/ui/componets/Table/CategoryRow/CategoryRow.svelte

@@ -2,9 +2,9 @@
   import { Menu } from 'obsidian';
   import { getContext } from 'svelte';
 
-  import type { CategoryId } from '../../../../models';
+  import type { CategoryId, TableStateStore } from '../../../../models';
   import type { StoreActions } from '../actions';
-  import { STORE_ACTIONS_CONTEXT_KEY } from '../constants';
+  import { STORE_ACTIONS_CONTEXT_KEY, STORE_STATE_CONTEXT_KEY } from '../constants';
 
   import Editable from '../Editable/Editable.svelte';
 
@@ -17,6 +17,7 @@
   const { categoryId, categoryName, isDeletingEnabled }: Props = $props();
   let name = $state(categoryName);
 
+  const tableState = getContext<TableStateStore>(STORE_STATE_CONTEXT_KEY);
   const { newCategory, deleteCategory, selectRow, updateCategory, toggleEditing } =
     getContext<StoreActions>(STORE_ACTIONS_CONTEXT_KEY);
 
@@ -55,7 +56,12 @@
 
 <tr class="category" oncontextmenu={handleOnMenu}>
   <td colspan={4} class="cell">
-    <Editable value={name} onChange={handleOnChange} onEditingChange={toggleEditing} />
+    <Editable
+      value={name}
+      onChange={handleOnChange}
+      onEditingChange={toggleEditing}
+      disabled={$tableState.isSaving}
+    />
   </td>
 </tr>
 

src/codeblocks/ui/componets/Table/Editable/Editable.svelte

@@ -5,9 +5,10 @@
     value: string | number;
     onChange: (value: string | number) => void;
     onEditingChange: (isEditing: boolean) => void;
+    disabled?: boolean;
   };
 
-  let { value, onChange, onEditingChange }: Props = $props();
+  let { value, onChange, onEditingChange, disabled = false }: Props = $props();
 
   const valueType = $derived(typeof value === 'number' ? 'number' : 'text');
   const valueDisplay = $derived(
@@ -19,11 +20,13 @@
   let inputElement: HTMLInputElement | null = $state(null);
 
   const handleOnClick = (): void => {
+    if (disabled) return;
     isEditing = true;
     onEditingChange(true);
   };
 
   const handleOnKeyDown = (event: KeyboardEvent): void => {
+    if (disabled) return;
     if (event.key === 'Enter') {
       isEditing = true;
       onEditingChange(true);
@@ -71,6 +74,7 @@
       type={valueType}
       min={valueType === 'number' ? '0' : undefined}
       step={valueType === 'number' ? '0.10' : undefined}
+      disabled={disabled}
       onblur={handleOnLeave}
       onwheel={handleOnWheel}
       onkeydown={handleOnInputKeyDown}
@@ -81,6 +85,7 @@
     class="text"
     class:end={valueType === 'number'}
     role="button"
+    aria-disabled={disabled}
     onclick={handleOnClick}
     onkeydown={handleOnKeyDown}
   >
@@ -127,9 +132,15 @@
     display: flex;
     align-items: center;
     height: var(--input-height);
+    cursor: text;
   }
 
   .end {
     justify-content: end;
   }
+
+  .text[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
 </style>

src/codeblocks/ui/componets/Table/Row/Row.svelte

@@ -65,10 +65,12 @@
   };
 
   export const handleOnRowClick = (): void => {
+    if ($tableState.isSaving) return;
     selectRow(null);
   };
 
   export const handleOnCheckboxClick = (): void => {
+    if ($tableState.isSaving) return;
     selectRow(null);
     checked = !checked;
   };
@@ -93,6 +95,7 @@
         name="checkbox"
         id={`checkbox-${row.id}`}
         checked={row.checked}
+        disabled={$tableState.isSaving}
         onchange={(value: Event) => {
           checked = (value.target as HTMLInputElement).checked;
         }}
@@ -105,6 +108,7 @@
       value={row.name}
       onChange={(value) => (name = String(value))}
       onEditingChange={toggleEditing}
+      disabled={$tableState.isSaving}
     />
   </td>
 
@@ -113,6 +117,7 @@
       value={row.amount}
       onChange={(value) => (amount = Number(value))}
       onEditingChange={toggleEditing}
+      disabled={$tableState.isSaving}
     />
   </td>
 
@@ -121,6 +126,7 @@
       value={row.comment}
       onChange={(value) => (comment = String(value))}
       onEditingChange={toggleEditing}
+      disabled={$tableState.isSaving}
     />
   </td>
 </tr>

src/codeblocks/ui/componets/Table/Table.svelte

@@ -30,8 +30,15 @@
 
   const commitTableChange = debounce(
     (categories: TableCategories, rows: TableRows) => {
-      if (!$tableStateStore.isEditing) {
+      if ($tableStateStore.isEditing) return;
+
+      // Block interactions while saving
+      tableStateStore.update((s) => ({ ...s, isSaving: true }));
+      try {
         onTableChange(categories, rows);
+      } finally {
+        // Release saving lock on next tick to allow CM dispatch to finish
+        setTimeout(() => tableStateStore.update((s) => ({ ...s, isSaving: false })), 0);
       }
     },
     300,
@@ -76,15 +83,15 @@
           <Row {row} />
         {/each}
 
-        <AddRow text="New Row" onClick={() => newRow(categoryId)} />
+        <AddRow text="New Row" onClick={() => newRow(categoryId)} disabled={$tableStateStore.isSaving} />
 
         {#if $tableStore.categories.size > 1}
           <CategoryFooter {categoryId} />
         {/if}
       {/each}
     </tbody>
 
-    <AddRow text="New Category" onClick={newCategory} />
+    <AddRow text="New Category" onClick={newCategory} disabled={$tableStateStore.isSaving} />
 
     <Footer />
   </table>