Merge pull request #12007 from Budibase/grid-all-datasources

Grid support for all datasource types + custom datasources
This commit is contained in:
Andrew Kingston 2023-10-20 12:04:54 +01:00 committed by GitHub
commit 8d56849cdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 693 additions and 194 deletions

View File

@ -3,13 +3,10 @@
import { goto, params } from "@roxi/routify"
import { Table, Heading, Layout } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import {
TableNames,
UNEDITABLE_USER_FIELDS,
UNSORTABLE_TYPES,
} from "constants"
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
import RoleCell from "./cells/RoleCell.svelte"
import { createEventDispatcher } from "svelte"
import { canBeSortColumn } from "@budibase/shared-core"
export let schema = {}
export let data = []
@ -32,13 +29,11 @@
$: isUsersTable = tableId === TableNames.USERS
$: data && resetSelectedRows()
$: {
UNSORTABLE_TYPES.forEach(type => {
Object.values(schema || {}).forEach(col => {
if (col.type === type) {
if (!canBeSortColumn(col.type)) {
col.sortable = false
}
})
})
}
$: {
if (isUsersTable) {

View File

@ -1,5 +1,9 @@
<script>
import { getContextProviderComponents } from "builderStore/dataBinding"
import {
getContextProviderComponents,
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import {
Button,
Popover,
@ -9,6 +13,11 @@
Heading,
Drawer,
DrawerContent,
Icon,
Modal,
ModalContent,
CoreDropzone,
notifications,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store, currentAsset } from "builderStore"
@ -22,6 +31,8 @@
import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
import { API } from "api"
export let value = {}
export let otherSources
@ -31,9 +42,13 @@
const dispatch = createEventDispatcher()
const arrayTypes = ["attachment", "array"]
let anchorRight, dropdownRight
let drawer
let tmpQueryParams
let tmpCustomData
let customDataValid = true
let modal
$: text = value?.label ?? "Choose an option"
$: tables = $tablesStore.list.map(m => ({
@ -125,6 +140,10 @@
value: `{{ literal ${runtimeBinding} }}`,
}
})
$: custom = {
type: "custom",
label: "JSON / CSV",
}
const handleSelected = selected => {
dispatch("change", selected)
@ -151,6 +170,11 @@
drawer.show()
}
const openCustomDrawer = () => {
tmpCustomData = runtimeToReadableBinding(bindings, value.data || "")
drawer.show()
}
const getQueryValue = queries => {
return queries.find(q => q._id === value._id) || value
}
@ -162,6 +186,35 @@
})
drawer.hide()
}
const saveCustomData = () => {
handleSelected({
...value,
data: readableToRuntimeBinding(bindings, tmpCustomData),
})
drawer.hide()
}
const promptForCSV = () => {
drawer.hide()
modal.show()
}
const handleCSV = async e => {
try {
const csv = await e.detail[0]?.text()
if (csv?.length) {
const js = await API.csvToJson(csv)
tmpCustomData = JSON.stringify(js)
}
modal.hide()
saveCustomData()
} catch (error) {
notifications.error("Failed to parse CSV")
modal.hide()
drawer.show()
}
}
</script>
<div class="container" bind:this={anchorRight}>
@ -172,7 +225,9 @@
on:click={dropdownRight.show}
/>
{#if value?.type === "query"}
<i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
<div class="icon">
<Icon hoverable name="Settings" on:click={openQueryParamsDrawer} />
</div>
<Drawer title={"Query Bindings"} bind:this={drawer}>
<Button slot="buttons" cta on:click={saveQueryParams}>Save</Button>
<DrawerContent slot="body">
@ -198,6 +253,29 @@
</DrawerContent>
</Drawer>
{/if}
{#if value?.type === "custom"}
<div class="icon">
<Icon hoverable name="Settings" on:click={openCustomDrawer} />
</div>
<Drawer title="Custom data" bind:this={drawer}>
<div slot="buttons" style="display:contents">
<Button primary on:click={promptForCSV}>Load CSV</Button>
<Button cta on:click={saveCustomData} disabled={!customDataValid}>
Save
</Button>
</div>
<div slot="description">Provide a JSON array to use as data</div>
<ClientBindingPanel
slot="body"
bind:valid={customDataValid}
value={tmpCustomData}
on:change={event => (tmpCustomData = event.detail)}
{bindings}
allowJS
allowHelpers
/>
</Drawer>
{/if}
</div>
<Popover bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown">
@ -285,20 +363,27 @@
{/each}
</ul>
{/if}
{#if otherSources?.length}
<Divider />
<div class="title">
<Heading size="XS">Other</Heading>
</div>
<ul>
<li on:click={() => handleSelected(custom)}>{custom.label}</li>
{#if otherSources?.length}
{#each otherSources as source}
<li on:click={() => handleSelected(source)}>{source.label}</li>
{/each}
</ul>
{/if}
</ul>
</div>
</Popover>
<Modal bind:this={modal}>
<ModalContent title="Load CSV" showConfirmButton={false}>
<CoreDropzone compact extensions=".csv" on:change={handleCSV} />
</ModalContent>
</Modal>
<style>
.container {
display: flex;
@ -340,16 +425,7 @@
background-color: var(--spectrum-global-color-gray-200);
}
i {
margin-left: 5px;
display: flex;
align-items: center;
transition: all 0.2s;
}
i:hover {
transform: scale(1.1);
font-weight: 600;
cursor: pointer;
.icon {
margin-left: 8px;
}
</style>

View File

@ -6,7 +6,7 @@
} from "builderStore/dataBinding"
import { currentAsset } from "builderStore"
import { createEventDispatcher } from "svelte"
import { UNSORTABLE_TYPES } from "constants"
import { canBeSortColumn } from "@budibase/shared-core"
export let componentInstance = {}
export let value = ""
@ -20,7 +20,7 @@
const getSortableFields = schema => {
return Object.entries(schema || {})
.filter(entry => !UNSORTABLE_TYPES.includes(entry[1].type))
.filter(entry => canBeSortColumn(entry[1].type))
.map(entry => entry[0])
}

View File

@ -34,8 +34,6 @@ export const UNEDITABLE_USER_FIELDS = [
"lastName",
]
export const UNSORTABLE_TYPES = ["formula", "attachment", "array", "link"]
export const LAYOUT_NAMES = {
MASTER: {
PRIVATE: "layout_private_master",

View File

@ -1,5 +1,5 @@
<script>
import { isEmpty } from "lodash/fp"
import { helpers } from "@budibase/shared-core"
import { Input, DetailSummary, notifications } from "@budibase/bbui"
import { store } from "builderStore"
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@ -70,41 +70,43 @@
}
const shouldDisplay = (instance, setting) => {
// Parse dependant settings
if (setting.dependsOn) {
let dependantSetting = setting.dependsOn
let dependantValue = null
let invert = !!setting.dependsOn.invert
if (typeof setting.dependsOn === "object") {
dependantSetting = setting.dependsOn.setting
dependantValue = setting.dependsOn.value
let dependsOn = setting.dependsOn
if (dependsOn && !Array.isArray(dependsOn)) {
dependsOn = [dependsOn]
}
if (!dependsOn?.length) {
return true
}
// Ensure all conditions are met
return dependsOn.every(condition => {
let dependantSetting = condition
let dependantValues = null
let invert = !!condition.invert
if (typeof condition === "object") {
dependantSetting = condition.setting
dependantValues = condition.value
}
if (!dependantSetting) {
return false
}
// If no specific value is depended upon, check if a value exists at all
// for the dependent setting
if (dependantValue == null) {
const currentValue = instance[dependantSetting]
if (currentValue === false) {
return false
}
if (currentValue === true) {
return true
}
return !isEmpty(currentValue)
// Ensure values is an array
if (!Array.isArray(dependantValues)) {
dependantValues = [dependantValues]
}
// Otherwise check the value matches
if (invert) {
return instance[dependantSetting] !== dependantValue
} else {
return instance[dependantSetting] === dependantValue
// If inverting, we want to ensure that we don't have any matches.
// If not inverting, we want to ensure that we do have any matches.
const currentVal = helpers.deepGet(instance, dependantSetting)
const anyMatches = dependantValues.some(dependantVal => {
if (dependantVal == null) {
return currentVal != null && currentVal !== false && currentVal !== ""
}
}
return typeof setting.visible == "boolean" ? setting.visible : true
return dependantVal === currentVal
})
return anyMatches !== invert
})
}
const canRenderControl = (instance, setting, isScreen) => {

View File

@ -5556,10 +5556,9 @@
"width": 600,
"height": 400
},
"info": "Grid Blocks are only compatible with internal or SQL tables",
"settings": [
{
"type": "table",
"type": "dataSource",
"label": "Data",
"key": "table",
"required": true
@ -5568,18 +5567,35 @@
"type": "columns/grid",
"label": "Columns",
"key": "columns",
"dependsOn": "table"
"dependsOn": [
"table",
{
"setting": "table.type",
"value": "custom",
"invert": true
}
]
},
{
"type": "filter",
"label": "Filtering",
"key": "initialFilter"
"key": "initialFilter",
"dependsOn": {
"setting": "table.type",
"value": "custom",
"invert": true
}
},
{
"type": "field/sortable",
"label": "Sort column",
"key": "initialSortColumn",
"placeholder": "Default"
"placeholder": "Default",
"dependsOn": {
"setting": "table.type",
"value": "custom",
"invert": true
}
},
{
"type": "select",
@ -5618,29 +5634,37 @@
"label": "Clicked row",
"key": "row"
}
],
"dependsOn": {
"setting": "allowEditRows",
"value": false
}
]
},
{
"type": "boolean",
"label": "Add rows",
"key": "allowAddRows",
"defaultValue": true
"defaultValue": true,
"dependsOn": {
"setting": "table.type",
"value": ["table", "viewV2"]
}
},
{
"type": "boolean",
"label": "Edit rows",
"key": "allowEditRows",
"defaultValue": true
"defaultValue": true,
"dependsOn": {
"setting": "table.type",
"value": ["table", "viewV2"]
}
},
{
"type": "boolean",
"label": "Delete rows",
"key": "allowDeleteRows",
"defaultValue": true
"defaultValue": true,
"dependsOn": {
"setting": "table.type",
"value": ["table", "viewV2"]
}
},
{
"type": "boolean",

View File

@ -4,6 +4,7 @@
import { getContext } from "svelte"
import { Grid } from "@budibase/frontend-core"
// table is actually any datasource, but called table for legacy compatibility
export let table
export let allowAddRows = true
export let allowEditRows = true
@ -21,7 +22,6 @@
$: columnWhitelist = columns?.map(col => col.name)
$: schemaOverrides = getSchemaOverrides(columns)
$: handleRowClick = allowEditRows ? undefined : onRowClick
const getSchemaOverrides = columns => {
let overrides = {}
@ -58,7 +58,7 @@
showControls={false}
notifySuccess={notificationStore.actions.success}
notifyError={notificationStore.actions.error}
on:rowclick={e => handleRowClick?.({ row: e.detail })}
on:rowclick={e => onRowClick?.({ row: e.detail })}
/>
</div>

View File

@ -2,8 +2,8 @@
import { getContext } from "svelte"
import { Table } from "@budibase/bbui"
import SlotRenderer from "./SlotRenderer.svelte"
import { UnsortableTypes } from "../../../constants"
import { onDestroy } from "svelte"
import { canBeSortColumn } from "@budibase/shared-core"
export let dataProvider
export let columns
@ -102,7 +102,7 @@
return
}
newSchema[columnName] = schema[columnName]
if (UnsortableTypes.includes(schema[columnName].type)) {
if (!canBeSortColumn(schema[columnName].type)) {
newSchema[columnName].sortable = false
}

View File

@ -1,13 +1,5 @@
import { FieldType as FieldTypes } from "@budibase/types"
export { FieldType as FieldTypes } from "@budibase/types"
export const UnsortableTypes = [
FieldTypes.FORMULA,
FieldTypes.ATTACHMENT,
FieldTypes.ARRAY,
FieldTypes.LINK,
]
export const ActionTypes = {
ValidateForm: "ValidateForm",
UpdateFieldValue: "UpdateFieldValue",

View File

@ -34,7 +34,7 @@
column.schema.autocolumn ||
column.schema.disabled ||
column.schema.type === "formula" ||
(!$config.canEditRows && row._id)
(!$config.canEditRows && !row._isNewRow)
// Register this cell API if the row is focused
$: {

View File

@ -1,6 +1,6 @@
<script>
import { getContext, onMount, tick } from "svelte"
import { canBeDisplayColumn } from "@budibase/shared-core"
import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
import { Icon, Popover, Menu, MenuItem, clickOutside } from "@budibase/bbui"
import GridCell from "./GridCell.svelte"
import { getColumnIcon } from "../lib/utils"
@ -23,6 +23,7 @@
columns,
definition,
datasource,
schema,
} = getContext("grid")
let anchor
@ -119,16 +120,16 @@
// Generate new name
let newName = `${column.name} copy`
let attempts = 2
while ($definition.schema[newName]) {
while ($schema[newName]) {
newName = `${column.name} copy ${attempts++}`
}
// Save schema with new column
const existingColumnDefinition = $definition.schema[column.name]
const existingColumnDefinition = $schema[column.name]
await datasource.actions.saveDefinition({
...$definition,
schema: {
...$definition.schema,
...$schema,
[newName]: {
...existingColumnDefinition,
name: newName,
@ -231,14 +232,16 @@
<MenuItem
icon="SortOrderUp"
on:click={sortAscending}
disabled={column.name === $sort.column && $sort.order === "ascending"}
disabled={!canBeSortColumn(column.schema.type) ||
(column.name === $sort.column && $sort.order === "ascending")}
>
Sort {ascendingLabel}
</MenuItem>
<MenuItem
icon="SortOrderDown"
on:click={sortDescending}
disabled={column.name === $sort.column && $sort.order === "descending"}
disabled={!canBeSortColumn(column.schema.type) ||
(column.name === $sort.column && $sort.order === "descending")}
>
Sort {descendingLabel}
</MenuItem>

View File

@ -1,6 +1,7 @@
<script>
import { getContext } from "svelte"
import { ActionButton, Popover, Select } from "@budibase/bbui"
import { canBeSortColumn } from "@budibase/shared-core"
const { sort, columns, stickyColumn } = getContext("grid")
@ -19,7 +20,7 @@
type: stickyColumn.schema?.type,
})
}
return [
options = [
...options,
...columns.map(col => ({
label: col.label || col.name,
@ -27,6 +28,7 @@
type: col.schema?.type,
})),
]
return options.filter(col => canBeSortColumn(col.type))
}
const getOrderOptions = (column, columnOptions) => {

View File

@ -141,7 +141,14 @@
</div>
</div>
{/if}
{#if $loaded}
{#if $error}
<div class="grid-error">
<div class="grid-error-title">There was a problem loading your grid</div>
<div class="grid-error-subtitle">
{$error}
</div>
</div>
{:else if $loaded}
<div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
<div class="grid-data-inner">
<StickyColumn>
@ -171,13 +178,6 @@
</div>
</div>
</div>
{:else if $error}
<div class="grid-error">
<div class="grid-error-title">There was a problem loading your grid</div>
<div class="grid-error-subtitle">
{$error}
</div>
</div>
{/if}
{#if $loading && !$error}
<div in:fade|local={{ duration: 130 }} class="grid-loading">

View File

@ -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}`}

View File

@ -33,7 +33,7 @@
let visible = false
let isAdding = false
let newRow = {}
let newRow
let offset = 0
$: firstColumn = $stickyColumn || $renderedColumns[0]
@ -58,7 +58,9 @@
// Create row
const newRowIndex = offset ? undefined : 0
const savedRow = await rows.actions.addRow(newRow, newRowIndex)
let rowToCreate = { ...newRow }
delete rowToCreate._isNewRow
const savedRow = await rows.actions.addRow(rowToCreate, newRowIndex)
if (savedRow) {
// Reset state
clear()
@ -109,7 +111,7 @@
}
// Update state and select initial cell
newRow = {}
newRow = { _isNewRow: true }
visible = true
$hoveredRowId = NewRowID
if (firstColumn) {

View File

@ -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))}
>
<GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
{#if $stickyColumn}

View File

@ -1,6 +1,6 @@
export const getColor = (idx, opacity = 0.3) => {
if (idx == null || idx === -1) {
return null
idx = 0
}
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
}

View File

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

View File

@ -69,7 +69,7 @@ export const deriveStores = context => {
}
export const createActions = context => {
const { columns, stickyColumn, datasource, definition } = context
const { columns, stickyColumn, datasource, definition, schema } = context
// Updates the datasources primary display column
const changePrimaryDisplay = async column => {
@ -101,7 +101,7 @@ export const createActions = context => {
const $columns = get(columns)
const $definition = get(definition)
const $stickyColumn = get(stickyColumn)
const newSchema = cloneDeep($definition.schema)
let newSchema = cloneDeep(get(schema)) || {}
// Build new updated datasource schema
Object.keys(newSchema).forEach(column => {
@ -142,26 +142,35 @@ export const createActions = context => {
}
export const initialise = context => {
const { definition, columns, stickyColumn, schema } = context
const { definition, columns, stickyColumn, enrichedSchema } = context
// Merge new schema fields with existing schema in order to preserve widths
schema.subscribe($schema => {
if (!$schema) {
enrichedSchema.subscribe($enrichedSchema => {
if (!$enrichedSchema) {
columns.set([])
stickyColumn.set(null)
return
}
const $definition = get(definition)
const $columns = get(columns)
const $stickyColumn = get(stickyColumn)
// Generate array of all columns to easily find pre-existing columns
let allColumns = $columns || []
if ($stickyColumn) {
allColumns.push($stickyColumn)
}
// Find primary display
let primaryDisplay
if ($definition.primaryDisplay && $schema[$definition.primaryDisplay]) {
primaryDisplay = $definition.primaryDisplay
const candidatePD = $definition.primaryDisplay || $stickyColumn?.name
if (candidatePD && $enrichedSchema[candidatePD]) {
primaryDisplay = candidatePD
}
// Get field list
let fields = []
Object.keys($schema).forEach(field => {
Object.keys($enrichedSchema).forEach(field => {
if (field !== primaryDisplay) {
fields.push(field)
}
@ -170,14 +179,18 @@ export const initialise = context => {
// Update columns, removing extraneous columns and adding missing ones
columns.set(
fields
.map(field => ({
.map(field => {
const fieldSchema = $enrichedSchema[field]
const oldColumn = allColumns?.find(x => x.name === field)
return {
name: field,
label: $schema[field].displayName || field,
schema: $schema[field],
width: $schema[field].width || DefaultColumnWidth,
visible: $schema[field].visible ?? true,
order: $schema[field].order,
}))
label: fieldSchema.displayName || field,
schema: fieldSchema,
width: fieldSchema.width || oldColumn?.width || DefaultColumnWidth,
visible: fieldSchema.visible ?? true,
order: fieldSchema.order ?? oldColumn?.order,
}
})
.sort((a, b) => {
// Sort by order first
const orderA = a.order
@ -205,11 +218,13 @@ export const initialise = context => {
stickyColumn.set(null)
return
}
const stickySchema = $enrichedSchema[primaryDisplay]
const oldStickyColumn = allColumns?.find(x => x.name === primaryDisplay)
stickyColumn.set({
name: primaryDisplay,
label: $schema[primaryDisplay].displayName || primaryDisplay,
schema: $schema[primaryDisplay],
width: $schema[primaryDisplay].width || DefaultColumnWidth,
label: stickySchema.displayName || primaryDisplay,
schema: stickySchema,
width: stickySchema.width || oldStickyColumn?.width || DefaultColumnWidth,
visible: true,
order: 0,
left: GutterWidth,

View File

@ -37,9 +37,10 @@ export const deriveStores = context => {
[props, hasNonAutoColumn],
([$props, $hasNonAutoColumn]) => {
let config = { ...$props }
const type = $props.datasource?.type
// Disable some features if we're editing a view
if ($props.datasource?.type === "viewV2") {
if (type === "viewV2") {
config.canEditColumns = false
}
@ -48,6 +49,16 @@ export const deriveStores = context => {
config.canAddRows = false
}
// Disable features for non DS+
if (!["table", "viewV2"].includes(type)) {
config.canAddRows = false
config.canEditRows = false
config.canDeleteRows = false
config.canExpandRows = false
config.canSaveSchema = false
config.canEditColumns = false
}
return config
}
)

View File

@ -1,4 +1,5 @@
import { derived, get, writable } from "svelte/store"
import { getDatasourceDefinition } from "../../../fetch"
export const createStores = () => {
const definition = writable(null)
@ -9,21 +10,38 @@ export const createStores = () => {
}
export const deriveStores = context => {
const { definition, schemaOverrides, columnWhitelist } = context
const { definition, schemaOverrides, columnWhitelist, datasource } = context
const schema = derived(
[definition, schemaOverrides, columnWhitelist],
([$definition, $schemaOverrides, $columnWhitelist]) => {
if (!$definition?.schema) {
const schema = derived(definition, $definition => {
let schema = $definition?.schema
if (!schema) {
return null
}
let newSchema = { ...$definition?.schema }
// Ensure schema is configured as objects.
// Certain datasources like queries use primitives.
Object.keys(schema || {}).forEach(key => {
if (typeof schema[key] !== "object") {
schema[key] = { type: schema[key] }
}
})
return schema
})
const enrichedSchema = derived(
[schema, schemaOverrides, columnWhitelist],
([$schema, $schemaOverrides, $columnWhitelist]) => {
if (!$schema) {
return null
}
let enrichedSchema = { ...$schema }
// Apply schema overrides
Object.keys($schemaOverrides || {}).forEach(field => {
if (newSchema[field]) {
newSchema[field] = {
...newSchema[field],
if (enrichedSchema[field]) {
enrichedSchema[field] = {
...enrichedSchema[field],
...$schemaOverrides[field],
}
}
@ -31,41 +49,64 @@ export const deriveStores = context => {
// Apply whitelist if specified
if ($columnWhitelist?.length) {
Object.keys(newSchema).forEach(key => {
Object.keys(enrichedSchema).forEach(key => {
if (!$columnWhitelist.includes(key)) {
delete newSchema[key]
delete enrichedSchema[key]
}
})
}
return newSchema
return enrichedSchema
}
)
const isDatasourcePlus = derived(datasource, $datasource => {
return ["table", "viewV2"].includes($datasource?.type)
})
return {
schema,
enrichedSchema,
isDatasourcePlus,
}
}
export const createActions = context => {
const { datasource, definition, config, dispatch, table, viewV2 } = context
const {
API,
datasource,
definition,
config,
dispatch,
table,
viewV2,
nonPlus,
} = context
// Gets the appropriate API for the configured datasource type
const getAPI = () => {
const $datasource = get(datasource)
switch ($datasource?.type) {
const type = $datasource?.type
if (!type) {
return null
}
switch (type) {
case "table":
return table
case "viewV2":
return viewV2
default:
return null
return nonPlus
}
}
// Refreshes the datasource definition
const refreshDefinition = async () => {
return await getAPI()?.actions.refreshDefinition()
const def = await getDatasourceDefinition({
API,
datasource: get(datasource),
})
definition.set(def)
}
// Saves the datasource definition
@ -113,6 +154,11 @@ export const createActions = context => {
return getAPI()?.actions.canUseColumn(name)
}
// Gets the default number of rows for a single page
const getFeatures = () => {
return getAPI()?.actions.getFeatures()
}
return {
datasource: {
...datasource,
@ -125,6 +171,7 @@ export const createActions = context => {
getRow,
isDatasourceValid,
canUseColumn,
getFeatures,
},
},
}

View File

@ -0,0 +1,124 @@
import { get } from "svelte/store"
export const createActions = context => {
const { columns, stickyColumn, table, viewV2 } = context
const saveDefinition = async () => {
throw "This datasource does not support updating the definition"
}
const saveRow = async () => {
throw "This datasource does not support saving rows"
}
const deleteRows = async () => {
throw "This datasource does not support deleting rows"
}
const getRow = () => {
throw "This datasource does not support fetching individual rows"
}
const isDatasourceValid = datasource => {
// There are many different types and shapes of datasource, so we only
// check that we aren't null
return (
!table.actions.isDatasourceValid(datasource) &&
!viewV2.actions.isDatasourceValid(datasource) &&
datasource?.type != null
)
}
const canUseColumn = name => {
const $columns = get(columns)
const $sticky = get(stickyColumn)
return $columns.some(col => col.name === name) || $sticky?.name === name
}
const getFeatures = () => {
// We don't support any features
return {}
}
return {
nonPlus: {
actions: {
saveDefinition,
addRow: saveRow,
updateRow: saveRow,
deleteRows,
getRow,
isDatasourceValid,
canUseColumn,
getFeatures,
},
},
}
}
// Small util to compare datasource definitions
const isSameDatasource = (a, b) => {
return JSON.stringify(a) === JSON.stringify(b)
}
export const initialise = context => {
const {
datasource,
sort,
filter,
nonPlus,
initialFilter,
initialSortColumn,
initialSortOrder,
fetch,
} = context
// Keep a list of subscriptions so that we can clear them when the datasource
// config changes
let unsubscribers = []
// Observe datasource changes and apply logic for view V2 datasources
datasource.subscribe($datasource => {
// Clear previous subscriptions
unsubscribers?.forEach(unsubscribe => unsubscribe())
unsubscribers = []
if (!nonPlus.actions.isDatasourceValid($datasource)) {
return
}
// Wipe state
filter.set(get(initialFilter))
sort.set({
column: get(initialSortColumn),
order: get(initialSortOrder) || "ascending",
})
// Update fetch when filter changes
unsubscribers.push(
filter.subscribe($filter => {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
return
}
$fetch.update({
filter: $filter,
})
})
)
// Update fetch when sorting changes
unsubscribers.push(
sort.subscribe($sort => {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
return
}
$fetch.update({
sortOrder: $sort.order || "ascending",
sortColumn: $sort.column,
})
})
)
})
}

View File

@ -1,13 +1,10 @@
import { get } from "svelte/store"
import TableFetch from "../../../../fetch/TableFetch"
const SuppressErrors = true
export const createActions = context => {
const { definition, API, datasource, columns, stickyColumn } = context
const refreshDefinition = async () => {
definition.set(await API.fetchTableDefinition(get(datasource).tableId))
}
const { API, datasource, columns, stickyColumn } = context
const saveDefinition = async newDefinition => {
await API.saveTable(newDefinition)
@ -49,10 +46,13 @@ export const createActions = context => {
return $columns.some(col => col.name === name) || $sticky?.name === name
}
const getFeatures = () => {
return new TableFetch({ API }).determineFeatureFlags()
}
return {
table: {
actions: {
refreshDefinition,
saveDefinition,
addRow: saveRow,
updateRow: saveRow,
@ -60,6 +60,7 @@ export const createActions = context => {
getRow,
isDatasourceValid,
canUseColumn,
getFeatures,
},
},
}

View File

@ -1,22 +1,10 @@
import { get } from "svelte/store"
import ViewV2Fetch from "../../../../fetch/ViewV2Fetch"
const SuppressErrors = true
export const createActions = context => {
const { definition, API, datasource, columns, stickyColumn } = context
const refreshDefinition = async () => {
const $datasource = get(datasource)
if (!$datasource) {
definition.set(null)
return
}
const table = await API.fetchTableDefinition($datasource.tableId)
const view = Object.values(table?.views || {}).find(
view => view.id === $datasource.id
)
definition.set(view)
}
const { API, datasource, columns, stickyColumn } = context
const saveDefinition = async newDefinition => {
await API.viewV2.update(newDefinition)
@ -58,10 +46,13 @@ export const createActions = context => {
)
}
const getFeatures = () => {
return new ViewV2Fetch({ API }).determineFeatureFlags()
}
return {
viewV2: {
actions: {
refreshDefinition,
saveDefinition,
addRow: saveRow,
updateRow: saveRow,
@ -69,6 +60,7 @@ export const createActions = context => {
getRow,
isDatasourceValid,
canUseColumn,
getFeatures,
},
},
}

View File

@ -15,9 +15,10 @@ import * as Config from "./config"
import * as Sort from "./sort"
import * as Filter from "./filter"
import * as Notifications from "./notifications"
import * as Table from "./table"
import * as ViewV2 from "./viewV2"
import * as Datasource from "./datasource"
import * as Table from "./datasources/table"
import * as ViewV2 from "./datasources/viewV2"
import * as NonPlus from "./datasources/nonPlus"
const DependencyOrderedStores = [
Sort,
@ -26,6 +27,7 @@ const DependencyOrderedStores = [
Scroll,
Table,
ViewV2,
NonPlus,
Datasource,
Columns,
Rows,

View File

@ -1,7 +1,8 @@
import { writable, derived, get } from "svelte/store"
import { fetchData } from "../../../fetch/fetchData"
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)
@ -93,12 +94,14 @@ export const createActions = context => {
datasource.subscribe(async $datasource => {
// Unsub from previous fetch if one exists
unsubscribe?.()
unsubscribe = null
fetch.set(null)
instanceLoaded.set(false)
loading.set(true)
// Abandon if we don't have a valid datasource
if (!datasource.actions.isDatasourceValid($datasource)) {
error.set("Datasource is invalid")
return
}
@ -108,6 +111,10 @@ export const createActions = context => {
const $filter = get(filter)
const $sort = get(sort)
// Determine how many rows to fetch per page
const features = datasource.actions.getFeatures()
const limit = features?.supportsPagination ? RowPageSize : null
// Create new fetch model
const newFetch = fetchData({
API,
@ -116,7 +123,7 @@ export const createActions = context => {
filter: $filter,
sortColumn: $sort.column,
sortOrder: $sort.order,
limit: RowPageSize,
limit,
paginate: true,
},
})
@ -355,7 +362,7 @@ export const createActions = context => {
// Update row
const saved = await datasource.actions.updateRow({
...row,
...cleanRow(row),
...get(rowChangeCache)[rowId],
})
@ -411,8 +418,17 @@ 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+, overriting any that may already
// exist as we cannot allow duplicates.
if (!$isDatasourcePlus) {
newRow._id = Helpers.uuid()
}
if (!rowCacheMap[newRow._id]) {
rowCacheMap[newRow._id] = true
rowsToAppend.push(newRow)
@ -449,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: {
@ -474,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
})
}
})
}

View File

@ -17,7 +17,7 @@ export const createStores = context => {
}
export const initialise = context => {
const { sort, initialSortColumn, initialSortOrder, definition } = context
const { sort, initialSortColumn, initialSortOrder, schema } = context
// Reset sort when initial sort props change
initialSortColumn.subscribe(newSortColumn => {
@ -28,15 +28,12 @@ export const initialise = context => {
})
// Derive if the current sort column exists in the schema
const sortColumnExists = derived(
[sort, definition],
([$sort, $definition]) => {
if (!$sort?.column || !$definition) {
const sortColumnExists = derived([sort, schema], ([$sort, $schema]) => {
if (!$sort?.column || !$schema) {
return true
}
return $definition.schema?.[$sort.column] != null
}
)
return $schema[$sort.column] != null
})
// Clear sort state if our sort column does not exist
sortColumnExists.subscribe(exists => {

View File

@ -0,0 +1,145 @@
import DataFetch from "./DataFetch.js"
export default class CustomFetch extends DataFetch {
// Gets the correct Budibase type for a JS value
getType(value) {
if (value == null) {
return "string"
}
const type = typeof value
if (type === "object") {
if (Array.isArray(value)) {
// Use our custom array type to render badges
return "array"
}
// Use JSON for objects to ensure they are stringified
return "json"
} else if (!isNaN(value)) {
return "number"
} else {
return "string"
}
}
// Parses the custom data into an array format
parseCustomData(data) {
if (!data) {
return []
}
// Happy path - already an array
if (Array.isArray(data)) {
return data
}
// For strings, try JSON then fall back to attempting a CSV
if (typeof data === "string") {
try {
const js = JSON.parse(data)
return Array.isArray(js) ? js : [js]
} catch (error) {
// Ignore
}
// Try splitting by newlines first
if (data.includes("\n")) {
return data.split("\n").map(x => x.trim())
}
// Split by commas next
return data.split(",").map(x => x.trim())
}
// Other cases we just assume it's a single object and wrap it
return [data]
}
// Enriches the custom data to ensure the structure and format is usable
enrichCustomData(data) {
if (!data?.length) {
return []
}
// Filter out any invalid values
data = data.filter(x => x != null && x !== "" && !Array.isArray(x))
// Ensure all values are packed into objects
return data.map(value => {
if (typeof value === "object") {
return value
}
// Try parsing strings
if (typeof value === "string") {
const split = value.split(",").map(x => x.trim())
let obj = {}
for (let i = 0; i < split.length; i++) {
const suffix = i === 0 ? "" : ` ${i + 1}`
const key = `Value${suffix}`
obj[key] = split[i]
}
return obj
}
// For anything else, wrap in an object
return { Value: value }
})
}
// Extracts and parses the custom data from the datasource definition
getCustomData(datasource) {
return this.enrichCustomData(this.parseCustomData(datasource?.data))
}
async getDefinition(datasource) {
// Try and work out the schema from the array provided
let schema = {}
const data = this.getCustomData(datasource)
if (!data?.length) {
return { schema }
}
// Go through every object and extract all valid keys
for (let datum of data) {
for (let key of Object.keys(datum)) {
if (key === "_id") {
continue
}
if (!schema[key]) {
let type = this.getType(datum[key])
let constraints = {}
// Determine whether we should render text columns as options instead
if (type === "string") {
const uniqueValues = [...new Set(data.map(x => x[key]))]
const uniqueness = uniqueValues.length / data.length
if (uniqueness <= 0.8 && uniqueValues.length > 1) {
type = "options"
constraints.inclusion = uniqueValues
}
}
// Generate options for array columns
else if (type === "array") {
constraints.inclusion = [...new Set(data.map(x => x[key]).flat())]
}
schema[key] = {
type,
constraints,
}
}
}
}
return { schema }
}
async getData() {
const { datasource } = this.options
return {
rows: this.getCustomData(datasource),
hasNextPage: false,
cursor: null,
}
}
}

View File

@ -8,6 +8,7 @@ import FieldFetch from "./FieldFetch.js"
import JSONArrayFetch from "./JSONArrayFetch.js"
import UserFetch from "./UserFetch.js"
import GroupUserFetch from "./GroupUserFetch.js"
import CustomFetch from "./CustomFetch.js"
const DataFetchMap = {
table: TableFetch,
@ -17,6 +18,7 @@ const DataFetchMap = {
link: RelationshipFetch,
user: UserFetch,
groupUser: GroupUserFetch,
custom: CustomFetch,
// Client specific datasource types
provider: NestedProviderFetch,
@ -24,7 +26,18 @@ const DataFetchMap = {
jsonarray: JSONArrayFetch,
}
// Constructs a new fetch model for a certain datasource
export const fetchData = ({ API, datasource, options }) => {
const Fetch = DataFetchMap[datasource?.type] || TableFetch
return new Fetch({ API, datasource, ...options })
}
// Fetches the definition of any type of datasource
export const getDatasourceDefinition = async ({ API, datasource }) => {
const handler = DataFetchMap[datasource?.type]
if (!handler) {
return null
}
const instance = new handler({ API })
return await instance.getDefinition(datasource)
}

View File

@ -1,5 +1,5 @@
export { createAPIClient } from "./api"
export { fetchData } from "./fetch/fetchData"
export { fetchData } from "./fetch"
export { Utils } from "./utils"
export * as Constants from "./constants"
export * from "./stores"

View File

@ -20,6 +20,30 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
[FieldType.BB_REFERENCE]: false,
}
const allowSortColumnByType: Record<FieldType, boolean> = {
[FieldType.STRING]: true,
[FieldType.LONGFORM]: true,
[FieldType.OPTIONS]: true,
[FieldType.NUMBER]: true,
[FieldType.DATETIME]: true,
[FieldType.AUTO]: true,
[FieldType.INTERNAL]: true,
[FieldType.BARCODEQR]: true,
[FieldType.BIGINT]: true,
[FieldType.BOOLEAN]: true,
[FieldType.JSON]: true,
[FieldType.FORMULA]: false,
[FieldType.ATTACHMENT]: false,
[FieldType.ARRAY]: false,
[FieldType.LINK]: false,
[FieldType.BB_REFERENCE]: false,
}
export function canBeDisplayColumn(type: FieldType): boolean {
return !!allowDisplayColumnByType[type]
}
export function canBeSortColumn(type: FieldType): boolean {
return !!allowSortColumnByType[type]
}