Make column visibility persistent and refactor column updating

packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte

@@ -15,6 +15,7 @@
       state[index].visible = visible
       return state.slice()
     })
+    columns.actions.saveChanges()
   }
 
   const showAll = () => {
@@ -24,6 +25,7 @@
         visible: true,
       }))
     })
+    columns.actions.saveChanges()
   }
 
   const hideAll = () => {
@@ -33,6 +35,7 @@
         visible: false,
       }))
     })
+    columns.actions.saveChanges()
   }
 </script>
 

packages/frontend-core/src/components/sheet/stores/columns.js

@@ -13,7 +13,7 @@ export const createStores = () => {
     columns,
     $columns => {
       let offset = 0
-      return $columns.map((column, idx) => {
+      return $columns.map(column => {
         const enriched = {
           ...column,
           left: offset,
@@ -79,8 +79,8 @@ export const deriveStores = context => {
       fields
         .map(field => ({
           name: field,
-          width: schema[field].width || DefaultColumnWidth,
           schema: schema[field],
+          width: schema[field].width || DefaultColumnWidth,
           visible: schema[field].visible ?? true,
           order: schema[field].order,
         }))
@@ -127,58 +127,42 @@ export const deriveStores = context => {
     })
   })
 
-  // Updates a columns width
+  // Persists column changes by saving metadata against table schema
-  const updateColumnWidth = async (columnName, width) => {
+  const saveChanges = async () => {
-    const $table = get(table)
+    const $columns = get(columns)
-    await updateTable({
-      ...$table,
-      schema: {
-        ...$table.schema,
-        [columnName]: {
-          ...$table.schema[columnName],
-          width,
-        },
-      },
-    })
-  }
-
-  // Updates a columns visibility
-  const updateColumnVisibility = async (columnName, visible) => {
-    const $table = get(table)
-    await updateTable({
-      ...$table,
-      schema: {
-        ...$table.schema,
-        [columnName]: {
-          ...$table.schema[columnName],
-          visible,
-        },
-      },
-    })
-  }
-
-  // Updates the orders of columns
-  const updateColumnOrders = async newColumns => {
     const $table = get(table)
+    const $stickyColumn = get(stickyColumn)
     const newSchema = cloneDeep($table.schema)
+
+    // Build new updated table schema
     Object.keys(newSchema).forEach(column => {
-      const index = newColumns.indexOf(column)
+      // Respect order specified by columns
+      const index = $columns.findIndex(x => x.name === column)
       if (index !== -1) {
         newSchema[column].order = index
       } else {
         delete newSchema[column].order
       }
-    })
-    await updateTable({
-      ...$table,
-      schema: newSchema,
-    })
-  }
 
-  // Updates the table definition
+      // Copy over metadata
-  const updateTable = async newTable => {
+      if (column === $stickyColumn?.name) {
+        newSchema[column].visible = true
+        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
+      } else {
+        newSchema[column].visible = $columns[index]?.visible ?? true
+        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
+      }
+    })
+
+    // Update local state
+    const newTable = { ...$table, schema: newSchema }
     table.set(newTable)
+
+    // Broadcast event so that we can keep sync with external state
+    // (e.g. data section which maintains a list of table definitions)
     dispatch("updatetable", newTable)
+
+    // Update server
     await API.saveTable(newTable)
   }
 
@@ -186,9 +170,7 @@ export const deriveStores = context => {
     columns: {
       ...columns,
       actions: {
-        updateColumnWidth,
+        saveChanges,
-        updateColumnVisibility,
-        updateColumnOrders,
       },
     },
   }

packages/frontend-core/src/components/sheet/stores/reorder.js

@@ -112,7 +112,7 @@ export const deriveStores = context => {
     document.removeEventListener("mouseup", stopReordering)
 
     // Save column changes
-    await saveOrderChanges()
+    await columns.actions.saveChanges()
   }
 
   // Moves a column after another columns.
@@ -137,7 +137,7 @@ export const deriveStores = context => {
     const $visibleColumns = get(visibleColumns)
     const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
     moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
-    await saveOrderChanges()
+    await columns.actions.saveChanges()
   }
 
   // Moves a column one place right (as appears visually)
@@ -148,13 +148,7 @@ export const deriveStores = context => {
       return
     }
     moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
-    await saveOrderChanges()
+    await columns.actions.saveChanges()
-  }
-
-  // Saves order changes as part of table metadata
-  const saveOrderChanges = async () => {
-    const newOrder = get(columns).map(column => column.name)
-    await columns.actions.updateColumnOrders(newOrder)
   }
 
   return {

packages/frontend-core/src/components/sheet/stores/resize.js

@@ -93,13 +93,25 @@ export const deriveStores = context => {
 
     // Persist width if it changed
     if ($resize.width !== $resize.initialWidth) {
-      await columns.actions.updateColumnWidth($resize.column, $resize.width)
+      await columns.actions.saveChanges()
     }
   }
 
   // Resets a column size back to default
   const resetSize = async column => {
-    await columns.actions.updateColumnWidth(column.name, DefaultColumnWidth)
+    if (column.name === get(stickyColumn)?.name) {
+      stickyColumn.update(state => ({
+        ...state,
+        width: DefaultColumnWidth,
+      }))
+    } else {
+      columns.update(state => {
+        const columnIdx = state.findIndex(x => x.name === column.name)
+        state[columnIdx].width = DefaultColumnWidth
+        return [...state]
+      })
+    }
+    await columns.actions.saveChanges()
   }
 
   return {