Improve grid handling of non datasource plus and fix focused cell issue with row click actions

This commit is contained in:
Andrew Kingston 2023-10-09 09:36:01 +01:00
parent c48eca4a0f
commit a781860b1c
5 changed files with 43 additions and 19 deletions

View File

@ -18,6 +18,7 @@
contentLines, contentLines,
isDragging, isDragging,
dispatch, dispatch,
rows,
} = getContext("grid") } = getContext("grid")
$: rowSelected = !!$selectedRows[row._id] $: rowSelected = !!$selectedRows[row._id]
@ -31,7 +32,7 @@
on:focus on:focus
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} 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)} {#each $renderedColumns as column, columnIdx (column.name)}
{@const cellId = `${row._id}-${column.name}`} {@const cellId = `${row._id}-${column.name}`}

View File

@ -74,7 +74,7 @@
class="row" class="row"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("rowclick", row)} on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
> >
<GutterCell {row} {rowFocused} {rowHovered} {rowSelected} /> <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
{#if $stickyColumn} {#if $stickyColumn}

View File

@ -17,6 +17,7 @@
focusedCellAPI, focusedCellAPI,
focusedRowId, focusedRowId,
notifications, notifications,
isDatasourcePlus,
} = getContext("grid") } = getContext("grid")
$: style = makeStyle($menu) $: style = makeStyle($menu)
@ -75,9 +76,7 @@
</MenuItem> </MenuItem>
<MenuItem <MenuItem
icon="Copy" icon="Copy"
disabled={isNewRow || disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
!$focusedRow?._id ||
$focusedRow?._id?.startsWith("fake-")}
on:click={() => copyToClipboard($focusedRow?._id)} on:click={() => copyToClipboard($focusedRow?._id)}
on:click={menu.actions.close} on:click={menu.actions.close}
> >

View File

@ -10,7 +10,7 @@ export const createStores = () => {
} }
export const deriveStores = context => { export const deriveStores = context => {
const { definition, schemaOverrides, columnWhitelist } = context const { definition, schemaOverrides, columnWhitelist, datasource } = context
const schema = derived(definition, $definition => { const schema = derived(definition, $definition => {
let schema = $definition?.schema let schema = $definition?.schema
@ -60,9 +60,14 @@ export const deriveStores = context => {
} }
) )
const isDatasourcePlus = derived(datasource, $datasource => {
return ["table", "viewV2"].includes($datasource?.type)
})
return { return {
schema, schema,
enrichedSchema, enrichedSchema,
isDatasourcePlus,
} }
} }

View File

@ -2,6 +2,7 @@ import { writable, derived, get } from "svelte/store"
import { fetchData } from "../../../fetch" import { fetchData } from "../../../fetch"
import { NewRowID, RowPageSize } from "../lib/constants" import { NewRowID, RowPageSize } from "../lib/constants"
import { tick } from "svelte" import { tick } from "svelte"
import { Helpers } from "@budibase/bbui"
export const createStores = () => { export const createStores = () => {
const rows = writable([]) const rows = writable([])
@ -76,11 +77,11 @@ export const createActions = context => {
columns, columns,
rowChangeCache, rowChangeCache,
inProgressChanges, inProgressChanges,
previousFocusedRowId,
hasNextPage, hasNextPage,
error, error,
notifications, notifications,
fetch, fetch,
isDatasourcePlus,
} = context } = context
const instanceLoaded = writable(false) const instanceLoaded = writable(false)
@ -361,7 +362,7 @@ export const createActions = context => {
// Update row // Update row
const saved = await datasource.actions.updateRow({ const saved = await datasource.actions.updateRow({
...row, ...cleanRow(row),
...get(rowChangeCache)[rowId], ...get(rowChangeCache)[rowId],
}) })
@ -417,13 +418,15 @@ export const createActions = context => {
} }
let rowsToAppend = [] let rowsToAppend = []
let newRow let newRow
const $isDatasourcePlus = get(isDatasourcePlus)
for (let i = 0; i < newRows.length; i++) { for (let i = 0; i < newRows.length; i++) {
newRow = newRows[i] newRow = newRows[i]
// Ensure we have a unique _id. // Ensure we have a unique _id.
// This means generating one for non DS+. // This means generating one for non DS+, overriting any that may already
if (!newRow._id) { // exist as we cannot allow duplicates.
newRow._id = `fake-${Math.random()}` if (!$isDatasourcePlus) {
newRow._id = Helpers.uuid()
} }
if (!rowCacheMap[newRow._id]) { if (!rowCacheMap[newRow._id]) {
@ -462,15 +465,16 @@ export const createActions = context => {
return get(rowLookupMap)[id] != null return get(rowLookupMap)[id] != null
} }
// Wipe the row change cache when changing row // Cleans a row by removing any internal grid metadata from it.
previousFocusedRowId.subscribe(id => { // Call this before passing a row to any sort of external flow.
if (id && !get(inProgressChanges)[id]) { const cleanRow = row => {
rowChangeCache.update(state => { let clone = { ...row }
delete state[id] delete clone.__idx
return state if (!get(isDatasourcePlus)) {
}) delete clone._id
} }
}) return clone
}
return { return {
rows: { rows: {
@ -487,7 +491,22 @@ export const createActions = context => {
refreshRow, refreshRow,
replaceRow, replaceRow,
refreshData, 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
})
}
})
}