diff --git a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte index 93a10a46f3..c8e2830d46 100644 --- a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte @@ -16,7 +16,7 @@ export let column export let row export let cellId - export let updateRow = rows.actions.updateRow + export let updateValue = rows.actions.updateValue export let invertX = false export let invertY = false @@ -53,7 +53,7 @@ getValue: () => row[column.name], setValue: value => { validation.actions.setError(cellId, null) - updateRow(row._id, column.name, value) + updateValue(row._id, column.name, value) }, } diff --git a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte index 5f3212aa83..3602d37097 100644 --- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte @@ -177,26 +177,12 @@ > Sort Z-A - - Move to start - Move left Move right - - Move to end - diff --git a/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte b/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte index 44b40f43bd..8927e2377d 100644 --- a/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte +++ b/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte @@ -62,7 +62,7 @@ } } - const updateRow = (rowId, columnName, val) => { + const updateValue = (rowId, columnName, val) => { touched = true newRow[columnName] = val } @@ -112,7 +112,7 @@ focused={$focusedCellId === cellId} {rowFocused} width={$stickyColumn.width} - {updateRow} + {updateValue} rowIdx={0} /> {/if} @@ -131,7 +131,7 @@ focused={$focusedCellId === cellId} {rowFocused} width={column.width} - {updateRow} + {updateValue} rowIdx={0} /> {/key} diff --git a/packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte index ac1a6f47be..db06069233 100644 --- a/packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte +++ b/packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte @@ -9,15 +9,15 @@ focusedRow, stickyColumn, focusedCellAPI, + clipboard, } = getContext("sheet") - let copiedValue - // Global key listener which intercepts all key events const handleKeyDown = e => { // If nothing selected avoid processing further key presses if (!$focusedCellId) { if (e.key === "Tab") { + e.preventDefault() focusFirstCell() } return @@ -46,10 +46,10 @@ if (e.metaKey || e.ctrlKey) { switch (e.key) { case "c": - copy() + clipboard.actions.copy() break case "v": - paste() + clipboard.actions.paste() break } } else { @@ -144,18 +144,6 @@ $focusedCellAPI?.focus?.() } - // Copies the value from the current cell - const copy = () => { - copiedValue = $focusedCellAPI?.getValue() - } - - // Pastes the copied value - const paste = () => { - if (copiedValue != null) { - $focusedCellAPI?.setValue(copiedValue) - } - } - // Utils to identify a key code const keyCodeIsNumber = keyCode => keyCode >= 48 && keyCode <= 57 const keyCodeIsLetter = keyCode => keyCode >= 65 && keyCode <= 90 diff --git a/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte index ba89707d3f..32075dddeb 100644 --- a/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte +++ b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte @@ -10,6 +10,8 @@ focusedCellId, stickyColumn, config, + copiedCell, + clipboard, } = getContext("sheet") $: style = makeStyle($menu) @@ -37,16 +39,35 @@ {#if $menu.visible} {/if} diff --git a/packages/frontend-core/src/components/sheet/stores/clipboard.js b/packages/frontend-core/src/components/sheet/stores/clipboard.js new file mode 100644 index 0000000000..2500e6c39a --- /dev/null +++ b/packages/frontend-core/src/components/sheet/stores/clipboard.js @@ -0,0 +1,37 @@ +import { writable, get } from "svelte/store" + +export const createStores = () => { + const copiedCell = writable(null) + const copiedRow = writable(null) + + return { + copiedCell, + copiedRow, + } +} + +export const deriveStores = context => { + const { copiedCell, copiedRow, focusedCellAPI } = context + + const copy = () => { + copiedCell.set(get(focusedCellAPI)?.getValue()) + copiedRow.set(null) + } + + const paste = () => { + const $copiedCell = get(copiedCell) + const $focusedCellAPI = get(focusedCellAPI) + if ($copiedCell != null && $focusedCellAPI) { + $focusedCellAPI.setValue($copiedCell) + } + } + + return { + clipboard: { + actions: { + copy, + paste, + }, + }, + } +} diff --git a/packages/frontend-core/src/components/sheet/stores/index.js b/packages/frontend-core/src/components/sheet/stores/index.js index 1b62b21f9a..3afe50ecff 100644 --- a/packages/frontend-core/src/components/sheet/stores/index.js +++ b/packages/frontend-core/src/components/sheet/stores/index.js @@ -10,6 +10,7 @@ import * as UI from "./ui" import * as Users from "./users" import * as Validation from "./validation" import * as Viewport from "./viewport" +import * as Clipboard from "./clipboard" const DependencyOrderedStores = [ Bounds, @@ -24,6 +25,7 @@ const DependencyOrderedStores = [ Users, Menu, Pagination, + Clipboard, ] export const attachStores = context => { diff --git a/packages/frontend-core/src/components/sheet/stores/reorder.js b/packages/frontend-core/src/components/sheet/stores/reorder.js index 37b28e17db..6b3cebeb7a 100644 --- a/packages/frontend-core/src/components/sheet/stores/reorder.js +++ b/packages/frontend-core/src/components/sheet/stores/reorder.js @@ -122,17 +122,6 @@ export const deriveStores = context => { }) } - const moveColumnToStart = async column => { - moveColumn(column, null) - await columns.actions.saveChanges() - } - - const moveColumnToEnd = async column => { - const $visibleColumns = get(visibleColumns) - moveColumn(column, $visibleColumns[$visibleColumns.length - 1]?.name) - await columns.actions.saveChanges() - } - // Moves a column one place left (as appears visually) const moveColumnLeft = async column => { const $visibleColumns = get(visibleColumns) @@ -160,8 +149,6 @@ export const deriveStores = context => { stopReordering, moveColumnLeft, moveColumnRight, - moveColumnToStart, - moveColumnToEnd, }, }, } diff --git a/packages/frontend-core/src/components/sheet/stores/rows.js b/packages/frontend-core/src/components/sheet/stores/rows.js index 74b40131fa..0531914821 100644 --- a/packages/frontend-core/src/components/sheet/stores/rows.js +++ b/packages/frontend-core/src/components/sheet/stores/rows.js @@ -283,13 +283,25 @@ export const deriveStores = context => { get(fetch)?.getInitialData() } - // Updates a value of a row - const updateRow = async (rowId, column, value) => { + // Patches a row with some changes + const updateRow = async (rowId, changes) => { const $rows = get(rows) const $rowLookupMap = get(rowLookupMap) const index = $rowLookupMap[rowId] const row = $rows[index] - if (index == null || row?.[column] === value) { + if (index == null || !Object.keys(changes || {}).length) { + return + } + + // Abandon if no changes + let same = true + for (let column of Object.keys(changes)) { + if (row[column] !== changes[column]) { + same = false + break + } + } + if (same) { return } @@ -298,7 +310,7 @@ export const deriveStores = context => { ...state, [rowId]: { ...state[rowId], - [column]: value, + ...changes, }, })) @@ -332,6 +344,11 @@ export const deriveStores = context => { })) } + // Updates a value of a row + const updateValue = async (rowId, column, value) => { + return await updateRow(rowId, { [column]: value }) + } + // Deletes an array of rows const deleteRows = async rowsToDelete => { if (!rowsToDelete?.length) { @@ -418,6 +435,7 @@ export const deriveStores = context => { addRow, duplicateRow, getRow, + updateValue, updateRow, deleteRows, hasRow,