149 lines
4 KiB
JavaScript
149 lines
4 KiB
JavaScript
import sanitizeUrl from "./utils/sanitizeUrl"
|
|
import { rowListUrl } from "./rowListScreen"
|
|
import { Screen } from "./utils/Screen"
|
|
import { Component } from "./utils/Component"
|
|
import { makePropSafe } from "@budibase/string-templates"
|
|
import {
|
|
makeBreadcrumbContainer,
|
|
makeTitleContainer,
|
|
makeSaveButton,
|
|
makeMainForm,
|
|
makeDatasourceFormComponents,
|
|
} from "./utils/commonComponents"
|
|
|
|
export default function (tables) {
|
|
return tables.map(table => {
|
|
return {
|
|
name: `${table.name} - Detail`,
|
|
create: () => createScreen(table),
|
|
id: ROW_DETAIL_TEMPLATE,
|
|
}
|
|
})
|
|
}
|
|
|
|
export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
|
|
export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
|
|
|
|
function generateTitleContainer(table, title, formId, repeaterId) {
|
|
const saveButton = makeSaveButton(table, formId)
|
|
const deleteButton = new Component("@budibase/standard-components/button")
|
|
.text("Delete")
|
|
.customProps({
|
|
type: "secondary",
|
|
quiet: true,
|
|
size: "M",
|
|
onClick: [
|
|
{
|
|
parameters: {
|
|
tableId: table._id,
|
|
rowId: `{{ ${makePropSafe(repeaterId)}.${makePropSafe("_id")} }}`,
|
|
revId: `{{ ${makePropSafe(repeaterId)}.${makePropSafe("_rev")} }}`,
|
|
confirm: true,
|
|
},
|
|
"##eventHandlerType": "Delete Row",
|
|
},
|
|
{
|
|
parameters: {
|
|
url: rowListUrl(table),
|
|
},
|
|
"##eventHandlerType": "Navigate To",
|
|
},
|
|
],
|
|
})
|
|
.instanceName("Delete Button")
|
|
|
|
const buttons = new Component("@budibase/standard-components/container")
|
|
.instanceName("Button Container")
|
|
.customProps({
|
|
direction: "row",
|
|
hAlign: "right",
|
|
vAlign: "middle",
|
|
size: "shrink",
|
|
gap: "M",
|
|
})
|
|
.addChild(deleteButton)
|
|
.addChild(saveButton)
|
|
|
|
return makeTitleContainer(title).addChild(buttons)
|
|
}
|
|
|
|
const createScreen = table => {
|
|
const provider = new Component("@budibase/standard-components/dataprovider")
|
|
.instanceName(`Data Provider`)
|
|
.customProps({
|
|
dataSource: {
|
|
label: table.name,
|
|
name: table._id,
|
|
tableId: table._id,
|
|
type: "table",
|
|
},
|
|
filter: [
|
|
{
|
|
field: "_id",
|
|
operator: "equal",
|
|
type: "string",
|
|
value: `{{ ${makePropSafe("url")}.${makePropSafe("id")} }}`,
|
|
valueType: "Binding",
|
|
},
|
|
],
|
|
limit: 1,
|
|
paginate: false,
|
|
})
|
|
|
|
const repeater = new Component("@budibase/standard-components/repeater")
|
|
.instanceName("Repeater")
|
|
.customProps({
|
|
dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
|
|
noRowsMessage: "We couldn't find a row to display",
|
|
})
|
|
|
|
const form = makeMainForm()
|
|
.instanceName("Form")
|
|
.customProps({
|
|
actionType: "Update",
|
|
size: "spectrum--medium",
|
|
dataSource: {
|
|
label: table.name,
|
|
tableId: table._id,
|
|
type: "table",
|
|
},
|
|
})
|
|
|
|
const fieldGroup = new Component("@budibase/standard-components/fieldgroup")
|
|
.instanceName("Field Group")
|
|
.customProps({
|
|
labelPosition: "left",
|
|
})
|
|
|
|
// Add all form fields from this schema to the field group
|
|
const datasource = { type: "table", tableId: table._id }
|
|
makeDatasourceFormComponents(datasource).forEach(component => {
|
|
fieldGroup.addChild(component)
|
|
})
|
|
|
|
// Add all children to the form
|
|
const formId = form._json._id
|
|
const repeaterId = repeater._json._id
|
|
const heading = table.primaryDisplay
|
|
? `{{ ${makePropSafe(repeaterId)}.${makePropSafe(table.primaryDisplay)} }}`
|
|
: null
|
|
form
|
|
.addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
|
|
.addChild(
|
|
generateTitleContainer(table, heading || "Edit Row", formId, repeaterId)
|
|
)
|
|
.addChild(fieldGroup)
|
|
|
|
repeater.addChild(form)
|
|
provider.addChild(repeater)
|
|
|
|
return new Screen()
|
|
.instanceName(`${table.name} - Detail`)
|
|
.route(rowDetailUrl(table))
|
|
.customProps({
|
|
hAlign: "center",
|
|
})
|
|
.addChild(provider)
|
|
.json()
|
|
}
|