bind sorting

viewer/src/routes/+page.svelte

@@ -305,6 +305,9 @@
     let overrideSelection = false;
     let searchValue = "";
 
+    let sortBy: string = "Date";
+    let sortOrder: 1 | -1 | 0 = -1;
+
     $: {
         if (searchValue !== "") {
             selection = { Name: searchValue };
@@ -317,8 +320,20 @@
         }
     }
 
-    onMount(async () => {
-        rows = (await fetchRows()) || [];
+    async function refreshRows() {
+        fetching = true;
+        try {
+            const fetchedRows = await fetchRows();
+            rows = fetchedRows || [];
+        } catch (error) {
+            console.error(error);
+        } finally {
+            fetching = false;
+        }
+    }
+
+    onMount(() => {
+        refreshRows();
     });
 
     async function newEntry() {
@@ -328,29 +343,11 @@
     }
 
     function handleRowUpdated(event: Event) {
-        const updatedRow = (event as CustomEvent).detail;
-        const rowIndex = rows.findIndex(
-            (row) =>
-                row.Code === updatedRow.Code || row.Paper === updatedRow.Paper || row.Project === updatedRow.Project
-        );
-        if (rowIndex !== -1) {
-            rows[rowIndex] = updatedRow;
-        } else {
-            console.error("Row not found");
-        }
+        refreshRows();
     }
 
     function handleRowDeleted(event: Event) {
-        const deletedRow = (event as CustomEvent).detail;
-        const rowIndex = rows.findIndex(
-            (row) =>
-                row.Code === deletedRow.Code || row.Paper === deletedRow.Paper || row.Project === deletedRow.Project
-        );
-        if (rowIndex !== -1) {
-            rows = [...rows.slice(0, rowIndex), ...rows.slice(rowIndex + 1)];
-        } else {
-            console.error("Row not found");
-        }
+        refreshRows();
     }
 
     let fetching = false;
@@ -383,7 +380,7 @@
     <!--spacer-->
     <div style="height: 1rem;" />
 
-    <SvelteTable {columns} {rows} sortBy="Date" sortOrder={-1} bind:filterSelections={selection} />
+    <SvelteTable {columns} {rows} bind:sortBy bind:sortOrder bind:filterSelections={selection} />
 {/if}
 
 <EditModal bind:isOpen={isModalOpen} on:rowUpdated={handleRowUpdated} on:rowDeleted={handleRowDeleted} />