diff --git a/packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte index edf4c23b2f..368d0a3f9c 100644 --- a/packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte +++ b/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() } diff --git a/packages/frontend-core/src/components/sheet/stores/columns.js b/packages/frontend-core/src/components/sheet/stores/columns.js index b43be2b126..7c0d800dfc 100644 --- a/packages/frontend-core/src/components/sheet/stores/columns.js +++ b/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 - const updateColumnWidth = async (columnName, width) => { - const $table = get(table) - 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 => { + // Persists column changes by saving metadata against table schema + const saveChanges = async () => { + const $columns = get(columns) 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 - const updateTable = async newTable => { + // Copy over metadata + 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, - updateColumnVisibility, - updateColumnOrders, + saveChanges, }, }, } diff --git a/packages/frontend-core/src/components/sheet/stores/reorder.js b/packages/frontend-core/src/components/sheet/stores/reorder.js index 88c4bea61b..652ecf2152 100644 --- a/packages/frontend-core/src/components/sheet/stores/reorder.js +++ b/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() - } - - // Saves order changes as part of table metadata - const saveOrderChanges = async () => { - const newOrder = get(columns).map(column => column.name) - await columns.actions.updateColumnOrders(newOrder) + await columns.actions.saveChanges() } return { diff --git a/packages/frontend-core/src/components/sheet/stores/resize.js b/packages/frontend-core/src/components/sheet/stores/resize.js index af46fa6628..a98e6058b0 100644 --- a/packages/frontend-core/src/components/sheet/stores/resize.js +++ b/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 {