From a781860b1cab22bb55d55e34a89d470463125b0a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Oct 2023 09:36:01 +0100 Subject: [PATCH] Improve grid handling of non datasource plus and fix focused cell issue with row click actions --- .../src/components/grid/layout/GridRow.svelte | 3 +- .../grid/layout/StickyColumn.svelte | 2 +- .../grid/overlays/MenuOverlay.svelte | 5 +-- .../src/components/grid/stores/datasource.js | 7 ++- .../src/components/grid/stores/rows.js | 45 +++++++++++++------ 5 files changed, 43 insertions(+), 19 deletions(-) diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte index bd65d34498..4754d493bf 100644 --- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte @@ -18,6 +18,7 @@ contentLines, isDragging, dispatch, + rows, } = getContext("grid") $: rowSelected = !!$selectedRows[row._id] @@ -31,7 +32,7 @@ on:focus on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} - on:click={() => dispatch("rowclick", row)} + on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))} > {#each $renderedColumns as column, columnIdx (column.name)} {@const cellId = `${row._id}-${column.name}`} diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index 82b29f1535..70da496042 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -74,7 +74,7 @@ class="row" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} - on:click={() => dispatch("rowclick", row)} + on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))} > {#if $stickyColumn} diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte index 7fb2bb138d..55308d4c6e 100644 --- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte +++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte @@ -17,6 +17,7 @@ focusedCellAPI, focusedRowId, notifications, + isDatasourcePlus, } = getContext("grid") $: style = makeStyle($menu) @@ -75,9 +76,7 @@ copyToClipboard($focusedRow?._id)} on:click={menu.actions.close} > diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js index 7f69d0031d..fd553a049b 100644 --- a/packages/frontend-core/src/components/grid/stores/datasource.js +++ b/packages/frontend-core/src/components/grid/stores/datasource.js @@ -10,7 +10,7 @@ export const createStores = () => { } export const deriveStores = context => { - const { definition, schemaOverrides, columnWhitelist } = context + const { definition, schemaOverrides, columnWhitelist, datasource } = context const schema = derived(definition, $definition => { let schema = $definition?.schema @@ -60,9 +60,14 @@ export const deriveStores = context => { } ) + const isDatasourcePlus = derived(datasource, $datasource => { + return ["table", "viewV2"].includes($datasource?.type) + }) + return { schema, enrichedSchema, + isDatasourcePlus, } } diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js index 667f0d323e..49adb62936 100644 --- a/packages/frontend-core/src/components/grid/stores/rows.js +++ b/packages/frontend-core/src/components/grid/stores/rows.js @@ -2,6 +2,7 @@ import { writable, derived, get } from "svelte/store" import { fetchData } from "../../../fetch" import { NewRowID, RowPageSize } from "../lib/constants" import { tick } from "svelte" +import { Helpers } from "@budibase/bbui" export const createStores = () => { const rows = writable([]) @@ -76,11 +77,11 @@ export const createActions = context => { columns, rowChangeCache, inProgressChanges, - previousFocusedRowId, hasNextPage, error, notifications, fetch, + isDatasourcePlus, } = context const instanceLoaded = writable(false) @@ -361,7 +362,7 @@ export const createActions = context => { // Update row const saved = await datasource.actions.updateRow({ - ...row, + ...cleanRow(row), ...get(rowChangeCache)[rowId], }) @@ -417,13 +418,15 @@ export const createActions = context => { } let rowsToAppend = [] let newRow + const $isDatasourcePlus = get(isDatasourcePlus) for (let i = 0; i < newRows.length; i++) { newRow = newRows[i] // Ensure we have a unique _id. - // This means generating one for non DS+. - if (!newRow._id) { - newRow._id = `fake-${Math.random()}` + // This means generating one for non DS+, overriting any that may already + // exist as we cannot allow duplicates. + if (!$isDatasourcePlus) { + newRow._id = Helpers.uuid() } if (!rowCacheMap[newRow._id]) { @@ -462,15 +465,16 @@ export const createActions = context => { return get(rowLookupMap)[id] != null } - // Wipe the row change cache when changing row - previousFocusedRowId.subscribe(id => { - if (id && !get(inProgressChanges)[id]) { - rowChangeCache.update(state => { - delete state[id] - return state - }) + // Cleans a row by removing any internal grid metadata from it. + // Call this before passing a row to any sort of external flow. + const cleanRow = row => { + let clone = { ...row } + delete clone.__idx + if (!get(isDatasourcePlus)) { + delete clone._id } - }) + return clone + } return { rows: { @@ -487,7 +491,22 @@ export const createActions = context => { refreshRow, replaceRow, refreshData, + cleanRow, }, }, } } + +export const initialise = context => { + const { rowChangeCache, inProgressChanges, previousFocusedRowId } = context + + // Wipe the row change cache when changing row + previousFocusedRowId.subscribe(id => { + if (id && !get(inProgressChanges)[id]) { + rowChangeCache.update(state => { + delete state[id] + return state + }) + } + }) +}