diff --git a/packages/builder/cypress/integration/queryLevelTransformers.spec.js b/packages/builder/cypress/integration/queryLevelTransformers.spec.js index 2b74e0c2e5..d16f8075f9 100644 --- a/packages/builder/cypress/integration/queryLevelTransformers.spec.js +++ b/packages/builder/cypress/integration/queryLevelTransformers.spec.js @@ -1,5 +1,5 @@ import filterTests from "../support/filterTests" -const interact = require('../support/interact') +const interact = require("../support/interact") filterTests(["smoke", "all"], () => { context("Query Level Transformers", () => { diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js index e7787dea72..54997df38f 100644 --- a/packages/builder/src/builderStore/componentUtils.js +++ b/packages/builder/src/builderStore/componentUtils.js @@ -185,43 +185,42 @@ export const makeComponentUnique = component => { // Replace component ID const oldId = component._id const newId = Helpers.uuid() - component._id = newId + let definition = JSON.stringify(component) - if (component._children?.length) { - let children = JSON.stringify(component._children) + // Replace all instances of this ID in HBS bindings + definition = definition.replace(new RegExp(oldId, "g"), newId) - // Replace all instances of this ID in child HBS bindings - children = children.replace(new RegExp(oldId, "g"), newId) + // Replace all instances of this ID in JS bindings + const bindings = findHBSBlocks(definition) + bindings.forEach(binding => { + // JSON.stringify will have escaped double quotes, so we need + // to account for that + let sanitizedBinding = binding.replace(/\\"/g, '"') - // Replace all instances of this ID in child JS bindings - const bindings = findHBSBlocks(children) - bindings.forEach(binding => { - // JSON.stringify will have escaped double quotes, so we need - // to account for that - let sanitizedBinding = binding.replace(/\\"/g, '"') + // Check if this is a valid JS binding + let js = decodeJSBinding(sanitizedBinding) + if (js != null) { + // Replace ID inside JS binding + js = js.replace(new RegExp(oldId, "g"), newId) - // Check if this is a valid JS binding - let js = decodeJSBinding(sanitizedBinding) - if (js != null) { - // Replace ID inside JS binding - js = js.replace(new RegExp(oldId, "g"), newId) + // Create new valid JS binding + let newBinding = encodeJSBinding(js) - // Create new valid JS binding - let newBinding = encodeJSBinding(js) + // Replace escaped double quotes + newBinding = newBinding.replace(/"/g, '\\"') - // Replace escaped double quotes - newBinding = newBinding.replace(/"/g, '\\"') + // Insert new JS back into binding. + // A single string replace here is better than a regex as + // the binding contains special characters, and we only need + // to replace a single instance. + definition = definition.replace(binding, newBinding) + } + }) - // Insert new JS back into binding. - // A single string replace here is better than a regex as - // the binding contains special characters, and we only need - // to replace a single instance. - children = children.replace(binding, newBinding) - } - }) - - // Recurse on all children - component._children = JSON.parse(children) - component._children.forEach(makeComponentUnique) + // Recurse on all children + component = JSON.parse(definition) + return { + ...component, + _children: component._children?.map(makeComponentUnique), } } diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index c83daa7807..536692eecc 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -169,7 +169,12 @@ export const getComponentBindableProperties = (asset, componentId) => { /** * Gets all data provider components above a component. */ -export const getContextProviderComponents = (asset, componentId, type) => { +export const getContextProviderComponents = ( + asset, + componentId, + type, + options = { includeSelf: false } +) => { if (!asset || !componentId) { return [] } @@ -177,7 +182,9 @@ export const getContextProviderComponents = (asset, componentId, type) => { // Get the component tree leading up to this component, ignoring the component // itself const path = findComponentPath(asset.props, componentId) - path.pop() + if (!options?.includeSelf) { + path.pop() + } // Filter by only data provider components return path.filter(component => { @@ -798,6 +805,17 @@ export const buildFormSchema = component => { if (!component) { return schema } + + // If this is a form block, simply use the fields setting + if (component._component.endsWith("formblock")) { + let schema = {} + component.fields?.forEach(field => { + schema[field] = { type: "string" } + }) + return schema + } + + // Otherwise find all field component children const settings = getComponentSettings(component._component) const fieldSetting = settings.find( setting => setting.key === "field" && setting.type.startsWith("field/") diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index b1365c3ece..c90ab10c9a 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -621,7 +621,7 @@ export const getFrontendStore = () => { // Make new component unique if copying if (!cut) { - makeComponentUnique(componentToPaste) + componentToPaste = makeComponentUnique(componentToPaste) } newComponentId = componentToPaste._id @@ -931,7 +931,7 @@ export const getFrontendStore = () => { } // Replace block with ejected definition - makeComponentUnique(ejectedDefinition) + ejectedDefinition = makeComponentUnique(ejectedDefinition) const index = parent._children.findIndex(x => x._id === componentId) parent._children[index] = ejectedDefinition nextSelectedComponentId = ejectedDefinition._id diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte index 69d5fe60b4..ef7c81233b 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -21,6 +21,7 @@ export let key export let actions export let bindings = [] + export let nested $: showAvailableActions = !actions?.length @@ -187,6 +188,7 @@ this={selectedActionComponent} parameters={selectedAction.parameters} bindings={allBindings} + {nested} /> {/key} diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte index f8fb385eb3..6a23ba8cbd 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte @@ -12,6 +12,7 @@ export let value = [] export let name export let bindings + export let nested let drawer let tmpValue @@ -90,6 +91,7 @@ eventType={name} {bindings} {key} + {nested} /> diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte index 174962d824..433f4bb3c2 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte @@ -10,11 +10,13 @@ export let parameters export let bindings = [] + export let nested $: formComponents = getContextProviderComponents( $currentAsset, $store.selectedComponentId, - "form" + "form", + { includeSelf: nested } ) $: schemaComponents = getContextProviderComponents( $currentAsset, diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index 8be770e3a0..70b88c41e5 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -95,6 +95,7 @@ bindings={allBindings} name={key} text={label} + {nested} {key} {type} {...props} diff --git a/packages/builder/src/components/design/settings/controls/URLSelect.svelte b/packages/builder/src/components/design/settings/controls/URLSelect.svelte index dc2fa7ad89..a07c2190da 100644 --- a/packages/builder/src/components/design/settings/controls/URLSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/URLSelect.svelte @@ -4,6 +4,7 @@ export let value export let bindings + export let placeholder $: urlOptions = $store.screens .map(screen => screen.routing?.route) @@ -13,6 +14,7 @@ { + const getSections = (instance, definition, isScreen) => { const settings = definition?.settings ?? [] const generalSettings = settings.filter(setting => !setting.section) const customSections = settings.filter(setting => setting.section) - return [ + let sections = [ { name: "General", settings: generalSettings, }, ...(customSections || []), ] + + // Filter out settings which shouldn't be rendered + sections.forEach(section => { + section.settings.forEach(setting => { + setting.visible = canRenderControl(instance, setting, isScreen) + }) + section.visible = section.settings.some(setting => setting.visible) + }) + + return sections } const updateSetting = async (key, value) => { @@ -36,7 +46,7 @@ } } - const canRenderControl = (setting, isScreen) => { + const canRenderControl = (instance, setting, isScreen) => { // Prevent rendering on click setting for screens if (setting?.type === "event" && isScreen) { return false @@ -51,6 +61,7 @@ if (setting.dependsOn) { let dependantSetting = setting.dependsOn let dependantValue = null + let invert = !!setting.dependsOn.invert if (typeof setting.dependsOn === "object") { dependantSetting = setting.dependsOn.setting dependantValue = setting.dependsOn.value @@ -62,7 +73,7 @@ // If no specific value is depended upon, check if a value exists at all // for the dependent setting if (dependantValue == null) { - const currentValue = componentInstance[dependantSetting] + const currentValue = instance[dependantSetting] if (currentValue === false) { return false } @@ -73,7 +84,11 @@ } // Otherwise check the value matches - return componentInstance[dependantSetting] === dependantValue + if (invert) { + return instance[dependantSetting] !== dependantValue + } else { + return instance[dependantSetting] === dependantValue + } } return true @@ -81,52 +96,54 @@ {#each sections as section, idx (section.name)} - - {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen} - updateSetting("_instanceName", val)} - /> - {/if} - {#each section.settings as setting (setting.key)} - {#if canRenderControl(setting, isScreen)} + {#if section.visible} + + {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen} updateSetting(setting.key, val)} - highlighted={$store.highlightedSettingKey === setting.key} - info={setting.info} - props={{ - // Generic settings - placeholder: setting.placeholder || null, - - // Select settings - options: setting.options || [], - - // Number fields - min: setting.min || null, - max: setting.max || null, - }} - {bindings} - {componentBindings} - {componentInstance} - {componentDefinition} + control={Input} + label="Name" + key="_instanceName" + value={componentInstance._instanceName} + onChange={val => updateSetting("_instanceName", val)} /> {/if} - {/each} - {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")} - - {/if} - {#if idx === 0 && componentDefinition?.block} - - {/if} - + {#each section.settings as setting (setting.key)} + {#if setting.visible} + updateSetting(setting.key, val)} + highlighted={$store.highlightedSettingKey === setting.key} + info={setting.info} + props={{ + // Generic settings + placeholder: setting.placeholder || null, + + // Select settings + options: setting.options || [], + + // Number fields + min: setting.min || null, + max: setting.max || null, + }} + {bindings} + {componentBindings} + {componentInstance} + {componentDefinition} + /> + {/if} + {/each} + {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")} + + {/if} + {#if idx === 0 && componentDefinition?.block} + + {/if} + + {/if} {/each} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index 671637f381..088f0c0989 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -5,7 +5,8 @@ "children": [ "tableblock", "cardsblock", - "repeaterblock" + "repeaterblock", + "formblock" ] }, { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte index 0c35fa391e..ec965ed659 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte @@ -38,7 +38,7 @@ let duplicateScreen = Helpers.cloneDeep(screen) delete duplicateScreen._id delete duplicateScreen._rev - makeComponentUnique(duplicateScreen.props) + duplicateScreen.props = makeComponentUnique(duplicateScreen.props) // Attach the new name and URL duplicateScreen.routing.route = sanitizeUrl(screenUrl) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 01d2b6a685..bd5854dc9f 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3845,7 +3845,7 @@ "label": "Search Columns", "key": "searchColumns", "placeholder": "Choose search columns", - "info": "Only the first 3 search columns will be used" + "info": "Only the first 5 search columns will be used" }, { "type": "filter", @@ -4010,7 +4010,7 @@ "label": "Search Columns", "key": "searchColumns", "placeholder": "Choose search columns", - "info": "Only the first 3 search columns will be used" + "info": "Only the first 5 search columns will be used" }, { "type": "filter", @@ -4395,5 +4395,145 @@ "required": true } ] + }, + "formblock": { + "name": "Form Block", + "icon": "Form", + "styles": ["size"], + "block": true, + "info": "Form blocks are only compatible with internal or SQL tables", + "settings": [ + { + "type": "select", + "label": "Type", + "key": "actionType", + "options": ["Create", "Update", "View"], + "defaultValue": "Create" + }, + { + "type": "table", + "label": "Table", + "key": "dataSource" + }, + { + "type": "text", + "label": "Row ID", + "key": "rowId", + "nested": true, + "dependsOn": { + "setting": "actionType", + "value": "Create", + "invert": true + } + }, + { + "type": "text", + "label": "Title", + "key": "title", + "nested": true + }, + { + "type": "select", + "label": "Size", + "key": "size", + "options": [ + { + "label": "Medium", + "value": "spectrum--medium" + }, + { + "label": "Large", + "value": "spectrum--large" + } + ], + "defaultValue": "spectrum--medium" + }, + { + "section": true, + "name": "Fields", + "settings": [ + { + "type": "multifield", + "label": "Fields", + "key": "fields" + }, + { + "type": "select", + "label": "Field labels", + "key": "labelPosition", + "defaultValue": "left", + "options": [ + { + "label": "Left", + "value": "left" + }, + { + "label": "Above", + "value": "above" + } + ] + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + } + ] + }, + { + "section": true, + "name": "Buttons", + "settings": [ + { + "type": "boolean", + "label": "Show save button", + "key": "showSaveButton", + "defaultValue": true, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + }, + { + "type": "boolean", + "label": "Show delete button", + "key": "showDeleteButton", + "defaultValue": false, + "dependsOn": { + "setting": "actionType", + "value": "Update" + } + }, + { + "type": "url", + "label": "Navigate after button press", + "key": "actionUrl", + "placeholder": "Choose a screen", + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + } + ] + } + ], + "context": [ + { + "type": "form", + "suffix": "form" + }, + { + "type": "schema", + "suffix": "repeater" + } + ] } } \ No newline at end of file diff --git a/packages/client/src/components/app/blocks/FormBlock.svelte b/packages/client/src/components/app/blocks/FormBlock.svelte new file mode 100644 index 0000000000..5994360bbb --- /dev/null +++ b/packages/client/src/components/app/blocks/FormBlock.svelte @@ -0,0 +1,239 @@ + + + + {#if fields?.length} + + + + + {#if renderHeader} + + + {#if renderButtons} + + {#if renderDeleteButton} + + {/if} + {#if renderSaveButton} + + {/if} + + {/if} + + {/if} + + {#each fields as field, idx} + {#if getComponentForField(field)} + + {/if} + {/each} + + + + + + {:else} + + {/if} + diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js index db4de8fc13..32b2b98c06 100644 --- a/packages/client/src/components/app/blocks/index.js +++ b/packages/client/src/components/app/blocks/index.js @@ -1,3 +1,4 @@ export { default as tableblock } from "./TableBlock.svelte" export { default as cardsblock } from "./CardsBlock.svelte" export { default as repeaterblock } from "./RepeaterBlock.svelte" +export { default as formblock } from "./FormBlock.svelte" diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte index 26922ff312..8eddc11fa5 100644 --- a/packages/client/src/components/app/forms/Form.svelte +++ b/packages/client/src/components/app/forms/Form.svelte @@ -48,36 +48,7 @@ // Fetches the form schema from this form's dataSource const fetchSchema = async dataSource => { - if (!dataSource) { - schema = {} - } - - // If the datasource is a query, then we instead use a schema of the query - // parameters rather than the output schema - else if ( - dataSource.type === "query" && - dataSource._id && - actionType === "Create" - ) { - try { - const query = await API.fetchQueryDefinition(dataSource._id) - let paramSchema = {} - const params = query.parameters || [] - params.forEach(param => { - paramSchema[param.name] = { ...param, type: "string" } - }) - schema = paramSchema - } catch (error) { - schema = {} - } - } - - // For all other cases, just grab the normal schema - else { - const dataSourceSchema = await fetchDatasourceSchema(dataSource) - schema = dataSourceSchema || {} - } - + schema = (await fetchDatasourceSchema(dataSource)) || {} if (!loaded) { loaded = true } @@ -95,7 +66,7 @@ $: initialValues = getInitialValues(actionType, dataSource, $context) $: resetKey = Helpers.hashString( - JSON.stringify(initialValues) + JSON.stringify(schema) + JSON.stringify(initialValues) + JSON.stringify(schema) + disabled ) diff --git a/packages/client/src/utils/schema.js b/packages/client/src/utils/schema.js index 46c352a29f..433a1c5fee 100644 --- a/packages/client/src/utils/schema.js +++ b/packages/client/src/utils/schema.js @@ -16,7 +16,7 @@ import JSONArrayFetch from "@budibase/frontend-core/src/fetch/JSONArrayFetch.js" */ export const fetchDatasourceSchema = async ( datasource, - options = { enrichRelationships: false } + options = { enrichRelationships: false, formSchema: false } ) => { const handler = { table: TableFetch, @@ -34,7 +34,17 @@ export const fetchDatasourceSchema = async ( // Get the datasource definition and then schema const definition = await instance.getDefinition(datasource) - let schema = instance.getSchema(datasource, definition) + + // Get the normal schema as long as we aren't wanting a form schema + let schema + if (datasource?.type !== "query" || !options?.formSchema) { + schema = instance.getSchema(datasource, definition) + } else if (definition.parameters?.length) { + schema = {} + definition.parameters.forEach(param => { + schema[param.name] = { ...param, type: "string" } + }) + } if (!schema) { return null }