From 727d3d5b6da1db67d9812caef10c393823051a3c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 11 Apr 2023 22:55:13 +0100 Subject: [PATCH] Fix issue with cell colors, improve row API interactions to avoid relationship issues due to API response differences --- .../sheet/cells/LongFormCell.svelte | 7 ++-- .../sheet/cells/RelationshipCell.svelte | 1 - .../components/sheet/cells/SheetCell.svelte | 13 +++---- .../sheet/overlays/MenuOverlay.svelte | 2 +- .../src/components/sheet/stores/rows.js | 35 ++++++++++--------- 5 files changed, 30 insertions(+), 28 deletions(-) diff --git a/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte b/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte index fb499499c5..c3e3d07d70 100644 --- a/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte @@ -83,17 +83,18 @@ textarea { padding: var(--cell-padding); margin: 0; - border: 2px solid var(--spectrum-global-color-blue-400); + border: 2px solid var(--cell-color); background: var(--cell-background); font-size: var(--cell-font-size); font-family: var(--font-sans); color: inherit; position: absolute; - top: -1px; - left: -1px; + top: 0; + left: 0; width: calc(100% + 100px); height: calc(5 * var(--row-height) + 1px); z-index: 1; + border-radius: 2px; } textarea.invert { transform: translateY(-100%); diff --git a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte index c799d619de..5e3a9c0be8 100644 --- a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte @@ -52,7 +52,6 @@ if (!row?._id) { return false } - console.log(lookupMap) return lookupMap?.[row._id] === true } diff --git a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte index 5f0e4655fc..b9b2dc03ba 100644 --- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte @@ -16,7 +16,7 @@ const getStyle = (width, selectedUser) => { let style = `flex: 0 0 ${width}px;` if (selectedUser) { - style += `--user-color:${selectedUser.color};` + style += `--cell-color:${selectedUser.color};` } return style } @@ -70,6 +70,7 @@ background: var(--cell-background); position: relative; width: 0; + --cell-color: transparent; } /* Cell border */ @@ -82,7 +83,7 @@ left: 0; height: 100%; width: 100%; - border: 2px solid transparent; + border: 2px solid var(--cell-color); pointer-events: none; border-radius: 2px; box-sizing: border-box; @@ -106,11 +107,11 @@ .cell.focused { z-index: 2; } - .cell.focused:after { - border-color: var(--spectrum-global-color-blue-400); + .cell.focused { + --cell-color: var(--spectrum-global-color-blue-400); } - .cell.error:after { - border-color: var(--spectrum-global-color-red-500); + .cell.error { + --cell-color: var(--spectrum-global-color-red-500); } .cell:not(.focused) { user-select: none; diff --git a/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte index e74e4a45af..a4b9369314 100644 --- a/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte +++ b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte @@ -25,12 +25,12 @@ } const duplicate = async () => { + menu.actions.close() const newRow = await rows.actions.duplicateRow($focusedRow) if (newRow) { const column = $stickyColumn?.name || $columns[0].name $focusedCellId = `${newRow._id}-${column}` } - menu.actions.close() } diff --git a/packages/frontend-core/src/components/sheet/stores/rows.js b/packages/frontend-core/src/components/sheet/stores/rows.js index f99a3e7611..f5a961fe3d 100644 --- a/packages/frontend-core/src/components/sheet/stores/rows.js +++ b/packages/frontend-core/src/components/sheet/stores/rows.js @@ -190,7 +190,8 @@ export const deriveStores = context => { const addRow = async (row, idx, bubble = false) => { try { // Create row - const newRow = await API.saveRow({ ...row, tableId: get(tableId) }) + let newRow = await API.saveRow({ ...row, tableId: get(tableId) }) + newRow = await fetchRow(newRow._id) // Update state if (idx != null) { @@ -202,6 +203,8 @@ export const deriveStores = context => { } else { handleNewRows([newRow]) } + + // Refresh row to ensure data is in the correct format notifications.success("Row created successfully") return newRow } catch (error) { @@ -220,26 +223,14 @@ export const deriveStores = context => { delete clone._rev delete clone.__idx try { - const newRow = await addRow(clone, row.__idx + 1, true) - - // We deliberately re-use the majority of the existing row as the API - // returns different metadata for relationships when saving a row compared - // to using the search endpoint. We always want data in the shape that the - // search endpoint returns it. - return { - ...row, - __idx: row.__idx + 1, - _id: newRow._id, - _rev: newRow._rev, - } + return await addRow(clone, row.__idx + 1, true) } catch (error) { handleValidationError(row._id, error) } } - // Refreshes a specific row, handling updates, addition or deletion - const refreshRow = async id => { - // Fetch row from the server again + // Fetches a row by ID using the search endpoint + const fetchRow = async id => { const res = await API.searchTable({ tableId: get(tableId), limit: 1, @@ -250,7 +241,13 @@ export const deriveStores = context => { }, paginate: false, }) - let newRow = res?.rows?.[0] + return res?.rows?.[0] + } + + // Refreshes a specific row, handling updates, addition or deletion + const refreshRow = async id => { + // Fetch row from the server again + const newRow = await fetchRow(id) // Get index of row to check if it exists const $rows = get(rows) @@ -331,6 +328,10 @@ export const deriveStores = context => { // Deletes an array of rows const deleteRows = async rowsToDelete => { + if (!rowsToDelete?.length) { + return + } + // Actually delete rows rowsToDelete.forEach(row => { delete row.__idx