From fc009b722fa2fdf52d0c3729bfeb8c62b7fec474 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 31 Mar 2023 10:12:52 +0100 Subject: [PATCH] Add new footer for adding rows, improve store memoization, support inverting all data types --- .../sheet/cells/AttachmentCell.svelte | 12 +- .../components/sheet/cells/DataCell.svelte | 68 +++- .../sheet/cells/LongFormCell.svelte | 7 +- .../components/sheet/cells/OptionsCell.svelte | 13 +- .../sheet/cells/RelationshipCell.svelte | 17 +- .../components/sheet/cells/SheetCell.svelte | 24 +- .../sheet/controls/DeleteButton.svelte | 6 +- .../src/components/sheet/layout/NewRow.svelte | 292 ++++++++++++------ .../src/components/sheet/layout/Sheet.svelte | 47 +-- .../sheet/layout/SheetScrollWrapper.svelte | 40 +-- .../sheet/overlays/KeyboardManager.svelte | 7 +- .../sheet/overlays/ScrollOverlay.svelte | 34 +- .../src/components/sheet/stores/max-scroll.js | 29 +- .../src/components/sheet/stores/rows.js | 3 +- .../src/components/sheet/stores/viewport.js | 4 +- .../src/components/sheet/stores/wheel.js | 53 ++++ 16 files changed, 440 insertions(+), 216 deletions(-) create mode 100644 packages/frontend-core/src/components/sheet/stores/wheel.js diff --git a/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte index da42254b13..7f3b065845 100644 --- a/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte @@ -8,6 +8,7 @@ export let onChange export let readonly = false export let api + export let invert = false const { API } = getContext("sheet") const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"] @@ -88,7 +89,7 @@ {#if isOpen} -
+
diff --git a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte index e68a10ebc4..4cda2cf32e 100644 --- a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte @@ -15,15 +15,42 @@ export let column export let row export let cellId + export let updateRow = rows.actions.updateRow + export let showPlaceholder = false + export let invert = false let api + let error + // Build cell API + $: cellAPI = { + ...api, + isReadonly: () => !!column.schema.autocolumn, + isRequired: () => !!column.schema.constraints?.presence, + updateValue: value => { + error = null + try { + if (cellAPI.isReadonly()) { + // Ensure cell isn't readonly + error = "Auto columns can't be edited" + } else if (cellAPI.isRequired() && (value == null || value === "")) { + // Sanity check required fields + error = "Required field" + } else { + updateRow(row._id, column.name, value) + } + } catch (err) { + error = err + } + }, + } + + // Update selected cell API if selected $: { if (selected) { - selectedCellAPI.set({ - ...api, - isReadonly: () => !!column.schema.autocolumn, - }) + selectedCellAPI.set(cellAPI) + } else { + error = null } } @@ -36,17 +63,32 @@ {selectedUser} {reorderSource} {reorderTarget} + {error} on:click={() => selectedCellId.set(cellId)} on:contextmenu={e => menu.actions.open(cellId, e)} width={column.width} > - rows.actions.updateRow(row._id, column.name, val)} - readonly={column.schema.autocolumn} - /> + {#if !selected && showPlaceholder && (row[column.name] == null || row[column.name] === "")} +
+ {column.name} +
+ {:else} + + {/if} + + diff --git a/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte b/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte index d2eddeadc2..bc35c74b3e 100644 --- a/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte @@ -6,6 +6,7 @@ export let onChange export let readonly = false export let api + export let invert = false let textarea let isOpen = false @@ -48,6 +49,7 @@ {#if isOpen}