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 928c7443e0..11278085af 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 @@ -6,8 +6,7 @@ "tableblock", "cardsblock", "repeaterblock", - "formblock", - "formblockplus" + "formblock" ] }, { diff --git a/packages/client/manifest.json b/packages/client/manifest.json index d7007416ec..4dff6a7632 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -4389,142 +4389,12 @@ "type": "select", "label": "Type", "key": "actionType", - "options": ["Create", "Update"], - "defaultValue": "Create" - }, - { - "type": "dataSource", - "label": "Schema", - "key": "dataSource" - }, - { - "type": "text", - "label": "Title", - "key": "title" - }, - { - "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": "Right", - "value": "right" - }, - { - "label": "Above", - "value": "above" - } - ] - }, - { - "type": "select", - "label": "Size", - "key": "size", - "options": [ - { - "label": "Medium", - "value": "spectrum--medium" - }, - { - "label": "Large", - "value": "spectrum--large" - } - ], - "defaultValue": "spectrum--medium" - }, - { - "type": "boolean", - "label": "Disabled", - "key": "disabled", - "defaultValue": false - } - ] - }, - { - "section": true, - "name": "Buttons", - "settings": [ - { - "type": "boolean", - "label": "Show primary button", - "key": "showPrimaryButton", - "defaultValue": true - }, - { - "type": "text", - "label": "Text", - "key": "primaryButtonText", - "defaultValue": "Submit", - "dependsOn": "showPrimaryButton" - }, - { - "type": "event", - "label": "On click", - "key": "primaryButtonOnClick", - "nested": true, - "dependsOn": "showPrimaryButton" - }, - { - "type": "boolean", - "label": "Show secondary button", - "key": "showSecondaryButton", - "defaultValue": false - }, - { - "type": "text", - "label": "Text", - "key": "secondaryButtonText", - "defaultValue": "Action", - "dependsOn": "showSecondaryButton" - }, - { - "type": "event", - "label": "On click", - "key": "secondaryButtonOnClick", - "nested": true, - "dependsOn": "showSecondaryButton" - } - ] - } - ], - "context": [ - { - "type": "form", - "suffix": "form" - } - ] - }, - "formblockplus": { - "name": "Form Block+", - "icon": "Form", - "styles": ["size"], - "block": true, - "settings": [ - { - "type": "select", - "label": "Type", - "key": "actionType", - "options": ["Create", "Update"], + "options": ["Create", "Update", "View"], "defaultValue": "Create" }, { "type": "table", - "label": "Schema", + "label": "Table", "key": "dataSource" }, { @@ -4561,10 +4431,6 @@ "label": "Left", "value": "left" }, - { - "label": "Right", - "value": "right" - }, { "label": "Above", "value": "above" @@ -4591,7 +4457,12 @@ "type": "boolean", "label": "Disabled", "key": "disabled", - "defaultValue": false + "defaultValue": false, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } } ] }, @@ -4603,7 +4474,12 @@ "type": "boolean", "label": "Show save button", "key": "showSaveButton", - "defaultValue": true + "defaultValue": true, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } }, { "type": "boolean", @@ -4614,6 +4490,17 @@ "setting": "actionType", "value": "Update" } + }, + { + "type": "url", + "label": "Navigate after button press", + "key": "actionUrl", + "placeholder": "Choose a screen", + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } } ] } diff --git a/packages/client/src/components/app/blocks/FormBlock.svelte b/packages/client/src/components/app/blocks/FormBlock.svelte index 2affe68e34..4770a9907a 100644 --- a/packages/client/src/components/app/blocks/FormBlock.svelte +++ b/packages/client/src/components/app/blocks/FormBlock.svelte @@ -2,8 +2,9 @@ import { getContext } from "svelte" import BlockComponent from "../../BlockComponent.svelte" import Block from "../../Block.svelte" - import { Heading, Layout } from "@budibase/bbui" + import { Layout } from "@budibase/bbui" import Placeholder from "../Placeholder.svelte" + import { makePropSafe as safe } from "@budibase/string-templates" export let actionType export let dataSource @@ -12,14 +13,12 @@ export let fields export let labelPosition export let title - export let showPrimaryButton - export let primaryButtonOnClick - export let primaryButtonText - export let showSecondaryButton - export let secondaryButtonOnClick - export let secondaryButtonText + export let showSaveButton + export let showDeleteButton + export let rowId + export let actionUrl - const { styleable, fetchDatasourceSchema } = getContext("sdk") + const { styleable, fetchDatasourceSchema, builderStore } = getContext("sdk") const component = getContext("component") const FieldTypeToComponentMap = { string: "stringfield", @@ -35,7 +34,65 @@ } let schema + let formId + let providerId + let repeaterId + $: fetchSchema(dataSource) + $: onSave = [ + { + "##eventHandlerType": "Save Row", + parameters: { + providerId: formId, + tableId: dataSource?.tableId, + }, + }, + { + "##eventHandlerType": "Close Screen Modal", + }, + { + "##eventHandlerType": "Navigate To", + parameters: { + url: actionUrl, + }, + }, + ] + $: onDelete = [ + { + "##eventHandlerType": "Delete Row", + parameters: { + confirm: true, + tableId: dataSource?.tableId, + rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`, + revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`, + }, + }, + { + "##eventHandlerType": "Close Screen Modal", + }, + { + "##eventHandlerType": "Navigate To", + parameters: { + url: actionUrl, + }, + }, + ] + $: filter = [ + { + field: "_id", + operator: "equal", + type: "string", + value: rowId, + valueType: "binding", + }, + ] + // If we're using an "update" form, use the real data provider. If we're + // using a create form, we just want a fake array so that our repeater + // will actually render the form, but data doesn't matter. + $: dataProvider = + actionType === "Update" + ? `{{ literal ${safe(providerId)} }}` + : { rows: [{}] } const fetchSchema = async () => { schema = (await fetchDatasourceSchema(dataSource)) || {} @@ -54,57 +111,85 @@