From d0dc9adcca31b6fe4e30fefcf4ba812915215c80 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 23 Nov 2022 15:04:51 +0000 Subject: [PATCH] Update auto screens to only generate a single list screen using new side panels --- .../store/screenTemplates/index.js | 8 +- .../store/screenTemplates/newRowScreen.js | 72 ---------- .../store/screenTemplates/rowDetailScreen.js | 70 ---------- .../store/screenTemplates/rowListScreen.js | 12 +- .../screenTemplates/utils/commonComponents.js | 131 ------------------ .../screens/_components/ScreenWizard.svelte | 18 +-- 6 files changed, 13 insertions(+), 298 deletions(-) delete mode 100644 packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js delete mode 100644 packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js index 51496bdeb3..1bf0af6eeb 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/index.js +++ b/packages/builder/src/builderStore/store/screenTemplates/index.js @@ -1,13 +1,7 @@ -import newRowScreen from "./newRowScreen" -import rowDetailScreen from "./rowDetailScreen" import rowListScreen from "./rowListScreen" import createFromScratchScreen from "./createFromScratchScreen" -const allTemplates = tables => [ - ...newRowScreen(tables), - ...rowDetailScreen(tables), - ...rowListScreen(tables), -] +const allTemplates = tables => [...rowListScreen(tables)] // Allows us to apply common behaviour to all create() functions const createTemplateOverride = (frontendState, template) => () => { diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js deleted file mode 100644 index 6564bf6050..0000000000 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ /dev/null @@ -1,72 +0,0 @@ -import sanitizeUrl from "./utils/sanitizeUrl" -import { Screen } from "./utils/Screen" -import { Component } from "./utils/Component" -import { makeBreadcrumbContainer } from "./utils/commonComponents" -import { getSchemaForDatasource } from "../../dataBinding" - -export default function (tables) { - return tables.map(table => { - return { - name: `${table.name} - New`, - create: () => createScreen(table), - id: NEW_ROW_TEMPLATE, - table: table._id, - } - }) -} - -export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`) -export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE" - -const rowListUrl = table => sanitizeUrl(`/${table.name}`) - -const getFields = schema => { - let columns = [] - Object.entries(schema || {}).forEach(([field, fieldSchema]) => { - if (!field || !fieldSchema) { - return - } - if (!fieldSchema?.autocolumn) { - columns.push(field) - } - }) - return columns -} - -const generateFormBlock = table => { - const datasource = { type: "table", tableId: table._id } - const { schema } = getSchemaForDatasource(null, datasource, { - formSchema: true, - }) - const formBlock = new Component("@budibase/standard-components/formblock") - formBlock - .customProps({ - title: "New row", - actionType: "Create", - actionUrl: rowListUrl(table), - showDeleteButton: false, - showSaveButton: true, - fields: getFields(schema), - dataSource: { - label: table.name, - tableId: table._id, - type: "table", - }, - labelPosition: "left", - size: "spectrum--medium", - }) - .instanceName(`${table.name} - Form block`) - return formBlock -} - -const createScreen = table => { - const formBlock = generateFormBlock(table) - const screen = new Screen() - .instanceName(`${table.name} - New`) - .route(newRowUrl(table)) - - return screen - .addChild(makeBreadcrumbContainer(table.name, "New row")) - .addChild(formBlock) - .json() -} diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js deleted file mode 100644 index 22b39aba3e..0000000000 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ /dev/null @@ -1,70 +0,0 @@ -import sanitizeUrl from "./utils/sanitizeUrl" -import { Screen } from "./utils/Screen" -import { Component } from "./utils/Component" -import { makeBreadcrumbContainer } from "./utils/commonComponents" -import { getSchemaForDatasource } from "../../dataBinding" - -export default function (tables) { - return tables.map(table => { - return { - name: `${table.name} - Detail`, - create: () => createScreen(table), - id: ROW_DETAIL_TEMPLATE, - table: table._id, - } - }) -} - -export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE" -export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`) - -const rowListUrl = table => sanitizeUrl(`/${table.name}`) - -const getFields = schema => { - let columns = [] - Object.entries(schema || {}).forEach(([field, fieldSchema]) => { - if (!field || !fieldSchema) { - return - } - if (!fieldSchema?.autocolumn) { - columns.push(field) - } - }) - return columns -} - -const generateFormBlock = table => { - const datasource = { type: "table", tableId: table._id } - const { schema } = getSchemaForDatasource(null, datasource, { - formSchema: true, - }) - - const formBlock = new Component("@budibase/standard-components/formblock") - formBlock - .customProps({ - title: "Edit row", - actionType: "Update", - actionUrl: rowListUrl(table), - showDeleteButton: true, - showSaveButton: true, - fields: getFields(schema), - dataSource: { - label: table.name, - tableId: table._id, - type: "table", - }, - labelPosition: "left", - size: "spectrum--medium", - }) - .instanceName(`${table.name} - Form block`) - return formBlock -} - -const createScreen = table => { - return new Screen() - .instanceName(`${table.name} - Detail`) - .route(rowDetailUrl(table)) - .addChild(makeBreadcrumbContainer(table.name, "Edit row")) - .addChild(generateFormBlock(table)) - .json() -} diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index 8231133bdf..06d9e5aa3e 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -1,5 +1,4 @@ import sanitizeUrl from "./utils/sanitizeUrl" -import { newRowUrl } from "./newRowScreen" import { Screen } from "./utils/Screen" import { Component } from "./utils/Component" @@ -21,12 +20,6 @@ const generateTableBlock = table => { const tableBlock = new Component("@budibase/standard-components/tableblock") tableBlock .customProps({ - linkRows: true, - linkURL: `${rowListUrl(table)}/:id`, - showAutoColumns: false, - showTitleButton: true, - titleButtonText: "Create row", - titleButtonURL: newRowUrl(table), title: table.name, dataSource: { label: table.name, @@ -34,9 +27,14 @@ const generateTableBlock = table => { tableId: table._id, type: "table", }, + sortOrder: "Ascending", size: "spectrum--medium", paginate: true, rowCount: 8, + clickBehaviour: "details", + showTitleButton: true, + titleButtonText: "Create row", + titleButtonClickBehaviour: "new", }) .instanceName(`${table.name} - Table block`) return tableBlock diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index f00cd9c215..6fdedbe44c 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -1,137 +1,6 @@ import { Component } from "./Component" -import { rowListUrl } from "../rowListScreen" import { getSchemaForDatasource } from "../../../dataBinding" -export function spectrumColor(number) { - // Acorn throws a parsing error in this file if the word g-l-o-b-a-l is found - // (without dashes - I can't even type it in a comment). - // God knows why. It seems to think optional chaining further down the - // file is invalid if the word g-l-o-b-a-l is found - hence the reason this - // statement is split into parts. - return "var(--spectrum-glo" + `bal-color-gray-${number})` -} - -export function makeLinkComponent(tableName) { - return new Component("@budibase/standard-components/link") - .text(tableName) - .customProps({ - url: `/${tableName.toLowerCase()}`, - openInNewTab: false, - color: spectrumColor(700), - size: "S", - align: "left", - }) -} - -export function makeMainForm() { - return new Component("@budibase/standard-components/form") - .normalStyle({ - width: "600px", - }) - .instanceName("Form") -} - -export function makeBreadcrumbContainer(tableName, text) { - const link = makeLinkComponent(tableName).instanceName("Back Link") - - const arrowText = new Component("@budibase/standard-components/text") - .type("none") - .normalStyle({ - "margin-right": "4px", - "margin-left": "4px", - }) - .text(">") - .instanceName("Arrow") - .customProps({ - color: spectrumColor(700), - size: "S", - align: "left", - }) - - const identifierText = new Component("@budibase/standard-components/text") - .text(text) - .instanceName("Identifier") - .customProps({ - color: spectrumColor(700), - size: "S", - align: "left", - }) - - return new Component("@budibase/standard-components/container") - .customProps({ - gap: "N", - direction: "row", - hAlign: "left", - vAlign: "middle", - size: "shrink", - }) - .normalStyle({ - width: "600px", - "margin-right": "auto", - "margin-left": "auto", - }) - .instanceName("Breadcrumbs") - .addChild(link) - .addChild(arrowText) - .addChild(identifierText) -} - -export function makeSaveButton(table, formId) { - return new Component("@budibase/standard-components/button") - .text("Save") - .customProps({ - type: "primary", - size: "M", - onClick: [ - { - "##eventHandlerType": "Validate Form", - parameters: { - componentId: formId, - }, - }, - { - parameters: { - providerId: formId, - tableId: table._id, - }, - "##eventHandlerType": "Save Row", - }, - { - parameters: { - url: rowListUrl(table), - }, - "##eventHandlerType": "Navigate To", - }, - ], - }) - .instanceName("Save Button") -} - -export function makeTitleContainer(title) { - const heading = new Component("@budibase/standard-components/heading") - .instanceName("Title") - .text(title) - .customProps({ - size: "M", - align: "left", - }) - - return new Component("@budibase/standard-components/container") - .normalStyle({ - "margin-top": "32px", - "margin-bottom": "32px", - }) - .customProps({ - direction: "row", - hAlign: "stretch", - vAlign: "middle", - size: "shrink", - gap: "M", - }) - .instanceName("Title Container") - .addChild(heading) -} - const fieldTypeToComponentMap = { string: "stringfield", number: "numberfield", diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte index bf782adf39..acca6e0fa3 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte @@ -127,17 +127,13 @@ // Handler for Datasource Screen Creation const completeDatasourceScreenCreation = async () => { - // // Handle template selection - if (selectedTemplates?.length > 1) { - // Autoscreens, so create immediately - const screens = selectedTemplates.map(template => { - let screenTemplate = template.create() - screenTemplate.datasource = template.datasource - screenTemplate.autoTableId = template.table - return screenTemplate - }) - await createScreens({ screens, screenAccessRole }) - } + const screens = selectedTemplates.map(template => { + let screenTemplate = template.create() + screenTemplate.datasource = template.datasource + screenTemplate.autoTableId = template.table + return screenTemplate + }) + await createScreens({ screens, screenAccessRole }) } const confirmScreenBlank = async ({ screenUrl }) => {