Update auto screens to only generate a single list screen using new side panels
This commit is contained in:
Andrew Kingston
parent
a04f58dd23
commit
fd3e98c8e3
6 changed files with 13 additions and 298 deletions
|
|
@ -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) => () => {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
@ -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()
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue