diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte index 51e82a6fe2..39026af6d0 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte @@ -123,15 +123,18 @@ } const createFormScreen = async type => { - const screenTemplates = selectedTablesAndViews.flatMap(tableOrView => - screenTemplating.form({ - screens, - tableOrView, - type, - permissions: permissions[tableOrView.id], - }) - ) - + const screenTemplates = ( + await Promise.all( + selectedTablesAndViews.map(tableOrView => + screenTemplating.form({ + screens, + tableOrView, + type, + permissions: permissions[tableOrView.id], + }) + ) + ) + ).flat() const newScreens = await createScreens(screenTemplates) if (type === "update" || type === "create") { diff --git a/packages/builder/src/templates/BaseStructure.js b/packages/builder/src/templates/BaseStructure.js index 71daca9d1b..0398b1f268 100644 --- a/packages/builder/src/templates/BaseStructure.js +++ b/packages/builder/src/templates/BaseStructure.js @@ -24,9 +24,9 @@ export class BaseStructure { if (this._children.length !== 0) { for (let child of this._children) { if (this._isScreen) { - structure.props._children.push(child.json()) + structure.props._children.push(child.json?.() || child) } else { - structure._children.push(child.json()) + structure._children.push(child.json?.() || child) } } } diff --git a/packages/builder/src/templates/Component.js b/packages/builder/src/templates/Component.js index 8f70cbe92b..0c672dab02 100644 --- a/packages/builder/src/templates/Component.js +++ b/packages/builder/src/templates/Component.js @@ -1,5 +1,6 @@ import { Helpers } from "@budibase/bbui" import { BaseStructure } from "./BaseStructure" +import { componentStore } from "stores/builder" export class Component extends BaseStructure { constructor(name, _id = Helpers.uuid()) { diff --git a/packages/builder/src/templates/rowActions.js b/packages/builder/src/templates/rowActions.js index 6b40a848f2..62a9052bcb 100644 --- a/packages/builder/src/templates/rowActions.js +++ b/packages/builder/src/templates/rowActions.js @@ -4,15 +4,22 @@ import { rowActions, selectedScreen, componentStore } from "stores/builder" import { Helpers } from "@budibase/bbui" import { findComponent } from "helpers/components" -export const getRowActionButtonTemplates = async ({ screen, component }) => { - if (!component) { - return [] +export const getRowActionButtonTemplates = async ({ + screen, + component, + instance, +}) => { + // Find root component instance if not specified + if (!instance) { + if (!component) { + return [] + } + if (!screen) { + screen = get(selectedScreen) + } + const id = component._rootId + instance = findComponent(screen?.props, id) } - if (!screen) { - screen = get(selectedScreen) - } - const id = component._rootId - const instance = findComponent(screen?.props, id) if (!instance) { return [] } diff --git a/packages/builder/src/templates/screenTemplating/form.js b/packages/builder/src/templates/screenTemplating/form.js index d0b7580280..769851cf88 100644 --- a/packages/builder/src/templates/screenTemplating/form.js +++ b/packages/builder/src/templates/screenTemplating/form.js @@ -1,6 +1,9 @@ import { Screen } from "./Screen" import { Component } from "../Component" import getValidRoute from "./getValidRoute" +import { componentStore } from "stores/builder" +import { Helpers } from "@budibase/bbui" +import { getRowActionButtonTemplates } from "templates/rowActions" export const getTypeSpecificRoute = (tableOrView, type) => { if (type === "create") { @@ -32,27 +35,49 @@ const getActionType = type => { } } -const form = ({ tableOrView, type, permissions, screens }) => { +const getTitle = type => { + if (type === "create") { + return "Create row" + } else if (type === "update") { + return "Update row" + } + return "Row details" +} + +const form = async ({ tableOrView, type, permissions, screens }) => { + const id = Helpers.uuid() const typeSpecificRoute = getTypeSpecificRoute(tableOrView, type) const role = getRole(permissions, type) - const multistepFormBlock = new Component( - "@budibase/standard-components/multistepformblock" - ) + let formBlock = new Component("@budibase/standard-components/formblock", id) .customProps({ - actionType: getActionType(type), dataSource: tableOrView.tableSelectFormat, - steps: [{}], + actionType: getActionType(type), + title: getTitle(type), rowId: type === "new" ? undefined : `{{ url.id }}`, }) - .instanceName(`${tableOrView.name} - Multistep Form block`) + .instanceName(`${tableOrView.name} - Form block`) + .json() + + // Add default button config + componentStore.migrateSettings(formBlock) + + // Add row action buttons if required + if (type !== "create") { + const rowActionButtons = await getRowActionButtonTemplates({ + instance: formBlock, + }) + if (rowActionButtons.length) { + formBlock.buttons = [...(formBlock.buttons || []), ...rowActionButtons] + } + } const template = new Screen() .route(getValidRoute(screens, typeSpecificRoute, role)) .instanceName(`${tableOrView.name} - Form`) .role(role) .autoTableId(tableOrView.id) - .addChild(multistepFormBlock) + .addChild(formBlock) .json() return [