diff --git a/packages/frontend-core/src/components/sheet/stores/columns.js b/packages/frontend-core/src/components/sheet/stores/columns.js index db912558eb..7f1b510329 100644 --- a/packages/frontend-core/src/components/sheet/stores/columns.js +++ b/packages/frontend-core/src/components/sheet/stores/columns.js @@ -48,6 +48,70 @@ export const createStores = () => { export const deriveStores = context => { const { table, columns, stickyColumn, API, dispatch } = context + // Updates the tables primary display column + const changePrimaryDisplay = async column => { + return await saveTable({ + ...get(table), + primaryDisplay: column, + }) + } + + // 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 => { + // 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 + } + + // 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 + } + }) + + await saveTable({ ...$table, schema: newSchema }) + } + + const saveTable = async newTable => { + // Update local state + 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) + } + + return { + columns: { + ...columns, + actions: { + saveChanges, + changePrimaryDisplay, + }, + }, + } +} + +export const initialise = context => { + const { table, columns, stickyColumn } = context + // Merge new schema fields with existing schema in order to preserve widths table.subscribe($table => { const schema = $table?.schema @@ -125,64 +189,4 @@ export const deriveStores = context => { idx: "sticky", }) }) - - // Updates the tables primary display column - const changePrimaryDisplay = async column => { - return await saveTable({ - ...get(table), - primaryDisplay: column, - }) - } - - // 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 => { - // 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 - } - - // 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 - } - }) - - await saveTable({ ...$table, schema: newSchema }) - } - - const saveTable = async newTable => { - // Update local state - 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) - } - - return { - columns: { - ...columns, - actions: { - saveChanges, - changePrimaryDisplay, - }, - }, - } } diff --git a/packages/frontend-core/src/components/sheet/stores/pagination.js b/packages/frontend-core/src/components/sheet/stores/pagination.js index ad50f1fe8d..c6a856e229 100644 --- a/packages/frontend-core/src/components/sheet/stores/pagination.js +++ b/packages/frontend-core/src/components/sheet/stores/pagination.js @@ -1,6 +1,6 @@ import { derived } from "svelte/store" -export const deriveStores = context => { +export const initialise = context => { const { scrolledRowCount, rows, visualRowCapacity } = context // Derive how many rows we have in total @@ -21,6 +21,4 @@ export const deriveStores = context => { rows.actions.loadNextPage() } }) - - return null } diff --git a/packages/frontend-core/src/components/sheet/stores/ui.js b/packages/frontend-core/src/components/sheet/stores/ui.js index 12044470b8..aeafa00da3 100644 --- a/packages/frontend-core/src/components/sheet/stores/ui.js +++ b/packages/frontend-core/src/components/sheet/stores/ui.js @@ -17,13 +17,6 @@ export const createStores = () => { null ) - // Remember the last focused row ID so that we can store the previous one - let lastFocusedRowId = null - focusedRowId.subscribe(id => { - previousFocusedRowId.set(lastFocusedRowId) - lastFocusedRowId = id - }) - return { focusedCellId, focusedCellAPI, @@ -37,7 +30,6 @@ export const createStores = () => { export const deriveStores = context => { const { - rows, focusedCellId, selectedRows, hoveredRowId, @@ -63,6 +55,33 @@ export const deriveStores = context => { null ) + // Callback when leaving the sheet, deselecting all focussed or selected items + const blur = () => { + focusedCellId.set(null) + selectedRows.set({}) + hoveredRowId.set(null) + } + + return { + focusedRow, + ui: { + actions: { + blur, + }, + }, + } +} + +export const initialise = context => { + const { + focusedRowId, + previousFocusedRowId, + rows, + focusedCellId, + selectedRows, + hoveredRowId, + } = context + // Ensure we clear invalid rows from state if they disappear rows.subscribe(() => { const $focusedCellId = get(focusedCellId) @@ -96,6 +115,13 @@ export const deriveStores = context => { } }) + // Remember the last focused row ID so that we can store the previous one + let lastFocusedRowId = null + focusedRowId.subscribe(id => { + previousFocusedRowId.set(lastFocusedRowId) + lastFocusedRowId = id + }) + // Reset selected rows when selected cell changes focusedCellId.subscribe(id => { if (id) { @@ -110,26 +136,10 @@ export const deriveStores = context => { } }) - // Callback when leaving the sheet, deselecting all focussed or selected items - const blur = () => { - focusedCellId.set(null) - selectedRows.set({}) - hoveredRowId.set(null) - } - // Remove hovered row when a cell is selected focusedCellId.subscribe(cell => { if (cell && get(hoveredRowId)) { hoveredRowId.set(null) } }) - - return { - focusedRow, - ui: { - actions: { - blur, - }, - }, - } } diff --git a/packages/frontend-core/src/components/sheet/stores/validation.js b/packages/frontend-core/src/components/sheet/stores/validation.js index 3ece8240eb..9c3927f9c9 100644 --- a/packages/frontend-core/src/components/sheet/stores/validation.js +++ b/packages/frontend-core/src/components/sheet/stores/validation.js @@ -23,7 +23,7 @@ export const createStores = () => { } } -export const deriveStores = context => { +export const initialise = context => { const { validation, previousFocusedRowId, columns, stickyColumn } = context // Remove validation errors from previous focused row