CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 12:30:41 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1338 from Budibase/datasource-refactor

Browse source 
Datasource Refactor + Spectrum Table
This commit is contained in:
Andrew Kingston 2021-04-01 19:02:39 +01:00 committed by GitHub
parent 0e9d4fd895 810400d760
commit 6851f59eea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
75 changed files with 1420 additions and 1458 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/cypress/integration/createBinding.spec.js
View file

@ -20,7 +20,7 @@ context("Create Bindings", () => {
cy.get("[data-cy=setting-text] input")
.type("{{}{{}{{} Current User._id {}}{}}")
.blur()
cy.getComponent(componentId).should("have.text", "{{{ user._id }}")
cy.getComponent(componentId).should("have.text", "{{{ [user].[_id] }}")
})
})

2
packages/builder/cypress/integration/createComponents.spec.js
View file

@ -43,7 +43,7 @@ context("Create Components", () => {
it("should create a form and reset to match schema", () => {
cy.addComponent("Form", "Form").then(() => {
cy.get("[data-cy=Settings]").click()
cy.get("[data-cy=setting-datasource]")
cy.get("[data-cy=setting-dataSource]")
.contains("Choose option")
.click()
cy.get(".dropdown")

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

@ -1,11 +1,11 @@
import { cloneDeep } from "lodash/fp"
import { get } from "svelte/store"
import { findComponent, findComponentPath } from "./storeUtils"
import { store } from "builderStore"
import {
tables as tablesStore,
queries as queriesStores,
} from "stores/backend/"
import { findComponentPath } from "./storeUtils"
import { makePropSafe } from "@budibase/string-templates"
import { TableNames } from "../constants"
@ -39,7 +39,7 @@ export const getDataProviderComponents = (asset, componentId) => {
// Filter by only data provider components
return path.filter(component => {
const def = store.actions.components.getDefinition(component._component)
return def?.dataProvider
return def?.context != null
})
}
@ -66,14 +66,25 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
/**
* Gets a datasource object for a certain data provider component
*/
export const getDatasourceForProvider = component => {
export const getDatasourceForProvider = (asset, component) => {
const def = store.actions.components.getDefinition(component?._component)
if (!def) {
return null
}
// If this component has a dataProvider setting, go up the stack and use it
const dataProviderSetting = def.settings.find(setting => {
return setting.type === "dataProvider"
})
if (dataProviderSetting) {
const settingValue = component[dataProviderSetting.key]
const providerId = extractLiteralHandlebarsID(settingValue)
const provider = findComponent(asset.props, providerId)
return getDatasourceForProvider(asset, provider)
}
// Extract datasource from component instance
const validSettingTypes = ["datasource", "table", "schema"]
const validSettingTypes = ["dataSource", "table", "schema"]
const datasourceSetting = def.settings.find(setting => {
return validSettingTypes.includes(setting.type)
})
@ -105,53 +116,68 @@ const getContextBindings = (asset, componentId) => {
// Create bindings for each data provider
dataProviders.forEach(component => {
const isForm = component._component.endsWith("/form")
const datasource = getDatasourceForProvider(component)
let tableName, schema
const def = store.actions.components.getDefinition(component._component)
const contextDefinition = def.context
let schema
let readablePrefix
// Forms are an edge case which do not need table schemas
if (isForm) {
if (contextDefinition.type === "form") {
// Forms do not need table schemas
// Their schemas are built from their component field names
schema = buildFormSchema(component)
tableName = "Fields"
} else {
readablePrefix = "Fields"
} else if (contextDefinition.type === "static") {
// Static contexts are fully defined by the components
schema = {}
const values = contextDefinition.values || []
values.forEach(value => {
schema[value.key] = { name: value.label, type: "string" }
})
} else if (contextDefinition.type === "schema") {
// Schema contexts are generated dynamically depending on their data
const datasource = getDatasourceForProvider(asset, component)
if (!datasource) {
return
}
// Get schema and table for the datasource
const info = getSchemaForDatasource(datasource, isForm)
const info = getSchemaForDatasource(datasource)
schema = info.schema
tableName = info.table?.name
// Add _id and _rev fields for certain types
if (schema && ["table", "link"].includes(datasource.type)) {
schema["_id"] = { type: "string" }
schema["_rev"] = { type: "string" }
}
readablePrefix = info.table?.name
}
if (!schema || !tableName) {
if (!schema) {
return
}
const keys = Object.keys(schema).sort()
// Create bindable properties for each schema field
const safeComponentId = makePropSafe(component._id)
keys.forEach(key => {
const fieldSchema = schema[key]
// Replace certain bindings with a new property to help display components
// Make safe runtime binding and replace certain bindings with a
// new property to help display components
let runtimeBoundKey = key
if (fieldSchema.type === "link") {
runtimeBoundKey = `${key}_text`
} else if (fieldSchema.type === "attachment") {
runtimeBoundKey = `${key}_first`
}
const runtimeBinding = `${safeComponentId}.${makePropSafe(
runtimeBoundKey
)}`
// Optionally use a prefix with readable bindings
let readableBinding = component._instanceName
if (readablePrefix) {
readableBinding += `.${readablePrefix}`
}
readableBinding += `.${fieldSchema.name || key}`
// Create the binding object
bindings.push({
type: "context",
runtimeBinding: `${makePropSafe(component._id)}.${makePropSafe(
runtimeBoundKey
)}`,
readableBinding: `${component._instanceName}.${tableName}.${key}`,
runtimeBinding,
readableBinding,
// Field schema and provider are required to construct relationship
// datasource options, based on bindable properties
fieldSchema,
@ -168,14 +194,12 @@ const getContextBindings = (asset, componentId) => {
*/
const getUserBindings = () => {
let bindings = []
const tables = get(tablesStore).list
const userTable = tables.find(table => table._id === TableNames.USERS)
const schema = {
...userTable.schema,
_id: { type: "string" },
_rev: { type: "string" },
}
const { schema } = getSchemaForDatasource({
type: "table",
tableId: TableNames.USERS,
})
const keys = Object.keys(schema).sort()
const safeUser = makePropSafe("user")
keys.forEach(key => {
const fieldSchema = schema[key]
// Replace certain bindings with a new property to help display components
@ -188,7 +212,7 @@ const getUserBindings = () => {
bindings.push({
type: "context",
runtimeBinding: `user.${runtimeBoundKey}`,
runtimeBinding: `${safeUser}.${makePropSafe(runtimeBoundKey)}`,
readableBinding: `Current User.${key}`,
// Field schema and provider are required to construct relationship
// datasource options, based on bindable properties
@ -212,9 +236,10 @@ const getUrlBindings = asset => {
params.push(part.replace(/:/g, "").replace(/\?/g, ""))
}
})
const safeURL = makePropSafe("url")
return params.map(param => ({
type: "context",
runtimeBinding: `url.${param}`,
runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
readableBinding: `URL.${param}`,
}))
}
@ -236,15 +261,6 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
if (table) {
if (type === "view") {
schema = cloneDeep(table.views?.[datasource.name]?.schema)
// Some calc views don't include a "name" property inside the schema
if (schema) {
Object.keys(schema).forEach(field => {
if (!schema[field].name) {
schema[field].name = field
}
})
}
} else if (type === "query" && isForm) {
schema = {}
const params = table.parameters || []
@ -257,6 +273,21 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
schema = cloneDeep(table.schema)
}
}
// Add _id and _rev fields for certain types
if (schema && !isForm && ["table", "link"].includes(datasource.type)) {
schema["_id"] = { type: "string" }
schema["_rev"] = { type: "string" }
}
// Ensure there are "name" properties for all fields
if (schema) {
Object.keys(schema).forEach(field => {
if (!schema[field].name) {
schema[field].name = field
}
})
}
}
return { schema, table }
}
@ -277,7 +308,7 @@ const buildFormSchema = component => {
if (fieldSetting && component.field) {
const type = fieldSetting.type.split("field/")[1]
if (type) {
schema[component.field] = { name: component.field, type }
schema[component.field] = { type }
}
}
component._children?.forEach(child => {
@ -330,6 +361,14 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
return result
}
/**
* Extracts a component ID from a handlebars expression setting of
* {{ literal [componentId] }}
*/
function extractLiteralHandlebarsID(value) {
return value?.match(/{{\s*literal[\s[]+([a-fA-F0-9]+)[\s\]]*}}/)?.[1]
}
/**
* Converts a readable data binding into a runtime data binding
*/

2
packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
View file

@ -37,7 +37,7 @@ const createScreen = table => {
.customProps({
theme: "spectrum--lightest",
size: "spectrum--medium",
datasource: {
dataSource: {
label: table.name,
tableId: table._id,
type: "table",

52
packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
View file

@ -25,7 +25,7 @@ export default function(tables) {
export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
function generateTitleContainer(table, title, formId) {
function generateTitleContainer(table, title, formId, repeaterId) {
// have to override style for this, its missing margin
const saveButton = makeSaveButton(table, formId).normalStyle({
background: "#000000",
@ -61,10 +61,9 @@ function generateTitleContainer(table, title, formId) {
onClick: [
{
parameters: {
providerId: formId,
rowId: `{{ ${makePropSafe(formId)}._id }}`,
revId: `{{ ${makePropSafe(formId)}._rev }}`,
tableId: table._id,
rowId: `{{ ${makePropSafe(repeaterId)}.${makePropSafe("_id")} }}`,
revId: `{{ ${makePropSafe(repeaterId)}.${makePropSafe("_rev")} }}`,
},
"##eventHandlerType": "Delete Row",
},
@ -84,18 +83,33 @@ function generateTitleContainer(table, title, formId) {
}
const createScreen = table => {
const screen = new Screen()
.component("@budibase/standard-components/rowdetail")
.table(table._id)
.instanceName(`${table.name} - Detail`)
.route(rowDetailUrl(table))
const provider = new Component("@budibase/standard-components/dataprovider")
.instanceName(`Data Provider`)
.customProps({
dataSource: {
label: table.name,
name: `all_${table._id}`,
tableId: table._id,
type: "table",
},
filter: {
_id: `{{ ${makePropSafe("url")}.${makePropSafe("id")} }}`,
},
limit: 1,
})
const repeater = new Component("@budibase/standard-components/repeater")
.instanceName("Repeater")
.customProps({
dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
})
const form = makeMainForm()
.instanceName("Form")
.customProps({
theme: "spectrum--lightest",
size: "spectrum--medium",
datasource: {
dataSource: {
label: table.name,
tableId: table._id,
type: "table",
@ -116,14 +130,24 @@ const createScreen = table => {
// Add all children to the form
const formId = form._json._id
const rowDetailId = screen._json.props._id
const repeaterId = repeater._json._id
const heading = table.primaryDisplay
? `{{ ${makePropSafe(rowDetailId)}.${makePropSafe(table.primaryDisplay)} }}`
? `{{ ${makePropSafe(repeaterId)}.${makePropSafe(table.primaryDisplay)} }}`
: null
form
.addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
.addChild(generateTitleContainer(table, heading || "Edit Row", formId))
.addChild(
generateTitleContainer(table, heading || "Edit Row", formId, repeaterId)
)
.addChild(fieldGroup)
return screen.addChild(form).json()
repeater.addChild(form)
provider.addChild(repeater)
return new Screen()
.component("@budibase/standard-components/container")
.instanceName(`${table.name} - Detail`)
.route(rowDetailUrl(table))
.addChild(provider)
.json()
}

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

@ -2,6 +2,7 @@ import sanitizeUrl from "./utils/sanitizeUrl"
import { newRowUrl } from "./newRowScreen"
import { Screen } from "./utils/Screen"
import { Component } from "./utils/Component"
import { makePropSafe } from "@budibase/string-templates"
export default function(tables) {
return tables.map(table => {
@ -70,21 +71,56 @@ function generateTitleContainer(table) {
}
const createScreen = table => {
const datagrid = new Component("@budibase/standard-components/datagrid")
const provider = new Component("@budibase/standard-components/dataprovider")
.instanceName(`Data Provider`)
.customProps({
datasource: {
dataSource: {
label: table.name,
name: `all_${table._id}`,
tableId: table._id,
type: "table",
},
editable: false,
theme: "alpine",
height: "540",
pagination: true,
detailUrl: `${rowListUrl(table)}/:id`,
})
.instanceName("Grid")
const spectrumTable = new Component("@budibase/standard-components/table")
.customProps({
dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
theme: "spectrum--lightest",
showAutoColumns: false,
quiet: false,
size: "spectrum--medium",
rowCount: 8,
})
.instanceName(`${table.name} Table`)
const safeTableId = makePropSafe(spectrumTable._json._id)
const safeRowId = makePropSafe("_id")
const viewButton = new Component("@budibase/standard-components/button")
.customProps({
text: "View",
onClick: [
{
"##eventHandlerType": "Navigate To",
parameters: {
url: `${rowListUrl(table)}/{{ ${safeTableId}.${safeRowId} }}`,
},
},
],
})
.instanceName("View Button")
.normalStyle({
background: "transparent",
"font-family": "Inter, sans-serif",
"font-weight": "500",
color: "#888",
"border-width": "0",
})
.hoverStyle({
color: "#4285f4",
})
spectrumTable.addChild(viewButton)
provider.addChild(spectrumTable)
const mainContainer = new Component("@budibase/standard-components/container")
.normalStyle({
@ -105,14 +141,12 @@ const createScreen = table => {
.type("div")
.instanceName("Container")
.addChild(generateTitleContainer(table))
.addChild(datagrid)
.addChild(provider)
return new Screen()
.component("@budibase/standard-components/container")
.mainType("div")
.route(rowListUrl(table))
.instanceName(`${table.name} - List`)
.name("")
.addChild(mainContainer)
.json()
}

1
packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
View file

@ -119,6 +119,7 @@ export function makeSaveButton(table, formId) {
{
parameters: {
providerId: formId,
tableId: table._id,
},
"##eventHandlerType": "Save Row",
},

8
packages/builder/src/components/design/AppPreview/componentStructure.json
View file

@ -1,7 +1,8 @@
[
"container",
"datagrid",
"list",
"dataprovider",
"table",
"repeater",
"button",
"search",
{
@ -62,8 +63,7 @@
"children": [
"screenslot",
"navigation",
"login",
"rowdetail"
"login"
]
}
]

25
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte Normal file
View file

@ -0,0 +1,25 @@
<script>
import { Select } from "@budibase/bbui"
import { makePropSafe } from "@budibase/string-templates"
import { currentAsset, store } from "builderStore"
import { findComponentPath } from "builderStore/storeUtils"
export let value
$: path = findComponentPath($currentAsset.props, $store.selectedComponentId)
$: providers = path.filter(
component =>
component._component === "@budibase/standard-components/dataprovider"
)
</script>
<Select thin secondary {value} on:change>
<option value="">Choose option</option>
{#if providers}
{#each providers as component}
<option value={`{{ literal ${makePropSafe(component._id)} }}`}>
{component._instanceName}
</option>
{/each}
{/if}
</Select>

0
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte → packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View file

72
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
View file

@ -1,50 +1,38 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import {
getDataProviderComponents,
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import { tables } from "stores/backend"
import { getBindableProperties } from "builderStore/dataBinding"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
export let parameters
$: dataProviderComponents = getDataProviderComponents(
$currentAsset,
$store.selectedComponentId
)
$: {
// Automatically set rev and table ID based on row ID
if (parameters.providerId) {
parameters.rowId = `{{ ${parameters.providerId}._id }}`
parameters.revId = `{{ ${parameters.providerId}._rev }}`
const providerComponent = dataProviderComponents.find(
provider => provider._id === parameters.providerId
)
const datasource = getDatasourceForProvider(providerComponent)
const { table } = getSchemaForDatasource(datasource)
if (table) {
parameters.tableId = table._id
}
}
}
$: tableOptions = $tables || []
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
</script>
<div class="root">
{#if dataProviderComponents.length === 0}
<div class="cannot-use">
Delete row can only be used within a component that provides data, such as
a List
</div>
{:else}
<Label small>Datasource</Label>
<Select thin secondary bind:value={parameters.providerId}>
<option value="" />
{#each dataProviderComponents as provider}
<option value={provider._id}>{provider._instanceName}</option>
{/each}
</Select>
{/if}
<Label small>Table</Label>
<Select thin secondary bind:value={parameters.tableId}>
<option value="" />
{#each tableOptions as table}
<option value={table._id}>{table.name}</option>
{/each}
</Select>
<Label small>Row ID</Label>
<DrawerBindableInput
{bindings}
title="Row ID to delete"
value={parameters.rowId}
on:change={value => (parameters.rowId = value.detail)} />
<Label small>Row Rev</Label>
<DrawerBindableInput
{bindings}
title="Row rev to delete"
value={parameters.revId}
on:change={value => (parameters.revId = value.detail)} />
</div>
<style>
@ -54,11 +42,7 @@
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr;
align-items: baseline;
}
.cannot-use {
color: var(--red);
font-size: var(--font-size-s);
margin: auto;
max-width: 800px;
margin: 0 auto;
}
</style>

7
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Select, Label, Spacer } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { datasources, integrations, queries } from 'stores/backend/'
import { datasources, integrations, queries } from "stores/backend/"
import { getBindableProperties } from "builderStore/dataBinding"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
@ -18,9 +18,8 @@
)
function fetchQueryDefinition(query) {
const source = $datasources.list.find(
ds => ds._id === query.datasourceId
).source
const source = $datasources.list.find(ds => ds._id === query.datasourceId)
.source
return $integrations[source].query[query.queryVerb]
}
</script>

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
View file

@ -30,7 +30,9 @@
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr;
grid-template-columns: auto 1fr;
align-items: baseline;
max-width: 800px;
margin: 0 auto;
}
</style>

11
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
View file

@ -1,7 +1,14 @@
<div class="root">This action doesn't require any additional settings.</div>
<script>
import { Body } from "@budibase/bbui"
</script>
<div class="root">
<Body small grey>This action doesn't require any additional settings.</Body>
</div>
<style>
.root {
font-size: var(--font-size-s);
max-width: 800px;
margin: 0 auto;
}
</style>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
View file

@ -27,6 +27,8 @@
display: flex;
flex-direction: row;
align-items: baseline;
max-width: 800px;
margin: 0 auto;
}
.root :global(> div) {

61
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
View file

@ -1,9 +1,9 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { Select, Label, Body } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import {
getDataProviderComponents,
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import SaveFields from "./SaveFields.svelte"
@ -14,14 +14,11 @@
$currentAsset,
$store.selectedComponentId
)
$: providerComponent = dataProviderComponents.find(
provider => provider._id === parameters.providerId
)
$: schemaFields = getSchemaFields(providerComponent)
$: schemaFields = getSchemaFields(parameters?.tableId)
$: tableOptions = $tables || []
const getSchemaFields = component => {
const datasource = getDatasourceForProvider(component)
const { schema } = getSchemaForDatasource(datasource)
const getSchemaFields = tableId => {
const { schema } = getSchemaForDatasource({ type: "table", tableId })
return Object.values(schema || {})
}
@ -31,31 +28,48 @@
</script>
<div class="root">
{#if !dataProviderComponents.length}
<div class="cannot-use">
Save Row can only be used within a component that provides data, such as a
Repeater
</div>
{:else}
<Label small>Datasource</Label>
<Body small grey>
Choosing a Data Source will automatically use the data it provides, but it's
optional.<br />
You can always add or override fields manually.
</Body>
<div class="fields">
<Label small>Data Source</Label>
<Select thin secondary bind:value={parameters.providerId}>
<option value="" />
<option value="">None</option>
{#each dataProviderComponents as provider}
<option value={provider._id}>{provider._instanceName}</option>
{/each}
</Select>
{#if parameters.providerId}
<Label small>Table</Label>
<Select thin secondary bind:value={parameters.tableId}>
<option value="" />
{#each tableOptions as table}
<option value={table._id}>{table.name}</option>
{/each}
</Select>
{#if parameters.tableId}
<SaveFields
parameterFields={parameters.fields}
{schemaFields}
on:change={onFieldsChanged} />
{/if}
{/if}
</div>
</div>
<style>
.root {
max-width: 800px;
margin: 0 auto;
}
.root :global(p) {
line-height: 1.5;
}
.fields {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
@ -63,14 +77,9 @@
align-items: baseline;
}
.root :global(> div:nth-child(2)) {
.fields :global(> div:nth-child(2)),
.fields :global(> div:nth-child(4)) {
grid-column-start: 2;
grid-column-end: 6;
}
.cannot-use {
color: var(--red);
font-size: var(--font-size-s);
margin: auto;
}
</style>

5
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
View file

@ -101,6 +101,11 @@
</div>
<style>
.root {
max-width: 800px;
margin: 0 auto;
}
.fields {
display: grid;
column-gap: var(--spacing-l);

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
View file

@ -29,6 +29,8 @@
display: flex;
flex-direction: row;
align-items: baseline;
max-width: 800px;
margin: 0 auto;
}
.root :global(> div) {

8
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
View file

@ -5,19 +5,21 @@
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import { currentAsset } from "builderStore"
export let componentInstance = {}
export let value = ""
export let onChange = () => {}
export let multiselect = false
export let placeholder
$: datasource = getDatasourceForProvider(componentInstance)
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
$: schema = getSchemaForDatasource(datasource).schema
$: options = Object.keys(schema || {})
</script>
{#if multiselect}
<MultiOptionSelect {value} {onChange} {options} />
<MultiOptionSelect {value} {onChange} {options} {placeholder} />
{:else}
<OptionSelect {value} {onChange} {options} />
<OptionSelect {value} {onChange} {options} {placeholder} />
{/if}

5
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
View file

@ -7,6 +7,7 @@
getSchemaForDatasource,
} from "builderStore/dataBinding"
import SaveFields from "./EventsEditor/actions/SaveFields.svelte"
import { currentAsset } from "builderStore"
const dispatch = createEventDispatcher()
@ -18,7 +19,7 @@
$: schemaFields = getSchemaFields(componentInstance)
const getSchemaFields = component => {
const datasource = getDatasourceForProvider(component)
const datasource = getDatasourceForProvider($currentAsset, component)
const { schema } = getSchemaForDatasource(datasource)
return Object.values(schema || {})
}
@ -65,6 +66,8 @@
.root {
padding: var(--spacing-l);
min-height: calc(40vh - 2 * var(--spacing-l));
max-width: 800px;
margin: 0 auto;
}
.fields {

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
View file

@ -17,7 +17,7 @@
componentInstance._id,
component => component._component === "@budibase/standard-components/form"
)
$: datasource = getDatasourceForProvider(form)
$: datasource = getDatasourceForProvider($currentAsset, form)
$: schema = getSchemaForDatasource(datasource, true).schema
$: options = getOptions(schema, type)

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
View file

@ -4,6 +4,7 @@
export let options = []
export let value = []
export let onChange = () => {}
export let placeholder
let boundValue = getValidOptions(value, options)
@ -26,6 +27,7 @@
align="right"
extraThin
secondary
{placeholder}
value={boundValue}
on:change={setValue}>
{#each options as option}

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
View file

@ -7,6 +7,7 @@
export let value = ""
export let styleBindingProperty
export let onChange = () => {}
export let placeholder
let open = null
let rotate = ""
@ -108,7 +109,7 @@
$: displayLabel =
selectedOption && selectedOption.label
? selectedOption.label
: value || "Choose option"
: value || placeholder || "Choose option"
</script>
<div

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/SchemaSelect.svelte
View file

@ -1,7 +1,7 @@
<script>
import DatasourceSelect from "./DatasourceSelect.svelte"
import DataSourceSelect from "./DataSourceSelect.svelte"
const otherSources = [{ name: "Custom", label: "Custom" }]
</script>
<DatasourceSelect on:change {...$$props} showAllQueries={true} {otherSources} />
<DataSourceSelect on:change {...$$props} showAllQueries={true} {otherSources} />

10
packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
View file

@ -13,7 +13,8 @@
import OptionSelect from "./PropertyControls/OptionSelect.svelte"
import Checkbox from "./PropertyControls/Checkbox.svelte"
import TableSelect from "./PropertyControls/TableSelect.svelte"
import DatasourceSelect from "./PropertyControls/DatasourceSelect.svelte"
import DataSourceSelect from "./PropertyControls/DataSourceSelect.svelte"
import DataProviderSelect from "./PropertyControls/DataProviderSelect.svelte"
import FieldSelect from "./PropertyControls/FieldSelect.svelte"
import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte"
import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
@ -61,7 +62,8 @@
const controlMap = {
text: Input,
select: OptionSelect,
datasource: DatasourceSelect,
dataSource: DataSourceSelect,
dataProvider: DataProviderSelect,
detailScreen: DetailScreenSelect,
boolean: Checkbox,
number: Input,
@ -108,8 +110,8 @@
componentInstance._id,
component => component._component.endsWith("/form")
)
const datasource = form?.datasource
const fields = makeDatasourceFormComponents(datasource)
const dataSource = form?.dataSource
const fields = makeDatasourceFormComponents(dataSource)
onChange(
"_children",
fields.map(field => field.json())

8
packages/builder/src/components/start/CreateAppModal.svelte
View file

@ -1,11 +1,7 @@
<script>
import { writable, get as svelteGet } from "svelte/store"
import { notifier } from "builderStore/store/notifications"
import {
store,
automationStore,
hostingStore,
} from "builderStore"
import { store, automationStore, hostingStore } from "builderStore"
import { string, object } from "yup"
import api, { get } from "builderStore/api"
import Form from "@svelteschool/svelte-forms"
@ -24,7 +20,6 @@
export let template
const infoValidation = {
applicationName: string().required("Your application must have a name."),
}
@ -149,7 +144,6 @@
)
const pkg = await applicationPkg.json()
if (applicationPkg.ok) {
// backendUiStore.actions.reset()
await store.actions.initialise(pkg)
await automationStore.actions.fetch()
} else {

3
packages/builder/src/pages/[application]/_reset.svelte
View file

@ -1,6 +1,6 @@
<script>
import { store, automationStore } from "builderStore"
import { roles } from 'stores/backend/'
import { roles } from "stores/backend/"
import { Button } from "@budibase/bbui"
import SettingsLink from "components/settings/Link.svelte"
import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
@ -18,7 +18,6 @@
const pkg = await res.json()
if (res.ok) {
// backendUiStore.actions.reset()
await store.actions.initialise(pkg)
await automationStore.actions.fetch()
await roles.fetch()

18
packages/client/src/api/datasources.js
View file

@ -7,31 +7,31 @@ import { executeQuery } from "./queries"
/**
* Fetches all rows for a particular Budibase data source.
*/
export const fetchDatasource = async datasource => {
if (!datasource || !datasource.type) {
export const fetchDatasource = async dataSource => {
if (!dataSource || !dataSource.type) {
return []
}
// Fetch all rows in data source
const { type, tableId, fieldName } = datasource
const { type, tableId, fieldName } = dataSource
let rows = []
if (type === "table") {
rows = await fetchTableData(tableId)
} else if (type === "view") {
rows = await fetchViewData(datasource)
rows = await fetchViewData(dataSource)
} else if (type === "query") {
// Set the default query params
let parameters = cloneDeep(datasource.queryParams || {})
for (let param of datasource.parameters) {
let parameters = cloneDeep(dataSource.queryParams || {})
for (let param of dataSource.parameters) {
if (!parameters[param.name]) {
parameters[param.name] = param.default
}
}
rows = await executeQuery({ queryId: datasource._id, parameters })
rows = await executeQuery({ queryId: dataSource._id, parameters })
} else if (type === "link") {
rows = await fetchRelationshipData({
rowId: datasource.rowId,
tableId: datasource.rowTableId,
rowId: dataSource.rowId,
tableId: dataSource.rowTableId,
fieldName,
})
}

4
packages/client/src/api/queries.js
View file

@ -1,4 +1,4 @@
import { notificationStore, datasourceStore } from "../store"
import { notificationStore, dataSourceStore } from "../store"
import API from "./api"
/**
@ -20,7 +20,7 @@ export const executeQuery = async ({ queryId, parameters }) => {
notificationStore.danger("An error has occurred")
} else if (!query.readable) {
notificationStore.success("Query executed successfully")
datasourceStore.actions.invalidateDatasource(query.datasourceId)
dataSourceStore.actions.invalidateDataSource(query.datasourceId)
}
return res
}

10
packages/client/src/api/rows.js
View file

@ -1,4 +1,4 @@
import { notificationStore, datasourceStore } from "../store"
import { notificationStore, dataSourceStore } from "../store"
import API from "./api"
import { fetchTableDefinition } from "./tables"
@ -31,7 +31,7 @@ export const saveRow = async row => {
: notificationStore.success("Row saved")
// Refresh related datasources
datasourceStore.actions.invalidateDatasource(row.tableId)
dataSourceStore.actions.invalidateDataSource(row.tableId)
return res
}
@ -52,7 +52,7 @@ export const updateRow = async row => {
: notificationStore.success("Row updated")
// Refresh related datasources
datasourceStore.actions.invalidateDatasource(row.tableId)
dataSourceStore.actions.invalidateDataSource(row.tableId)
return res
}
@ -72,7 +72,7 @@ export const deleteRow = async ({ tableId, rowId, revId }) => {
: notificationStore.success("Row deleted")
// Refresh related datasources
datasourceStore.actions.invalidateDatasource(tableId)
dataSourceStore.actions.invalidateDataSource(tableId)
return res
}
@ -96,7 +96,7 @@ export const deleteRows = async ({ tableId, rows }) => {
: notificationStore.success(`${rows.length} row(s) deleted`)
// Refresh related datasources
datasourceStore.actions.invalidateDatasource(tableId)
dataSourceStore.actions.invalidateDataSource(tableId)
return res
}

2
packages/client/src/components/ClientApp.svelte
View file

@ -33,7 +33,7 @@
{
type: ActionTypes.RefreshDatasource,
callback: () => authStore.actions.fetchUser(),
metadata: { datasource: { type: "table", tableId: TableNames.USERS } },
metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
},
]
</script>

10
packages/client/src/components/Provider.svelte
View file

@ -1,6 +1,6 @@
<script>
import { getContext, setContext, onMount } from "svelte"
import { datasourceStore, createContextStore } from "../store"
import { dataSourceStore, createContextStore } from "../store"
import { ActionTypes } from "../constants"
import { generate } from "shortid"
@ -31,9 +31,9 @@
// Register any "refresh datasource" actions with a singleton store
// so we can easily refresh data at all levels for any datasource
if (type === ActionTypes.RefreshDatasource) {
const { datasource } = metadata || {}
datasourceStore.actions.registerDatasource(
datasource,
const { dataSource } = metadata || {}
dataSourceStore.actions.registerDataSource(
dataSource,
instanceId,
callback
)
@ -48,7 +48,7 @@
instanceId = generate()
// Unregister all datasource instances when unmounting this provider
return () => datasourceStore.actions.unregisterInstance(instanceId)
return () => dataSourceStore.actions.unregisterInstance(instanceId)
})
</script>

84
packages/client/src/store/dataSource.js Normal file
View file

@ -0,0 +1,84 @@
import { writable, get } from "svelte/store"
import { notificationStore } from "./notification"
export const createDataSourceStore = () => {
const store = writable([])
// Registers a new dataSource instance
const registerDataSource = (dataSource, instanceId, refresh) => {
if (!dataSource || !instanceId || !refresh) {
return
}
// Create a list of all relevant dataSource IDs which would require that
// this dataSource is refreshed
let dataSourceIds = []
// Extract table ID
if (dataSource.type === "table" || dataSource.type === "view") {
if (dataSource.tableId) {
dataSourceIds.push(dataSource.tableId)
}
}
// Extract both table IDs from both sides of the relationship
else if (dataSource.type === "link") {
if (dataSource.rowTableId) {
dataSourceIds.push(dataSource.rowTableId)
}
if (dataSource.tableId) {
dataSourceIds.push(dataSource.tableId)
}
}
// Extract the dataSource ID (not the query ID) for queries
else if (dataSource.type === "query") {
if (dataSource.dataSourceId) {
dataSourceIds.push(dataSource.dataSourceId)
}
}
// Store configs for each relevant dataSource ID
if (dataSourceIds.length) {
store.update(state => {
dataSourceIds.forEach(id => {
state.push({
dataSourceId: id,
instanceId,
refresh,
})
})
return state
})
}
}
// Removes all registered dataSource instances belonging to a particular
// instance ID
const unregisterInstance = instanceId => {
store.update(state => {
return state.filter(instance => instance.instanceId !== instanceId)
})
}
// Invalidates a specific dataSource ID by refreshing all instances
// which depend on data from that dataSource
const invalidateDataSource = dataSourceId => {
const relatedInstances = get(store).filter(instance => {
return instance.dataSourceId === dataSourceId
})
if (relatedInstances?.length) {
notificationStore.blockNotifications(1000)
}
relatedInstances?.forEach(instance => {
instance.refresh()
})
}
return {
subscribe: store.subscribe,
actions: { registerDataSource, unregisterInstance, invalidateDataSource },
}
}
export const dataSourceStore = createDataSourceStore()

84
packages/client/src/store/datasource.js
View file

@ -1,84 +0,0 @@
import { writable, get } from "svelte/store"
import { notificationStore } from "./notification"
export const createDatasourceStore = () => {
const store = writable([])
// Registers a new datasource instance
const registerDatasource = (datasource, instanceId, refresh) => {
if (!datasource || !instanceId || !refresh) {
return
}
// Create a list of all relevant datasource IDs which would require that
// this datasource is refreshed
let datasourceIds = []
// Extract table ID
if (datasource.type === "table" || datasource.type === "view") {
if (datasource.tableId) {
datasourceIds.push(datasource.tableId)
}
}
// Extract both table IDs from both sides of the relationship
else if (datasource.type === "link") {
if (datasource.rowTableId) {
datasourceIds.push(datasource.rowTableId)
}
if (datasource.tableId) {
datasourceIds.push(datasource.tableId)
}
}
// Extract the datasource ID (not the query ID) for queries
else if (datasource.type === "query") {
if (datasource.datasourceId) {
datasourceIds.push(datasource.datasourceId)
}
}
// Store configs for each relevant datasource ID
if (datasourceIds.length) {
store.update(state => {
datasourceIds.forEach(id => {
state.push({
datasourceId: id,
instanceId,
refresh,
})
})
return state
})
}
}
// Removes all registered datasource instances belonging to a particular
// instance ID
const unregisterInstance = instanceId => {
store.update(state => {
return state.filter(instance => instance.instanceId !== instanceId)
})
}
// Invalidates a specific datasource ID by refreshing all instances
// which depend on data from that datasource
const invalidateDatasource = datasourceId => {
const relatedInstances = get(store).filter(instance => {
return instance.datasourceId === datasourceId
})
if (relatedInstances?.length) {
notificationStore.blockNotifications(1000)
}
relatedInstances?.forEach(instance => {
instance.refresh()
})
}
return {
subscribe: store.subscribe,
actions: { registerDatasource, unregisterInstance, invalidateDatasource },
}
}
export const datasourceStore = createDatasourceStore()

2
packages/client/src/store/index.js
View file

@ -3,7 +3,7 @@ export { notificationStore } from "./notification"
export { routeStore } from "./routes"
export { screenStore } from "./screens"
export { builderStore } from "./builder"
export { datasourceStore } from "./datasource"
export { dataSourceStore } from "./dataSource"
// Context stores are layered and duplicated, so it is not a singleton
export { createContextStore } from "./context"

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

@ -43,8 +43,8 @@ export const enrichProps = async (props, context) => {
// Enrich all data bindings in top level props
let enrichedProps = await enrichDataBindings(validProps, totalContext)
// Enrich button actions if they exist
if (props._component?.endsWith("/button") && enrichedProps.onClick) {
// Enrich click actions if they exist
if (enrichedProps.onClick) {
enrichedProps.onClick = enrichButtonActions(
enrichedProps.onClick,
totalContext

301
packages/standard-components/manifest.json
View file

@ -8,47 +8,6 @@
"transitionable": true,
"settings": []
},
"datagrid": {
"name": "Grid",
"description": "A datagrid component with functionality to add, remove and edit rows.",
"icon": "ri-grid-line",
"styleable": true,
"settings": [
{
"type": "datasource",
"label": "Source",
"key": "datasource"
},
{
"type": "detailScreen",
"label": "Detail URL",
"key": "detailUrl"
},
{
"type": "boolean",
"label": "Editable",
"key": "editable"
},
{
"type": "select",
"label": "Theme",
"key": "theme",
"options": ["alpine", "alpine-dark", "balham", "balham-dark", "material"],
"defaultValue": "alpine"
},
{
"type": "number",
"label": "Height",
"key": "height",
"defaultValue": "500"
},
{
"type": "boolean",
"label": "Pagination",
"key": "pagination"
}
]
},
"screenslot": {
"name": "Screenslot",
"icon": "ri-artboard-2-line",
@ -78,19 +37,17 @@
}
]
},
"list": {
"repeater": {
"name": "Repeater",
"description": "A configurable data list that attaches to your backend tables.",
"icon": "ri-list-check-2",
"styleable": true,
"hasChildren": true,
"dataProvider": true,
"actions": ["RefreshDatasource"],
"settings": [
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "text",
@ -103,7 +60,10 @@
"label": "Filtering",
"key": "filter"
}
]
],
"context": {
"type": "schema"
}
},
"search": {
"name": "Search",
@ -111,7 +71,6 @@
"icon": "ri-search-line",
"styleable": true,
"hasChildren": true,
"dataProvider": true,
"settings": [
{
"type": "table",
@ -136,7 +95,10 @@
"key": "noRowsMessage",
"defaultValue": "No rows found."
}
]
],
"context": {
"type": "schema"
}
},
"stackedlist": {
"name": "Stacked List",
@ -369,6 +331,11 @@
"label": "Color",
"key": "color",
"defaultValue": "#000"
},
{
"type": "event",
"label": "On Click",
"key": "onClick"
}
]
},
@ -438,36 +405,6 @@
}
]
},
"rowdetail": {
"name": "Row Detail",
"description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
"icon": "ri-profile-line",
"styleable": true,
"hasChildren": true,
"dataProvider": true,
"settings": [
{
"type": "table",
"label": "Table",
"key": "table"
}
]
},
"newrow": {
"name": "New Row",
"description": "Sets up a new row for creation, which can be used with {{ context }}, in children",
"icon": "ri-profile-line",
"hasChildren": true,
"styleable": true,
"dataProvider": true,
"settings": [
{
"type": "table",
"label": "Table",
"key": "table"
}
]
},
"cardhorizontal": {
"name": "Horizontal Card",
"description": "A basic card component that can contain content and actions.",
@ -591,21 +528,21 @@
"key": "title"
},
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "multifield",
"label": "Data Cols.",
"key": "valueColumns",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "select",
@ -691,21 +628,21 @@
"key": "title"
},
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "multifield",
"label": "Data Cols.",
"key": "valueColumns",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "select",
@ -792,21 +729,21 @@
"key": "title"
},
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "multifield",
"label": "Data Cols.",
"key": "valueColumns",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "select",
@ -905,21 +842,21 @@
"key": "title"
},
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "field",
"label": "Data Col.",
"key": "valueColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "text",
@ -982,21 +919,21 @@
"key": "title"
},
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "field",
"label": "Data Col.",
"key": "valueColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "text",
@ -1059,39 +996,39 @@
"key": "title"
},
{
"type": "datasource",
"type": "dataProvider",
"label": "Data",
"key": "datasource"
"key": "dataProvider"
},
{
"type": "field",
"label": "Date Col.",
"key": "dateColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "field",
"label": "Open Col.",
"key": "openColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "field",
"label": "Close Col.",
"key": "closeColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "field",
"label": "High Col.",
"key": "highColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "field",
"label": "Low Col.",
"key": "lowColumn",
"dependsOn": "datasource"
"dependsOn": "dataProvider"
},
{
"type": "select",
@ -1134,13 +1071,14 @@
"icon": "ri-file-text-line",
"styleable": true,
"hasChildren": true,
"dataProvider": true,
"actions": ["ValidateForm"],
"actions": [
"ValidateForm"
],
"settings": [
{
"type": "schema",
"label": "Schema",
"key": "datasource"
"key": "dataSource"
},
{
"type": "select",
@ -1188,7 +1126,10 @@
"key": "disabled",
"defaultValue": false
}
]
],
"context": {
"type": "form"
}
},
"fieldgroup": {
"name": "Field Group",
@ -1472,5 +1413,145 @@
"defaultValue": false
}
]
},
"dataprovider": {
"name": "Data Provider",
"icon": "ri-database-2-line",
"styleable": false,
"hasChildren": true,
"settings": [
{
"type": "dataSource",
"label": "Data",
"key": "dataSource"
},
{
"type": "filter",
"label": "Filtering",
"key": "filter"
},
{
"type": "field",
"label": "Sort Column",
"key": "sortColumn"
},
{
"type": "select",
"label": "Sort Order",
"key": "sortOrder",
"options": ["Ascending", "Descending"],
"defaultValue": "Descending"
},
{
"type": "number",
"label": "Limit",
"key": "limit"
}
],
"context": {
"type": "static",
"values": [
{
"label": "Rows",
"key": "rows"
},
{
"label": "Rows Length",
"key": "rowsLength"
},
{
"label": "Schema",
"key": "schema"
},
{
"label": "Loading",
"key": "loading"
},
{
"label": "Loaded",
"key": "loaded"
}
]
}
},
"table": {
"name": "Table",
"icon": "ri-table-line",
"styleable": true,
"hasChildren": true,
"settings": [
{
"type": "dataProvider",
"label": "Data Provider",
"key": "dataProvider"
},
{
"type": "number",
"label": "Row Count",
"key": "rowCount",
"defaultValue": 8
},
{
"type": "select",
"label": "Theme",
"key": "theme",
"defaultValue": "spectrum--light",
"options": [
{
"label": "Lightest",
"value": "spectrum--lightest"
},
{
"label": "Light",
"value": "spectrum--light"
},
{
"label": "Dark",
"value": "spectrum--dark"
},
{
"label": "Darkest",
"value": "spectrum--darkest"
}
]
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "spectrum--medium",
"options": [
{
"label": "Medium",
"value": "spectrum--medium"
},
{
"label": "Large",
"value": "spectrum--large"
}
]
},
{
"type": "boolean",
"label": "Quiet",
"key": "quiet"
},
{
"type": "multifield",
"label": "Columns",
"key": "columns",
"dependsOn": "dataProvider",
"placeholder": "All columns"
},
{
"type": "boolean",
"label": "Auto Cols.",
"key": "showAutoColumns",
"defaultValue": false
}
],
"context": {
"type": "schema"
}
}
}

30
packages/standard-components/package.json
View file

@ -41,21 +41,23 @@
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "^1.1.0",
"@budibase/bbui": "^1.58.13",
"@budibase/svelte-ag-grid": "^1.0.4",
"@spectrum-css/actionbutton": "^1.0.0-beta.1",
"@spectrum-css/button": "^3.0.0-beta.6",
"@spectrum-css/checkbox": "^3.0.0-beta.6",
"@spectrum-css/fieldlabel": "^3.0.0-beta.7",
"@spectrum-css/icon": "^3.0.0-beta.2",
"@spectrum-css/inputgroup": "^3.0.0-beta.7",
"@spectrum-css/menu": "^3.0.0-beta.5",
"@spectrum-css/page": "^3.0.0-beta.0",
"@spectrum-css/picker": "^1.0.0-beta.3",
"@spectrum-css/popover": "^3.0.0-beta.6",
"@spectrum-css/stepper": "^3.0.0-beta.7",
"@spectrum-css/textfield": "^3.0.0-beta.6",
"@spectrum-css/vars": "^3.0.0-beta.2",
"@spectrum-css/actionbutton": "^1.0.1",
"@spectrum-css/button": "^3.0.1",
"@spectrum-css/checkbox": "^3.0.1",
"@spectrum-css/fieldlabel": "^3.0.1",
"@spectrum-css/icon": "^3.0.1",
"@spectrum-css/inputgroup": "^3.0.1",
"@spectrum-css/label": "^2.0.9",
"@spectrum-css/menu": "^3.0.1",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/picker": "^1.0.0",
"@spectrum-css/popover": "^3.0.1",
"@spectrum-css/stepper": "^3.0.1",
"@spectrum-css/table": "^3.0.1",
"@spectrum-css/textfield": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",
"apexcharts": "^3.22.1",
"dayjs": "^1.10.4",
"flatpickr": "^4.6.6",
"loadicons": "^1.0.0",
"lodash.debounce": "^4.0.8",

108
packages/standard-components/src/DataProvider.svelte Normal file
View file

@ -0,0 +1,108 @@
<script>
import { getContext } from "svelte"
export let dataSource
export let filter
export let sortColumn
export let sortOrder
export let limit
const { API, styleable, Provider, ActionTypes } = getContext("sdk")
const component = getContext("component")
// Loading flag every time data is being fetched
let loading = false
// Loading flag for the initial load
let loaded = false
let allRows = []
let schema = {}
$: fetchData(dataSource)
$: filteredRows = filterRows(allRows, filter)
$: sortedRows = sortRows(filteredRows, sortColumn, sortOrder)
$: rows = limitRows(sortedRows, limit)
$: getSchema(dataSource)
$: actions = [
{
type: ActionTypes.RefreshDatasource,
callback: () => fetchData(dataSource),
metadata: { dataSource },
},
]
$: dataContext = {
rows,
schema,
rowsLength: rows.length,
loading,
loaded,
}
const fetchData = async dataSource => {
loading = true
allRows = await API.fetchDatasource(dataSource)
loading = false
loaded = true
}
const filterRows = (rows, filter) => {
if (!Object.keys(filter || {}).length) {
return rows
}
let filteredData = [...rows]
Object.entries(filter).forEach(([field, value]) => {
if (value != null && value !== "") {
filteredData = filteredData.filter(row => {
return row[field] === value
})
}
})
return filteredData
}
const sortRows = (rows, sortColumn, sortOrder) => {
if (!sortColumn || !sortOrder) {
return rows
}
return rows.slice().sort((a, b) => {
const colA = a[sortColumn]
const colB = b[sortColumn]
if (sortOrder === "Descending") {
return colA > colB ? -1 : 1
} else {
return colA > colB ? 1 : -1
}
})
}
const limitRows = (rows, limit) => {
const numLimit = parseFloat(limit)
if (isNaN(numLimit)) {
return rows
}
return rows.slice(0, numLimit)
}
const getSchema = async dataSource => {
if (dataSource?.schema) {
schema = dataSource.schema
} else if (dataSource?.tableId) {
const definition = await API.fetchTableDefinition(dataSource.tableId)
schema = definition?.schema ?? {}
} else {
schema = {}
}
// Ensure all schema fields have a name property
Object.entries(schema).forEach(([key, value]) => {
if (!value.name) {
value.name = key
}
})
}
</script>
<Provider {actions} data={dataContext}>
<slot />
</Provider>

3
packages/standard-components/src/Icon.svelte
View file

@ -7,6 +7,7 @@
export let icon = ""
export let size = "fa-lg"
export let color = "#f00"
export let onClick
$: styles = {
...$component.styles,
@ -17,4 +18,4 @@
}
</script>
<i use:styleable={styles} class="{icon} {size}" />
<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />

83
packages/standard-components/src/List.svelte
View file

@ -1,83 +0,0 @@
<script>
import { getContext } from "svelte"
import { isEmpty } from "lodash/fp"
export let datasource
export let noRowsMessage
export let filter
const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
"sdk"
)
const component = getContext("component")
let rows = []
let loaded = false
$: fetchData(datasource)
$: filteredRows = filterRows(rows, filter)
$: actions = [
{
type: ActionTypes.RefreshDatasource,
callback: () => fetchData(datasource),
metadata: { datasource },
},
]
const fetchData = async datasource => {
if (!isEmpty(datasource)) {
rows = await API.fetchDatasource(datasource)
}
loaded = true
}
const filterRows = (rows, filter) => {
if (!Object.keys(filter || {}).length) {
return rows
}
let filteredData = [...rows]
Object.entries(filter).forEach(([field, value]) => {
if (value != null && value !== "") {
filteredData = filteredData.filter(row => {
return row[field] === value
})
}
})
return filteredData
}
</script>
<Provider {actions}>
<div use:styleable={$component.styles}>
{#if filteredRows.length > 0}
{#if $component.children === 0 && $builderStore.inBuilder}
<p><i class="ri-image-line" />Add some components to display.</p>
{:else}
{#each filteredRows as row}
<Provider data={row}>
<slot />
</Provider>
{/each}
{/if}
{:else if loaded && noRowsMessage}
<p><i class="ri-list-check-2" />{noRowsMessage}</p>
{/if}
</div>
</Provider>
<style>
p {
margin: 0 var(--spacing-m);
background-color: var(--grey-2);
color: var(--grey-6);
font-size: var(--font-size-s);
padding: var(--spacing-l);
border-radius: var(--border-radius-s);
display: grid;
place-items: center;
}
p i {
margin-bottom: var(--spacing-m);
font-size: 1.5rem;
color: var(--grey-5);
}
</style>

47
packages/standard-components/src/Repeater.svelte Normal file
View file

@ -0,0 +1,47 @@
<script>
import { getContext } from "svelte"
export let dataProvider
export let noRowsMessage
const { API, styleable, builderStore, Provider } = getContext("sdk")
const component = getContext("component")
const context = getContext("context")
$: rows = dataProvider?.rows ?? []
$: loaded = dataProvider?.loaded ?? false
</script>
<div use:styleable={$component.styles}>
{#if rows.length > 0}
{#if $component.children === 0 && $builderStore.inBuilder}
<p><i class="ri-image-line" />Add some components to display.</p>
{:else}
{#each rows as row}
<Provider data={row}>
<slot />
</Provider>
{/each}
{/if}
{:else if loaded && noRowsMessage}
<p><i class="ri-list-check-2" />{noRowsMessage}</p>
{/if}
</div>
<style>
p {
margin: 0 var(--spacing-m);
background-color: var(--grey-2);
color: var(--grey-6);
font-size: var(--font-size-s);
padding: var(--spacing-l);
border-radius: var(--border-radius-s);
display: grid;
place-items: center;
}
p i {
margin-bottom: var(--spacing-m);
font-size: 1.5rem;
color: var(--grey-5);
}
</style>

57
packages/standard-components/src/RowDetail.svelte
View file

@ -1,57 +0,0 @@
<script>
import { onMount, getContext } from "svelte"
export let table
const {
API,
screenStore,
routeStore,
Provider,
styleable,
ActionTypes,
} = getContext("sdk")
const component = getContext("component")
let headers = []
let row
const fetchFirstRow = async tableId => {
const rows = await API.fetchTableData(tableId)
return Array.isArray(rows) && rows.length ? rows[0] : { tableId }
}
const fetchData = async (rowId, tableId) => {
if (!tableId) {
return
}
const pathParts = window.location.pathname.split("/")
// if srcdoc, then we assume this is the builder preview
if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && tableId) {
row = await fetchFirstRow(tableId)
} else if (rowId) {
row = await API.fetchRow({ tableId, rowId })
} else {
throw new Error("Row ID was not supplied to RowDetail")
}
}
$: actions = [
{
type: ActionTypes.RefreshDatasource,
callback: () => fetchData($routeStore.routeParams.id, table),
metadata: { datasource: { type: "table", tableId: table } },
},
]
onMount(() => fetchData($routeStore.routeParams.id, table))
</script>
{#if row}
<Provider data={row} {actions}>
<div use:styleable={$component.styles}>
<slot />
</div>
</Provider>
{/if}

4
packages/standard-components/src/charts/ApexChart.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import { chart } from "svelte-apexcharts"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let options
@ -10,7 +10,7 @@
{#if options}
<div use:chart={options} use:styleable={$component.styles} />
{:else if options === false}
{:else if builderStore.inBuilder}
<div use:styleable={$component.styles}>
Use the settings panel to build your chart -->
</div>

35
packages/standard-components/src/charts/BarChart.svelte
View file

@ -1,13 +1,9 @@
<script>
import { getContext, onMount } from "svelte"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
export let title
export let datasource
export let dataProvider
export let labelColumn
export let valueColumns
export let xAxisLabel
@ -22,28 +18,21 @@
export let yAxisUnits
export let palette
let options
$: options = setUpChart(dataProvider)
// Fetch data on mount
onMount(async () => {
const setUpChart = provider => {
const allCols = [labelColumn, ...(valueColumns || [null])]
if (isEmpty(datasource) || allCols.find(x => x == null)) {
options = false
return
if (!provider || allCols.find(x => x == null)) {
return null
}
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource)
// Fatch data
const { schema, rows } = provider
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result
.filter(row => hasAllColumns(row))
.slice(0, 20)
.sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
if (!schema || !data.length) {
options = false
return
return null
}
// Initialise default chart
@ -63,7 +52,7 @@
// Add data
let useDates = false
if (datasource.type !== "view" && schema[labelColumn]) {
if (schema[labelColumn]) {
const labelFieldType = schema[labelColumn].type
builder = builder.xType(labelFieldType)
useDates = labelFieldType === "datetime"
@ -84,8 +73,8 @@
}
// Build chart options
options = builder.getOptions()
})
return builder.getOptions()
}
</script>
<ApexChart {options} />

32
packages/standard-components/src/charts/CandleStickChart.svelte
View file

@ -1,13 +1,9 @@
<script>
import { getContext, onMount } from "svelte"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
export let title
export let datasource
export let dataProvider
export let dateColumn
export let openColumn
export let highColumn
@ -20,28 +16,22 @@
export let animate
export let yAxisUnits
let options
$: options = setUpChart(dataProvider)
// Fetch data on mount
onMount(async () => {
const setUpChart = provider => {
const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
if (isEmpty(datasource) || allCols.find(x => x == null)) {
options = false
return
if (!provider || allCols.find(x => x == null)) {
return null
}
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource)
// Fetch data
const { schema, rows } = provider
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result
.filter(row => hasAllColumns(row))
.slice(0, 100)
.sort((a, b) => (a[dateColumn] > b[dateColumn] ? 1 : -1))
const data = rows.filter(row => hasAllColumns(row))
if (!schema || !data.length) {
options = false
return
return null
}
// Initialise default chart
@ -66,8 +56,8 @@
builder = builder.series([{ data: chartData }])
// Build chart options
options = builder.getOptions()
})
return builder.getOptions()
}
</script>
<ApexChart {options} />

32
packages/standard-components/src/charts/LineChart.svelte
View file

@ -1,14 +1,10 @@
<script>
import { getContext, onMount } from "svelte"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
// Common props
export let title
export let datasource
export let dataProvider
export let labelColumn
export let valueColumns
export let xAxisLabel
@ -28,28 +24,22 @@
export let stacked
export let gradient
let options
$: options = setUpChart(dataProvider)
// Fetch data on mount
onMount(async () => {
const setUpChart = provider => {
const allCols = [labelColumn, ...(valueColumns || [null])]
if (isEmpty(datasource) || allCols.find(x => x == null)) {
options = false
return
if (!provider || allCols.find(x => x == null)) {
return null
}
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource)
const { schema, rows } = provider
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result
.filter(row => hasAllColumns(row))
.slice(0, 100)
.sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
const data = rows.filter(row => hasAllColumns(row))
if (!schema || !data.length) {
options = false
return
return null
}
// Initialise default chart
@ -71,7 +61,7 @@
// Add data
let useDates = false
if (datasource.type !== "view" && schema[labelColumn]) {
if (schema[labelColumn]) {
const labelFieldType = schema[labelColumn].type
builder = builder.xType(labelFieldType)
useDates = labelFieldType === "datetime"
@ -92,8 +82,8 @@
}
// Build chart options
options = builder.getOptions()
})
return builder.getOptions()
}
</script>
<ApexChart {options} />

30
packages/standard-components/src/charts/PieChart.svelte
View file

@ -1,13 +1,9 @@
<script>
import { getContext, onMount } from "svelte"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
export let title
export let datasource
export let dataProvider
export let labelColumn
export let valueColumn
export let height
@ -19,25 +15,21 @@
export let donut
export let palette
let options
$: options = setUpChart(dataProvider)
// Fetch data on mount
onMount(async () => {
if (isEmpty(datasource) || !labelColumn || !valueColumn) {
options = false
return
const setUpChart = provider => {
if (!provider || !labelColumn || !valueColumn) {
return null
}
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource)
const data = result
const { schema, rows } = provider
const data = rows
.filter(row => row[labelColumn] != null && row[valueColumn] != null)
.slice(0, 20)
.sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
.slice(0, 100)
if (!schema || !data.length) {
options = false
return
return null
}
// Initialise default chart
@ -58,8 +50,8 @@
builder = builder.series(series).labels(labels)
// Build chart options
options = builder.getOptions()
})
return builder.getOptions()
}
</script>
<ApexChart {options} />

12
packages/standard-components/src/forms/Form.svelte
View file

@ -5,7 +5,7 @@
import { createValidatorFromConstraints } from "./validation"
import { generateID } from "../helpers"
export let datasource
export let dataSource
export let theme
export let size
export let disabled = false
@ -143,15 +143,15 @@
})
}
// Fetches the form schema from this form's datasource, if one exists
// Fetches the form schema from this form's dataSource, if one exists
const fetchSchema = async () => {
if (!datasource?.tableId) {
if (!dataSource?.tableId) {
schema = {}
table = null
} else {
table = await API.fetchTableDefinition(datasource?.tableId)
table = await API.fetchTableDefinition(dataSource?.tableId)
if (table) {
if (datasource?.type === "query") {
if (dataSource?.type === "query") {
schema = {}
const params = table.parameters || []
params.forEach(param => {
@ -171,7 +171,7 @@
<Provider
{actions}
data={{ ...$formState.values, tableId: datasource?.tableId }}>
data={{ ...$formState.values, tableId: dataSource?.tableId }}>
<div
lang="en"
dir="ltr"

2
packages/standard-components/src/forms/Picker.svelte
View file

@ -19,7 +19,7 @@
{#if fieldState}
<button
id={$fieldState.fieldId}
class="spectrum-Picker"
class="spectrum-Picker spectrum-Picker--sizeM"
disabled={$fieldState.disabled}
class:is-invalid={!$fieldState.valid}
class:is-open={open}

6
packages/standard-components/src/grid/AttachmentCell/Button.svelte
View file

@ -1,6 +0,0 @@
<script>
import AttachmentList from "../../attachments/AttachmentList.svelte"
export let files
</script>
<AttachmentList {files} on:delete />

0
packages/standard-components/src/grid/AttachmentCell/Modal.svelte
View file

193
packages/standard-components/src/grid/Component.svelte
View file

@ -1,193 +0,0 @@
<script>
// Import valueSetters and custom renderers
import { number } from "./valueSetters"
import { getRenderer } from "./customRenderer"
import { isEmpty } from "lodash/fp"
import { getContext } from "svelte"
import AgGrid from "@budibase/svelte-ag-grid"
import {
TextButton as DeleteButton,
Icon,
Modal,
ModalContent,
} from "@budibase/bbui"
// These maps need to be set up to handle whatever types that are used in the tables.
const setters = new Map([["number", number]])
const SDK = getContext("sdk")
const component = getContext("component")
const { API, styleable } = SDK
export let datasource = {}
export let editable
export let theme = "alpine"
export let height = 500
export let pagination
export let detailUrl
// Add setting height as css var to allow grid to use correct height
$: gridStyles = {
...$component.styles,
normal: {
...$component.styles.normal,
["--grid-height"]: `${height}px`,
},
}
$: fetchData(datasource)
// These can never change at runtime so don't need to be reactive
let canEdit = editable && datasource && datasource.type !== "view"
let canAddDelete = editable && datasource && datasource.type === "table"
let modal
let dataLoaded = false
let data
let columnDefs
let selectedRows = []
let table
let options = {
defaultColDef: {
flex: 1,
minWidth: 150,
filter: true,
},
rowSelection: canEdit ? "multiple" : false,
suppressFieldDotNotation: true,
suppressRowClickSelection: !canEdit,
paginationAutoPageSize: true,
pagination,
}
async function fetchData(datasource) {
if (isEmpty(datasource)) {
return
}
data = await API.fetchDatasource(datasource)
let schema
// Get schema for datasource
// Views with "Calculate" applied provide their own schema.
// For everything else, use the tableId property to pull to table schema
if (datasource.schema) {
schema = datasource.schema
} else {
schema = (await API.fetchTableDefinition(datasource.tableId)).schema
}
columnDefs = Object.keys(schema).map((key, i) => {
return {
headerCheckboxSelection: i === 0 && canEdit,
checkboxSelection: i === 0 && canEdit,
valueSetter: setters.get(schema[key].type),
headerName: key,
field: key,
hide: shouldHideField(key),
sortable: true,
editable: canEdit && schema[key].type !== "link",
cellRenderer: getRenderer(schema[key], canEdit, SDK),
autoHeight: true,
}
})
if (detailUrl) {
columnDefs = [
...columnDefs,
{
headerName: "Detail",
field: "_id",
minWidth: 100,
width: 100,
flex: 0,
editable: false,
sortable: false,
cellRenderer: getRenderer(
{
type: "_id",
options: { detailUrl },
},
false,
SDK
),
autoHeight: true,
pinned: "left",
filter: false,
},
]
}
dataLoaded = true
}
const shouldHideField = name => {
if (name.startsWith("_")) return true
// always 'row'
if (name === "type") return true
// tables are always tied to a single tableId, this is irrelevant
if (name === "tableId") return true
return false
}
const handleUpdate = ({ detail }) => {
data[detail.row] = detail.data
updateRow(detail.data)
}
const updateRow = async row => {
await API.updateRow(row)
}
const deleteRows = async () => {
await API.deleteRows({ rows: selectedRows, tableId: datasource.name })
data = data.filter(row => !selectedRows.includes(row))
selectedRows = []
}
</script>
<div class="container" use:styleable={gridStyles}>
{#if dataLoaded}
{#if canAddDelete}
<div class="controls">
{#if selectedRows.length > 0}
<DeleteButton text small on:click={modal.show()}>
<Icon name="addrow" />
Delete
{selectedRows.length}
row(s)
</DeleteButton>
{/if}
</div>
{/if}
<AgGrid
{theme}
{options}
{data}
{columnDefs}
on:update={handleUpdate}
on:select={({ detail }) => (selectedRows = detail)} />
{/if}
<Modal bind:this={modal}>
<ModalContent
title="Confirm Row Deletion"
confirmText="Delete"
onConfirm={deleteRows}>
<span>Are you sure you want to delete {selectedRows.length} row(s)?</span>
</ModalContent>
</Modal>
</div>
<style>
.container :global(.ag-pinned-left-header .ag-header-cell-label) {
justify-content: center;
}
.controls {
min-height: 15px;
margin-bottom: var(--spacing-s);
display: grid;
grid-gap: var(--spacing-s);
grid-template-columns: auto auto;
justify-content: start;
}
</style>

37
packages/standard-components/src/grid/CreateRow/Button.svelte
View file

@ -1,37 +0,0 @@
<script>
import { createEventDispatcher } from "svelte"
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
import Modal from "./Modal.svelte"
const dispatch = createEventDispatcher()
let anchor
let dropdown
export let table
</script>
<div bind:this={anchor}>
<Button text small on:click={dropdown.show}>
<Icon name="addrow" />
Create New Row
</Button>
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<h5>Add New Row</h5>
<Modal
{table}
onClosed={dropdown.hide}
on:newRow={() => dispatch('newRow')} />
</DropdownMenu>
<style>
div {
display: grid;
}
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
margin: 0;
font-weight: 500;
}
</style>

144
packages/standard-components/src/grid/CreateRow/Modal.svelte
View file

@ -1,144 +0,0 @@
<script>
import { getContext, onMount, createEventDispatcher } from "svelte"
import { Button, Label, DatePicker, RichText } from "@budibase/bbui"
import Dropzone from "../../attachments/Dropzone.svelte"
import debounce from "lodash.debounce"
const dispatch = createEventDispatcher()
const { fetchRow, saveRow, routeStore } = getContext("sdk")
const DEFAULTS_FOR_TYPE = {
string: "",
boolean: false,
number: null,
link: [],
}
export let table
export let onClosed
let row = { tableId: table._id }
let schema = table.schema
let saved = false
let rowId
let isNew = true
let errors = {}
$: fields = schema ? Object.keys(schema) : []
$: errorMessages = Object.entries(errors).map(
([field, message]) => `${field} ${message}`
)
const save = debounce(async () => {
for (let field of fields) {
// Assign defaults to empty fields to prevent validation issues
if (!(field in row)) {
row[field] = DEFAULTS_FOR_TYPE[schema[field].type]
}
}
const response = await saveRow(row)
if (!response.error) {
// store.update(state => {
// state[table._id] = state[table._id]
// ? [...state[table._id], json]
// : [json]
// return state
// })
errors = {}
// wipe form, if new row, otherwise update
// table to get new _rev
row = isNew ? { tableId: table._id } : response
onClosed()
dispatch("newRow")
} else {
errors = [response.error]
}
})
onMount(async () => {
const routeParams = $routeStore.routeParams
rowId =
Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
isNew = !rowId || rowId === "new"
if (isNew) {
row = { tableId: table }
return
}
row = await fetchRow({ tableId: table._id, rowId })
})
</script>
<div class="actions">
{#each errorMessages as error}
<p class="error">{error}</p>
{/each}
<form on:submit|preventDefault>
{#each fields as field}
<div class="form-item">
<Label small forAttr={'form-stacked-text'}>{field}</Label>
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
<select bind:value={row[field]}>
{#each schema[field].constraints.inclusion as opt}
<option>{opt}</option>
{/each}
</select>
{:else if schema[field].type === 'datetime'}
<DatePicker bind:value={row[field]} />
{:else if schema[field].type === 'boolean'}
<input class="input" type="checkbox" bind:checked={row[field]} />
{:else if schema[field].type === 'number'}
<input class="input" type="number" bind:value={row[field]} />
{:else if schema[field].type === 'string'}
<input class="input" type="text" bind:value={row[field]} />
{:else if schema[field].type === 'longform'}
<RichText bind:value={row[field]} />
{:else if schema[field].type === 'attachment'}
<Dropzone bind:files={row[field]} />
{/if}
</div>
<hr />
{/each}
</form>
</div>
<footer>
<div class="button-margin-3">
<Button secondary on:click={onClosed}>Cancel</Button>
</div>
<div class="button-margin-4">
<Button primary on:click={save}>Save</Button>
</div>
</footer>
<style>
.actions {
padding: var(--spacing-l) var(--spacing-xl);
}
footer {
padding: 20px 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-3 {
grid-column-start: 3;
display: grid;
}
.button-margin-4 {
grid-column-start: 4;
display: grid;
}
</style>

5
packages/standard-components/src/grid/DateTime/Wrapper.svelte
View file

@ -1,5 +0,0 @@
<script>
import { DatePicker } from "@budibase/bbui"
</script>
<DatePicker />

75
packages/standard-components/src/grid/Relationship/RelationshipDisplay.svelte
View file

@ -1,75 +0,0 @@
<script>
import { onMount } from "svelte"
export let columnName
export let row
export let SDK
const { API } = SDK
$: count =
row && columnName && Array.isArray(row[columnName])
? row[columnName].length
: 0
let linkedRows = []
let displayColumn
onMount(async () => {
linkedRows = await API.fetchRelationshipData({
tableId: row.tableId,
rowId: row._id,
fieldName: columnName,
})
if (linkedRows && linkedRows.length) {
const table = await API.fetchTableDefinition(linkedRows[0].tableId)
if (table && table.primaryDisplay) {
displayColumn = table.primaryDisplay
}
}
})
async function fetchLinkedRowsData(row, columnName) {
if (!row || !row._id) {
return []
}
return await API.fetchRelationshipData({
tableId: row.tableId,
rowId: row._id,
fieldName: columnName,
})
}
</script>
<div class="container">
{#if linkedRows && linkedRows.length && displayColumn}
{#each linkedRows as linkedRow}
{#if linkedRow[displayColumn] != null && linkedRow[displayColumn] !== ''}
<div class="linked-row">{linkedRow[displayColumn]}</div>
{/if}
{/each}
{:else}{count} related row(s){/if}
</div>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xs);
width: 100%;
}
/* This styling is opinionated to ensure these always look consistent */
.linked-row {
color: white;
background-color: #616161;
border-radius: var(--border-radius-xs);
padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
var(--spacing-s);
line-height: 1;
font-size: 0.8em;
font-family: var(--font-sans);
font-weight: 500;
}
</style>

32
packages/standard-components/src/grid/Relationship/RelationshipLabel.svelte
View file

@ -1,32 +0,0 @@
<script>
export let columnName
export let row
$: items = row?.[columnName] || []
</script>
<div class="container">
{#each items as item}
<div class="item">{item?.primaryDisplay ?? ''}</div>
{/each}
</div>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xs);
width: 100%;
}
.item {
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-s);
border: 1px solid var(--grey-5);
color: var(--grey-7);
line-height: normal;
border-radius: 4px;
}
</style>

17
packages/standard-components/src/grid/Select/Wrapper.svelte
View file

@ -1,17 +0,0 @@
<script>
import { Select } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
export let value
export let options
$: dispatch("change", value)
</script>
<Select label={false} bind:value>
<option value="">Choose an option</option>
{#each options as option}
<option value={option}>{option}</option>
{/each}
</Select>

19
packages/standard-components/src/grid/ViewDetails/Cell.svelte
View file

@ -1,19 +0,0 @@
<script>
import { Button } from "@budibase/bbui"
export let url
export let SDK
const { linkable } = SDK
let link
</script>
<a href={url} bind:this={link} use:linkable />
<Button small translucent on:click={() => link.click()}>View</Button>
<style>
a {
display: none;
}
</style>

169
packages/standard-components/src/grid/customRenderer.js
View file

@ -1,169 +0,0 @@
// Custom renderers to handle special types
// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
import AttachmentCell from "./AttachmentCell/Button.svelte"
import ViewDetails from "./ViewDetails/Cell.svelte"
import Select from "./Select/Wrapper.svelte"
import DatePicker from "./DateTime/Wrapper.svelte"
import RelationshipLabel from "./Relationship/RelationshipLabel.svelte"
const renderers = new Map([
["boolean", booleanRenderer],
["attachment", attachmentRenderer],
["options", optionsRenderer],
["link", linkedRowRenderer],
["_id", viewDetailsRenderer],
])
export function getRenderer(schema, editable, SDK) {
if (renderers.get(schema.type)) {
return renderers.get(schema.type)(
schema.options,
schema.constraints,
editable,
SDK
)
} else {
return false
}
}
/* eslint-disable no-unused-vars */
function booleanRenderer(options, constraints, editable, SDK) {
return params => {
const toggle = e => {
params.value = !params.value
params.setValue(e.currentTarget.checked)
}
let input = document.createElement("input")
input.style.display = "grid"
input.style.placeItems = "center"
input.style.height = "100%"
input.type = "checkbox"
input.checked = params.value
if (editable) {
input.addEventListener("click", toggle)
} else {
input.disabled = true
}
return input
}
}
/* eslint-disable no-unused-vars */
function attachmentRenderer(options, constraints, editable, SDK) {
return params => {
const container = document.createElement("div")
const attachmentInstance = new AttachmentCell({
target: container,
props: {
files: params.value || [],
SDK,
},
})
const deleteFile = event => {
const newFilesArray = params.value.filter(file => file !== event.detail)
params.setValue(newFilesArray)
}
attachmentInstance.$on("delete", deleteFile)
return container
}
}
/* eslint-disable no-unused-vars */
function dateRenderer(options, constraints, editable, SDK) {
return function(params) {
const container = document.createElement("div")
const toggle = e => {
params.setValue(e.detail[0][0])
}
// Options need to be passed in with minTime and maxTime! Needs bbui update.
new DatePicker({
target: container,
props: {
value: params.value,
SDK,
},
})
return container
}
}
function optionsRenderer(options, constraints, editable, SDK) {
return params => {
if (!editable) return params.value
const container = document.createElement("div")
container.style.display = "grid"
container.style.placeItems = "center"
container.style.height = "100%"
const change = e => {
params.setValue(e.detail)
}
const selectInstance = new Select({
target: container,
props: {
value: params.value,
options: constraints.inclusion,
SDK,
},
})
selectInstance.$on("change", change)
return container
}
}
/* eslint-disable no-unused-vars */
function linkedRowRenderer(options, constraints, editable, SDK) {
return params => {
let container = document.createElement("div")
container.style.display = "grid"
container.style.placeItems = "center"
container.style.height = "100%"
new RelationshipLabel({
target: container,
props: {
row: params.data,
columnName: params.column.colId,
SDK,
},
})
return container
}
}
/* eslint-disable no-unused-vars */
function viewDetailsRenderer(options, constraints, editable, SDK) {
return params => {
let container = document.createElement("div")
container.style.display = "grid"
container.style.alignItems = "center"
container.style.height = "100%"
let url = "/"
if (options.detailUrl) {
url = options.detailUrl.replace(":id", params.data._id)
}
if (!url.startsWith("/")) {
url = `/${url}`
}
new ViewDetails({
target: container,
props: {
url,
SDK,
},
})
return container
}
}

6
packages/standard-components/src/grid/valueSetters.js
View file

@ -1,6 +0,0 @@
// https://www.ag-grid.com/javascript-grid-value-setters/
// These handles values and makes sure they adhere to the data type provided by the table
export const number = params => {
params.data[params.colDef.field] = parseFloat(params.newValue)
return true
}

6
packages/standard-components/src/index.js
View file

@ -13,17 +13,16 @@ import { loadSpectrumIcons } from "./spectrum-icons"
loadSpectrumIcons()
export { default as container } from "./Container.svelte"
export { default as datagrid } from "./grid/Component.svelte"
export { default as dataprovider } from "./DataProvider.svelte"
export { default as screenslot } from "./ScreenSlot.svelte"
export { default as button } from "./Button.svelte"
export { default as list } from "./List.svelte"
export { default as repeater } from "./Repeater.svelte"
export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.svelte"
export { default as text } from "./Text.svelte"
export { default as login } from "./Login.svelte"
export { default as navigation } from "./Navigation.svelte"
export { default as link } from "./Link.svelte"
export { default as rowdetail } from "./RowDetail.svelte"
export { default as heading } from "./Heading.svelte"
export { default as image } from "./Image.svelte"
export { default as embed } from "./Embed.svelte"
@ -34,3 +33,4 @@ export { default as search } from "./Search.svelte"
export { default as backgroundimage } from "./BackgroundImage.svelte"
export * from "./charts"
export * from "./forms"
export * from "./table"

39
packages/standard-components/src/table/AttachmentRenderer.svelte Normal file
View file

@ -0,0 +1,39 @@
<script>
export let value
const displayLimit = 5
$: attachments = value?.slice(0, displayLimit) ?? []
$: leftover = (value?.length ?? 0) - attachments.length
</script>
{#each attachments as attachment}
{#if attachment.type.startsWith('image')}
<img src={attachment.url} alt={attachment.extension} />
{:else}
<div class="file">{attachment.extension}</div>
{/if}
{/each}
{#if leftover}
<div>+{leftover} more</div>
{/if}
<style>
img {
height: 32px;
max-width: 64px;
}
.file {
height: 32px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 8px;
color: var(--spectrum-global-color-gray-800);
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 2px;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
}
</style>

38
packages/standard-components/src/table/BooleanRenderer.svelte Normal file
View file

@ -0,0 +1,38 @@
<script>
import "@spectrum-css/checkbox/dist/index-vars.css"
export let value
</script>
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
<input
type="checkbox"
class="spectrum-Checkbox-input"
id="checkbox-1"
disabled
checked={!!value} />
<span class="spectrum-Checkbox-box">
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</label>
<style>
.spectrum-Checkbox {
min-height: 0;
}
.spectrum-Checkbox-box {
margin: 0;
}
</style>

27
packages/standard-components/src/table/CellRenderer.svelte Normal file
View file

@ -0,0 +1,27 @@
<script>
import StringRenderer from "./StringRenderer.svelte"
import BooleanRenderer from "./BooleanRenderer.svelte"
import DateTimeRenderer from "./DateTimeRenderer.svelte"
import RelationshipRenderer from "./RelationshipRenderer.svelte"
import AttachmentRenderer from "./AttachmentRenderer.svelte"
export let schema
export let value
const plainTypes = ["string", "options", "number", "longform"]
$: type = schema?.type ?? "string"
</script>
{#if value != null && value !== ''}
{#if plainTypes.includes(type)}
<StringRenderer {value} />
{:else if type === 'boolean'}
<BooleanRenderer {value} />
{:else if type === 'datetime'}
<DateTimeRenderer {value} />
{:else if type === 'link'}
<RelationshipRenderer {value} />
{:else if type === 'attachment'}
<AttachmentRenderer {value} />
{/if}
{/if}

13
packages/standard-components/src/table/DateTimeRenderer.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import dayjs from "dayjs"
export let value
</script>
<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
<style>
div {
width: 200px;
}
</style>

20
packages/standard-components/src/table/RelationshipRenderer.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
import "@spectrum-css/label/dist/index-vars.css"
export let value
const displayLimit = 5
$: relationships = value?.slice(0, displayLimit) ?? []
$: leftover = (value?.length ?? 0) - relationships.length
</script>
{#each relationships as relationship}
{#if relationship?.primaryDisplay}
<span class="spectrum-Label spectrum-Label--grey">
{relationship.primaryDisplay}
</span>
{/if}
{/each}
{#if leftover}
<div>+{leftover} more</div>
{/if}

13
packages/standard-components/src/table/StringRenderer.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
export let value
</script>
<div>{value}</div>
<style>
div {
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
</style>

290
packages/standard-components/src/table/Table.svelte Normal file
View file

@ -0,0 +1,290 @@
<script>
import { fade } from "svelte/transition"
import "@spectrum-css/table/dist/index-vars.css"
import { getContext } from "svelte"
import CellRenderer from "./CellRenderer.svelte"
export let theme
export let size
export let dataProvider
export let columns
export let showAutoColumns
export let rowCount
export let quiet
const component = getContext("component")
const { styleable, Provider } = getContext("sdk")
// Config
const rowHeight = 55
const headerHeight = 36
const rowPreload = 5
const maxRows = 100
// Sorting state
let sortColumn
let sortOrder
// Table state
$: loaded = dataProvider?.loaded ?? false
$: rows = dataProvider?.rows ?? []
$: visibleRowCount = loaded
? Math.min(rows.length, rowCount || maxRows, maxRows)
: Math.min(8, rowCount || maxRows)
$: scroll = rows.length > visibleRowCount
$: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: schema = dataProvider?.schema ?? {}
$: fields = getFields(schema, columns, showAutoColumns)
// Scrolling state
let timeout
let nextScrollTop = 0
let scrollTop = 0
$: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
$: lastVisibleRow = calculateLastVisibleRow(
firstVisibleRow,
visibleRowCount,
rows.length
)
const getContentStyle = (visibleRows, useFixedHeight) => {
if (!useFixedHeight) {
return ""
}
return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
}
const sortRows = (rows, sortColumn, sortOrder) => {
if (!sortColumn || !sortOrder) {
return rows
}
return rows.slice().sort((a, b) => {
const colA = a[sortColumn]
const colB = b[sortColumn]
if (sortOrder === "Descending") {
return colA > colB ? -1 : 1
} else {
return colA > colB ? 1 : -1
}
})
}
const sortBy = field => {
if (field === sortColumn) {
sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
} else {
sortColumn = field
sortOrder = "Descending"
}
}
const getFields = (schema, customColumns, showAutoColumns) => {
// Check for an invalid column selection
let invalid = false
customColumns?.forEach(column => {
if (schema[column] == null) {
invalid = true
}
})
// Use column selection if it exists
if (!invalid && customColumns?.length) {
return customColumns
}
// Otherwise generate columns
let columns = []
let autoColumns = []
Object.entries(schema).forEach(([field, fieldSchema]) => {
if (!fieldSchema?.autocolumn) {
columns.push(field)
} else if (showAutoColumns) {
autoColumns.push(field)
}
})
return columns.concat(autoColumns)
}
const onScroll = event => {
nextScrollTop = event.target.scrollTop
if (timeout) {
return
}
timeout = setTimeout(() => {
scrollTop = nextScrollTop
timeout = null
}, 50)
}
const calculateFirstVisibleRow = scrollTop => {
return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
}
const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
}
</script>
{#if !loaded}
<div class="content" style={contentStyle} />
{:else}
<div use:styleable={$component.styles}>
<div
on:scroll={onScroll}
lang="en"
dir="ltr"
class:quiet
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
<div class="content" style={contentStyle}>
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
<thead class="spectrum-Table-head">
<tr>
{#if $component.children}
<th class="spectrum-Table-headCell">
<div class="spectrum-Table-headCell-content" />
</th>
{/if}
{#each fields as field}
<th
class="spectrum-Table-headCell is-sortable"
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(field)}>
<div class="spectrum-Table-headCell-content">
<div class="title">{schema[field]?.name}</div>
<svg
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
class:visible={sortColumn === field}
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Arrow100" />
</svg>
</div>
</th>
{/each}
</tr>
</thead>
<tbody class="spectrum-Table-body">
{#each sortedRows as row, idx}
<tr
class="spectrum-Table-row"
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
{#if idx >= firstVisibleRow && idx <= lastVisibleRow}
{#if $component.children}
<td
class="spectrum-Table-cell spectrum-Table-cell--divider">
<div class="spectrum-Table-cell-content">
<Provider data={row}>
<slot />
</Provider>
</div>
</td>
{/if}
{#each fields as field}
<td class="spectrum-Table-cell">
<div class="spectrum-Table-cell-content">
<CellRenderer
schema={schema[field]}
value={row[field]} />
</div>
</td>
{/each}
{/if}
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
{/if}
<style>
.spectrum {
position: relative;
overflow: auto;
border: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
.spectrum.quiet {
border: none !important;
}
table {
width: 100%;
}
.spectrum-Table-sortedIcon {
opacity: 0;
display: block !important;
}
.spectrum-Table-sortedIcon.visible {
opacity: 1;
}
.spectrum,
th {
border-bottom: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
th {
vertical-align: middle;
height: var(--header-height);
position: sticky;
top: 0;
background-color: var(--spectrum-global-color-gray-100);
z-index: 2;
}
.spectrum-Table-headCell-content {
white-space: nowrap;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
user-select: none;
}
.spectrum-Table-headCell-content .title {
overflow: hidden;
text-overflow: ellipsis;
}
tbody {
z-index: 1;
}
tbody tr {
height: var(--row-height);
}
tbody tr.hidden {
height: calc(var(--row-height) + 1px);
}
tbody tr.offset {
background-color: red;
display: block;
}
td {
padding-top: 0;
padding-bottom: 0;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
tr:first-child td {
border-top: none !important;
}
.spectrum:not(.quiet) td.spectrum-Table-cell--divider {
width: 1px;
border-right: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
.spectrum-Table-cell-content {
height: var(--row-height);
white-space: nowrap;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 4px;
}
</style>

1
packages/standard-components/src/table/index.js Normal file
View file

@ -0,0 +1 @@
export { default as table } from "./Table.svelte"

133
packages/standard-components/yarn.lock
View file

@ -56,13 +56,6 @@
svelte-portal "^1.0.0"
turndown "^7.0.0"
"@budibase/svelte-ag-grid@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-1.0.4.tgz#41cceec4bde2c4aea8b9da8f610fe36055c7709f"
integrity sha512-JZm6qujxnZpqw7Twbegr6se4sHhyWzN0Cibrk5bVBH32hBgzD6dd33fxwrjHKkWFxjys9wRT+cqYgYVlSt9E3w==
dependencies:
ag-grid-community "^24.0.0"
"@polka/url@^0.5.0":
version "0.5.0"
resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
@ -132,72 +125,82 @@
estree-walker "^1.0.1"
picomatch "^2.2.2"
"@spectrum-css/actionbutton@^1.0.0-beta.1":
version "1.0.0-beta.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6"
integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ==
"@spectrum-css/actionbutton@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
"@spectrum-css/button@^3.0.0-beta.6":
version "3.0.0-beta.6"
resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
"@spectrum-css/button@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
"@spectrum-css/checkbox@^3.0.0-beta.6":
version "3.0.0-beta.6"
resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374"
integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ==
"@spectrum-css/checkbox@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
"@spectrum-css/fieldlabel@^3.0.0-beta.7":
version "3.0.0-beta.7"
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114"
integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog==
"@spectrum-css/fieldlabel@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.1.tgz#39f7c0f25cc2ff402afeff005341b0832f7c588c"
integrity sha512-LMfwrwIq8wEEvxFLobdLvXRwKrp8o9Fty4iJ9aYl2Rj1uXkfRd8qLz9HGZjLEE1OuJgoTBgamYABl7EvoA5PLw==
"@spectrum-css/icon@^3.0.0-beta.2":
version "3.0.0-beta.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
"@spectrum-css/icon@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
"@spectrum-css/inputgroup@^3.0.0-beta.7":
version "3.0.0-beta.7"
resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.0-beta.7.tgz#9829812e349bf973fb8835f0586bf013c8c38d23"
integrity sha512-pZDpYhtTKZUVG31Rtx7imdwK2ohLyVuTEsl+mj2yDKn+2TOwYRxr6LdbfNhFN4xd0GtSqapKYfbgKBWYpIyiSw==
"@spectrum-css/inputgroup@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.1.tgz#8c5b257b57b3b2cf04e99355709365fa0d6838cc"
integrity sha512-asBRa1jTlld6plkcq4ySO+xl+OJlCMSOLoAFdSSIJowcSlCV0yDy7oeOhf5YQv9mMHFWTKlWUSoAKDZTguIPxA==
"@spectrum-css/menu@^3.0.0-beta.5":
version "3.0.0-beta.5"
resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74"
integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw==
"@spectrum-css/label@^2.0.9":
version "2.0.9"
resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
"@spectrum-css/page@^3.0.0-beta.0":
version "3.0.0-beta.0"
resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58"
integrity sha512-+OD+l3aLisykxJnHfLkdkxMS1Uj1vKGYpKil7W0r5lSWU44eHyRgb8ZK5Vri1+sUO5SSf/CTybeVwtXME9wMLA==
"@spectrum-css/menu@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
"@spectrum-css/page@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846"
integrity sha512-LAlKF8km5BlsGPpZ2SNtwKOQIHn1lz0X93aczGZVZceOg73O4gyeoT5cx4vi1z+KtBRY5VMDWx3XgGtUwwjqwA==
dependencies:
"@spectrum-css/vars" "^3.0.0-beta.2"
"@spectrum-css/vars" "^3.0.1"
"@spectrum-css/picker@^1.0.0-beta.3":
version "1.0.0-beta.3"
resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965"
integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ==
"@spectrum-css/picker@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.1.tgz#98991198576d26bd14160824e7b6f3c278ff930b"
integrity sha512-Rv4/UBOdNW1gs7WVBCJnPD5VFly8MqP++psDX6kcugUIcfJy0GC3acvElotmKRlCDk8Qxks2W2A0jKeSgphTmA==
"@spectrum-css/popover@^3.0.0-beta.6":
version "3.0.0-beta.6"
resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2"
integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ==
"@spectrum-css/popover@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
"@spectrum-css/stepper@^3.0.0-beta.7":
version "3.0.0-beta.7"
resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.0-beta.7.tgz#fc78435ce878c5e233af13e43ed2c3e8671a2bbc"
integrity sha512-TQL2OBcdEgbHBwehMGgqMuWdKZZQPGcBRV5FlF0TUdOT58lEqFAO43Gajqvyte1P23lNmnX8KuMwkRfQdn0RzA==
"@spectrum-css/stepper@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.1.tgz#7f270f53505e7dbe082591e8ea1c4c8f397e045a"
integrity sha512-IvZlGFJ8QPr9tUz5xvVN4hASaTRDPdKu9IIp25q/x0ecgSrKAM55e3EBWEYWy1H1JI3h+zlPnNRuK0VLhDbCYA==
"@spectrum-css/textfield@^3.0.0-beta.6":
version "3.0.0-beta.6"
resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6"
integrity sha512-U7P8C3Xx8h5X+r+dZu1qbxceIxBn7ZSmMvJyC7MPSPcU3EwdzCUepERNGX7NrQdcX91XSNlPUOF7hZUognBwhQ==
"@spectrum-css/table@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
"@spectrum-css/vars@^3.0.0-beta.2":
version "3.0.0-beta.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157"
integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA==
"@spectrum-css/textfield@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.1.tgz#e875b8e37817378ad08fc4af7d53026df38911e5"
integrity sha512-MUV5q87CVxbkNdSNoxGrFbgyKc51ft/WWf3aVEoPdPw5yBnXqFe1w1YmAit5zYDOOhhs58sCLAlUcCMlOpkgrA==
"@spectrum-css/vars@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
"@types/color-name@^1.1.1":
version "1.1.1"
@ -238,11 +241,6 @@ abstract-leveldown@~0.12.0, abstract-leveldown@~0.12.1:
dependencies:
xtend "~3.0.0"
ag-grid-community@^24.0.0:
version "24.0.0"
resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-24.0.0.tgz#793a3c4a28e5148c5c8c8c6ff68e8f3c4ee6ca3d"
integrity sha512-TNNqTp918PCRicH/vE8fs1pu/hbWMc9Iem7gCjGsjlabBrGhMxCq7tYiBtguERuxdszbSImznjampnc0NvOoFg==
alphanum-sort@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@ -864,6 +862,11 @@ csso@^4.0.2:
dependencies:
css-tree "1.0.0-alpha.39"
dayjs@^1.10.4:
version "1.10.4"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
deep-equal@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"

2
packages/string-templates/src/helpers/index.js
View file

@ -35,7 +35,7 @@ const HELPERS = [
new Helper(HelperFunctionNames.LITERAL, value => {
const type = typeof value
const outputVal = type === "object" ? JSON.stringify(value) : value
return `{{-${LITERAL_MARKER}-${type}-${outputVal}-}}`
return `{{${LITERAL_MARKER} ${type}-${outputVal}}}`
}),
]

13
packages/string-templates/src/processors/postprocessor.js
View file

@ -21,13 +21,12 @@ module.exports.processors = [
if (!statement.includes(LITERAL_MARKER)) {
return statement
}
const components = statement.split("-")
// pop and shift remove the empty array elements from the first and last dash
components.pop()
components.shift()
const type = components[1]
const value = components[2]
const splitMarkerIndex = statement.indexOf("-")
const type = statement.substring(12, splitMarkerIndex)
const value = statement.substring(
splitMarkerIndex + 1,
statement.length - 2
)
switch (type) {
case "string":
return value

98
packages/string-templates/test/helpers.spec.js
View file

@ -1,15 +1,11 @@
const {
processString,
processObject,
isValid,
} = require("../src/index")
const { processString, processObject, isValid } = require("../src/index")
describe("test the custom helpers we have applied", () => {
it("should be able to use the object helper", async () => {
const output = await processString("object is {{ object obj }}", {
obj: { a: 1 },
})
expect(output).toBe("object is {\"a\":1}")
expect(output).toBe('object is {"a":1}')
})
})
@ -64,9 +60,12 @@ describe("test the array helpers", () => {
})
it("should allow use of the filter helper", async () => {
const output = await processString("{{#filter array \"person\"}}THING{{else}}OTHER{{/filter}}", {
array,
})
const output = await processString(
'{{#filter array "person"}}THING{{else}}OTHER{{/filter}}',
{
array,
}
)
expect(output).toBe("THING")
})
@ -78,7 +77,7 @@ describe("test the array helpers", () => {
})
it("should allow use of the join helper", async () => {
const output = await processString("{{join array \"-\"}}", {
const output = await processString('{{join array "-"}}', {
array,
})
expect(output).toBe("hi-person-how-are-you")
@ -86,14 +85,14 @@ describe("test the array helpers", () => {
it("should allow use of the sort helper", async () => {
const output = await processString("{{sort array}}", {
array: ["d", "a", "c", "e"]
array: ["d", "a", "c", "e"],
})
expect(output).toBe("a,c,d,e")
})
it("should allow use of the unique helper", async () => {
const output = await processString("{{unique array}}", {
array: ["a", "a", "b"]
array: ["a", "a", "b"],
})
expect(output).toBe("a,b")
})
@ -102,7 +101,7 @@ describe("test the array helpers", () => {
describe("test the number helpers", () => {
it("should allow use of the addCommas helper", async () => {
const output = await processString("{{ addCommas number }}", {
number: 10000000
number: 10000000,
})
expect(output).toBe("10,000,000")
})
@ -132,7 +131,7 @@ describe("test the number helpers", () => {
describe("test the url helpers", () => {
const url = "http://example.com?query=1"
it("should allow use of the stripQueryString helper", async () => {
const output = await processString('{{stripQuerystring url }}', {
const output = await processString("{{stripQuerystring url }}", {
url,
})
expect(output).toBe("http://example.com")
@ -149,10 +148,12 @@ describe("test the url helpers", () => {
const output = await processString("{{ object ( urlParse url ) }}", {
url,
})
expect(output).toBe("{\"protocol\":\"http:\",\"slashes\":true,\"auth\":null,\"host\":\"example.com\"," +
"\"port\":null,\"hostname\":\"example.com\",\"hash\":null,\"search\":\"?query=1\"," +
"\"query\":\"query=1\",\"pathname\":\"/\",\"path\":\"/?query=1\"," +
"\"href\":\"http://example.com/?query=1\"}")
expect(output).toBe(
'{"protocol":"http:","slashes":true,"auth":null,"host":"example.com",' +
'"port":null,"hostname":"example.com","hash":null,"search":"?query=1",' +
'"query":"query=1","pathname":"/","path":"/?query=1",' +
'"href":"http://example.com/?query=1"}'
)
})
})
@ -224,19 +225,25 @@ describe("test the string helpers", () => {
})
it("should allow use of the startsWith helper", async () => {
const output = await processString("{{ #startsWith 'Hello' string }}Hi!{{ else }}Goodbye!{{ /startsWith }}", {
string: "Hello my name is Mike",
})
const output = await processString(
"{{ #startsWith 'Hello' string }}Hi!{{ else }}Goodbye!{{ /startsWith }}",
{
string: "Hello my name is Mike",
}
)
expect(output).toBe("Hi!")
})
})
describe("test the comparison helpers", () => {
async function compare(func, a, b) {
const output = await processString(`{{ #${func} a b }}Success{{ else }}Fail{{ /${func} }}`, {
a,
b,
})
const output = await processString(
`{{ #${func} a b }}Success{{ else }}Fail{{ /${func} }}`,
{
a,
b,
}
)
expect(output).toBe("Success")
}
it("should allow use of the lt helper", async () => {
@ -256,9 +263,12 @@ describe("test the comparison helpers", () => {
})
it("should allow use of gte with a literal value", async () => {
const output = await processString(`{{ #gte a "50" }}s{{ else }}f{{ /gte }}`, {
a: 51,
})
const output = await processString(
`{{ #gte a "50" }}s{{ else }}f{{ /gte }}`,
{
a: 51,
}
)
expect(output).toBe("s")
})
})
@ -273,21 +283,31 @@ describe("Test the literal helper", () => {
it("should allow use of the literal specifier for an object", async () => {
const output = await processString(`{{literal a}}`, {
a: {b: 1},
a: { b: 1 },
})
expect(output.b).toBe(1)
})
it("should allow use of the literal specifier for an object with dashes", async () => {
const output = await processString(`{{literal a}}`, {
a: { b: "i-have-dashes" },
})
expect(output.b).toBe("i-have-dashes")
})
})
describe("Cover a few complex use cases", () => {
it("should allow use of three different collection helpers", async () => {
const output = await processString(`{{ join ( after ( split "My name is: Joe Smith" " " ) 3 ) " " }}`, {})
const output = await processString(
`{{ join ( after ( split "My name is: Joe Smith" " " ) 3 ) " " }}`,
{}
)
expect(output).toBe("Joe Smith")
})
it("should allow a complex array case", async () => {
const output = await processString("{{ last ( sort ( unique array ) ) }}", {
array: ["a", "a", "d", "c", "e"]
array: ["a", "a", "d", "c", "e"],
})
expect(output).toBe("e")
})
@ -299,7 +319,9 @@ describe("Cover a few complex use cases", () => {
})
it("should make sure case is valid", () => {
const validity = isValid("{{ avg [c355ec2b422e54f988ae553c8acd811ea].[a] [c355ec2b422e54f988ae553c8acd811ea].[b] }}")
const validity = isValid(
"{{ avg [c355ec2b422e54f988ae553c8acd811ea].[a] [c355ec2b422e54f988ae553c8acd811ea].[b] }}"
)
expect(validity).toBe(true)
})
@ -314,7 +336,9 @@ describe("Cover a few complex use cases", () => {
})
it("should confirm a subtraction validity", () => {
const validity = isValid("{{ subtract [c390c23a7f1b6441c98d2fe2a51248ef3].[total profit] [c390c23a7f1b6441c98d2fe2a51248ef3].[total revenue] }}")
const validity = isValid(
"{{ subtract [c390c23a7f1b6441c98d2fe2a51248ef3].[total profit] [c390c23a7f1b6441c98d2fe2a51248ef3].[total revenue] }}"
)
expect(validity).toBe(true)
})
@ -344,9 +368,11 @@ describe("Cover a few complex use cases", () => {
})
it("getting a nice date from the user", async () => {
const input = {text: `{{ date user.subscriptionDue "DD-MM" }}`}
const context = JSON.parse(`{"user":{"email":"test@test.com","roleId":"ADMIN","type":"user","tableId":"ta_users","subscriptionDue":"2021-01-12T12:00:00.000Z","_id":"ro_ta_users_us_test@test.com","_rev":"2-24cc794985eb54183ecb93e148563f3d"}}`)
const input = { text: `{{ date user.subscriptionDue "DD-MM" }}` }
const context = JSON.parse(
`{"user":{"email":"test@test.com","roleId":"ADMIN","type":"user","tableId":"ta_users","subscriptionDue":"2021-01-12T12:00:00.000Z","_id":"ro_ta_users_us_test@test.com","_rev":"2-24cc794985eb54183ecb93e148563f3d"}}`
)
const output = await processObject(input, context)
expect(output.text).toBe("12-01")
})
})
})