mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
4 years ago
committed by
GitHub
GitHub
80 changed files with 1581 additions and 363 deletions
@ -0,0 +1,121 @@ |
|||||
|
/** |
||||
|
* Gets the schema for a datasource which is targeting a JSON array, including |
||||
|
* nested JSON arrays. The returned schema is a squashed, table-like schema |
||||
|
* which is fully compatible with the rest of the platform. |
||||
|
* @param tableSchema the full schema for the table this JSON field is in |
||||
|
* @param datasource the datasource configuration |
||||
|
*/ |
||||
|
export const getJSONArrayDatasourceSchema = (tableSchema, datasource) => { |
||||
|
let jsonSchema = tableSchema |
||||
|
let keysToSchema = [] |
||||
|
|
||||
|
// If we are already deep inside a JSON field then we need to account
|
||||
|
// for the keys that brought us here, so we can get the schema for the
|
||||
|
// depth we're actually at
|
||||
|
if (datasource.prefixKeys) { |
||||
|
keysToSchema = datasource.prefixKeys.concat(["schema"]) |
||||
|
} |
||||
|
|
||||
|
// We parse the label of the datasource to work out where we are inside
|
||||
|
// the structure. We can use this to know which part of the schema
|
||||
|
// is available underneath our current position.
|
||||
|
keysToSchema = keysToSchema.concat(datasource.label.split(".").slice(2)) |
||||
|
|
||||
|
// Follow the JSON key path until we reach the schema for the level
|
||||
|
// we are at
|
||||
|
for (let i = 0; i < keysToSchema.length; i++) { |
||||
|
jsonSchema = jsonSchema?.[keysToSchema[i]] |
||||
|
if (jsonSchema?.schema) { |
||||
|
jsonSchema = jsonSchema.schema |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// We need to convert the JSON schema into a more typical looking table
|
||||
|
// schema so that it works with the rest of the platform
|
||||
|
return convertJSONSchemaToTableSchema(jsonSchema, { |
||||
|
squashObjects: true, |
||||
|
prefixKeys: keysToSchema, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Converts a JSON field schema (or sub-schema of a nested field) into a schema |
||||
|
* that looks like a typical table schema. |
||||
|
* @param jsonSchema the JSON field schema or sub-schema |
||||
|
* @param options |
||||
|
*/ |
||||
|
export const convertJSONSchemaToTableSchema = (jsonSchema, options) => { |
||||
|
if (!jsonSchema) { |
||||
|
return null |
||||
|
} |
||||
|
|
||||
|
// Add default options
|
||||
|
options = { squashObjects: false, prefixKeys: null, ...options } |
||||
|
|
||||
|
// Immediately strip the wrapper schema for objects, or wrap shallow values in
|
||||
|
// a fake "value" schema
|
||||
|
if (jsonSchema.schema) { |
||||
|
jsonSchema = jsonSchema.schema |
||||
|
} else { |
||||
|
jsonSchema = { |
||||
|
value: jsonSchema, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Extract all deep keys from the schema
|
||||
|
const keys = extractJSONSchemaKeys(jsonSchema, options.squashObjects) |
||||
|
|
||||
|
// Form a full schema from all the deep schema keys
|
||||
|
let schema = {} |
||||
|
keys.forEach(({ key, type }) => { |
||||
|
schema[key] = { type, name: key, prefixKeys: options.prefixKeys } |
||||
|
}) |
||||
|
return schema |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Recursively builds paths to all leaf fields in a JSON field schema structure, |
||||
|
* stopping when leaf nodes or arrays are reached. |
||||
|
* @param jsonSchema the JSON field schema or sub-schema |
||||
|
* @param squashObjects whether to recurse into objects or not |
||||
|
*/ |
||||
|
const extractJSONSchemaKeys = (jsonSchema, squashObjects = false) => { |
||||
|
if (!jsonSchema || !Object.keys(jsonSchema).length) { |
||||
|
return [] |
||||
|
} |
||||
|
|
||||
|
// Iterate through every schema key
|
||||
|
let keys = [] |
||||
|
Object.keys(jsonSchema).forEach(key => { |
||||
|
const type = jsonSchema[key].type |
||||
|
|
||||
|
// If we encounter an object, then only go deeper if we want to squash
|
||||
|
// object paths
|
||||
|
if (type === "json" && squashObjects) { |
||||
|
// Find all keys within this objects schema
|
||||
|
const childKeys = extractJSONSchemaKeys( |
||||
|
jsonSchema[key].schema, |
||||
|
squashObjects |
||||
|
) |
||||
|
|
||||
|
// Append child paths onto the current path to build the full path
|
||||
|
keys = keys.concat( |
||||
|
childKeys.map(childKey => ({ |
||||
|
key: `${key}.${childKey.key}`, |
||||
|
type: childKey.type, |
||||
|
})) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
// Otherwise add this as a lead node.
|
||||
|
// We transform array types from "array" into "jsonarray" here to avoid
|
||||
|
// confusion with the existing "array" type that represents a multi-select.
|
||||
|
else { |
||||
|
keys.push({ |
||||
|
key, |
||||
|
type: type === "array" ? "jsonarray" : type, |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
return keys |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
import { FIELDS } from "constants/backend" |
||||
|
|
||||
|
function baseConversion(type) { |
||||
|
if (type === "string") { |
||||
|
return { |
||||
|
type: FIELDS.STRING.type, |
||||
|
} |
||||
|
} else if (type === "boolean") { |
||||
|
return { |
||||
|
type: FIELDS.BOOLEAN.type, |
||||
|
} |
||||
|
} else if (type === "number") { |
||||
|
return { |
||||
|
type: FIELDS.NUMBER.type, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function recurse(schemaLevel = {}, objectLevel) { |
||||
|
if (!objectLevel) { |
||||
|
return null |
||||
|
} |
||||
|
const baseType = typeof objectLevel |
||||
|
if (baseType !== "object") { |
||||
|
return baseConversion(baseType) |
||||
|
} |
||||
|
for (let [key, value] of Object.entries(objectLevel)) { |
||||
|
const type = typeof value |
||||
|
// check array first, since arrays are objects
|
||||
|
if (Array.isArray(value)) { |
||||
|
const schema = recurse(schemaLevel[key], value[0]) |
||||
|
if (schema) { |
||||
|
schemaLevel[key] = { |
||||
|
type: FIELDS.ARRAY.type, |
||||
|
schema, |
||||
|
} |
||||
|
} |
||||
|
} else if (type === "object") { |
||||
|
const schema = recurse(schemaLevel[key], objectLevel[key]) |
||||
|
if (schema) { |
||||
|
schemaLevel[key] = schema |
||||
|
} |
||||
|
} else { |
||||
|
schemaLevel[key] = baseConversion(type) |
||||
|
} |
||||
|
} |
||||
|
if (!schemaLevel.type) { |
||||
|
return { type: FIELDS.JSON.type, schema: schemaLevel } |
||||
|
} else { |
||||
|
return schemaLevel |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function generate(object) { |
||||
|
return recurse({}, object).schema |
||||
|
} |
||||
@ -0,0 +1,129 @@ |
|||||
|
<script> |
||||
|
import Editor from "components/integration/QueryEditor.svelte" |
||||
|
import { |
||||
|
ModalContent, |
||||
|
Tabs, |
||||
|
Tab, |
||||
|
Button, |
||||
|
Input, |
||||
|
Select, |
||||
|
Body, |
||||
|
Layout, |
||||
|
} from "@budibase/bbui" |
||||
|
import { onMount, createEventDispatcher } from "svelte" |
||||
|
import { FIELDS } from "constants/backend" |
||||
|
import { generate } from "builderStore/schemaGenerator" |
||||
|
|
||||
|
export let schema = {} |
||||
|
export let json |
||||
|
|
||||
|
let dispatcher = createEventDispatcher() |
||||
|
let mode = "Form" |
||||
|
let fieldCount = 0 |
||||
|
let fieldKeys = {}, |
||||
|
fieldTypes = {} |
||||
|
let keyValueOptions = [ |
||||
|
{ label: "String", value: FIELDS.STRING.type }, |
||||
|
{ label: "Number", value: FIELDS.NUMBER.type }, |
||||
|
{ label: "Boolean", value: FIELDS.BOOLEAN.type }, |
||||
|
{ label: "Object", value: FIELDS.JSON.type }, |
||||
|
{ label: "Array", value: FIELDS.ARRAY.type }, |
||||
|
] |
||||
|
let invalid = false |
||||
|
|
||||
|
async function onJsonUpdate({ detail }) { |
||||
|
const input = detail.value |
||||
|
json = input |
||||
|
try { |
||||
|
// check json valid first |
||||
|
let inputJson = JSON.parse(input) |
||||
|
schema = generate(inputJson) |
||||
|
updateCounts() |
||||
|
invalid = false |
||||
|
} catch (err) { |
||||
|
// json not currently valid |
||||
|
invalid = true |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function updateCounts() { |
||||
|
if (!schema) { |
||||
|
schema = {} |
||||
|
} |
||||
|
let i = 0 |
||||
|
for (let [key, value] of Object.entries(schema)) { |
||||
|
fieldKeys[i] = key |
||||
|
fieldTypes[i] = value.type |
||||
|
i++ |
||||
|
} |
||||
|
fieldCount = i |
||||
|
} |
||||
|
|
||||
|
function saveSchema() { |
||||
|
for (let i of Object.keys(fieldKeys)) { |
||||
|
const key = fieldKeys[i] |
||||
|
// they were added to schema, rather than generated |
||||
|
if (!schema[key]) { |
||||
|
schema[key] = { |
||||
|
type: fieldTypes[i], |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
dispatcher("save", { schema, json }) |
||||
|
} |
||||
|
|
||||
|
onMount(() => { |
||||
|
updateCounts() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<ModalContent |
||||
|
title={"JSON Schema Editor"} |
||||
|
confirmText="Save Column" |
||||
|
onConfirm={saveSchema} |
||||
|
bind:disabled={invalid} |
||||
|
size="L" |
||||
|
> |
||||
|
<Tabs selected={mode} noPadding> |
||||
|
<Tab title="Form"> |
||||
|
{#each Array(fieldCount) as _, i} |
||||
|
<div class="horizontal"> |
||||
|
<Input outline label="Key" bind:value={fieldKeys[i]} /> |
||||
|
<Select |
||||
|
label="Type" |
||||
|
options={keyValueOptions} |
||||
|
bind:value={fieldTypes[i]} |
||||
|
getOptionValue={field => field.value} |
||||
|
getOptionLabel={field => field.label} |
||||
|
/> |
||||
|
</div> |
||||
|
{/each} |
||||
|
<div class:add-field-btn={fieldCount !== 0}> |
||||
|
<Button primary text on:click={() => fieldCount++}>Add Field</Button> |
||||
|
</div> |
||||
|
</Tab> |
||||
|
<Tab title="JSON"> |
||||
|
<Layout noPadding gap="XS"> |
||||
|
<Body size="S"> |
||||
|
Provide a sample JSON blob here to automatically determine your |
||||
|
schema. |
||||
|
</Body> |
||||
|
<Editor mode="json" on:change={onJsonUpdate} value={json} /> |
||||
|
</Layout> |
||||
|
</Tab> |
||||
|
</Tabs> |
||||
|
</ModalContent> |
||||
|
|
||||
|
<style> |
||||
|
.horizontal { |
||||
|
display: grid; |
||||
|
grid-template-columns: 30% 1fr; |
||||
|
grid-gap: var(--spacing-s); |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.add-field-btn { |
||||
|
margin-top: var(--spacing-xl); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,152 @@ |
|||||
|
<script> |
||||
|
import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui" |
||||
|
import { store, currentAsset } from "builderStore" |
||||
|
import { tables } from "stores/backend" |
||||
|
import { |
||||
|
getContextProviderComponents, |
||||
|
getSchemaForDatasource, |
||||
|
} from "builderStore/dataBinding" |
||||
|
import SaveFields from "./SaveFields.svelte" |
||||
|
|
||||
|
export let parameters |
||||
|
export let bindings = [] |
||||
|
|
||||
|
$: formComponents = getContextProviderComponents( |
||||
|
$currentAsset, |
||||
|
$store.selectedComponentId, |
||||
|
"form" |
||||
|
) |
||||
|
$: schemaComponents = getContextProviderComponents( |
||||
|
$currentAsset, |
||||
|
$store.selectedComponentId, |
||||
|
"schema" |
||||
|
) |
||||
|
$: providerOptions = getProviderOptions(formComponents, schemaComponents) |
||||
|
$: schemaFields = getSchemaFields($currentAsset, parameters?.tableId) |
||||
|
$: tableOptions = $tables.list || [] |
||||
|
|
||||
|
// Gets a context definition of a certain type from a component definition |
||||
|
const extractComponentContext = (component, contextType) => { |
||||
|
const def = store.actions.components.getDefinition(component?._component) |
||||
|
if (!def) { |
||||
|
return null |
||||
|
} |
||||
|
const contexts = Array.isArray(def.context) ? def.context : [def.context] |
||||
|
return contexts.find(context => context?.type === contextType) |
||||
|
} |
||||
|
|
||||
|
// Gets options for valid context keys which provide valid data to submit |
||||
|
const getProviderOptions = (formComponents, schemaComponents) => { |
||||
|
const formContexts = formComponents.map(component => ({ |
||||
|
component, |
||||
|
context: extractComponentContext(component, "form"), |
||||
|
})) |
||||
|
const schemaContexts = schemaComponents.map(component => ({ |
||||
|
component, |
||||
|
context: extractComponentContext(component, "schema"), |
||||
|
})) |
||||
|
const allContexts = formContexts.concat(schemaContexts) |
||||
|
|
||||
|
return allContexts.map(({ component, context }) => { |
||||
|
let runtimeBinding = component._id |
||||
|
if (context.suffix) { |
||||
|
runtimeBinding += `-${context.suffix}` |
||||
|
} |
||||
|
return { |
||||
|
label: component._instanceName, |
||||
|
value: runtimeBinding, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const getSchemaFields = (asset, tableId) => { |
||||
|
const { schema } = getSchemaForDatasource(asset, { type: "table", tableId }) |
||||
|
delete schema._id |
||||
|
delete schema._rev |
||||
|
return Object.values(schema || {}) |
||||
|
} |
||||
|
|
||||
|
const onFieldsChanged = e => { |
||||
|
parameters.fields = e.detail |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
<Body size="S"> |
||||
|
Choose the data source that provides the row you would like to duplicate. |
||||
|
<br /> |
||||
|
You can always add or override fields manually. |
||||
|
</Body> |
||||
|
|
||||
|
<div class="params"> |
||||
|
<Label small>Data Source</Label> |
||||
|
<Select |
||||
|
bind:value={parameters.providerId} |
||||
|
options={providerOptions} |
||||
|
placeholder="None" |
||||
|
/> |
||||
|
|
||||
|
<Label small>Duplicate to Table</Label> |
||||
|
<Select |
||||
|
bind:value={parameters.tableId} |
||||
|
options={tableOptions} |
||||
|
getOptionLabel={option => option.name} |
||||
|
getOptionValue={option => option._id} |
||||
|
/> |
||||
|
|
||||
|
<Label small /> |
||||
|
<Checkbox text="Require confirmation" bind:value={parameters.confirm} /> |
||||
|
|
||||
|
{#if parameters.confirm} |
||||
|
<Label small>Confirm text</Label> |
||||
|
<Input |
||||
|
placeholder="Are you sure you want to duplicate this row?" |
||||
|
bind:value={parameters.confirmText} |
||||
|
/> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
{#if parameters.tableId} |
||||
|
<div class="fields"> |
||||
|
<SaveFields |
||||
|
parameterFields={parameters.fields} |
||||
|
{schemaFields} |
||||
|
on:change={onFieldsChanged} |
||||
|
{bindings} |
||||
|
/> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
width: 100%; |
||||
|
max-width: 800px; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: stretch; |
||||
|
gap: var(--spacing-xl); |
||||
|
} |
||||
|
|
||||
|
.root :global(p) { |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.params { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-l); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: 100px 1fr; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.fields { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-l); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: 100px 1fr auto 1fr auto; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
export { default as NavigateTo } from "./NavigateTo.svelte" |
||||
|
export { default as SaveRow } from "./SaveRow.svelte" |
||||
|
export { default as DeleteRow } from "./DeleteRow.svelte" |
||||
|
export { default as ExecuteQuery } from "./ExecuteQuery.svelte" |
||||
|
export { default as TriggerAutomation } from "./TriggerAutomation.svelte" |
||||
|
export { default as ValidateForm } from "./ValidateForm.svelte" |
||||
|
export { default as LogOut } from "./LogOut.svelte" |
||||
|
export { default as ClearForm } from "./ClearForm.svelte" |
||||
|
export { default as CloseScreenModal } from "./CloseScreenModal.svelte" |
||||
|
export { default as ChangeFormStep } from "./ChangeFormStep.svelte" |
||||
|
export { default as UpdateState } from "./UpdateState.svelte" |
||||
|
export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte" |
||||
|
export { default as DuplicateRow } from "./DuplicateRow.svelte" |
||||
@ -0,0 +1,33 @@ |
|||||
|
import * as ActionComponents from "./actions" |
||||
|
import { get } from "svelte/store" |
||||
|
import { store } from "builderStore" |
||||
|
import ActionDefinitions from "./manifest.json" |
||||
|
|
||||
|
// Defines which actions are available to configure in the front end.
|
||||
|
// Unfortunately the "name" property is used as the identifier so please don't
|
||||
|
// change them.
|
||||
|
// The client library removes any spaces when processing actions, so they can
|
||||
|
// be considered as camel case too.
|
||||
|
// There is technical debt here to sanitize all these and standardise them
|
||||
|
// across the packages but it's a breaking change to existing apps.
|
||||
|
export const getAvailableActions = (getAllActions = false) => { |
||||
|
return ActionDefinitions.actions |
||||
|
.filter(action => { |
||||
|
// Filter down actions to those supported by the current client lib version
|
||||
|
if (getAllActions || !action.dependsOnFeature) { |
||||
|
return true |
||||
|
} |
||||
|
return get(store).clientFeatures?.[action.dependsOnFeature] === true |
||||
|
}) |
||||
|
.map(action => { |
||||
|
// Then enrich the actions with real components
|
||||
|
return { |
||||
|
...action, |
||||
|
component: ActionComponents[action.component], |
||||
|
} |
||||
|
}) |
||||
|
.filter(action => { |
||||
|
// Then strip any old actions for which we don't have constructors
|
||||
|
return action.component != null |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,75 @@ |
|||||
|
{ |
||||
|
"actions": [ |
||||
|
{ |
||||
|
"name": "Save Row", |
||||
|
"component": "SaveRow", |
||||
|
"context": [ |
||||
|
{ |
||||
|
"label": "Saved row", |
||||
|
"value": "row" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Duplicate Row", |
||||
|
"component": "DuplicateRow", |
||||
|
"context": [ |
||||
|
{ |
||||
|
"label": "Duplicated row", |
||||
|
"value": "row" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Delete Row", |
||||
|
"component": "DeleteRow" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Navigate To", |
||||
|
"component": "NavigateTo" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Execute Query", |
||||
|
"component": "ExecuteQuery", |
||||
|
"context": [ |
||||
|
{ |
||||
|
"label": "Query result", |
||||
|
"value": "result" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Trigger Automation", |
||||
|
"component": "TriggerAutomation" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Validate Form", |
||||
|
"component": "ValidateForm" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Log Out", |
||||
|
"component": "LogOut" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Clear Form", |
||||
|
"component": "ClearForm" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Close Screen Modal", |
||||
|
"component": "CloseScreenModal" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Change Form Step", |
||||
|
"component": "ChangeFormStep" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Refresh Data Provider", |
||||
|
"component": "RefreshDataProvider" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Update State", |
||||
|
"component": "UpdateState", |
||||
|
"dependsOnFeature": "state" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -1,80 +0,0 @@ |
|||||
import { store } from "builderStore" |
|
||||
import { get } from "svelte/store" |
|
||||
|
|
||||
import NavigateTo from "./NavigateTo.svelte" |
|
||||
import SaveRow from "./SaveRow.svelte" |
|
||||
import DeleteRow from "./DeleteRow.svelte" |
|
||||
import ExecuteQuery from "./ExecuteQuery.svelte" |
|
||||
import TriggerAutomation from "./TriggerAutomation.svelte" |
|
||||
import ValidateForm from "./ValidateForm.svelte" |
|
||||
import LogOut from "./LogOut.svelte" |
|
||||
import ClearForm from "./ClearForm.svelte" |
|
||||
import CloseScreenModal from "./CloseScreenModal.svelte" |
|
||||
import ChangeFormStep from "./ChangeFormStep.svelte" |
|
||||
import UpdateStateStep from "./UpdateState.svelte" |
|
||||
import RefreshDataProvider from "./RefreshDataProvider.svelte" |
|
||||
|
|
||||
// Defines which actions are available to configure in the front end.
|
|
||||
// Unfortunately the "name" property is used as the identifier so please don't
|
|
||||
// change them.
|
|
||||
// The client library removes any spaces when processing actions, so they can
|
|
||||
// be considered as camel case too.
|
|
||||
// There is technical debt here to sanitize all these and standardise them
|
|
||||
// across the packages but it's a breaking change to existing apps.
|
|
||||
export const getAvailableActions = () => { |
|
||||
let actions = [ |
|
||||
{ |
|
||||
name: "Save Row", |
|
||||
component: SaveRow, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Delete Row", |
|
||||
component: DeleteRow, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Navigate To", |
|
||||
component: NavigateTo, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Execute Query", |
|
||||
component: ExecuteQuery, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Trigger Automation", |
|
||||
component: TriggerAutomation, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Validate Form", |
|
||||
component: ValidateForm, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Log Out", |
|
||||
component: LogOut, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Clear Form", |
|
||||
component: ClearForm, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Close Screen Modal", |
|
||||
component: CloseScreenModal, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Change Form Step", |
|
||||
component: ChangeFormStep, |
|
||||
}, |
|
||||
{ |
|
||||
name: "Refresh Data Provider", |
|
||||
component: RefreshDataProvider, |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
if (get(store).clientFeatures?.state) { |
|
||||
actions.push({ |
|
||||
name: "Update State", |
|
||||
component: UpdateStateStep, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
return actions |
|
||||
} |
|
||||
@ -1,2 +0,0 @@ |
|||||
import EventsEditor from "./EventPropertyControl.svelte" |
|
||||
export default EventsEditor |
|
||||
@ -0,0 +1,59 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/tag/dist/index-vars.css" |
||||
|
import { ClearButton } from "@budibase/bbui" |
||||
|
import { getContext } from "svelte" |
||||
|
|
||||
|
export let onClick |
||||
|
export let text = "" |
||||
|
export let color |
||||
|
export let closable = false |
||||
|
export let size = "M" |
||||
|
|
||||
|
const component = getContext("component") |
||||
|
const { styleable, builderStore } = getContext("sdk") |
||||
|
|
||||
|
// Add color styles to main styles object, otherwise the styleable helper |
||||
|
// overrides the color when it's passed as inline style. |
||||
|
$: styles = enrichStyles($component.styles, color) |
||||
|
$: componentText = getComponentText(text, $builderStore, $component) |
||||
|
|
||||
|
const getComponentText = (text, builderState, componentState) => { |
||||
|
if (!builderState.inBuilder || componentState.editing) { |
||||
|
return text || " " |
||||
|
} |
||||
|
return text || componentState.name || "Placeholder text" |
||||
|
} |
||||
|
|
||||
|
const enrichStyles = (styles, color) => { |
||||
|
if (!color) { |
||||
|
return styles |
||||
|
} |
||||
|
return { |
||||
|
...styles, |
||||
|
normal: { |
||||
|
...styles?.normal, |
||||
|
"background-color": color, |
||||
|
"border-color": color, |
||||
|
color: "white", |
||||
|
"--spectrum-clearbutton-medium-icon-color": "white", |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="spectrum-Tag spectrum-Tag--size{size}" use:styleable={styles}> |
||||
|
<span class="spectrum-Tag-label">{componentText}</span> |
||||
|
{#if closable} |
||||
|
<ClearButton on:click={onClick} /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.spectrum-Tag--sizeS, |
||||
|
.spectrum-Tag--sizeM { |
||||
|
padding: 0 var(--spectrum-global-dimension-size-100); |
||||
|
} |
||||
|
.spectrum-Tag--sizeL { |
||||
|
padding: 0 var(--spectrum-global-dimension-size-150); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,71 @@ |
|||||
|
<script> |
||||
|
import { CoreTextArea } from "@budibase/bbui" |
||||
|
import Field from "./Field.svelte" |
||||
|
import { getContext } from "svelte" |
||||
|
|
||||
|
export let field |
||||
|
export let label |
||||
|
export let placeholder |
||||
|
export let disabled = false |
||||
|
export let defaultValue = "" |
||||
|
|
||||
|
const component = getContext("component") |
||||
|
const validation = [ |
||||
|
{ |
||||
|
constraint: "json", |
||||
|
type: "json", |
||||
|
error: "JSON syntax is invalid", |
||||
|
}, |
||||
|
] |
||||
|
let fieldState |
||||
|
let fieldApi |
||||
|
|
||||
|
$: height = $component.styles?.normal?.height || "124px" |
||||
|
|
||||
|
const serialiseValue = value => { |
||||
|
return JSON.stringify(value || undefined, null, 4) || "" |
||||
|
} |
||||
|
|
||||
|
const parseValue = value => { |
||||
|
try { |
||||
|
return JSON.parse(value) |
||||
|
} catch (error) { |
||||
|
return value |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<Field |
||||
|
{label} |
||||
|
{field} |
||||
|
{disabled} |
||||
|
{validation} |
||||
|
{defaultValue} |
||||
|
type="json" |
||||
|
bind:fieldState |
||||
|
bind:fieldApi |
||||
|
> |
||||
|
{#if fieldState} |
||||
|
<div style="--height: {height};"> |
||||
|
<CoreTextArea |
||||
|
value={serialiseValue(fieldState.value)} |
||||
|
on:change={e => fieldApi.setValue(parseValue(e.detail))} |
||||
|
disabled={fieldState.disabled} |
||||
|
error={fieldState.error} |
||||
|
id={fieldState.fieldId} |
||||
|
{placeholder} |
||||
|
/> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</Field> |
||||
|
|
||||
|
<style> |
||||
|
:global(.spectrum-Form-itemField .spectrum-Textfield--multiline) { |
||||
|
min-height: calc(var(--height) - 24px); |
||||
|
} |
||||
|
:global(.spectrum-Form--labelsAbove |
||||
|
.spectrum-Form-itemField |
||||
|
.spectrum-Textfield--multiline) { |
||||
|
min-height: calc(var(--height) - 24px); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue