MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update auto screens to only generate a single list screen using new side panels

This commit is contained in:
Andrew Kingston 2022-11-23 15:04:51 +00:00
parent cf308bac94
commit d0dc9adcca
6 changed files with 13 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/builderStore/store/screenTemplates/index.js
View File

@ -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) => () => {

72
packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
View File

@ -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()
}

70
packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
View File

@ -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()
}

12
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
View File

@ -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

131
packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
View File

@ -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",

18
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
View File

@ -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 }) => {