Improve grid handling of non datasource plus and fix focused cell issue with row click actions
This commit is contained in:
parent
c48eca4a0f
commit
a781860b1c
|
@ -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}`}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue