Merge branch 'master' into fix/builder-tabs-underline
This commit is contained in:
commit
de52a8f230
9 changed files with 147 additions and 85 deletions
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "2.26.0",
|
||||
"version": "2.26.1",
|
||||
"npmClient": "yarn",
|
||||
"packages": [
|
||||
"packages/*",
|
||||
|
|
|
@ -49,17 +49,20 @@
|
|||
},
|
||||
]
|
||||
|
||||
$: tables = findAllMatchingComponents($selectedScreen?.props, component =>
|
||||
component._component.endsWith("table")
|
||||
)
|
||||
$: tableBlocks = findAllMatchingComponents(
|
||||
$: components = findAllMatchingComponents(
|
||||
$selectedScreen?.props,
|
||||
component => component._component.endsWith("tableblock")
|
||||
component => {
|
||||
const type = component._component
|
||||
return (
|
||||
type.endsWith("/table") ||
|
||||
type.endsWith("/tableblock") ||
|
||||
type.endsWith("/gridblock")
|
||||
)
|
||||
}
|
||||
)
|
||||
$: components = tables.concat(tableBlocks)
|
||||
$: componentOptions = components.map(table => ({
|
||||
label: table._instanceName,
|
||||
value: table._component.includes("tableblock")
|
||||
value: table._component.endsWith("/tableblock")
|
||||
? `${table._id}-table`
|
||||
: table._id,
|
||||
}))
|
||||
|
@ -69,6 +72,7 @@
|
|||
$: selectedTable = components.find(
|
||||
component => component._id === selectedTableId
|
||||
)
|
||||
$: parameters.rows = `{{ literal [${parameters.tableComponentId}].[selectedRows] }}`
|
||||
|
||||
onMount(() => {
|
||||
if (!parameters.type) {
|
||||
|
|
|
@ -7017,10 +7017,22 @@
|
|||
]
|
||||
}
|
||||
],
|
||||
"context": {
|
||||
"type": "schema",
|
||||
"scope": "local"
|
||||
},
|
||||
"context": [
|
||||
{
|
||||
"type": "schema",
|
||||
"scope": "local"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"values": [
|
||||
{
|
||||
"label": "Selected rows",
|
||||
"key": "selectedRows",
|
||||
"type": "array"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"actions": ["RefreshDatasource"]
|
||||
},
|
||||
"bbreferencefield": {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
// NOTE: this is not a block - it's just named as such to avoid confusing users,
|
||||
// because it functions similarly to one
|
||||
import { getContext } from "svelte"
|
||||
import { get } from "svelte/store"
|
||||
import { getContext, onMount } from "svelte"
|
||||
import { get, derived, readable } from "svelte/store"
|
||||
import { Grid } from "@budibase/frontend-core"
|
||||
|
||||
// table is actually any datasource, but called table for legacy compatibility
|
||||
|
@ -19,7 +19,6 @@
|
|||
export let columns = null
|
||||
export let onRowClick = null
|
||||
export let buttons = null
|
||||
export let repeat = null
|
||||
|
||||
const context = getContext("context")
|
||||
const component = getContext("component")
|
||||
|
@ -36,17 +35,18 @@
|
|||
} = getContext("sdk")
|
||||
|
||||
let grid
|
||||
let gridContext
|
||||
|
||||
$: columnWhitelist = parsedColumns
|
||||
?.filter(col => col.active)
|
||||
?.map(col => col.field)
|
||||
$: parsedColumns = getParsedColumns(columns)
|
||||
$: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
|
||||
$: schemaOverrides = getSchemaOverrides(parsedColumns)
|
||||
$: enrichedButtons = enrichButtons(buttons)
|
||||
$: parsedColumns = getParsedColumns(columns)
|
||||
$: selectedRows = deriveSelectedRows(gridContext)
|
||||
$: data = { selectedRows: $selectedRows }
|
||||
$: actions = [
|
||||
{
|
||||
type: ActionTypes.RefreshDatasource,
|
||||
callback: () => grid?.getContext()?.rows.actions.refreshData(),
|
||||
callback: () => gridContext?.rows.actions.refreshData(),
|
||||
metadata: { dataSource: table },
|
||||
},
|
||||
]
|
||||
|
@ -68,12 +68,14 @@
|
|||
|
||||
// Parses columns to fix older formats
|
||||
const getParsedColumns = columns => {
|
||||
if (!columns?.length) {
|
||||
return []
|
||||
}
|
||||
// If the first element has an active key all elements should be in the new format
|
||||
if (columns?.length && columns[0]?.active !== undefined) {
|
||||
if (columns[0].active !== undefined) {
|
||||
return columns
|
||||
}
|
||||
|
||||
return columns?.map(column => ({
|
||||
return columns.map(column => ({
|
||||
label: column.displayName || column.name,
|
||||
field: column.name,
|
||||
active: true,
|
||||
|
@ -82,7 +84,7 @@
|
|||
|
||||
const getSchemaOverrides = columns => {
|
||||
let overrides = {}
|
||||
columns?.forEach(column => {
|
||||
columns.forEach(column => {
|
||||
overrides[column.field] = {
|
||||
displayName: column.label,
|
||||
}
|
||||
|
@ -109,6 +111,23 @@
|
|||
}))
|
||||
}
|
||||
|
||||
const deriveSelectedRows = gridContext => {
|
||||
if (!gridContext) {
|
||||
return readable([])
|
||||
}
|
||||
return derived(
|
||||
[gridContext.selectedRows, gridContext.rowLookupMap, gridContext.rows],
|
||||
([$selectedRows, $rowLookupMap, $rows]) => {
|
||||
return Object.entries($selectedRows || {})
|
||||
.filter(([_, selected]) => selected)
|
||||
.map(([rowId]) => {
|
||||
const idx = $rowLookupMap[rowId]
|
||||
return gridContext.rows.actions.cleanRow($rows[idx])
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const getSanitisedStyles = styles => {
|
||||
return {
|
||||
...styles,
|
||||
|
@ -118,40 +137,44 @@
|
|||
},
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
gridContext = grid.getContext()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
|
||||
<span style="--height:{height};">
|
||||
<Provider {actions}>
|
||||
<Grid
|
||||
bind:this={grid}
|
||||
datasource={table}
|
||||
{API}
|
||||
{stripeRows}
|
||||
{quiet}
|
||||
{initialFilter}
|
||||
{initialSortColumn}
|
||||
{initialSortOrder}
|
||||
{fixedRowHeight}
|
||||
{columnWhitelist}
|
||||
{schemaOverrides}
|
||||
{repeat}
|
||||
canAddRows={allowAddRows}
|
||||
canEditRows={allowEditRows}
|
||||
canDeleteRows={allowDeleteRows}
|
||||
canEditColumns={false}
|
||||
canExpandRows={false}
|
||||
canSaveSchema={false}
|
||||
showControls={false}
|
||||
notifySuccess={notificationStore.actions.success}
|
||||
notifyError={notificationStore.actions.error}
|
||||
buttons={enrichedButtons}
|
||||
on:rowclick={e => onRowClick?.({ row: e.detail })}
|
||||
/>
|
||||
</Provider>
|
||||
<Grid
|
||||
bind:this={grid}
|
||||
datasource={table}
|
||||
{API}
|
||||
{stripeRows}
|
||||
{quiet}
|
||||
{initialFilter}
|
||||
{initialSortColumn}
|
||||
{initialSortOrder}
|
||||
{fixedRowHeight}
|
||||
{columnWhitelist}
|
||||
{schemaOverrides}
|
||||
canAddRows={allowAddRows}
|
||||
canEditRows={allowEditRows}
|
||||
canDeleteRows={allowDeleteRows}
|
||||
canEditColumns={false}
|
||||
canExpandRows={false}
|
||||
canSaveSchema={false}
|
||||
canSelectRows={true}
|
||||
showControls={false}
|
||||
notifySuccess={notificationStore.actions.success}
|
||||
notifyError={notificationStore.actions.error}
|
||||
buttons={enrichedButtons}
|
||||
on:rowclick={e => onRowClick?.({ row: e.detail })}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Provider {data} {actions} />
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
|
|
|
@ -15,7 +15,7 @@ const createRowSelectionStore = () => {
|
|||
const componentId = Object.keys(selection).find(
|
||||
componentId => componentId === tableComponentId
|
||||
)
|
||||
return selection[componentId] || {}
|
||||
return selection[componentId]
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
@ -333,31 +333,59 @@ const s3UploadHandler = async action => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* For new configs, "rows" is defined and enriched to be the array of rows to
|
||||
* export. For old configs it will be undefined and we need to use the legacy
|
||||
* row selection store in combination with the tableComponentId parameter.
|
||||
*/
|
||||
const exportDataHandler = async action => {
|
||||
let selection = rowSelectionStore.actions.getSelection(
|
||||
action.parameters.tableComponentId
|
||||
)
|
||||
if (selection.selectedRows && selection.selectedRows.length > 0) {
|
||||
let { tableComponentId, rows, type, columns, delimiter, customHeaders } =
|
||||
action.parameters
|
||||
let tableId
|
||||
|
||||
// Handle legacy configs using the row selection store
|
||||
if (!rows?.length) {
|
||||
const selection = rowSelectionStore.actions.getSelection(tableComponentId)
|
||||
if (selection?.selectedRows?.length) {
|
||||
rows = selection.selectedRows
|
||||
tableId = selection.tableId
|
||||
}
|
||||
}
|
||||
|
||||
// Get table ID from first row if needed
|
||||
if (!tableId) {
|
||||
tableId = rows?.[0]?.tableId
|
||||
}
|
||||
|
||||
// Handle no rows selected
|
||||
if (!rows?.length) {
|
||||
notificationStore.actions.error("Please select at least one row")
|
||||
}
|
||||
// Handle case where we're not using a DS+
|
||||
else if (!tableId) {
|
||||
notificationStore.actions.error(
|
||||
"You can only export data from table datasources"
|
||||
)
|
||||
}
|
||||
// Happy path when we have both rows and table ID
|
||||
else {
|
||||
try {
|
||||
// Flatten rows if required
|
||||
if (typeof rows[0] !== "string") {
|
||||
rows = rows.map(row => row._id)
|
||||
}
|
||||
const data = await API.exportRows({
|
||||
tableId: selection.tableId,
|
||||
rows: selection.selectedRows,
|
||||
format: action.parameters.type,
|
||||
columns: action.parameters.columns?.map(
|
||||
column => column.name || column
|
||||
),
|
||||
delimiter: action.parameters.delimiter,
|
||||
customHeaders: action.parameters.customHeaders,
|
||||
tableId,
|
||||
rows,
|
||||
format: type,
|
||||
columns: columns?.map(column => column.name || column),
|
||||
delimiter,
|
||||
customHeaders,
|
||||
})
|
||||
download(
|
||||
new Blob([data], { type: "text/plain" }),
|
||||
`${selection.tableId}.${action.parameters.type}`
|
||||
)
|
||||
download(new Blob([data], { type: "text/plain" }), `${tableId}.${type}`)
|
||||
} catch (error) {
|
||||
notificationStore.actions.error("There was an error exporting the data")
|
||||
}
|
||||
} else {
|
||||
notificationStore.actions.error("Please select at least one row")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -16,6 +16,8 @@
|
|||
const { config, dispatch, selectedRows } = getContext("grid")
|
||||
const svelteDispatch = createEventDispatcher()
|
||||
|
||||
$: selectionEnabled = $config.canSelectRows || $config.canDeleteRows
|
||||
|
||||
const select = e => {
|
||||
e.stopPropagation()
|
||||
svelteDispatch("select")
|
||||
|
@ -52,7 +54,7 @@
|
|||
<div
|
||||
on:click={select}
|
||||
class="checkbox"
|
||||
class:visible={$config.canDeleteRows &&
|
||||
class:visible={selectionEnabled &&
|
||||
(disableNumber || rowSelected || rowHovered || rowFocused)}
|
||||
>
|
||||
<Checkbox value={rowSelected} {disabled} />
|
||||
|
@ -60,7 +62,7 @@
|
|||
{#if !disableNumber}
|
||||
<div
|
||||
class="number"
|
||||
class:visible={!$config.canDeleteRows ||
|
||||
class:visible={!selectionEnabled ||
|
||||
!(rowSelected || rowHovered || rowFocused)}
|
||||
>
|
||||
{row.__idx + 1}
|
||||
|
@ -117,19 +119,11 @@
|
|||
.expand {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.expand {
|
||||
.expand:not(.visible),
|
||||
.expand:not(.visible) :global(*) {
|
||||
opacity: 0;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.expand :global(.spectrum-Icon) {
|
||||
pointer-events: none;
|
||||
}
|
||||
.expand.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.expand.visible :global(.spectrum-Icon) {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.delete:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -41,6 +41,7 @@
|
|||
export let canDeleteRows = true
|
||||
export let canEditColumns = true
|
||||
export let canSaveSchema = true
|
||||
export let canSelectRows = false
|
||||
export let stripeRows = false
|
||||
export let quiet = false
|
||||
export let collaboration = true
|
||||
|
@ -94,6 +95,7 @@
|
|||
canDeleteRows,
|
||||
canEditColumns,
|
||||
canSaveSchema,
|
||||
canSelectRows,
|
||||
stripeRows,
|
||||
quiet,
|
||||
collaboration,
|
||||
|
|
|
@ -110,12 +110,11 @@ export const deriveStores = context => {
|
|||
}
|
||||
|
||||
export const createActions = context => {
|
||||
const { focusedCellId, selectedRows, hoveredRowId } = context
|
||||
const { focusedCellId, hoveredRowId } = context
|
||||
|
||||
// Callback when leaving the grid, deselecting all focussed or selected items
|
||||
const blur = () => {
|
||||
focusedCellId.set(null)
|
||||
selectedRows.set({})
|
||||
hoveredRowId.set(null)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue