CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-29 18:15:49 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #11573 from Budibase/views-v2-frontend

Browse source 
Views V2
This commit is contained in:
Andrew Kingston 2023-08-31 08:54:56 +01:00 committed by GitHub
parent c1f344347d 7a8d042256
commit a531e56ac0
123 changed files with 2464 additions and 1262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/bbui/src/Modal/Modal.svelte
View file

@ -9,6 +9,7 @@
export let fixed = false
export let inline = false
export let disableCancel = false
export let autoFocus = true
const dispatch = createEventDispatcher()
let visible = fixed || inline
@ -53,6 +54,9 @@
}
async function focusModal(node) {
if (!autoFocus) {
return
}
await tick()
// Try to focus first input

2
packages/bbui/src/Tabs/Tabs.svelte
View file

@ -57,10 +57,8 @@
function calculateIndicatorLength() {
if (!vertical) {
width = $tab.info?.width + "px"
height = $tab.info?.height
} else {
height = $tab.info?.height + 4 + "px"
width = $tab.info?.width
}
}

53
packages/builder/src/builderStore/dataBinding.js
View file

@ -351,12 +351,19 @@ const getProviderContextBindings = (asset, dataProviders) => {
schema = info.schema
table = info.table
// For JSON arrays, use the array name as the readable prefix.
// Otherwise use the table name
// Determine what to prefix bindings with
if (datasource.type === "jsonarray") {
// For JSON arrays, use the array name as the readable prefix
const split = datasource.label.split(".")
readablePrefix = split[split.length - 1]
} else if (datasource.type === "viewV2") {
// For views, use the view name
const view = Object.values(table?.views || {}).find(
view => view.id === datasource.id
)
readablePrefix = view?.name
} else {
// Otherwise use the table name
readablePrefix = info.table?.name
}
}
@ -464,7 +471,7 @@ const getComponentBindingCategory = (component, context, def) => {
*/
export const getUserBindings = () => {
let bindings = []
const { schema } = getSchemaForTable(TableNames.USERS)
const { schema } = getSchemaForDatasourcePlus(TableNames.USERS)
const keys = Object.keys(schema).sort()
const safeUser = makePropSafe("user")
@ -714,17 +721,25 @@ export const getActionBindings = (actions, actionId) => {
}
/**
* Gets the schema for a certain table ID.
* Gets the schema for a certain datasource plus.
* The options which can be passed in are:
* formSchema: whether the schema is for a form
* searchableSchema: whether to generate a searchable schema, which may have
* fewer fields than a readable schema
* @param tableId the table ID to get the schema for
* @param resourceId the DS+ resource ID
* @param options options for generating the schema
* @return {{schema: Object, table: Object}}
*/
export const getSchemaForTable = (tableId, options) => {
return getSchemaForDatasource(null, { type: "table", tableId }, options)
export const getSchemaForDatasourcePlus = (resourceId, options) => {
const isViewV2 = resourceId?.includes("view_")
const datasource = isViewV2
? {
type: "viewV2",
id: resourceId,
tableId: resourceId.split("_").slice(1, 3).join("_"),
}
: { type: "table", tableId: resourceId }
return getSchemaForDatasource(null, datasource, options)
}
/**
@ -801,9 +816,21 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
// Determine the schema from the backing entity if not already determined
if (table && !schema) {
if (type === "view") {
// For views, the schema is pulled from the `views` property of the
// table
// Old views
schema = cloneDeep(table.views?.[datasource.name]?.schema)
} else if (type === "viewV2") {
// New views which are DS+
const view = Object.values(table.views || {}).find(
view => view.id === datasource.id
)
schema = cloneDeep(view?.schema)
// Strip hidden fields
Object.keys(schema || {}).forEach(field => {
if (!schema[field].visible) {
delete schema[field]
}
})
} else if (
type === "query" &&
(options.formSchema || options.searchableSchema)
@ -849,12 +876,12 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
// Determine if we should add ID and rev to the schema
const isInternal = table && !table.sql
const isTable = ["table", "link"].includes(datasource.type)
const isDSPlus = ["table", "link", "viewV2"].includes(datasource.type)
// ID is part of the readable schema for all tables
// Rev is part of the readable schema for internal tables only
let addId = isTable
let addRev = isTable && isInternal
let addId = isDSPlus
let addRev = isDSPlus && isInternal
// Don't add ID or rev for form schemas
if (options.formSchema) {
@ -864,7 +891,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
// ID is only searchable for internal tables
else if (options.searchableSchema) {
addId = isTable && isInternal
addId = isDSPlus && isInternal
}
// Add schema properties if required

11
packages/builder/src/builderStore/store/screenTemplates/index.js
View file

@ -1,10 +1,10 @@
import rowListScreen from "./rowListScreen"
import createFromScratchScreen from "./createFromScratchScreen"
const allTemplates = tables => [...rowListScreen(tables)]
const allTemplates = datasources => [...rowListScreen(datasources)]
// Allows us to apply common behaviour to all create() functions
const createTemplateOverride = (frontendState, template) => () => {
const createTemplateOverride = template => () => {
const screen = template.create()
screen.name = screen.props._id
screen.routing.route = screen.routing.route.toLowerCase()
@ -12,14 +12,13 @@ const createTemplateOverride = (frontendState, template) => () => {
return screen
}
export default (frontendState, tables) => {
export default datasources => {
const enrichTemplate = template => ({
...template,
create: createTemplateOverride(frontendState, template),
create: createTemplateOverride(template),
})
const fromScratch = enrichTemplate(createFromScratchScreen)
const tableTemplates = allTemplates(tables).map(enrichTemplate)
const tableTemplates = allTemplates(datasources).map(enrichTemplate)
return [
fromScratch,
...tableTemplates.sort((templateA, templateB) => {

33
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
View file

@ -2,31 +2,26 @@ import sanitizeUrl from "./utils/sanitizeUrl"
import { Screen } from "./utils/Screen"
import { Component } from "./utils/Component"
export default function (tables) {
return tables.map(table => {
export default function (datasources) {
return datasources.map(datasource => {
return {
name: `${table.name} - List`,
create: () => createScreen(table),
name: `${datasource.name} - List`,
create: () => createScreen(datasource),
id: ROW_LIST_TEMPLATE,
table: table._id,
resourceId: datasource.resourceId,
}
})
}
export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
export const rowListUrl = datasource => sanitizeUrl(`/${datasource.name}`)
const generateTableBlock = table => {
const generateTableBlock = datasource => {
const tableBlock = new Component("@budibase/standard-components/tableblock")
tableBlock
.customProps({
title: table.name,
dataSource: {
label: table.name,
name: table._id,
tableId: table._id,
type: "table",
},
title: datasource.name,
dataSource: datasource,
sortOrder: "Ascending",
size: "spectrum--medium",
paginate: true,
@ -36,14 +31,14 @@ const generateTableBlock = table => {
titleButtonText: "Create row",
titleButtonClickBehaviour: "new",
})
.instanceName(`${table.name} - Table block`)
.instanceName(`${datasource.name} - Table block`)
return tableBlock
}
const createScreen = table => {
const createScreen = datasource => {
return new Screen()
.route(rowListUrl(table))
.instanceName(`${table.name} - List`)
.addChild(generateTableBlock(table))
.route(rowListUrl(datasource))
.instanceName(`${datasource.name} - List`)
.addChild(generateTableBlock(datasource))
.json()
}

8
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View file

@ -39,7 +39,7 @@
import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
import { LuceneUtils } from "@budibase/frontend-core"
import {
getSchemaForTable,
getSchemaForDatasourcePlus,
getEnvironmentBindings,
} from "builderStore/dataBinding"
import { Utils } from "@budibase/frontend-core"
@ -67,7 +67,9 @@
$: table = tableId
? $tables.list.find(table => table._id === inputData.tableId)
: { schema: {} }
$: schema = getSchemaForTable(tableId, { searchableSchema: true }).schema
$: schema = getSchemaForDatasourcePlus(tableId, {
searchableSchema: true,
}).schema
$: schemaFields = Object.values(schema || {})
$: queryLimit = tableId?.includes("datasource") ? "∞" : "1000"
$: isTrigger = block?.type === "TRIGGER"
@ -158,7 +160,7 @@
// instead fetch the schema in the backend at runtime.
let schema
if (e.detail?.tableId) {
schema = getSchemaForTable(e.detail.tableId, {
schema = getSchemaForDatasourcePlus(e.detail.tableId, {
searchableSchema: true,
}).schema
}

22
packages/builder/src/components/backend/DataTable/DataTable.svelte → packages/builder/src/components/backend/DataTable/TableDataTable.svelte
View file

@ -26,12 +26,14 @@
$: id = $tables.selected?._id
$: isUsersTable = id === TableNames.USERS
$: isInternal = $tables.selected?.type !== "external"
$: datasource = $datasources.list.find(datasource => {
$: gridDatasource = {
type: "table",
tableId: id,
}
$: tableDatasource = $datasources.list.find(datasource => {
return datasource._id === $tables.selected?.sourceId
})
$: relationshipsEnabled = relationshipSupport(datasource)
$: relationshipsEnabled = relationshipSupport(tableDatasource)
const relationshipSupport = datasource => {
const integration = $integrations[datasource?.source]
@ -54,12 +56,12 @@
<div class="wrapper">
<Grid
{API}
tableId={id}
allowAddRows={!isUsersTable}
allowDeleteRows={!isUsersTable}
datasource={gridDatasource}
canAddRows={!isUsersTable}
canDeleteRows={!isUsersTable}
schemaOverrides={isUsersTable ? userSchemaOverrides : null}
showAvatars={false}
on:updatetable={handleGridTableUpdate}
on:updatedatasource={handleGridTableUpdate}
>
<svelte:fragment slot="filter">
<GridFilterButton />
@ -72,9 +74,7 @@
</svelte:fragment>
<svelte:fragment slot="controls">
{#if isInternal}
<GridCreateViewButton />
{/if}
<GridCreateViewButton />
<GridManageAccessButton />
{#if relationshipsEnabled}
<GridRelationshipButton />

49
packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte Normal file
View file

@ -0,0 +1,49 @@
<script>
import { viewsV2 } from "stores/backend"
import { Grid } from "@budibase/frontend-core"
import { API } from "api"
import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
$: id = $viewsV2.selected?.id
$: datasource = {
type: "viewV2",
id,
tableId: $viewsV2.selected?.tableId,
}
const handleGridViewUpdate = async e => {
viewsV2.replaceView(id, e.detail)
}
</script>
<div class="wrapper">
<Grid
{API}
{datasource}
allowAddRows
allowDeleteRows
showAvatars={false}
on:updatedatasource={handleGridViewUpdate}
>
<svelte:fragment slot="filter">
<GridFilterButton />
</svelte:fragment>
<svelte:fragment slot="controls">
<GridCreateEditRowModal />
<GridManageAccessButton />
</svelte:fragment>
</Grid>
</div>
<style>
.wrapper {
flex: 1 1 auto;
margin: -28px -40px -40px -40px;
display: flex;
flex-direction: column;
background: var(--background);
overflow: hidden;
}
</style>

2
packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
View file

@ -5,6 +5,7 @@
export let resourceId
export let disabled = false
export let requiresLicence
let modal
let resourcePermissions
@ -21,6 +22,7 @@
<Modal bind:this={modal}>
<ManageAccessModal
{resourceId}
{requiresLicence}
levels={$permissions}
permissions={resourcePermissions}
/>

9
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View file

@ -15,6 +15,7 @@
$: tempValue = filters || []
$: schemaFields = Object.values(schema || {})
$: text = getText(filters)
$: selected = tempValue.filter(x => !x.onEmptyFilter)?.length > 0
const getText = filters => {
const count = filters?.filter(filter => filter.field)?.length
@ -22,13 +23,7 @@
}
</script>
<ActionButton
icon="Filter"
quiet
{disabled}
on:click={modal.show}
selected={tempValue?.length > 0}
>
<ActionButton icon="Filter" quiet {disabled} on:click={modal.show} {selected}>
{text}
</ActionButton>
<Modal bind:this={modal}>

4
packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
View file

@ -1,7 +1,7 @@
<script>
import { getContext } from "svelte"
import { Modal, ActionButton } from "@budibase/bbui"
import CreateViewModal from "../../modals/CreateViewModal.svelte"
import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
const { rows, columns } = getContext("grid")
@ -14,5 +14,5 @@
Add view
</ActionButton>
<Modal bind:this={modal}>
<CreateViewModal />
<GridCreateViewModal />
</Modal>

4
packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
View file

@ -2,7 +2,7 @@
import ExportButton from "../ExportButton.svelte"
import { getContext } from "svelte"
const { rows, columns, tableId, sort, selectedRows, filter } =
const { rows, columns, datasource, sort, selectedRows, filter } =
getContext("grid")
$: disabled = !$rows.length || !$columns.length
@ -12,7 +12,7 @@
<span data-ignore-click-outside="true">
<ExportButton
{disabled}
view={$tableId}
view={$datasource.tableId}
filters={$filter}
sorting={{
sortColumn: $sort.column,

11
packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
View file

@ -2,22 +2,19 @@
import TableFilterButton from "../TableFilterButton.svelte"
import { getContext } from "svelte"
const { columns, tableId, filter, table } = getContext("grid")
// Wipe filter whenever table ID changes to avoid using stale filters
$: $tableId, filter.set([])
const { columns, datasource, filter, definition } = getContext("grid")
const onFilter = e => {
filter.set(e.detail || [])
}
</script>
{#key $tableId}
{#key $datasource}
<TableFilterButton
schema={$table?.schema}
schema={$definition?.schema}
filters={$filter}
on:change={onFilter}
disabled={!$columns.length}
tableId={$tableId}
tableId={$datasource.tableId}
/>
{/key}

6
packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
View file

@ -4,12 +4,12 @@
export let disabled = false
const { rows, tableId, table } = getContext("grid")
const { rows, datasource, definition } = getContext("grid")
</script>
<ImportButton
{disabled}
tableId={$tableId}
tableType={$table?.type}
tableId={$datasource?.tableId}
tableType={$definition?.type}
on:importrows={rows.actions.refreshData}
/>

25
packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
View file

@ -1,8 +1,29 @@
<script>
import { licensing, admin } from "stores/portal"
import ManageAccessButton from "../ManageAccessButton.svelte"
import { getContext } from "svelte"
const { tableId } = getContext("grid")
const { datasource } = getContext("grid")
$: resourceId = getResourceID($datasource)
const getResourceID = datasource => {
if (!datasource) {
return null
}
return datasource.type === "table" ? datasource.tableId : datasource.id
}
var requiresLicence
$: {
if ($datasource.type === "viewV2" && !$licensing.isViewPermissionsEnabled) {
const requiredLicense = $admin?.cloud ? "Premium" : "Business"
requiresLicence = {
tier: requiredLicense,
message: `A ${requiredLicense} subscription is required to specify access level roles for this view.`,
}
}
}
</script>
<ManageAccessButton resourceId={$tableId} />
<ManageAccessButton {resourceId} {requiresLicence} />

6
packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
View file

@ -2,12 +2,12 @@
import ExistingRelationshipButton from "../ExistingRelationshipButton.svelte"
import { getContext } from "svelte"
const { table, rows } = getContext("grid")
const { definition, rows } = getContext("grid")
</script>
{#if $table}
{#if $definition}
<ExistingRelationshipButton
table={$table}
table={$definition}
on:updatecolumns={() => rows.actions.refreshData()}
/>
{/if}

38
packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
View file

@ -1,38 +0,0 @@
<script>
import { Input, notifications, ModalContent } from "@budibase/bbui"
import { goto } from "@roxi/routify"
import { views as viewsStore } from "stores/backend"
import { tables } from "stores/backend"
let name
let field
$: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
const saveView = async () => {
name = name?.trim()
if (views.includes(name)) {
notifications.error(`View exists with name ${name}`)
return
}
try {
await viewsStore.save({
name,
tableId: $tables.selected._id,
field,
})
notifications.success(`View ${name} created`)
$goto(`../../view/${encodeURIComponent(name)}`)
} catch (error) {
notifications.error("Error creating view")
}
}
</script>
<ModalContent
title="Create View"
confirmText="Create View"
onConfirm={saveView}
>
<Input label="View Name" thin bind:value={name} />
</ModalContent>

53
packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
View file

@ -7,11 +7,14 @@
notifications,
Body,
ModalContent,
Tags,
Tag,
} from "@budibase/bbui"
import { capitalise } from "helpers"
export let resourceId
export let permissions
export let requiresLicence
async function changePermission(level, role) {
try {
@ -30,22 +33,36 @@
}
</script>
<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
<Body size="S">Specify the minimum access level role for this data.</Body>
<div class="row">
<Label extraSmall grey>Level</Label>
<Label extraSmall grey>Role</Label>
{#each Object.keys(permissions) as level}
<Input value={capitalise(level)} disabled />
<Select
value={permissions[level]}
on:change={e => changePermission(level, e.detail)}
options={$roles}
getOptionLabel={x => x.name}
getOptionValue={x => x._id}
/>
{/each}
</div>
<ModalContent showCancelButton={false} confirmText="Done">
<span slot="header">
Manage Access
{#if requiresLicence}
<span class="lock-tag">
<Tags>
<Tag icon="LockClosed">{requiresLicence.tier}</Tag>
</Tags>
</span>
{/if}
</span>
{#if requiresLicence}
<Body size="S">{requiresLicence.message}</Body>
{:else}
<Body size="S">Specify the minimum access level role for this data.</Body>
<div class="row">
<Label extraSmall grey>Level</Label>
<Label extraSmall grey>Role</Label>
{#each Object.keys(permissions) as level}
<Input value={capitalise(level)} disabled />
<Select
value={permissions[level]}
on:change={e => changePermission(level, e.detail)}
options={$roles}
getOptionLabel={x => x.name}
getOptionValue={x => x._id}
/>
{/each}
</div>
{/if}
</ModalContent>
<style>
@ -54,4 +71,8 @@
grid-template-columns: 1fr 1fr;
grid-gap: var(--spacing-s);
}
.lock-tag {
padding-left: var(--spacing-s);
}
</style>

4
packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
const { rows } = getContext("grid")
const { datasource } = getContext("grid")
</script>
<CreateEditColumn on:updatecolumns={rows.actions.refreshTableDefinition} />
<CreateEditColumn on:updatecolumns={datasource.actions.refreshDefinition} />

60
packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte Normal file
View file

@ -0,0 +1,60 @@
<script>
import { getContext } from "svelte"
import { Input, notifications, ModalContent } from "@budibase/bbui"
import { goto } from "@roxi/routify"
import { viewsV2 } from "stores/backend"
const { filter, sort, definition } = getContext("grid")
let name
$: views = Object.keys($definition?.views || {}).map(x => x.toLowerCase())
$: nameExists = views.includes(name?.trim().toLowerCase())
const enrichSchema = schema => {
// We need to sure that "visible" is set to true for any fields which have
// not yet been saved with grid metadata attached
const cloned = { ...schema }
Object.entries(cloned).forEach(([field, fieldSchema]) => {
if (fieldSchema.visible == null) {
cloned[field] = { ...cloned[field], visible: true }
}
})
return cloned
}
const saveView = async () => {
name = name?.trim()
try {
const newView = await viewsV2.create({
name,
tableId: $definition._id,
query: $filter,
sort: {
field: $sort.column,
order: $sort.order,
},
schema: enrichSchema($definition.schema),
primaryDisplay: $definition.primaryDisplay,
})
notifications.success(`View ${name} created`)
$goto(`../../view/v2/${newView.id}`)
} catch (error) {
notifications.error("Error creating view")
}
}
</script>
<ModalContent
title="Create View"
confirmText="Create View"
onConfirm={saveView}
disabled={nameExists}
>
<Input
label="View Name"
thin
bind:value={name}
error={nameExists ? "A view already exists with that name" : null}
/>
</ModalContent>

27
packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
View file

@ -1,7 +1,14 @@
<script>
import { goto, isActive, params } from "@roxi/routify"
import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
import { database, datasources, queries, tables, views } from "stores/backend"
import {
database,
datasources,
queries,
tables,
views,
viewsV2,
} from "stores/backend"
import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
import NavItem from "components/common/NavItem.svelte"
@ -24,6 +31,7 @@
$tables,
$queries,
$views,
$viewsV2,
openDataSources
)
$: openDataSource = enrichedDataSources.find(x => x.open)
@ -41,6 +49,7 @@
tables,
queries,
views,
viewsV2,
openDataSources
) => {
if (!datasources?.list?.length) {
@ -57,7 +66,8 @@
isActive,
tables,
queries,
views
views,
viewsV2
)
const onlySource = datasources.list.length === 1
return {
@ -106,7 +116,8 @@
isActive,
tables,
queries,
views
views,
viewsV2
) => {
// Check for being on a datasource page
if (params.datasourceId === datasource._id) {
@ -152,10 +163,16 @@
// Check for a matching view
const selectedView = views.selected?.name
const table = options.find(table => {
const viewTable = options.find(table => {
return table.views?.[selectedView] != null
})
return table != null
if (viewTable) {
return true
}
// Check for a matching viewV2
const viewV2Table = options.find(x => x._id === viewsV2.selected?.tableId)
return viewV2Table != null
}
</script>

37
packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
View file

@ -1,5 +1,5 @@
<script>
import { tables, views, database } from "stores/backend"
import { tables, views, viewsV2, database } from "stores/backend"
import { TableNames } from "constants"
import EditTablePopover from "./popovers/EditTablePopover.svelte"
import EditViewPopover from "./popovers/EditViewPopover.svelte"
@ -7,9 +7,6 @@
import { goto, isActive } from "@roxi/routify"
import { userSelectedResourceMap } from "builderStore"
const alphabetical = (a, b) =>
a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
export let sourceId
export let selectTable
@ -18,6 +15,17 @@
table => table.sourceId === sourceId && table._id !== TableNames.USERS
)
.sort(alphabetical)
const alphabetical = (a, b) => {
return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
}
const isViewActive = (view, isActive, views, viewsV2) => {
return (
(isActive("./view/v1") && views.selected?.name === view.name) ||
(isActive("./view/v2") && viewsV2.selected?.id === view.id)
)
}
</script>
{#if $database?._id}
@ -37,18 +45,23 @@
<EditTablePopover {table} />
{/if}
</NavItem>
{#each [...Object.keys(table.views || {})].sort() as viewName, idx (idx)}
{#each [...Object.entries(table.views || {})].sort() as [name, view], idx (idx)}
<NavItem
indentLevel={2}
icon="Remove"
text={viewName}
selected={$isActive("./view") && $views.selected?.name === viewName}
on:click={() => $goto(`./view/${encodeURIComponent(viewName)}`)}
selectedBy={$userSelectedResourceMap[viewName]}
text={name}
selected={isViewActive(view, $isActive, $views, $viewsV2)}
on:click={() => {
if (view.version === 2) {
$goto(`./view/v2/${view.id}`)
} else {
$goto(`./view/v1/${encodeURIComponent(name)}`)
}
}}
selectedBy={$userSelectedResourceMap[name] ||
$userSelectedResourceMap[view.id]}
>
<EditViewPopover
view={{ name: viewName, ...table.views[viewName] }}
/>
<EditViewPopover {view} />
</NavItem>
{/each}
{/each}

7
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View file

@ -35,7 +35,7 @@
screen => screen.autoTableId === table._id
)
willBeDeleted = ["All table data"].concat(
templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
templateScreens.map(screen => `Screen ${screen.routing?.route || ""}`)
)
confirmDeleteDialog.show()
}
@ -44,7 +44,10 @@
const isSelected = $params.tableId === table._id
try {
await tables.delete(table)
await store.actions.screens.delete(templateScreens)
// Screens need deleted one at a time because of undo/redo
for (let screen of templateScreens) {
await store.actions.screens.delete(screen)
}
if (table.type === "external") {
await datasources.fetch()
}

31
packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
View file

@ -1,6 +1,5 @@
<script>
import { goto, params } from "@roxi/routify"
import { views } from "stores/backend"
import { views, viewsV2 } from "stores/backend"
import { cloneDeep } from "lodash/fp"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
@ -24,23 +23,29 @@
const updatedView = cloneDeep(view)
updatedView.name = updatedName
await views.save({
originalName,
...updatedView,
})
if (view.version === 2) {
await viewsV2.save({
originalName,
...updatedView,
})
} else {
await views.save({
originalName,
...updatedView,
})
}
notifications.success("View renamed successfully")
}
async function deleteView() {
try {
const isSelected =
decodeURIComponent($params.viewName) === $views.selectedViewName
const id = view.tableId
await views.delete(view)
notifications.success("View deleted")
if (isSelected) {
$goto(`./table/${id}`)
if (view.version === 2) {
await viewsV2.delete(view)
} else {
await views.delete(view)
}
notifications.success("View deleted")
} catch (error) {
notifications.error("Error deleting view")
}

8
packages/builder/src/components/commandPalette/CommandPalette.svelte
View file

@ -109,7 +109,13 @@
type: "View",
name: view.name,
icon: "Remove",
action: () => $goto(`./data/view/${view.name}`),
action: () => {
if (view.version === 2) {
$goto(`./data/view/v2/${view.id}`)
} else {
$goto(`./data/view/${view.name}`)
}
},
})) ?? []),
...($queries?.list?.map(query => ({
type: "Query",

18
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
View file

@ -1,12 +1,20 @@
<script>
import { Select, Label, Checkbox, Input, Body } from "@budibase/bbui"
import { tables } from "stores/backend"
import { tables, viewsV2 } from "stores/backend"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters
export let bindings = []
$: tableOptions = $tables.list || []
$: tableOptions = $tables.list.map(table => ({
label: table.name,
resourceId: table._id,
}))
$: viewOptions = $viewsV2.list.map(view => ({
label: view.name,
resourceId: view.id,
}))
$: options = [...(tableOptions || []), ...(viewOptions || [])]
</script>
<div class="root">
@ -15,9 +23,9 @@
<Label>Table</Label>
<Select
bind:value={parameters.tableId}
options={tableOptions}
getOptionLabel={table => table.name}
getOptionValue={table => table._id}
{options}
getOptionLabel={x => x.label}
getOptionValue={x => x.resourceId}
/>
<Label small>Row IDs</Label>

22
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
View file

@ -1,10 +1,10 @@
<script>
import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import { tables, viewsV2 } from "stores/backend"
import {
getContextProviderComponents,
getSchemaForTable,
getSchemaForDatasourcePlus,
} from "builderStore/dataBinding"
import SaveFields from "./SaveFields.svelte"
@ -23,7 +23,15 @@
)
$: providerOptions = getProviderOptions(formComponents, schemaComponents)
$: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
$: tableOptions = $tables.list || []
$: tableOptions = $tables.list.map(table => ({
label: table.name,
resourceId: table._id,
}))
$: viewOptions = $viewsV2.list.map(view => ({
label: view.name,
resourceId: view.id,
}))
$: options = [...(tableOptions || []), ...(viewOptions || [])]
// Gets a context definition of a certain type from a component definition
const extractComponentContext = (component, contextType) => {
@ -60,7 +68,7 @@
}
const getSchemaFields = (asset, tableId) => {
const { schema } = getSchemaForTable(tableId)
const { schema } = getSchemaForDatasourcePlus(tableId)
delete schema._id
delete schema._rev
return Object.values(schema || {})
@ -89,9 +97,9 @@
<Label small>Duplicate to Table</Label>
<Select
bind:value={parameters.tableId}
options={tableOptions}
getOptionLabel={option => option.name}
getOptionValue={option => option._id}
{options}
getOptionLabel={option => option.label}
getOptionValue={option => option.resourceId}
/>
<Label small />

18
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
View file

@ -1,21 +1,29 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { tables } from "stores/backend"
import { tables, viewsV2 } from "stores/backend"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters
export let bindings = []
$: tableOptions = $tables.list || []
$: tableOptions = $tables.list.map(table => ({
label: table.name,
resourceId: table._id,
}))
$: viewOptions = $viewsV2.list.map(view => ({
label: view.name,
resourceId: view.id,
}))
$: options = [...(tableOptions || []), ...(viewOptions || [])]
</script>
<div class="root">
<Label>Table</Label>
<Select
bind:value={parameters.tableId}
options={tableOptions}
getOptionLabel={table => table.name}
getOptionValue={table => table._id}
{options}
getOptionLabel={table => table.label}
getOptionValue={table => table.resourceId}
/>
<Label small>Row ID</Label>

26
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
View file

@ -1,10 +1,10 @@
<script>
import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import { tables, viewsV2 } from "stores/backend"
import {
getContextProviderComponents,
getSchemaForTable,
getSchemaForDatasourcePlus,
} from "builderStore/dataBinding"
import SaveFields from "./SaveFields.svelte"
@ -24,8 +24,16 @@
"schema"
)
$: providerOptions = getProviderOptions(formComponents, schemaComponents)
$: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
$: tableOptions = $tables.list || []
$: schemaFields = getSchemaFields(parameters?.tableId)
$: tableOptions = $tables.list.map(table => ({
label: table.name,
resourceId: table._id,
}))
$: viewOptions = $viewsV2.list.map(view => ({
label: view.name,
resourceId: view.id,
}))
$: options = [...(tableOptions || []), ...(viewOptions || [])]
// Gets a context definition of a certain type from a component definition
const extractComponentContext = (component, contextType) => {
@ -61,8 +69,8 @@
})
}
const getSchemaFields = (asset, tableId) => {
const { schema } = getSchemaForTable(tableId)
const getSchemaFields = resourceId => {
const { schema } = getSchemaForDatasourcePlus(resourceId)
return Object.values(schema || {})
}
@ -89,9 +97,9 @@
<Label small>Table</Label>
<Select
bind:value={parameters.tableId}
options={tableOptions}
getOptionLabel={option => option.name}
getOptionValue={option => option._id}
{options}
getOptionLabel={option => option.label}
getOptionValue={option => option.resourceId}
/>
<Label small />

22
packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
View file

@ -15,6 +15,8 @@
import {
tables as tablesStore,
queries as queriesStore,
viewsV2 as viewsV2Store,
views as viewsStore,
} from "stores/backend"
import { datasources, integrations } from "stores/backend"
import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
@ -39,15 +41,17 @@
tableId: m._id,
type: "table",
}))
$: views = $tablesStore.list.reduce((acc, cur) => {
let viewsArr = Object.entries(cur.views || {}).map(([key, value]) => ({
label: key,
name: key,
...value,
type: "view",
}))
return [...acc, ...viewsArr]
}, [])
$: viewsV1 = $viewsStore.list.map(view => ({
...view,
label: view.name,
type: "view",
}))
$: viewsV2 = $viewsV2Store.list.map(view => ({
...view,
label: view.name,
type: "viewV2",
}))
$: views = [...(viewsV1 || []), ...(viewsV2 || [])]
$: queries = $queriesStore.list
.filter(q => showAllQueries || q.queryVerb === "read" || q.readable)
.map(query => ({

39
packages/builder/src/components/design/settings/controls/TableSelect.svelte
View file

@ -1,28 +1,47 @@
<script>
import { Select } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { tables as tablesStore } from "stores/backend"
import { createEventDispatcher, onMount } from "svelte"
import { tables as tablesStore, viewsV2 } from "stores/backend"
export let value
const dispatch = createEventDispatcher()
$: tables = $tablesStore.list.map(m => ({
label: m.name,
tableId: m._id,
$: tables = $tablesStore.list.map(table => ({
...table,
type: "table",
label: table.name,
resourceId: table._id,
}))
$: views = $viewsV2.list.map(view => ({
...view,
type: "viewV2",
label: view.name,
resourceId: view.id,
}))
$: options = [...(tables || []), ...(views || [])]
const onChange = e => {
const dataSource = tables?.find(x => x.tableId === e.detail)
dispatch("change", dataSource)
dispatch(
"change",
options.find(x => x.resourceId === e.detail)
)
}
onMount(() => {
// Migrate old values before "resourceId" existed
if (value && !value.resourceId) {
const view = views.find(x => x.resourceId === value.id)
const table = tables.find(x => x.resourceId === value._id)
dispatch("change", view || table)
}
})
</script>
<Select
on:change={onChange}
value={value?.tableId}
options={tables}
getOptionValue={x => x.tableId}
value={value?.resourceId}
{options}
getOptionValue={x => x.resourceId}
getOptionLabel={x => x.label}
/>

2
packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
View file

@ -1,5 +1,5 @@
<script>
import TableDataTable from "components/backend/DataTable/DataTable.svelte"
import TableDataTable from "components/backend/DataTable/TableDataTable.svelte"
import { tables, database } from "stores/backend"
import { Banner } from "@budibase/bbui"

15
packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
View file

@ -1,14 +1,17 @@
<script>
import { onMount } from "svelte"
import { views } from "stores/backend"
import { views, viewsV2 } from "stores/backend"
import { redirect } from "@roxi/routify"
onMount(async () => {
const { list, selected } = $views
if (selected) {
$redirect(`./${encodeURIComponent(selected?.name)}`)
} else if (list?.length) {
$redirect(`./${encodeURIComponent(list[0].name)}`)
if ($viewsV2.selected) {
$redirect(`./v2/${$viewsV2.selected.id}`)
} else if ($viewsV2.list?.length) {
$redirect(`./v2/${$viewsV2.list[0].id}`)
} else if ($views.selected) {
$redirect(`./${encodeURIComponent($views.selected?.name)}`)
} else if ($views.list?.length) {
$redirect(`./${encodeURIComponent($views.list[0].name)}`)
} else {
$redirect("../")
}

6
packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/_layout.svelte → packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/_layout.svelte
View file

@ -5,15 +5,15 @@
import { onDestroy } from "svelte"
import { store } from "builderStore"
$: viewName = $views.selectedViewName
$: store.actions.websocket.selectResource(viewName)
$: name = $views.selectedViewName
$: store.actions.websocket.selectResource(name)
const stopSyncing = syncURLToState({
urlParam: "viewName",
stateKey: "selectedViewName",
validate: name => $views.list?.some(view => view.name === name),
update: views.select,
fallbackUrl: "../",
fallbackUrl: "../../",
store: views,
routify,
decode: decodeURIComponent,

0
packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/index.svelte → packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/index.svelte
View file

5
packages/builder/src/pages/builder/app/[application]/data/view/v1/index.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("../")
</script>

25
packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/_layout.svelte Normal file
View file

@ -0,0 +1,25 @@
<script>
import { viewsV2 } from "stores/backend"
import { syncURLToState } from "helpers/urlStateSync"
import * as routify from "@roxi/routify"
import { onDestroy } from "svelte"
import { store } from "builderStore"
$: id = $viewsV2.selectedViewId
$: store.actions.websocket.selectResource(id)
const stopSyncing = syncURLToState({
urlParam: "viewId",
stateKey: "selectedViewId",
validate: id => $viewsV2.list?.some(view => view.id === id),
update: viewsV2.select,
fallbackUrl: "../../",
store: viewsV2,
routify,
decode: decodeURIComponent,
})
onDestroy(stopSyncing)
</script>
<slot />

5
packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/index.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import ViewV2DataTable from "components/backend/DataTable/ViewV2DataTable.svelte"
</script>
<ViewV2DataTable />

5
packages/builder/src/pages/builder/app/[application]/data/view/v2/index.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("../")
</script>

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
View file

@ -297,8 +297,12 @@
width: 100%;
top: 50%;
transform: translateY(-50%);
transition: background 130ms ease-out;
}
.divider:hover {
cursor: row-resize;
}
.divider:hover:after {
background: var(--spectrum-global-color-gray-300);
}
</style>

7
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
View file

@ -131,8 +131,7 @@
const completeDatasourceScreenCreation = async () => {
const screens = selectedTemplates.map(template => {
let screenTemplate = template.create()
screenTemplate.datasource = template.datasource
screenTemplate.autoTableId = template.table
screenTemplate.autoTableId = template.resourceId
return screenTemplate
})
await createScreens({ screens, screenAccessRole })
@ -176,10 +175,10 @@
}
</script>
<Modal bind:this={datasourceModal}>
<Modal bind:this={datasourceModal} autoFocus={false}>
<DatasourceModal
onConfirm={confirmScreenDatasources}
initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
initialScreens={!selectedTemplates ? [] : [...selectedTemplates]}
/>
</Modal>

189
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
View file

@ -1,41 +1,30 @@
<script>
import { store } from "builderStore"
import {
ModalContent,
Layout,
notifications,
Icon,
Body,
} from "@budibase/bbui"
import { tables, datasources } from "stores/backend"
import getTemplates from "builderStore/store/screenTemplates"
import { ModalContent, Layout, notifications, Body } from "@budibase/bbui"
import { datasources } from "stores/backend"
import ICONS from "components/backend/DatasourceNavigator/icons"
import { IntegrationNames } from "constants"
import { onMount } from "svelte"
import rowListScreen from "builderStore/store/screenTemplates/rowListScreen"
import DatasourceTemplateRow from "./DatasourceTemplateRow.svelte"
export let onCancel
export let onConfirm
export let initalScreens = []
export let initialScreens = []
let selectedScreens = [...initalScreens]
let selectedScreens = [...initialScreens]
const toggleScreenSelection = (table, datasource) => {
if (selectedScreens.find(s => s.table === table._id)) {
$: filteredSources = $datasources.list?.filter(datasource => {
return datasource.source !== IntegrationNames.REST && datasource["entities"]
})
const toggleSelection = datasource => {
const { resourceId } = datasource
if (selectedScreens.find(s => s.resourceId === resourceId)) {
selectedScreens = selectedScreens.filter(
screen => screen.table !== table._id
screen => screen.resourceId !== resourceId
)
} else {
let partialTemplates = getTemplates($store, $tables.list).reduce(
(acc, template) => {
if (template.table === table._id) {
template.datasource = datasource.name
acc.push(template)
}
return acc
},
[]
)
selectedScreens = [...partialTemplates, ...selectedScreens]
selectedScreens = [...selectedScreens, rowListScreen([datasource])[0]]
}
}
@ -45,18 +34,6 @@
})
}
$: filteredSources = Array.isArray($datasources.list)
? $datasources.list.reduce((acc, datasource) => {
if (
datasource.source !== IntegrationNames.REST &&
datasource["entities"]
) {
acc.push(datasource)
}
return acc
}, [])
: []
onMount(async () => {
try {
await datasources.fetch()
@ -81,6 +58,9 @@
</Body>
<Layout noPadding gap="S">
{#each filteredSources as datasource}
{@const entities = Array.isArray(datasource.entities)
? datasource.entities
: Object.values(datasource.entities || {})}
<div class="data-source-wrap">
<div class="data-source-header">
<svelte:component
@ -90,64 +70,51 @@
/>
<div class="data-source-name">{datasource.name}</div>
</div>
{#if Array.isArray(datasource.entities)}
{#each datasource.entities.filter(table => table._id !== "ta_users") as table}
<div
class="data-source-entry"
class:selected={selectedScreens.find(
x => x.table === table._id
)}
on:click={() => toggleScreenSelection(table, datasource)}
>
<svg
width="16px"
height="16px"
class="spectrum-Icon"
style="color: white"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Table" />
</svg>
{table.name}
{#if selectedScreens.find(x => x.table === table._id)}
<span class="data-source-check">
<Icon size="S" name="CheckmarkCircle" />
</span>
{/if}
</div>
<!-- List all tables -->
{#each entities.filter(table => table._id !== "ta_users") as table}
{@const views = Object.values(table.views || {}).filter(
view => view.version === 2
)}
{@const datasource = {
...table,
// Legacy properties
tableId: table._id,
label: table.name,
// New consistent properties
resourceId: table._id,
name: table.name,
type: "table",
}}
{@const selected = selectedScreens.find(
screen => screen.resourceId === datasource.resourceId
)}
<DatasourceTemplateRow
on:click={() => toggleSelection(datasource)}
{selected}
{datasource}
/>
<!-- List all views inside this table -->
{#each views as view}
{@const datasource = {
...view,
// Legacy properties
label: view.name,
// New consistent properties
resourceId: view.id,
name: view.name,
type: "viewV2",
}}
{@const selected = selectedScreens.find(
x => x.resourceId === datasource.resourceId
)}
<DatasourceTemplateRow
on:click={() => toggleSelection(datasource)}
{selected}
{datasource}
/>
{/each}
{/if}
{#if datasource["entities"] && !Array.isArray(datasource.entities)}
{#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
<div
class="data-source-entry"
class:selected={selectedScreens.find(
x => x.table === datasource.entities[table_key]._id
)}
on:click={() =>
toggleScreenSelection(
datasource.entities[table_key],
datasource
)}
>
<svg
width="16px"
height="16px"
class="spectrum-Icon"
style="color: white"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Table" />
</svg>
{datasource.entities[table_key].name}
{#if selectedScreens.find(x => x.table === datasource.entities[table_key]._id)}
<span class="data-source-check">
<Icon size="S" name="CheckmarkCircle" />
</span>
{/if}
</div>
{/each}
{/if}
{/each}
</div>
{/each}
</Layout>
@ -160,42 +127,10 @@
display: grid;
grid-gap: var(--spacing-s);
}
.data-source-header {
display: flex;
align-items: center;
gap: var(--spacing-m);
padding-bottom: var(--spacing-xs);
}
.data-source-entry {
cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all;
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
border-width: 1px;
display: flex;
align-items: center;
}
.data-source-entry:hover,
.selected {
background: var(--spectrum-alias-background-color-tertiary);
}
.data-source-entry .data-source-check {
margin-left: auto;
}
.data-source-entry :global(.spectrum-Icon) {
min-width: 16px;
}
.data-source-entry .data-source-check :global(.spectrum-Icon) {
color: var(--spectrum-global-color-green-600);
display: block;
}
</style>

42
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceTemplateRow.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
import { Icon } from "@budibase/bbui"
export let datasource
export let selected = false
$: icon = datasource.type === "viewV2" ? "Remove" : "Table"
</script>
<div class="data-source-entry" class:selected on:click>
<Icon name={icon} color="var(--spectrum-global-color-gray-600)" />
{datasource.name}
{#if selected}
<span class="data-source-check">
<Icon size="S" name="CheckmarkCircle" />
</span>
{/if}
</div>
<style>
.data-source-entry {
cursor: pointer;
grid-gap: var(--spacing-m);
padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all;
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
display: flex;
align-items: center;
}
.data-source-entry:hover,
.selected {
background: var(--spectrum-alias-background-color-tertiary);
}
.data-source-check {
margin-left: auto;
}
.data-source-check :global(.spectrum-Icon) {
color: var(--spectrum-global-color-green-600);
}
</style>

1
packages/builder/src/stores/backend/index.js
View file

@ -1,6 +1,7 @@
export { database } from "./database"
export { tables } from "./tables"
export { views } from "./views"
export { viewsV2 } from "./viewsV2"
export { permissions } from "./permissions"
export { roles } from "./roles"
export { datasources, ImportTableError } from "./datasources"

5
packages/builder/src/stores/backend/views.js
View file

@ -9,7 +9,10 @@ export function createViewsStore() {
const derivedStore = derived([store, tables], ([$store, $tables]) => {
let list = []
$tables.list?.forEach(table => {
list = list.concat(Object.values(table?.views || {}))
const views = Object.values(table?.views || {}).filter(view => {
return view.version !== 2
})
list = list.concat(views)
})
return {
...$store,

102
packages/builder/src/stores/backend/viewsV2.js Normal file
View file

@ -0,0 +1,102 @@
import { writable, derived, get } from "svelte/store"
import { tables } from "./"
import { API } from "api"
export function createViewsV2Store() {
const store = writable({
selectedViewId: null,
})
const derivedStore = derived([store, tables], ([$store, $tables]) => {
let list = []
$tables.list?.forEach(table => {
const views = Object.values(table?.views || {}).filter(view => {
return view.version === 2
})
list = list.concat(views)
})
return {
...$store,
list,
selected: list.find(view => view.id === $store.selectedViewId),
}
})
const select = id => {
store.update(state => ({
...state,
selectedViewId: id,
}))
}
const deleteView = async view => {
await API.viewV2.delete(view.id)
replaceView(view.id, null)
}
const create = async view => {
const savedViewResponse = await API.viewV2.create(view)
const savedView = savedViewResponse.data
replaceView(savedView.id, savedView)
return savedView
}
const save = async view => {
const res = await API.viewV2.update(view)
const savedView = res?.data
replaceView(view.id, savedView)
}
// Handles external updates of tables
const replaceView = (viewId, view) => {
if (!viewId) {
return
}
const existingView = get(derivedStore).list.find(view => view.id === viewId)
const tableIndex = get(tables).list.findIndex(table => {
return table._id === view?.tableId || table._id === existingView?.tableId
})
if (tableIndex === -1) {
return
}
// Handle deletion
if (!view) {
tables.update(state => {
delete state.list[tableIndex].views[existingView.name]
return state
})
return
}
// Add new view
if (!existingView) {
tables.update(state => {
state.list[tableIndex].views[view.name] = view
return state
})
}
// Update existing view
else {
tables.update(state => {
// Remove old view
delete state.list[tableIndex].views[existingView.name]
// Add new view
state.list[tableIndex].views[view.name] = view
return state
})
}
}
return {
subscribe: derivedStore.subscribe,
select,
delete: deleteView,
create,
save,
replaceView,
}
}
export const viewsV2 = createViewsV2Store()

4
packages/builder/src/stores/portal/licensing.js
View file

@ -125,6 +125,9 @@ export const createLicensingStore = () => {
const syncAutomationsEnabled = license.features.includes(
Constants.Features.SYNC_AUTOMATIONS
)
const isViewPermissionsEnabled = license.features.includes(
Constants.Features.VIEW_PERMISSIONS
)
store.update(state => {
return {
...state,
@ -140,6 +143,7 @@ export const createLicensingStore = () => {
auditLogsEnabled,
enforceableSSO,
syncAutomationsEnabled,
isViewPermissionsEnabled,
}
})
},

14
packages/client/manifest.json
View file

@ -4622,14 +4622,15 @@
"type": "field/sortable",
"label": "Sort by",
"key": "sortColumn",
"placeholder": "None"
"placeholder": "Default"
},
{
"type": "select",
"label": "Sort order",
"key": "sortOrder",
"options": ["Ascending", "Descending"],
"defaultValue": "Ascending"
"defaultValue": "Ascending",
"dependsOn": "sortColumn"
},
{
"type": "select",
@ -5271,7 +5272,7 @@
},
{
"type": "table",
"label": "Table",
"label": "Data",
"key": "dataSource"
},
{
@ -5443,7 +5444,7 @@
"settings": [
{
"type": "table",
"label": "Table",
"label": "Data",
"key": "dataSource",
"required": true
},
@ -5534,7 +5535,7 @@
"settings": [
{
"type": "table",
"label": "Table",
"label": "Data",
"key": "table",
"required": true
},
@ -5560,7 +5561,8 @@
"label": "Sort order",
"key": "initialSortOrder",
"options": ["Ascending", "Descending"],
"defaultValue": "Ascending"
"defaultValue": "Ascending",
"dependsOn": "initialSortColumn"
},
{
"type": "select",

24
packages/client/src/components/Component.svelte
View file

@ -272,12 +272,36 @@
return missing
})
// Run any migrations
runMigrations(instance, settingsDefinition)
// Force an initial enrichment of the new settings
enrichComponentSettings(get(context), settingsDefinitionMap, {
force: true,
})
}
const runMigrations = (instance, settingsDefinition) => {
settingsDefinition.forEach(setting => {
// Migrate "table" settings to ensure they have a type and resource ID
if (setting.type === "table") {
const val = instance[setting.key]
if (val) {
if (!val.type) {
val.type = "table"
}
if (!val.resourceId) {
if (val.type === "viewV2") {
val.resourceId = val.id
} else {
val.resourceId = val.tableId
}
}
}
}
})
}
const getSettingsDefinitionMap = settingsDefinition => {
let map = {}
settingsDefinition?.forEach(setting => {

18
packages/client/src/components/app/DataProvider.svelte
View file

@ -29,6 +29,9 @@
paginate,
})
// Sanitize schema to remove hidden fields
$: schema = sanitizeSchema($fetch.schema)
// Build our action context
$: actions = [
{
@ -66,7 +69,7 @@
rows: $fetch.rows,
info: $fetch.info,
datasource: dataSource || {},
schema: $fetch.schema,
schema,
rowsLength: $fetch.rows.length,
// Undocumented properties. These aren't supposed to be used in builder
@ -94,6 +97,19 @@
})
}
const sanitizeSchema = schema => {
if (!schema) {
return schema
}
let cloned = { ...schema }
Object.entries(cloned).forEach(([field, fieldSchema]) => {
if (fieldSchema.visible === false) {
delete cloned[field]
}
})
return cloned
}
const addQueryExtension = (key, extension) => {
if (!key || !extension) {
return

13
packages/client/src/components/app/GridBlock.svelte
View file

@ -38,11 +38,8 @@
class:in-builder={$builderStore.inBuilder}
>
<Grid
tableId={table?.tableId}
datasource={table}
{API}
{allowAddRows}
{allowEditRows}
{allowDeleteRows}
{stripeRows}
{initialFilter}
{initialSortColumn}
@ -50,9 +47,13 @@
{fixedRowHeight}
{columnWhitelist}
{schemaOverrides}
canAddRows={allowAddRows}
canEditRows={allowEditRows}
canDeleteRows={allowDeleteRows}
canEditColumns={false}
canExpandRows={false}
canSaveSchema={false}
showControls={false}
allowExpandRows={false}
allowSchemaChanges={false}
notifySuccess={notificationStore.actions.success}
notifyError={notificationStore.actions.error}
/>

6
packages/client/src/components/app/blocks/TableBlock.svelte
View file

@ -47,7 +47,7 @@
// Accommodate old config to ensure delete button does not reappear
$: deleteLabel = sidePanelShowDelete === false ? "" : sidePanelDeleteLabel
$: isDSPlus = dataSource?.type === "table" || dataSource?.type === "viewV2"
$: fetchSchema(dataSource)
$: enrichSearchColumns(searchColumns, schema).then(
val => (enrichedSearchColumns = val)
@ -56,7 +56,7 @@
$: editTitle = getEditTitle(detailsFormBlockId, primaryDisplay)
$: normalFields = getNormalFields(schema)
$: rowClickActions =
clickBehaviour === "actions" || dataSource?.type !== "table"
clickBehaviour === "actions" || !isDSPlus
? onClick
: [
{
@ -78,7 +78,7 @@
},
]
$: buttonClickActions =
titleButtonClickBehaviour === "actions" || dataSource?.type !== "table"
titleButtonClickBehaviour === "actions" || !isDSPlus
? onClickTitleButton
: [
{

4
packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
View file

@ -45,7 +45,7 @@
"##eventHandlerType": "Save Row",
parameters: {
providerId: formId,
tableId: dataSource?.tableId,
tableId: dataSource?.resourceId,
notificationOverride,
},
},
@ -78,7 +78,7 @@
"##eventHandlerType": "Delete Row",
parameters: {
confirm: true,
tableId: dataSource?.tableId,
tableId: dataSource?.resourceId,
rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
notificationOverride,

4
packages/client/src/components/preview/IndicatorSet.svelte
View file

@ -45,7 +45,7 @@
return
}
nextIndicators[idx].visible =
nextIndicators[idx].isSidePanel || entries[0].isIntersecting
nextIndicators[idx].insideSidePanel || entries[0].isIntersecting
if (++callbackCount === observers.length) {
indicators = nextIndicators
updating = false
@ -125,7 +125,7 @@
width: elBounds.width + 4,
height: elBounds.height + 4,
visible: false,
isSidePanel: child.classList.contains("side-panel"),
insideSidePanel: !!child.closest(".side-panel"),
})
})
}

4
packages/client/src/stores/dataSource.js
View file

@ -18,6 +18,8 @@ export const createDataSourceStore = () => {
// Extract table ID
if (dataSource.type === "table" || dataSource.type === "view") {
dataSourceId = dataSource.tableId
} else if (dataSource.type === "viewV2") {
dataSourceId = dataSource.id
}
// Only one side of the relationship is required as a trigger, as it will
@ -79,7 +81,7 @@ export const createDataSourceStore = () => {
// Fetch related table IDs from table schema
let schema
if (options.invalidateRelationships) {
if (options.invalidateRelationships && !dataSourceId?.includes("view_")) {
try {
const definition = await API.fetchTableDefinition(dataSourceId)
schema = definition?.schema

4
packages/client/src/utils/buttonActions.js
View file

@ -42,7 +42,7 @@ const saveRowHandler = async (action, context) => {
}
// Refresh related datasources
await dataSourceStore.actions.invalidateDataSource(row.tableId, {
await dataSourceStore.actions.invalidateDataSource(tableId, {
invalidateRelationships: true,
})
@ -75,7 +75,7 @@ const duplicateRowHandler = async (action, context) => {
}
// Refresh related datasources
await dataSourceStore.actions.invalidateDataSource(row.tableId, {
await dataSourceStore.actions.invalidateDataSource(tableId, {
invalidateRelationships: true,
})

11
packages/client/src/utils/schema.js
View file

@ -6,6 +6,7 @@ import RelationshipFetch from "@budibase/frontend-core/src/fetch/RelationshipFet
import NestedProviderFetch from "@budibase/frontend-core/src/fetch/NestedProviderFetch.js"
import FieldFetch from "@budibase/frontend-core/src/fetch/FieldFetch.js"
import JSONArrayFetch from "@budibase/frontend-core/src/fetch/JSONArrayFetch.js"
import ViewV2Fetch from "@budibase/frontend-core/src/fetch/ViewV2Fetch.js"
/**
* Fetches the schema of any kind of datasource.
@ -21,6 +22,7 @@ export const fetchDatasourceSchema = async (
const handler = {
table: TableFetch,
view: ViewFetch,
viewV2: ViewV2Fetch,
query: QueryFetch,
link: RelationshipFetch,
provider: NestedProviderFetch,
@ -49,6 +51,15 @@ export const fetchDatasourceSchema = async (
return null
}
// Strip hidden fields from views
if (datasource.type === "viewV2") {
Object.keys(schema).forEach(field => {
if (!schema[field].visible) {
delete schema[field]
}
})
}
// Enrich schema with relationships if required
if (definition?.sql && options?.enrichRelationships) {
const relationshipAdditions = await getRelationshipSchemaAdditions(schema)

2
packages/frontend-core/src/api/index.js
View file

@ -23,6 +23,7 @@ import { buildTemplateEndpoints } from "./templates"
import { buildUserEndpoints } from "./user"
import { buildSelfEndpoints } from "./self"
import { buildViewEndpoints } from "./views"
import { buildViewV2Endpoints } from "./viewsV2"
import { buildLicensingEndpoints } from "./licensing"
import { buildGroupsEndpoints } from "./groups"
import { buildPluginEndpoints } from "./plugins"
@ -279,5 +280,6 @@ export const createAPIClient = config => {
...buildEventEndpoints(API),
...buildAuditLogsEndpoints(API),
...buildLogsEndpoints(API),
viewV2: buildViewV2Endpoints(API),
}
}

25
packages/frontend-core/src/api/rows.js
View file

@ -23,7 +23,23 @@ export const buildRowEndpoints = API => ({
return
}
return await API.post({
url: `/api/${row.tableId}/rows`,
url: `/api/${row._viewId || row.tableId}/rows`,
body: row,
suppressErrors,
})
},
/**
* Patches a row in a table.
* @param row the row to patch
* @param suppressErrors whether or not to suppress error notifications
*/
patchRow: async (row, suppressErrors = false) => {
if (!row?.tableId && !row?._viewId) {
return
}
return await API.patch({
url: `/api/${row._viewId || row.tableId}/rows`,
body: row,
suppressErrors,
})
@ -31,7 +47,7 @@ export const buildRowEndpoints = API => ({
/**
* Deletes a row from a table.
* @param tableId the ID of the table to delete from
* @param tableId the ID of the table or view to delete from
* @param rowId the ID of the row to delete
* @param revId the rev of the row to delete
*/
@ -50,10 +66,13 @@ export const buildRowEndpoints = API => ({
/**
* Deletes multiple rows from a table.
* @param tableId the table ID to delete the rows from
* @param tableId the table or view ID to delete the rows from
* @param rows the array of rows to delete
*/
deleteRows: async ({ tableId, rows }) => {
rows?.forEach(row => {
delete row?._viewId
})
return await API.delete({
url: `/api/${tableId}/rows`,
body: {

72
packages/frontend-core/src/api/viewsV2.js Normal file
View file

@ -0,0 +1,72 @@
export const buildViewV2Endpoints = API => ({
/**
* Fetches the definition of a view
* @param viewId the ID of the view to fetch
*/
fetchDefinition: async viewId => {
return await API.get({
url: `/api/v2/views/${viewId}`,
})
},
/**
* Create a new view
* @param view the view object
*/
create: async view => {
return await API.post({
url: `/api/v2/views`,
body: view,
})
},
/**
* Updates a view
* @param view the view object
*/
update: async view => {
return await API.put({
url: `/api/v2/views/${view.id}`,
body: view,
})
},
/**
* Fetches all rows in a view
* @param viewId the id of the view
* @param query the search query
* @param paginate whether to paginate or not
* @param limit page size
* @param bookmark pagination cursor
* @param sort sort column
* @param sortOrder sort order
* @param sortType sort type (text or numeric)
*/
fetch: async ({
viewId,
query,
paginate,
limit,
bookmark,
sort,
sortOrder,
sortType,
}) => {
return await API.post({
url: `/api/v2/views/${viewId}/search`,
body: {
query,
paginate,
limit,
bookmark,
sort,
sortOrder,
sortType,
},
})
},
/**
* Delete a view
* @param viewId the id of the view
*/
delete: async viewId => {
return await API.delete({ url: `/api/v2/views/${viewId}` })
},
})

11
packages/frontend-core/src/components/grid/cells/DataCell.svelte
View file

@ -34,7 +34,7 @@
column.schema.autocolumn ||
column.schema.disabled ||
column.schema.type === "formula" ||
(!$config.allowEditRows && row._id)
(!$config.canEditRows && row._id)
// Register this cell API if the row is focused
$: {
@ -58,9 +58,14 @@
isReadonly: () => readonly,
getType: () => column.schema.type,
getValue: () => row[column.name],
setValue: value => {
setValue: (value, options = { save: true }) => {
validation.actions.setError(cellId, null)
updateValue(row._id, column.name, value)
updateValue({
rowId: row._id,
column: column.name,
value,
save: options?.save,
})
},
}
</script>

8
packages/frontend-core/src/components/grid/cells/GutterCell.svelte
View file

@ -40,7 +40,7 @@
<div
on:click={select}
class="checkbox"
class:visible={$config.allowDeleteRows &&
class:visible={$config.canDeleteRows &&
(disableNumber || rowSelected || rowHovered || rowFocused)}
>
<Checkbox value={rowSelected} {disabled} />
@ -48,14 +48,14 @@
{#if !disableNumber}
<div
class="number"
class:visible={!$config.allowDeleteRows ||
class:visible={!$config.canDeleteRows ||
!(rowSelected || rowHovered || rowFocused)}
>
{row.__idx + 1}
</div>
{/if}
{/if}
{#if rowSelected && $config.allowDeleteRows}
{#if rowSelected && $config.canDeleteRows}
<div class="delete" on:click={() => dispatch("request-bulk-delete")}>
<Icon
name="Delete"
@ -64,7 +64,7 @@
/>
</div>
{:else}
<div class="expand" class:visible={$config.allowExpandRows && expandable}>
<div class="expand" class:visible={$config.canExpandRows && expandable}>
<Icon
size="S"
name="Maximize"

6
packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
View file

@ -56,6 +56,7 @@
popover.hide()
editIsOpen = false
}
const onMouseDown = e => {
if (e.button === 0 && orderable) {
timeout = setTimeout(() => {
@ -116,6 +117,7 @@
columns.actions.saveChanges()
open = false
}
onMount(() => subscribe("close-edit-column", cancelEdit))
</script>
@ -170,7 +172,6 @@
align="right"
offset={0}
popoverTarget={document.getElementById(`grid-${rand}`)}
animate={false}
customZindex={100}
>
{#if editIsOpen}
@ -187,7 +188,7 @@
<MenuItem
icon="Edit"
on:click={editColumn}
disabled={!$config.allowSchemaChanges || column.schema.disabled}
disabled={!$config.canEditColumns || column.schema.disabled}
>
Edit column
</MenuItem>
@ -195,7 +196,6 @@
icon="Label"
on:click={makeDisplayColumn}
disabled={idx === "sticky" ||
!$config.allowSchemaChanges ||
bannedDisplayColumnTypes.includes(column.schema.type)}
>
Use as display column

17
packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
View file

@ -3,7 +3,7 @@
import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
import { getColumnIcon } from "../lib/utils"
const { columns, stickyColumn } = getContext("grid")
const { columns, stickyColumn, dispatch } = getContext("grid")
let open = false
let anchor
@ -11,33 +11,36 @@
$: anyHidden = $columns.some(col => !col.visible)
$: text = getText($columns)
const toggleVisibility = (column, visible) => {
const toggleVisibility = async (column, visible) => {
columns.update(state => {
const index = state.findIndex(col => col.name === column.name)
state[index].visible = visible
return state.slice()
})
columns.actions.saveChanges()
await columns.actions.saveChanges()
dispatch(visible ? "show-column" : "hide-column")
}
const showAll = () => {
const showAll = async () => {
columns.update(state => {
return state.map(col => ({
...col,
visible: true,
}))
})
columns.actions.saveChanges()
await columns.actions.saveChanges()
dispatch("show-column")
}
const hideAll = () => {
const hideAll = async () => {
columns.update(state => {
return state.map(col => ({
...col,
visible: false,
}))
})
columns.actions.saveChanges()
await columns.actions.saveChanges()
dispatch("hide-column")
}
const getText = columns => {

14
packages/frontend-core/src/components/grid/controls/SizeButton.svelte
View file

@ -8,8 +8,14 @@
SmallRowHeight,
} from "../lib/constants"
const { stickyColumn, columns, rowHeight, table, fixedRowHeight } =
getContext("grid")
const {
stickyColumn,
columns,
rowHeight,
definition,
fixedRowHeight,
datasource,
} = getContext("grid")
// Some constants for column width options
const smallColSize = 120
@ -60,8 +66,8 @@
]
const changeRowHeight = height => {
columns.actions.saveTable({
...$table,
datasource.actions.saveDefinition({
...$definition,
rowHeight: height,
})
}

46
packages/frontend-core/src/components/grid/controls/SortButton.svelte
View file

@ -8,7 +8,6 @@
let anchor
$: columnOptions = getColumnOptions($stickyColumn, $columns)
$: checkValidSortColumn($sort.column, $stickyColumn, $columns)
$: orderOptions = getOrderOptions($sort.column, columnOptions)
const getColumnOptions = (stickyColumn, columns) => {
@ -46,8 +45,8 @@
const updateSortColumn = e => {
sort.update(state => ({
...state,
column: e.detail,
order: e.detail ? state.order : "ascending",
}))
}
@ -57,29 +56,6 @@
order: e.detail,
}))
}
// Ensure we never have a sort column selected that is not visible
const checkValidSortColumn = (sortColumn, stickyColumn, columns) => {
if (!sortColumn) {
return
}
if (
sortColumn !== stickyColumn?.name &&
!columns.some(col => col.name === sortColumn)
) {
if (stickyColumn) {
sort.update(state => ({
...state,
column: stickyColumn.name,
}))
} else {
sort.update(state => ({
...state,
column: columns[0]?.name,
}))
}
}
}
</script>
<div bind:this={anchor}>
@ -98,21 +74,23 @@
<Popover bind:open {anchor} align="left">
<div class="content">
<Select
placeholder={null}
placeholder="Default"
value={$sort.column}
options={columnOptions}
autoWidth
on:change={updateSortColumn}
label="Column"
/>
<Select
placeholder={null}
value={$sort.order}
options={orderOptions}
autoWidth
on:change={updateSortOrder}
label="Order"
/>
{#if $sort.column}
<Select
placeholder={null}
value={$sort.order || "ascending"}
options={orderOptions}
autoWidth
on:change={updateSortOrder}
label="Order"
/>
{/if}
</div>
</Popover>

39
packages/frontend-core/src/components/grid/layout/Grid.svelte
View file

@ -1,5 +1,6 @@
<script>
import { setContext, onMount } from "svelte"
import { writable } from "svelte/store"
import { fade } from "svelte/transition"
import { clickOutside, ProgressCircle } from "@budibase/bbui"
import { createEventManagers } from "../lib/events"
@ -28,14 +29,15 @@
} from "../lib/constants"
export let API = null
export let tableId = null
export let datasource = null
export let schemaOverrides = null
export let columnWhitelist = null
export let allowAddRows = true
export let allowExpandRows = true
export let allowEditRows = true
export let allowDeleteRows = true
export let allowSchemaChanges = true
export let canAddRows = true
export let canExpandRows = true
export let canEditRows = true
export let canDeleteRows = true
export let canEditColumns = true
export let canSaveSchema = true
export let stripeRows = false
export let collaboration = true
export let showAvatars = true
@ -50,11 +52,14 @@
// Unique identifier for DOM nodes inside this instance
const rand = Math.random()
// Store props in a store for reference in other stores
const props = writable($$props)
// Build up context
let context = {
API: API || createAPIClient(),
rand,
props: $$props,
props,
}
context = { ...context, ...createEventManagers() }
context = attachStores(context)
@ -71,19 +76,19 @@
contentLines,
gridFocused,
error,
canAddRows,
} = context
// Keep config store up to date with props
$: config.set({
tableId,
$: props.set({
datasource,
schemaOverrides,
columnWhitelist,
allowAddRows,
allowExpandRows,
allowEditRows,
allowDeleteRows,
allowSchemaChanges,
canAddRows,
canExpandRows,
canEditRows,
canDeleteRows,
canEditColumns,
canSaveSchema,
stripeRows,
collaboration,
showAvatars,
@ -155,7 +160,7 @@
</HeaderRow>
<GridBody />
</div>
{#if $canAddRows}
{#if $config.canAddRows}
<NewRow />
{/if}
<div class="overlays">
@ -179,7 +184,7 @@
<ProgressCircle />
</div>
{/if}
{#if allowDeleteRows}
{#if $config.canDeleteRows}
<BulkDeleteHandler />
{/if}
<KeyboardManager />

4
packages/frontend-core/src/components/grid/layout/GridBody.svelte
View file

@ -9,10 +9,10 @@
renderedRows,
renderedColumns,
rowVerticalInversionIndex,
canAddRows,
hoveredRowId,
dispatch,
isDragging,
config,
} = getContext("grid")
let body
@ -43,7 +43,7 @@
invertY={idx >= $rowVerticalInversionIndex}
/>
{/each}
{#if $canAddRows}
{#if $config.canAddRows}
<div
class="blank"
class:highlighted={$hoveredRowId === BlankRowID}

7
packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
View file

@ -1,12 +1,11 @@
<script>
import NewColumnButton from "./NewColumnButton.svelte"
import { getContext } from "svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte"
import HeaderCell from "../cells/HeaderCell.svelte"
import { TempTooltip, TooltipType } from "@budibase/bbui"
const { renderedColumns, config, hasNonAutoColumn, tableId, loading } =
const { renderedColumns, config, hasNonAutoColumn, datasource, loading } =
getContext("grid")
</script>
@ -20,8 +19,8 @@
{/each}
</div>
</GridScrollWrapper>
{#if $config.allowSchemaChanges}
{#key $tableId}
{#if $config.canEditColumns}
{#key $datasource}
<TempTooltip
text="Click here to create your first column"
type={TooltipType.Info}

3
packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
View file

@ -7,6 +7,7 @@
let anchor
let open = false
$: columnsWidth = $renderedColumns.reduce(
(total, col) => (total += col.width),
0
@ -17,6 +18,7 @@
const close = () => {
open = false
}
onMount(() => subscribe("close-edit-column", close))
</script>
@ -35,7 +37,6 @@
align={$renderedColumns.length ? "right" : "left"}
offset={0}
popoverTarget={document.getElementById(`add-column-button`)}
animate={false}
customZindex={100}
>
<div

12
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View file

@ -17,7 +17,7 @@
dispatch,
rows,
focusedCellAPI,
tableId,
datasource,
subscribe,
renderedRows,
renderedColumns,
@ -28,7 +28,7 @@
columnHorizontalInversionIndex,
selectedRows,
loading,
canAddRows,
config,
} = getContext("grid")
let visible = false
@ -38,7 +38,7 @@
$: firstColumn = $stickyColumn || $renderedColumns[0]
$: width = GutterWidth + ($stickyColumn?.width || 0)
$: $tableId, (visible = false)
$: $datasource, (visible = false)
$: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
$: selectedRowCount = Object.values($selectedRows).length
$: hasNoRows = !$rows.length
@ -120,8 +120,8 @@
document.addEventListener("keydown", handleKeyPress)
}
const updateValue = (rowId, columnName, val) => {
newRow[columnName] = val
const updateValue = ({ column, value }) => {
newRow[column] = value
}
const addViaModal = () => {
@ -154,7 +154,7 @@
condition={hasNoRows && !$loading}
type={TooltipType.Info}
>
{#if !visible && !selectedRowCount && $canAddRows}
{#if !visible && !selectedRowCount && $config.canAddRows}
<div
class="new-row-fab"
on:click={() => dispatch("add-row-inline")}

4
packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
View file

@ -16,7 +16,7 @@
renderedRows,
focusedCellId,
hoveredRowId,
canAddRows,
config,
selectedCellMap,
focusedRow,
scrollLeft,
@ -94,7 +94,7 @@
{/if}
</div>
{/each}
{#if $canAddRows}
{#if $config.canAddRows}
<div
class="row new"
on:mouseenter={$isDragging

30
packages/frontend-core/src/components/grid/lib/websocket.js
View file

@ -3,18 +3,21 @@ import { createWebsocket } from "../../../utils"
import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
export const createGridWebsocket = context => {
const { rows, tableId, users, focusedCellId, table, API } = context
const { rows, datasource, users, focusedCellId, definition, API } = context
const socket = createWebsocket("/socket/grid")
const connectToTable = tableId => {
const connectToDatasource = datasource => {
if (!socket.connected) {
return
}
// Identify which table we are editing
const appId = API.getAppID()
socket.emit(
GridSocketEvent.SelectTable,
{ tableId, appId },
GridSocketEvent.SelectDatasource,
{
datasource,
appId,
},
({ users: gridUsers }) => {
users.set(gridUsers)
}
@ -23,7 +26,7 @@ export const createGridWebsocket = context => {
// Built-in events
socket.on("connect", () => {
connectToTable(get(tableId))
connectToDatasource(get(datasource))
})
socket.on("connect_error", err => {
console.log("Failed to connect to grid websocket:", err.message)
@ -48,16 +51,19 @@ export const createGridWebsocket = context => {
})
// Table events
socket.onOther(GridSocketEvent.TableChange, ({ table: newTable }) => {
// Only update table if one exists. If the table was deleted then we don't
// want to know - let the builder navigate away
if (newTable) {
table.set(newTable)
socket.onOther(
GridSocketEvent.DatasourceChange,
({ datasource: newDatasource }) => {
// Only update definition if one exists. If the datasource was deleted
// then we don't want to know - let the builder navigate away
if (newDatasource) {
definition.set(newDatasource)
}
}
})
)
// Change websocket connection when table changes
tableId.subscribe(connectToTable)
datasource.subscribe(connectToDatasource)
// Notify selected cell changes
focusedCellId.subscribe($focusedCellId => {

23
packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
View file

@ -4,7 +4,7 @@
import { NewRowID } from "../lib/constants"
const {
enrichedRows,
rows,
focusedCellId,
visibleColumns,
focusedRow,
@ -16,7 +16,6 @@
config,
menu,
gridFocused,
canAddRows,
} = getContext("grid")
const ignoredOriginSelectors = [
@ -46,12 +45,12 @@
e.preventDefault()
focusFirstCell()
} else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
if ($canAddRows) {
if ($config.canAddRows) {
e.preventDefault()
dispatch("add-row-inline")
}
} else if (e.key === "Delete" || e.key === "Backspace") {
if (Object.keys($selectedRows).length && $config.allowDeleteRows) {
if (Object.keys($selectedRows).length && $config.canDeleteRows) {
dispatch("request-bulk-delete")
}
}
@ -100,7 +99,7 @@
}
break
case "Enter":
if ($canAddRows) {
if ($config.canAddRows) {
dispatch("add-row-inline")
}
}
@ -120,7 +119,7 @@
break
case "Delete":
case "Backspace":
if (Object.keys($selectedRows).length && $config.allowDeleteRows) {
if (Object.keys($selectedRows).length && $config.canDeleteRows) {
dispatch("request-bulk-delete")
} else {
deleteSelectedCell()
@ -131,7 +130,7 @@
break
case " ":
case "Space":
if ($config.allowDeleteRows) {
if ($config.canDeleteRows) {
toggleSelectRow()
}
break
@ -143,7 +142,7 @@
// Focuses the first cell in the grid
const focusFirstCell = () => {
const firstRow = $enrichedRows[0]
const firstRow = $rows[0]
if (!firstRow) {
return
}
@ -184,7 +183,7 @@
if (!$focusedRow) {
return
}
const newRow = $enrichedRows[$focusedRow.__idx + delta]
const newRow = $rows[$focusedRow.__idx + delta]
if (newRow) {
const split = $focusedCellId.split("-")
$focusedCellId = `${newRow._id}-${split[1]}`
@ -216,13 +215,15 @@
if ($focusedCellAPI && !$focusedCellAPI.isReadonly()) {
const type = $focusedCellAPI.getType()
if (type === "number" && keyCodeIsNumber(keyCode)) {
$focusedCellAPI.setValue(parseInt(key))
// Update the value locally but don't save it yet
$focusedCellAPI.setValue(parseInt(key), { save: false })
$focusedCellAPI.focus()
} else if (
["string", "barcodeqr", "longform"].includes(type) &&
(keyCodeIsLetter(keyCode) || keyCodeIsNumber(keyCode))
) {
$focusedCellAPI.setValue(key)
// Update the value locally but don't save it yet
$focusedCellAPI.setValue(key, { save: false })
$focusedCellAPI.focus()
}
}

9
packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
View file

@ -17,7 +17,6 @@
focusedCellAPI,
focusedRowId,
notifications,
canAddRows,
} = getContext("grid")
$: style = makeStyle($menu)
@ -68,9 +67,7 @@
</MenuItem>
<MenuItem
icon="Maximize"
disabled={isNewRow ||
!$config.allowEditRows ||
!$config.allowExpandRows}
disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
on:click={() => dispatch("edit-row", $focusedRow)}
on:click={menu.actions.close}
>
@ -94,14 +91,14 @@
</MenuItem>
<MenuItem
icon="Duplicate"
disabled={isNewRow || !$canAddRows}
disabled={isNewRow || !$config.canAddRows}
on:click={duplicate}
>
Duplicate row
</MenuItem>
<MenuItem
icon="Delete"
disabled={isNewRow || !$config.allowDeleteRows}
disabled={isNewRow || !$config.canDeleteRows}
on:click={deleteRow}
>
Delete row

2
packages/frontend-core/src/components/grid/stores/clipboard.js
View file

@ -8,7 +8,7 @@ export const createStores = () => {
}
}
export const deriveStores = context => {
export const createActions = context => {
const { copiedCell, focusedCellAPI } = context
const copy = () => {

138
packages/frontend-core/src/components/grid/stores/columns.js
View file

@ -35,20 +35,10 @@ export const createStores = () => {
[]
)
// Checks if we have a certain column by name
const hasColumn = column => {
const $columns = get(columns)
const $sticky = get(stickyColumn)
return $columns.some(col => col.name === column) || $sticky?.name === column
}
return {
columns: {
...columns,
subscribe: enrichedColumns.subscribe,
actions: {
hasColumn,
},
},
stickyColumn,
visibleColumns,
@ -56,12 +46,35 @@ export const createStores = () => {
}
export const deriveStores = context => {
const { table, columns, stickyColumn, API, dispatch, config } = context
const { columns, stickyColumn } = context
// Updates the tables primary display column
// Derive if we have any normal columns
const hasNonAutoColumn = derived(
[columns, stickyColumn],
([$columns, $stickyColumn]) => {
let allCols = $columns || []
if ($stickyColumn) {
allCols = [...allCols, $stickyColumn]
}
const normalCols = allCols.filter(column => {
return !column.schema?.autocolumn
})
return normalCols.length > 0
}
)
return {
hasNonAutoColumn,
}
}
export const createActions = context => {
const { columns, stickyColumn, datasource, definition } = context
// Updates the datasources primary display column
const changePrimaryDisplay = async column => {
return await saveTable({
...get(table),
return await datasource.actions.saveDefinition({
...get(definition),
primaryDisplay: column,
})
}
@ -83,29 +96,14 @@ export const deriveStores = context => {
await saveChanges()
}
// Derive if we have any normal columns
const hasNonAutoColumn = derived(
[columns, stickyColumn],
([$columns, $stickyColumn]) => {
let allCols = $columns || []
if ($stickyColumn) {
allCols = [...allCols, $stickyColumn]
}
const normalCols = allCols.filter(column => {
return !column.schema?.autocolumn
})
return normalCols.length > 0
}
)
// Persists column changes by saving metadata against table schema
// Persists column changes by saving metadata against datasource schema
const saveChanges = async () => {
const $columns = get(columns)
const $table = get(table)
const $definition = get(definition)
const $stickyColumn = get(stickyColumn)
const newSchema = cloneDeep($table.schema)
const newSchema = cloneDeep($definition.schema)
// Build new updated table schema
// Build new updated datasource schema
Object.keys(newSchema).forEach(column => {
// Respect order specified by columns
const index = $columns.findIndex(x => x.name === column)
@ -125,31 +123,17 @@ export const deriveStores = context => {
}
})
await saveTable({ ...$table, schema: newSchema })
}
const saveTable = async newTable => {
// Update local state
table.set(newTable)
// Update server
if (get(config).allowSchemaChanges) {
await API.saveTable(newTable)
}
// Broadcast change to external state can be updated, as this change
// will not be received by the builder websocket because we caused it ourselves
dispatch("updatetable", newTable)
await datasource.actions.saveDefinition({
...$definition,
schema: newSchema,
})
}
return {
hasNonAutoColumn,
columns: {
...columns,
actions: {
...columns.actions,
saveChanges,
saveTable,
changePrimaryDisplay,
changeAllColumnWidths,
},
@ -158,51 +142,7 @@ export const deriveStores = context => {
}
export const initialise = context => {
const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } =
context
const schema = derived(
[table, schemaOverrides, columnWhitelist],
([$table, $schemaOverrides, $columnWhitelist]) => {
if (!$table?.schema) {
return null
}
let newSchema = { ...$table?.schema }
// Edge case to temporarily allow deletion of duplicated user
// fields that were saved with the "disabled" flag set.
// By overriding the saved schema we ensure only overrides can
// set the disabled flag.
// TODO: remove in future
Object.keys(newSchema).forEach(field => {
newSchema[field] = {
...newSchema[field],
disabled: false,
}
})
// Apply schema overrides
Object.keys($schemaOverrides || {}).forEach(field => {
if (newSchema[field]) {
newSchema[field] = {
...newSchema[field],
...$schemaOverrides[field],
}
}
})
// Apply whitelist if specified
if ($columnWhitelist?.length) {
Object.keys(newSchema).forEach(key => {
if (!$columnWhitelist.includes(key)) {
delete newSchema[key]
}
})
}
return newSchema
}
)
const { definition, columns, stickyColumn, schema } = context
// Merge new schema fields with existing schema in order to preserve widths
schema.subscribe($schema => {
@ -211,12 +151,12 @@ export const initialise = context => {
stickyColumn.set(null)
return
}
const $table = get(table)
const $definition = get(definition)
// Find primary display
let primaryDisplay
if ($table.primaryDisplay && $schema[$table.primaryDisplay]) {
primaryDisplay = $table.primaryDisplay
if ($definition.primaryDisplay && $schema[$definition.primaryDisplay]) {
primaryDisplay = $definition.primaryDisplay
}
// Get field list

39
packages/frontend-core/src/components/grid/stores/config.js
View file

@ -1,12 +1,12 @@
import { writable } from "svelte/store"
import { derivedMemo } from "../../../utils"
import { derived } from "svelte/store"
export const createStores = context => {
const config = writable(context.props)
const getProp = prop => derivedMemo(config, $config => $config[prop])
const { props } = context
const getProp = prop => derivedMemo(props, $props => $props[prop])
// Derive and memoize some props so that we can react to them in isolation
const tableId = getProp("tableId")
const datasource = getProp("datasource")
const initialSortColumn = getProp("initialSortColumn")
const initialSortOrder = getProp("initialSortOrder")
const initialFilter = getProp("initialFilter")
@ -17,8 +17,7 @@ export const createStores = context => {
const notifyError = getProp("notifyError")
return {
config,
tableId,
datasource,
initialSortColumn,
initialSortOrder,
initialFilter,
@ -29,3 +28,31 @@ export const createStores = context => {
notifyError,
}
}
export const deriveStores = context => {
const { props, hasNonAutoColumn } = context
// Derive features
const config = derived(
[props, hasNonAutoColumn],
([$props, $hasNonAutoColumn]) => {
let config = { ...$props }
// Disable some features if we're editing a view
if ($props.datasource?.type === "viewV2") {
config.canEditColumns = false
}
// Disable adding rows if we don't have any valid columns
if (!$hasNonAutoColumn) {
config.canAddRows = false
}
return config
}
)
return {
config,
}
}

131
packages/frontend-core/src/components/grid/stores/datasource.js Normal file
View file

@ -0,0 +1,131 @@
import { derived, get, writable } from "svelte/store"
export const createStores = () => {
const definition = writable(null)
return {
definition,
}
}
export const deriveStores = context => {
const { definition, schemaOverrides, columnWhitelist } = context
const schema = derived(
[definition, schemaOverrides, columnWhitelist],
([$definition, $schemaOverrides, $columnWhitelist]) => {
if (!$definition?.schema) {
return null
}
let newSchema = { ...$definition?.schema }
// Apply schema overrides
Object.keys($schemaOverrides || {}).forEach(field => {
if (newSchema[field]) {
newSchema[field] = {
...newSchema[field],
...$schemaOverrides[field],
}
}
})
// Apply whitelist if specified
if ($columnWhitelist?.length) {
Object.keys(newSchema).forEach(key => {
if (!$columnWhitelist.includes(key)) {
delete newSchema[key]
}
})
}
return newSchema
}
)
return {
schema,
}
}
export const createActions = context => {
const { datasource, definition, config, dispatch, table, viewV2 } = context
// Gets the appropriate API for the configured datasource type
const getAPI = () => {
const $datasource = get(datasource)
switch ($datasource?.type) {
case "table":
return table
case "viewV2":
return viewV2
default:
return null
}
}
// Refreshes the datasource definition
const refreshDefinition = async () => {
return await getAPI()?.actions.refreshDefinition()
}
// Saves the datasource definition
const saveDefinition = async newDefinition => {
// Update local state
definition.set(newDefinition)
// Update server
if (get(config).canSaveSchema) {
await getAPI()?.actions.saveDefinition(newDefinition)
}
// Broadcast change to external state can be updated, as this change
// will not be received by the builder websocket because we caused it ourselves
dispatch("updatedatasource", newDefinition)
}
// Adds a row to the datasource
const addRow = async row => {
return await getAPI()?.actions.addRow(row)
}
// Updates an existing row in the datasource
const updateRow = async row => {
return await getAPI()?.actions.updateRow(row)
}
// Deletes rows from the datasource
const deleteRows = async rows => {
return await getAPI()?.actions.deleteRows(rows)
}
// Gets a single row from a datasource
const getRow = async id => {
return await getAPI()?.actions.getRow(id)
}
// Checks if a certain datasource config is valid
const isDatasourceValid = datasource => {
return getAPI()?.actions.isDatasourceValid(datasource)
}
// Checks if this datasource can use a specific column by name
const canUseColumn = name => {
return getAPI()?.actions.canUseColumn(name)
}
return {
datasource: {
...datasource,
actions: {
refreshDefinition,
saveDefinition,
addRow,
updateRow,
deleteRows,
getRow,
isDatasourceValid,
canUseColumn,
},
},
}
}

4
packages/frontend-core/src/components/grid/stores/filter.js
View file

@ -1,10 +1,10 @@
import { writable } from "svelte/store"
import { writable, get } from "svelte/store"
export const createStores = context => {
const { props } = context
// Initialise to default props
const filter = writable(props.initialFilter)
const filter = writable(get(props).initialFilter)
return {
filter,

17
packages/frontend-core/src/components/grid/stores/index.js
View file

@ -15,16 +15,20 @@ 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"
const DependencyOrderedStores = [
Config,
Notifications,
Sort,
Filter,
Bounds,
Scroll,
Rows,
Table,
ViewV2,
Datasource,
Columns,
Rows,
UI,
Validation,
Resize,
@ -34,6 +38,8 @@ const DependencyOrderedStores = [
Menu,
Pagination,
Clipboard,
Config,
Notifications,
]
export const attachStores = context => {
@ -47,6 +53,11 @@ export const attachStores = context => {
context = { ...context, ...store.deriveStores?.(context) }
}
// Action creation
for (let store of DependencyOrderedStores) {
context = { ...context, ...store.createActions?.(context) }
}
// Initialise any store logic
for (let store of DependencyOrderedStores) {
store.initialise?.(context)

2
packages/frontend-core/src/components/grid/stores/menu.js
View file

@ -12,7 +12,7 @@ export const createStores = () => {
}
}
export const deriveStores = context => {
export const createActions = context => {
const { menu, focusedCellId, rand } = context
const open = (cellId, e) => {

7
packages/frontend-core/src/components/grid/stores/pagination.js
View file

@ -1,4 +1,4 @@
import { derived } from "svelte/store"
import { derived, get } from "svelte/store"
export const initialise = context => {
const { scrolledRowCount, rows, visualRowCapacity } = context
@ -11,13 +11,12 @@ export const initialise = context => {
[scrolledRowCount, rowCount, visualRowCapacity],
([$scrolledRowCount, $rowCount, $visualRowCapacity]) => {
return Math.max(0, $rowCount - $scrolledRowCount - $visualRowCapacity)
},
100
}
)
// Fetch next page when fewer than 25 remaining rows to scroll
remainingRows.subscribe(remaining => {
if (remaining < 25) {
if (remaining < 25 && get(rowCount)) {
rows.actions.loadNextPage()
}
})

2
packages/frontend-core/src/components/grid/stores/reorder.js
View file

@ -23,7 +23,7 @@ export const createStores = () => {
}
}
export const deriveStores = context => {
export const createActions = context => {
const {
reorder,
columns,

2
packages/frontend-core/src/components/grid/stores/resize.js
View file

@ -19,7 +19,7 @@ export const createStores = () => {
}
}
export const deriveStores = context => {
export const createActions = context => {
const { resize, columns, stickyColumn, ui } = context
// Starts resizing a certain column

162
packages/frontend-core/src/components/grid/stores/rows.js
View file

@ -3,30 +3,24 @@ import { fetchData } from "../../../fetch/fetchData"
import { NewRowID, RowPageSize } from "../lib/constants"
import { tick } from "svelte"
const SuppressErrors = true
export const createStores = () => {
const rows = writable([])
const table = writable(null)
const loading = writable(false)
const loaded = writable(false)
const rowChangeCache = writable({})
const inProgressChanges = writable({})
const hasNextPage = writable(false)
const error = writable(null)
const fetch = writable(null)
// Generate a lookup map to quick find a row by ID
const rowLookupMap = derived(
rows,
$rows => {
let map = {}
for (let i = 0; i < $rows.length; i++) {
map[$rows[i]._id] = i
}
return map
},
{}
)
const rowLookupMap = derived(rows, $rows => {
let map = {}
for (let i = 0; i < $rows.length; i++) {
map[$rows[i]._id] = i
}
return map
})
// Mark loaded as true if we've ever stopped loading
let hasStartedLoading = false
@ -38,10 +32,25 @@ export const createStores = () => {
}
})
// Enrich rows with an index property and any pending changes
const enrichedRows = derived(
[rows, rowChangeCache],
([$rows, $rowChangeCache]) => {
return $rows.map((row, idx) => ({
...row,
...$rowChangeCache[row._id],
__idx: idx,
}))
}
)
return {
rows,
rows: {
...rows,
subscribe: enrichedRows.subscribe,
},
fetch,
rowLookupMap,
table,
loaded,
loading,
rowChangeCache,
@ -51,15 +60,15 @@ export const createStores = () => {
}
}
export const deriveStores = context => {
export const createActions = context => {
const {
rows,
rowLookupMap,
table,
definition,
filter,
loading,
sort,
tableId,
datasource,
API,
scroll,
validation,
@ -71,37 +80,29 @@ export const deriveStores = context => {
hasNextPage,
error,
notifications,
fetch,
} = context
const instanceLoaded = writable(false)
const fetch = writable(null)
// Local cache of row IDs to speed up checking if a row exists
let rowCacheMap = {}
// Enrich rows with an index property and any pending changes
const enrichedRows = derived(
[rows, rowChangeCache],
([$rows, $rowChangeCache]) => {
return $rows.map((row, idx) => ({
...row,
...$rowChangeCache[row._id],
__idx: idx,
}))
},
[]
)
// Reset everything when table ID changes
// Reset everything when datasource changes
let unsubscribe = null
let lastResetKey = null
tableId.subscribe(async $tableId => {
datasource.subscribe(async $datasource => {
// Unsub from previous fetch if one exists
unsubscribe?.()
fetch.set(null)
instanceLoaded.set(false)
loading.set(true)
// Tick to allow other reactive logic to update stores when table ID changes
// Abandon if we don't have a valid datasource
if (!datasource.actions.isDatasourceValid($datasource)) {
return
}
// Tick to allow other reactive logic to update stores when datasource changes
// before proceeding. This allows us to wipe filters etc if needed.
await tick()
const $filter = get(filter)
@ -110,10 +111,7 @@ export const deriveStores = context => {
// Create new fetch model
const newFetch = fetchData({
API,
datasource: {
type: "table",
tableId: $tableId,
},
datasource: $datasource,
options: {
filter: $filter,
sortColumn: $sort.column,
@ -142,7 +140,7 @@ export const deriveStores = context => {
const previousResetKey = lastResetKey
lastResetKey = $fetch.resetKey
// If resetting rows due to a table change, wipe data and wait for
// If resetting rows due to a datasource change, wipe data and wait for
// derived stores to compute. This prevents stale data being passed
// to cells when we save the new schema.
if (!$instanceLoaded && previousResetKey) {
@ -152,16 +150,12 @@ export const deriveStores = context => {
// Reset state properties when dataset changes
if (!$instanceLoaded || resetRows) {
table.set($fetch.definition)
sort.set({
column: $fetch.sortColumn,
order: $fetch.sortOrder,
})
definition.set($fetch.definition)
}
// Reset scroll state when data changes
if (!$instanceLoaded) {
// Reset both top and left for a new table ID
// Reset both top and left for a new datasource ID
instanceLoaded.set(true)
scroll.set({ top: 0, left: 0 })
} else if (resetRows) {
@ -180,19 +174,6 @@ export const deriveStores = context => {
fetch.set(newFetch)
})
// Update fetch when filter or sort config changes
filter.subscribe($filter => {
get(fetch)?.update({
filter: $filter,
})
})
sort.subscribe($sort => {
get(fetch)?.update({
sortOrder: $sort.order,
sortColumn: $sort.column,
})
})
// Gets a row by ID
const getRow = id => {
const index = get(rowLookupMap)[id]
@ -211,7 +192,7 @@ export const deriveStores = context => {
let erroredColumns = []
let missingColumns = []
for (let column of keys) {
if (columns.actions.hasColumn(column)) {
if (datasource.actions.canUseColumn(column)) {
erroredColumns.push(column)
} else {
missingColumns.push(column)
@ -252,11 +233,9 @@ export const deriveStores = context => {
// Adds a new row
const addRow = async (row, idx, bubble = false) => {
try {
// Create row
const newRow = await API.saveRow(
{ ...row, tableId: get(tableId) },
SuppressErrors
)
// Create row. Spread row so we can mutate and enrich safely.
let newRow = { ...row }
newRow = await datasource.actions.addRow(newRow)
// Update state
if (idx != null) {
@ -294,21 +273,6 @@ export const deriveStores = context => {
}
}
// Fetches a row by ID using the search endpoint
const fetchRow = async id => {
const res = await API.searchTable({
tableId: get(tableId),
limit: 1,
query: {
equal: {
_id: id,
},
},
paginate: false,
})
return res?.rows?.[0]
}
// Replaces a row in state with the newly defined row, handling updates,
// addition and deletion
const replaceRow = (id, row) => {
@ -337,7 +301,7 @@ export const deriveStores = context => {
// Refreshes a specific row
const refreshRow = async id => {
const row = await fetchRow(id)
const row = await datasource.actions.getRow(id)
replaceRow(id, row)
}
@ -347,7 +311,7 @@ export const deriveStores = context => {
}
// Patches a row with some changes
const updateRow = async (rowId, changes) => {
const updateRow = async (rowId, changes, options = { save: true }) => {
const $rows = get(rows)
const $rowLookupMap = get(rowLookupMap)
const index = $rowLookupMap[rowId]
@ -377,16 +341,23 @@ export const deriveStores = context => {
},
}))
// Stop here if we don't want to persist the change
if (!options?.save) {
return
}
// Save change
try {
inProgressChanges.update(state => ({
...state,
[rowId]: true,
}))
const saved = await API.saveRow(
{ ...row, ...get(rowChangeCache)[rowId] },
SuppressErrors
)
// Update row
const saved = await datasource.actions.updateRow({
...row,
...get(rowChangeCache)[rowId],
})
// Update state after a successful change
if (saved?._id) {
@ -412,8 +383,8 @@ export const deriveStores = context => {
}
// Updates a value of a row
const updateValue = async (rowId, column, value) => {
return await updateRow(rowId, { [column]: value })
const updateValue = async ({ rowId, column, value, save = true }) => {
return await updateRow(rowId, { [column]: value }, { save })
}
// Deletes an array of rows
@ -426,10 +397,7 @@ export const deriveStores = context => {
rowsToDelete.forEach(row => {
delete row.__idx
})
await API.deleteRows({
tableId: get(tableId),
rows: rowsToDelete,
})
await datasource.actions.deleteRows(rowsToDelete)
// Update state
handleRemoveRows(rowsToDelete)
@ -473,12 +441,6 @@ export const deriveStores = context => {
get(fetch)?.nextPage()
}
// Refreshes the schema of the data fetch subscription
const refreshTableDefinition = async () => {
const definition = await API.fetchTableDefinition(get(tableId))
table.set(definition)
}
// Checks if we have a row with a certain ID
const hasRow = id => {
if (id === NewRowID) {
@ -498,7 +460,6 @@ export const deriveStores = context => {
})
return {
enrichedRows,
rows: {
...rows,
actions: {
@ -513,7 +474,6 @@ export const deriveStores = context => {
refreshRow,
replaceRow,
refreshData,
refreshTableDefinition,
},
},
}

35
packages/frontend-core/src/components/grid/stores/sort.js
View file

@ -1,12 +1,14 @@
import { writable } from "svelte/store"
import { derived, get } from "svelte/store"
import { memo } from "../../../utils"
export const createStores = context => {
const { props } = context
const $props = get(props)
// Initialise to default props
const sort = writable({
column: props.initialSortColumn,
order: props.initialSortOrder || "ascending",
const sort = memo({
column: $props.initialSortColumn,
order: $props.initialSortOrder || "ascending",
})
return {
@ -15,13 +17,34 @@ export const createStores = context => {
}
export const initialise = context => {
const { sort, initialSortColumn, initialSortOrder } = context
const { sort, initialSortColumn, initialSortOrder, definition } = context
// Reset sort when initial sort props change
initialSortColumn.subscribe(newSortColumn => {
sort.update(state => ({ ...state, column: newSortColumn }))
})
initialSortOrder.subscribe(newSortOrder => {
sort.update(state => ({ ...state, order: newSortOrder }))
sort.update(state => ({ ...state, order: newSortOrder || "ascending" }))
})
// Derive if the current sort column exists in the schema
const sortColumnExists = derived(
[sort, definition],
([$sort, $definition]) => {
if (!$sort?.column || !$definition) {
return true
}
return $definition.schema?.[$sort.column] != null
}
)
// Clear sort state if our sort column does not exist
sortColumnExists.subscribe(exists => {
if (!exists) {
sort.set({
column: null,
order: "ascending",
})
}
})
}

129
packages/frontend-core/src/components/grid/stores/table.js Normal file
View file

@ -0,0 +1,129 @@
import { get } from "svelte/store"
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 saveDefinition = async newDefinition => {
await API.saveTable(newDefinition)
}
const saveRow = async row => {
row.tableId = get(datasource)?.tableId
return await API.saveRow(row, SuppressErrors)
}
const deleteRows = async rows => {
await API.deleteRows({
tableId: get(datasource).tableId,
rows,
})
}
const isDatasourceValid = datasource => {
return datasource?.type === "table" && datasource?.tableId
}
const getRow = async id => {
const res = await API.searchTable({
tableId: get(datasource).tableId,
limit: 1,
query: {
equal: {
_id: id,
},
},
paginate: false,
})
return res?.rows?.[0]
}
const canUseColumn = name => {
const $columns = get(columns)
const $sticky = get(stickyColumn)
return $columns.some(col => col.name === name) || $sticky?.name === name
}
return {
table: {
actions: {
refreshDefinition,
saveDefinition,
addRow: saveRow,
updateRow: saveRow,
deleteRows,
getRow,
isDatasourceValid,
canUseColumn,
},
},
}
}
export const initialise = context => {
const {
datasource,
fetch,
filter,
sort,
table,
initialFilter,
initialSortColumn,
initialSortOrder,
} = 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 table datasources
datasource.subscribe($datasource => {
// Clear previous subscriptions
unsubscribers?.forEach(unsubscribe => unsubscribe())
unsubscribers = []
if (!table.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 ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
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 ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
sortOrder: $sort.order || "ascending",
sortColumn: $sort.column,
})
})
)
})
}

60
packages/frontend-core/src/components/grid/stores/ui.js
View file

@ -14,7 +14,7 @@ export const createStores = context => {
const focusedCellAPI = writable(null)
const selectedRows = writable({})
const hoveredRowId = writable(null)
const rowHeight = writable(props.fixedRowHeight || DefaultRowHeight)
const rowHeight = writable(get(props).fixedRowHeight || DefaultRowHeight)
const previousFocusedRowId = writable(null)
const gridFocused = writable(false)
const isDragging = writable(false)
@ -61,23 +61,13 @@ export const createStores = context => {
}
export const deriveStores = context => {
const {
focusedCellId,
selectedRows,
hoveredRowId,
enrichedRows,
rowLookupMap,
rowHeight,
stickyColumn,
width,
hasNonAutoColumn,
config,
} = context
const { focusedCellId, rows, rowLookupMap, rowHeight, stickyColumn, width } =
context
// Derive the row that contains the selected cell
const focusedRow = derived(
[focusedCellId, rowLookupMap, enrichedRows],
([$focusedCellId, $rowLookupMap, $enrichedRows]) => {
[focusedCellId, rowLookupMap, rows],
([$focusedCellId, $rowLookupMap, $rows]) => {
const rowId = $focusedCellId?.split("-")[0]
// Edge case for new rows
@ -87,18 +77,11 @@ export const deriveStores = context => {
// All normal rows
const index = $rowLookupMap[rowId]
return $enrichedRows[index]
return $rows[index]
},
null
)
// Callback when leaving the grid, deselecting all focussed or selected items
const blur = () => {
focusedCellId.set(null)
selectedRows.set({})
hoveredRowId.set(null)
}
// Derive the amount of content lines to show in cells depending on row height
const contentLines = derived(rowHeight, $rowHeight => {
if ($rowHeight >= LargeRowHeight) {
@ -114,19 +97,24 @@ export const deriveStores = context => {
return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
})
// Derive if we're able to add rows
const canAddRows = derived(
[config, hasNonAutoColumn],
([$config, $hasNonAutoColumn]) => {
return $config.allowAddRows && $hasNonAutoColumn
}
)
return {
canAddRows,
focusedRow,
contentLines,
compact,
}
}
export const createActions = context => {
const { focusedCellId, selectedRows, hoveredRowId } = context
// Callback when leaving the grid, deselecting all focussed or selected items
const blur = () => {
focusedCellId.set(null)
selectedRows.set({})
hoveredRowId.set(null)
}
return {
ui: {
actions: {
blur,
@ -143,7 +131,7 @@ export const initialise = context => {
focusedCellId,
selectedRows,
hoveredRowId,
table,
definition,
rowHeight,
fixedRowHeight,
} = context
@ -199,9 +187,9 @@ export const initialise = context => {
})
// Pull row height from table as long as we don't have a fixed height
table.subscribe($table => {
definition.subscribe($definition => {
if (!get(fixedRowHeight)) {
rowHeight.set($table?.rowHeight || DefaultRowHeight)
rowHeight.set($definition?.rowHeight || DefaultRowHeight)
}
})
@ -210,7 +198,7 @@ export const initialise = context => {
if (height) {
rowHeight.set(height)
} else {
rowHeight.set(get(table)?.rowHeight || DefaultRowHeight)
rowHeight.set(get(definition)?.rowHeight || DefaultRowHeight)
}
})
}

9
packages/frontend-core/src/components/grid/stores/users.js
View file

@ -39,6 +39,14 @@ export const deriveStores = context => {
}
)
return {
selectedCellMap,
}
}
export const createActions = context => {
const { users } = context
const updateUser = user => {
const $users = get(users)
if (!$users.some(x => x.sessionId === user.sessionId)) {
@ -66,6 +74,5 @@ export const deriveStores = context => {
removeUser,
},
},
selectedCellMap,
}
}

212
packages/frontend-core/src/components/grid/stores/viewV2.js Normal file
View file

@ -0,0 +1,212 @@
import { get } from "svelte/store"
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 saveDefinition = async newDefinition => {
await API.viewV2.update(newDefinition)
}
const saveRow = async row => {
const $datasource = get(datasource)
row.tableId = $datasource?.tableId
row._viewId = $datasource?.id
return {
...(await API.saveRow(row, SuppressErrors)),
_viewId: row._viewId,
}
}
const deleteRows = async rows => {
await API.deleteRows({
tableId: get(datasource).id,
rows,
})
}
const getRow = () => {
throw "Views don't support fetching individual rows"
}
const isDatasourceValid = datasource => {
return (
datasource?.type === "viewV2" && datasource?.id && datasource?.tableId
)
}
const canUseColumn = name => {
const $columns = get(columns)
const $sticky = get(stickyColumn)
return (
$columns.some(col => col.name === name && col.visible) ||
$sticky?.name === name
)
}
return {
viewV2: {
actions: {
refreshDefinition,
saveDefinition,
addRow: saveRow,
updateRow: saveRow,
deleteRows,
getRow,
isDatasourceValid,
canUseColumn,
},
},
}
}
export const initialise = context => {
const {
definition,
datasource,
sort,
rows,
filter,
subscribe,
viewV2,
initialFilter,
initialSortColumn,
initialSortOrder,
config,
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 (!viewV2.actions.isDatasourceValid($datasource)) {
return
}
// Reset state for new view
filter.set(get(initialFilter))
sort.set({
column: get(initialSortColumn),
order: get(initialSortOrder) || "ascending",
})
// Keep sort and filter state in line with the view definition
unsubscribers.push(
definition.subscribe($definition => {
if ($definition?.id !== $datasource.id) {
return
}
// Only override sorting if we don't have an initial sort column
if (!get(initialSortColumn)) {
sort.set({
column: $definition.sort?.field,
order: $definition.sort?.order || "ascending",
})
}
// Only override filter state if we don't have an initial filter
if (!get(initialFilter)) {
filter.set($definition.query)
}
})
)
// When sorting changes, ensure view definition is kept up to date
unsubscribers.push(
sort.subscribe(async $sort => {
// If we can mutate schema then update the view definition
if (get(config).canSaveSchema) {
// Ensure we're updating the correct view
const $view = get(definition)
if ($view?.id !== $datasource.id) {
return
}
if (
$sort?.column !== $view.sort?.field ||
$sort?.order !== $view.sort?.order
) {
await datasource.actions.saveDefinition({
...$view,
sort: {
field: $sort.column,
order: $sort.order || "ascending",
},
})
await rows.actions.refreshData()
}
}
// Otherwise just update the fetch
else {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
sortOrder: $sort.order || "ascending",
sortColumn: $sort.column,
})
}
})
)
// When filters change, ensure view definition is kept up to date
unsubscribers?.push(
filter.subscribe(async $filter => {
// If we can mutate schema then update the view definition
if (get(config).canSaveSchema) {
// Ensure we're updating the correct view
const $view = get(definition)
if ($view?.id !== $datasource.id) {
return
}
if (JSON.stringify($filter) !== JSON.stringify($view.query)) {
await datasource.actions.saveDefinition({
...$view,
query: $filter,
})
await rows.actions.refreshData()
}
}
// Otherwise just update the fetch
else {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
filter: $filter,
})
}
})
)
// When hidden we show columns, we need to refresh data in order to fetch
// values for those columns
unsubscribers.push(
subscribe("show-column", async () => {
await rows.actions.refreshData()
})
)
})
}

8
packages/frontend-core/src/components/grid/stores/viewport.js
View file

@ -10,7 +10,7 @@ export const deriveStores = context => {
const {
rowHeight,
visibleColumns,
enrichedRows,
rows,
scrollTop,
scrollLeft,
width,
@ -35,9 +35,9 @@ export const deriveStores = context => {
0
)
const renderedRows = derived(
[enrichedRows, scrolledRowCount, visualRowCapacity],
([$enrichedRows, $scrolledRowCount, $visualRowCapacity]) => {
return $enrichedRows.slice(
[rows, scrolledRowCount, visualRowCapacity],
([$rows, $scrolledRowCount, $visualRowCapacity]) => {
return $rows.slice(
$scrolledRowCount,
$scrolledRowCount + $visualRowCapacity
)

12
packages/frontend-core/src/constants.js
View file

@ -2,6 +2,7 @@
* Operator options for lucene queries
*/
export { OperatorOptions, SqlNumberTypeRangeMap } from "@budibase/shared-core"
export { Feature as Features } from "@budibase/types"
// Cookie names
export const Cookies = {
@ -62,17 +63,6 @@ export const PlanType = {
*/
export const ApiVersion = "1"
export const Features = {
USER_GROUPS: "userGroups",
BACKUPS: "appBackups",
ENVIRONMENT_VARIABLES: "environmentVariables",
AUDIT_LOGS: "auditLogs",
ENFORCEABLE_SSO: "enforceableSSO",
BRANDING: "branding",
SCIM: "scim",
SYNC_AUTOMATIONS: "syncAutomations",
}
// Role IDs
export const Roles = {
ADMIN: "ADMIN",

61
packages/frontend-core/src/fetch/DataFetch.js
View file

@ -110,14 +110,27 @@ export default class DataFetch {
return this.derivedStore.subscribe
}
/**
* Gets the default sort column for this datasource
*/
getDefaultSortColumn(definition, schema) {
if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
return definition.primaryDisplay
} else {
return Object.keys(schema)[0]
}
}
/**
* Fetches a fresh set of data from the server, resetting pagination
*/
async getInitialData() {
const { datasource, filter, paginate } = this.options
// Fetch datasource definition and determine feature flags
// Fetch datasource definition and extract sort properties if configured
const definition = await this.getDefinition(datasource)
// Determine feature flags
const features = this.determineFeatureFlags(definition)
this.features = {
supportsSearch: !!features?.supportsSearch,
@ -132,32 +145,32 @@ export default class DataFetch {
return
}
// If no sort order, default to descending
if (!this.options.sortOrder) {
// If an invalid sort column is specified, delete it
if (this.options.sortColumn && !schema[this.options.sortColumn]) {
this.options.sortColumn = null
}
// If no sort column, get the default column for this datasource
if (!this.options.sortColumn) {
this.options.sortColumn = this.getDefaultSortColumn(definition, schema)
}
// If we don't have a sort column specified then just ensure we don't set
// any sorting params
if (!this.options.sortColumn) {
this.options.sortOrder = "ascending"
}
this.options.sortType = null
} else {
// Otherwise determine what sort type to use base on sort column
const type = schema?.[this.options.sortColumn]?.type
this.options.sortType =
type === "number" || type === "bigint" ? "number" : "string"
// If no sort column, or an invalid sort column is provided, use the primary
// display and fallback to first column
const sortValid = this.options.sortColumn && schema[this.options.sortColumn]
if (!sortValid) {
let newSortColumn
if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
newSortColumn = definition.primaryDisplay
} else {
newSortColumn = Object.keys(schema)[0]
// If no sort order, default to ascending
if (!this.options.sortOrder) {
this.options.sortOrder = "ascending"
}
this.options.sortColumn = newSortColumn
}
const { sortOrder, sortColumn } = this.options
// Determine what sort type to use
let sortType = "string"
if (sortColumn) {
const type = schema?.[sortColumn]?.type
sortType = type === "number" || type === "bigint" ? "number" : "string"
}
this.options.sortType = sortType
// Build the lucene query
let query = this.options.query
@ -174,8 +187,6 @@ export default class DataFetch {
loading: true,
cursors: [],
cursor: null,
sortOrder,
sortColumn,
}))
// Actually fetch data

4
packages/frontend-core/src/fetch/QueryFetch.js
View file

@ -29,6 +29,10 @@ export default class QueryFetch extends DataFetch {
}
}
getDefaultSortColumn() {
return null
}
async getData() {
const { datasource, limit, paginate } = this.options
const { supportsPagination } = this.features

65
packages/frontend-core/src/fetch/ViewV2Fetch.js Normal file
View file

@ -0,0 +1,65 @@
import DataFetch from "./DataFetch.js"
import { get } from "svelte/store"
export default class ViewV2Fetch extends DataFetch {
determineFeatureFlags() {
return {
supportsSearch: true,
supportsSort: true,
supportsPagination: true,
}
}
getSchema(datasource, definition) {
return definition?.schema
}
async getDefinition(datasource) {
if (!datasource?.id) {
return null
}
try {
const res = await this.API.viewV2.fetchDefinition(datasource.id)
return res?.data
} catch (error) {
this.store.update(state => ({
...state,
error,
}))
return null
}
}
getDefaultSortColumn() {
return null
}
async getData() {
const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
this.options
const { cursor, query } = get(this.store)
try {
const res = await this.API.viewV2.fetch({
viewId: datasource.id,
query,
paginate,
limit,
bookmark: cursor,
sort: sortColumn,
sortOrder: sortOrder?.toLowerCase(),
sortType,
})
return {
rows: res?.rows || [],
hasNextPage: res?.hasNextPage || false,
cursor: res?.bookmark || null,
}
} catch (error) {
return {
rows: [],
hasNextPage: false,
error,
}
}
}
}

2
packages/frontend-core/src/fetch/fetchData.js
View file

@ -1,5 +1,6 @@
import TableFetch from "./TableFetch.js"
import ViewFetch from "./ViewFetch.js"
import ViewV2Fetch from "./ViewV2Fetch.js"
import QueryFetch from "./QueryFetch.js"
import RelationshipFetch from "./RelationshipFetch.js"
import NestedProviderFetch from "./NestedProviderFetch.js"
@ -11,6 +12,7 @@ import GroupUserFetch from "./GroupUserFetch.js"
const DataFetchMap = {
table: TableFetch,
view: ViewFetch,
viewV2: ViewV2Fetch,
query: QueryFetch,
link: RelationshipFetch,
user: UserFetch,

2
packages/server/src/api/controllers/datasource.ts
View file

@ -17,7 +17,6 @@ import {
FetchDatasourceInfoRequest,
FetchDatasourceInfoResponse,
IntegrationBase,
RestConfig,
SourceName,
UpdateDatasourceResponse,
UserCtx,
@ -27,7 +26,6 @@ import {
import sdk from "../../sdk"
import { builderSocket } from "../../websockets"
import { setupCreationAuth as googleSetupCreationAuth } from "../../integrations/googlesheets"
import { areRESTVariablesValid } from "../../sdk/app/datasources/datasources"
function getErrorTables(errors: any, errorType: string) {
return Object.entries(errors)

4
packages/server/src/api/controllers/row/index.ts
View file

@ -159,7 +159,7 @@ async function deleteRows(ctx: UserCtx<DeleteRowRequest>) {
for (let row of rows) {
ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
gridSocket?.emitRowDeletion(ctx, row._id!)
gridSocket?.emitRowDeletion(ctx, row)
}
return rows
@ -175,7 +175,7 @@ async function deleteRow(ctx: UserCtx<DeleteRowRequest>) {
await quotas.removeRow()
ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, resp.row)
gridSocket?.emitRowDeletion(ctx, resp.row._id!)
gridSocket?.emitRowDeletion(ctx, resp.row)
return resp
}

11
packages/server/src/api/controllers/row/internal.ts
View file

@ -6,9 +6,9 @@ import {
} from "../../../db/utils"
import * as userController from "../user"
import {
cleanupAttachments,
inputProcessing,
outputProcessing,
cleanupAttachments,
} from "../../../utilities/rowProcessor"
import { FieldTypes } from "../../../constants"
import * as utils from "./utils"
@ -16,12 +16,12 @@ import { cloneDeep } from "lodash/fp"
import { context } from "@budibase/backend-core"
import { finaliseRow, updateRelatedFormula } from "./staticFormula"
import {
UserCtx,
LinkDocumentValue,
Row,
Table,
PatchRowRequest,
PatchRowResponse,
Row,
Table,
UserCtx,
} from "@budibase/types"
import sdk from "../../../sdk"
@ -94,8 +94,7 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
export async function save(ctx: UserCtx) {
let inputs = ctx.request.body
const tableId = utils.getTableId(ctx)
inputs.tableId = tableId
inputs.tableId = utils.getTableId(ctx)
if (!inputs._rev && !inputs._id) {
inputs._id = generateRowID(inputs.tableId)

Some files were not shown because too many files have changed in this diff Show more