budibase/packages/bootstrap-components/dist/generators.js

451 lines
52 KiB
JavaScript
Raw Normal View History

2019-10-18 18:32:03 +02:00
const buttons = () => [
{
name: "common/Primary Button",
description: "Bootstrap primary button ",
inherits: "@budibase/standard-components/button",
props: {
className: "btn btn-primary"
}
},
{
name: "common/Default Button",
description: "Bootstrap default button",
inherits: "@budibase/standard-components/button",
props: {
2019-10-19 08:24:20 +02:00
className: "btn btn-secondary"
2019-10-18 18:32:03 +02:00
}
}
];
2019-10-14 09:32:20 +02:00
2019-10-18 18:32:03 +02:00
const forms = ({records, indexes, helpers}) =>
[
...records.map(root),
...buttons()
];
const formName = record => `${record.name}/${record.name} Form`;
const root = record => ({
name: formName(record),
description: `Control for creating/updating '${record.nodeKey()}' `,
inherits: "@budibase/standard-components/div",
props: {
className:"p-1",
children: [
{
component: {
_component: "@budibase/standard-components/h3",
text: `Edit ${record.name}`,
}
},
form(record),
saveCancelButtons(record)
]
}
});
const form = record => ({
component: {
_component: "@budibase/standard-components/form",
formControls:
record.fields.map(f => formControl(record, f))
}
});
const formControl = (record, field) => {
if(field.type === "string" && field.typeOptions.values && field.typeOptions.values.length > 0) {
return ({
control: {
_component: "@budibase/standard-components/select",
options: field.typeOptions.values.map(v => ({id:v, value:v})),
value: {
"##bbstate":`${record.name}.${field.name}`,
"##bbsource":"store"
},
className: "form-control"
},
label: field.label
});
} else {
return ({
control: {
_component: "@budibase/standard-components/input",
value: {
"##bbstate":`${record.name}.${field.name}`,
"##bbsource":"store"
},
className: "form-control",
type: field.type === "string" ? "text"
: field.type === "datetime" ? "date"
: field.type === "number" ? "number"
: "text"
},
label: field.label
});
}
};
const saveCancelButtons = (record) => ({
component: {
_component: "@budibase/standard-components/stackpanel",
direction: "horizontal",
children: [
paddedPanelForButton({
_component: "common/Primary Button",
contentText: `Save ${record.name}`,
onClick: [
{
"##eventHandlerType": "Save Record",
parameters: {
statePath: `${record.name}`,
}
},
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: ""
}
}
]
}),
paddedPanelForButton({
_component: "common/Default Button",
contentText: `Cancel`,
onClick: [
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: ""
}
}
]
})
]
}
});
const paddedPanelForButton = (button) => ({
control: {
_component: "@budibase/standard-components/div",
className: "btn-group",
children: [
{
component: button
}
]
}
});
const getRecordPath = (record) => {
const parts = [];
return parts.reverse().join("/");
};
const indexTables = ({indexes, helpers}) =>
indexes.map(i => indexTable(i, helpers));
const excludedColumns = ["id", "isNew", "key", "type", "sortKey"];
const indexTableProps = (index, helpers) => ({
data: {
"##bbstate":index.nodeKey(),
"##bbsource":"store"
},
tableClass: "table table-hover",
theadClass: "thead-dark",
columns: helpers
.indexSchema(index)
.filter(c => !excludedColumns.includes(c.name))
.map(column),
onRowClick: [
{
"##eventHandlerType": "Set State",
parameters: {
2019-10-19 08:24:20 +02:00
path: `selectedrow_${index.name}`,
2019-10-18 18:32:03 +02:00
value: {
2019-10-19 08:24:20 +02:00
"##bbstate": "key",
"##bbsource": "event"
2019-10-18 18:32:03 +02:00
}
},
}
]
});
const getIndexTableName = (index, record) => {
record = record
|| index.parent().type === "record" ? index.parent() : null;
return (record
? `${getRecordPath()}/${index.name} Table`
: `${index.name} Table`);
};
const indexTable = (index, helpers) => ({
name: getIndexTableName(index),
inherits: "@budibase/standard-components/table",
props: indexTableProps(index, helpers)
});
const column = (col) => ({
title: col.name,
value: {
"##bbstate": col.name,
"##bbsource":"context"
}
});
const recordHomePageComponents = ({indexes, records, helpers}) =>
[
...recordHomepages({indexes, records})
.map(component),
...recordHomepages({indexes, records})
.map(homePageButtons),
...indexTables({indexes, records, helpers}),
...buttons()
];
const findIndexForRecord = (indexes, record) => {
const forRecord = indexes.filter(i => i.allowedRecordNodeIds.includes(record.nodeId));
if(forRecord.length === 0) return;
if(forRecord.length === 1) return forRecord[0];
const noMap = forRecord.filter(i => !i.filter || !i.filter.trim());
if(noMap.length === 0) forRecord[0];
return noMap[0];
};
const recordHomepages = ({indexes, records}) =>
records.filter(r => r.parent().type === "root")
.map(r =>({
record:r,
index:findIndexForRecord(indexes, r)
}))
.filter(r => r.index);
const homepageComponentName = (record) =>
`${record.name}/${record.name} homepage`;
const component = ({record, index}) => ({
inherits: "@budibase/standard-components/div",
name: homepageComponentName(record),
props: {
2019-10-19 08:24:20 +02:00
className: "d-flex flex-column h-100",
2019-10-18 18:32:03 +02:00
children: [
{
component: {
_component: `${record.name}/homepage buttons`,
}
},
{
component: {
_component: getIndexTableName(index)
2019-10-19 08:24:20 +02:00
},
className: "flex-gow-1 overflow-auto"
2019-10-18 18:32:03 +02:00
}
],
onLoad: [
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: ""
}
},
{
"##eventHandlerType": "List Records",
parameters: {
statePath: index.nodeKey(),
indexKey: index.nodeKey()
}
}
]
}
});
const homePageButtons = ({index, record}) => ({
inherits: "@budibase/standard-components/div",
name: `${record.name}/homepage buttons`,
props: {
2019-10-19 08:24:20 +02:00
className: "btn-toolbar mt-4 mb-2",
2019-10-18 18:32:03 +02:00
children: [
{
component: {
2019-10-19 08:24:20 +02:00
_component: "@budibase/standard-components/div",
className: "btn-group mr-3",
children: [
2019-10-18 18:32:03 +02:00
{
2019-10-19 08:24:20 +02:00
component: {
_component: "common/Default Button",
contentText: `Create ${record.name}`,
onClick: [
{
"##eventHandlerType": "Get New Record",
parameters: {
statePath: record.name,
collectionKey: `/${record.collectionName}`,
childRecordType: record.name
}
},
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: "true"
}
}
]
2019-10-18 18:32:03 +02:00
}
2019-10-19 08:24:20 +02:00
},
2019-10-18 18:32:03 +02:00
{
2019-10-19 08:24:20 +02:00
component: {
_component: "common/Default Button",
contentText: `Refresh`,
onClick: [
{
"##eventHandlerType": "List Records",
parameters: {
statePath: index.nodeKey(),
indexKey: index.nodeKey()
}
}
]
2019-10-18 18:32:03 +02:00
}
}
]
}
},
{
component: {
2019-10-19 08:24:20 +02:00
_component: "@budibase/standard-components/if",
condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`,
thenComponent: {
_component: "@budibase/standard-components/div",
className: "btn-group",
children: [
{
component: {
_component: "common/Default Button",
contentText: `Edit ${record.name}`,
onClick: [
{
"##eventHandlerType": "Load Record",
parameters: {
statePath: record.name,
recordKey: {
"##bbstate" : `selectedrow_${index.name}`,
"##source": "store"
}
}
},
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: "true"
}
}
]
}
},
{
component: {
_component: "common/Default Button",
contentText: `Delete ${record.name}`,
onClick: [
{
"##eventHandlerType": "Delete Record",
parameters: {
recordKey: {
"##bbstate" : `selectedrow_${index.name}`,
"##source": "store"
}
}
}
]
}
2019-10-18 18:32:03 +02:00
}
2019-10-19 08:24:20 +02:00
]
}
2019-10-18 18:32:03 +02:00
}
}
]
}
});
const selectNavContent = ({indexes, records, helpers}) =>
[
...recordHomepages({indexes, records})
.map(component$1),
...recordHomePageComponents({indexes, records, helpers}),
...forms({indexes, records, helpers})
];
const navContentComponentName = record =>
`${record.name}/${record.name} Nav Content`;
const component$1 = ({record, index}) => ({
inherits: "@budibase/standard-components/if",
description: `the component that gets displayed when the ${record.collectionName} nav is selected`,
name: navContentComponentName(record),
props: {
condition: `$store.isEditing${record.name}`,
thenComponent: {
_component: formName(record)
},
elseComponent: {
_component: homepageComponentName(record)
}
}
});
const app = ({records, indexes, helpers}) => [
{
name: "Application Root",
inherits: "@budibase/bootstrap-components/nav",
props: {
items: recordHomepages({indexes, records})
.map(navItem),
orientation: "horizontal",
alignment: "start",
fill: false,
pills: true,
selectedItem: {
"##bbstate":"selectedNav",
"##bbstatefallback":`${records[0].name}`,
"##bbsource": "store"
2019-10-19 08:24:20 +02:00
},
className: "p-3"
2019-10-18 18:32:03 +02:00
}
},
{
name: "Login",
inherits: "@budibase/standard-components/login",
props: {}
},
...selectNavContent({records, indexes, helpers})
];
const navItem = ({record}) => ({
title: record.collectionName,
component : {
_component: navContentComponentName(record)
}
});
export { app, forms, indexTables, recordHomePageComponents as recordHomepages };
2020-01-21 16:50:00 +01:00
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuZXJhdG9ycy5qcyIsInNvdXJjZXMiOlsiLi4vc3JjL2dlbmVyYXRvcnMvYnV0dG9uR2VuZXJhdG9ycy5qcyIsIi4uL3NyYy9nZW5lcmF0b3JzL2Zvcm1zR2VuZXJhdG9yLmpzIiwiLi4vc3JjL2dlbmVyYXRvcnMvZ2V0UmVjb3JkUGF0aC5qcyIsIi4uL3NyYy9nZW5lcmF0b3JzL2luZGV4VGFibGVzR2VuZXJhdG9yLmpzIiwiLi4vc3JjL2dlbmVyYXRvcnMvcmVjb3JkSG9tZVBhZ2VHZW5lcmF0b3IuanMiLCIuLi9zcmMvZ2VuZXJhdG9ycy9zZWxlY3RlZE5hdkNvbnRlbnRHZW5lcmF0b3IuanMiLCIuLi9zcmMvZ2VuZXJhdG9ycy9hcHBHZW5lcmF0b3IuanMiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IGJ1dHRvbnMgPSAoKSA9PiBbXG4gICAge1xuICAgICAgICBuYW1lOiBcImNvbW1vbi9QcmltYXJ5IEJ1dHRvblwiLFxuICAgICAgICBkZXNjcmlwdGlvbjogXCJCb290c3RyYXAgcHJpbWFyeSBidXR0b24gXCIsXG4gICAgICAgIGluaGVyaXRzOiBcIkBidWRpYmFzZS9zdGFuZGFyZC1jb21wb25lbnRzL2J1dHRvblwiLFxuICAgICAgICBwcm9wczoge1xuICAgICAgICAgICAgY2xhc3NOYW1lOiBcImJ0biBidG4tcHJpbWFyeVwiXG4gICAgICAgIH1cbiAgICB9LFxuICAgIHtcbiAgICAgICAgbmFtZTogXCJjb21tb24vRGVmYXVsdCBCdXR0b25cIixcbiAgICAgICAgZGVzY3JpcHRpb246IFwiQm9vdHN0cmFwIGRlZmF1bHQgYnV0dG9uXCIsXG4gICAgICAgIGluaGVyaXRzOiBcIkBidWRpYmFzZS9zdGFuZGFyZC1jb21wb25lbnRzL2J1dHRvblwiLFxuICAgICAgICBwcm9wczoge1xuICAgICAgICAgICAgY2xhc3NOYW1lOiBcImJ0biBidG4tc2Vjb25kYXJ5XCJcbiAgICAgICAgfVxuICAgIH1cbl0iLCJpbXBvcnQge2J1dHRvbnN9IGZyb20gXCIuL2J1dHRvbkdlbmVyYXRvcnNcIjtcblxuZXhwb3J0IGNvbnN0IGZvcm1zID0gKHtyZWNvcmRzLCBpbmRleGVzLCBoZWxwZXJzfSkgPT4gXG4gICAgW1xuICAgICAgICAuLi5yZWNvcmRzLm1hcChyb290KSxcbiAgICAgICAgLi4uYnV0dG9ucyh7cmVjb3JkcywgaW5kZXhlcywgaGVscGVyc30pXG4gICAgXTtcblxuZXhwb3J0IGNvbnN0IGZvcm1OYW1lID0gcmVjb3JkID0+ICBgJHtyZWNvcmQubmFtZX0vJHtyZWNvcmQubmFtZX0gRm9ybWA7XG5cbmNvbnN0IHJvb3QgPSByZWNvcmQgPT4gKHtcbiAgICBuYW1lOiBmb3JtTmFtZShyZWNvcmQpLFxuICAgIGRlc2NyaXB0aW9uOiBgQ29udHJvbCBmb3IgY3JlYXRpbmcvdXBkYXRpbmcgJyR7cmVjb3JkLm5vZGVLZXkoKX0nIGAsXG4gICAgaW5oZXJpdHM6IFwiQGJ1ZGliYXNlL3N0YW5kYXJkLWNvbXBvbmVudHMvZGl2XCIsXG4gICAgcHJvcHM6IHtcbiAgICAgICAgY2xhc3NOYW1lOlwicC0xXCIsXG4gICAgICAgIGNoaWxkcmVuOiBbXG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgY29tcG9uZW50OiB7XG4gICAgICAgICAgICAgICAgICAgIF9jb21wb25lbnQ6IFwiQGJ1ZGliYXNlL3N0YW5kYXJkLWNvbXBvbmVudHMvaDNcIixcbiAgICAgICAgICAgICAgICAgICAgdGV4dDogYEVkaXQgJHtyZWNvcmQubmFtZX1gLFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICBmb3JtKHJlY29yZCksXG4gICAgICAgICAgICBzYXZlQ2FuY2VsQnV0dG9ucyhyZWNvcmQpXG4gICAgICAgIF1cbiAgICB9XG59KSBcblxuY29uc3QgZm9ybSA9IHJlY29yZCA9PiAoe1xuICAgIGNvbXBvbmVudDoge1xuICAgICAgICBfY29tcG9uZW50OiBcIkBidWRpYmFzZS9zdGFuZGFyZC1jb21wb25lbnRzL2Zvcm1cIixcbiAgICAgICAgZm9ybUNvbnRyb2xzOiBcbiAgICAgICAgICAgIHJlY29yZC5maWVsZHMubWFwKGYgPT4gZm9ybUNvbnRyb2wocmVjb3JkLCBmKSlcbiAgICB9XG59KVxuXG5jb25zdCBmb3JtQ29udHJvbCA9IChyZWNvcmQsIGZpZWxkKSA9PiB7XG4gICAgaWYoZmllbGQudHlwZSA9PT0gXCJzdHJpbmdcIiAmJiBmaWVsZC50eXBlT3B0aW9ucy52YWx1ZXMgJiYgZmllbGQudHlwZU9wdGlvbnMudmFsdWVzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgcmV0dXJuICh7XG4gICAgICAgICAgICBjb250cm9sOiB7XG4gICAgICAgICAgICAgICAgX2NvbXBvbmVudDogXCJAYnVkaWJhc2Uvc3RhbmRhcmQtY29tcG9uZW50cy9zZWxlY3RcIixcbiAgICAgICAgICAgICAgICBvcHRpb25zOiBmaWVsZC50eXBlT3B0aW9ucy52YWx1ZXMubWFwKHYgPT4gKHtpZDp2LCB2YWx1ZTp2fSkpLFxuICAgICAgICAgICAgICAgIHZhbHVlOiB7XG4gICAgICAgICAgICAgICAgICAgIFwiIyNiYnN0YXRlXCI6YCR7cmVjb3JkLm5hbWV9LiR7ZmllbGQubmFtZX1gLFxuICAgICAgICAgICAgICAgICAgICBcIiMjYmJzb3VyY2VcIjpcInN0b3JlXCJcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZTogXCJmb3JtLWNvbnRyb2xcIlxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIGxhYmVsOiBmaWVsZC5sYWJlbFxuICAgICAgICB9KTtcbiAgICB9IGVsc2Uge1xuICAgICAgICByZXR1cm4gKHtcbiAgICAgICAgICAgIGNvbnRyb2w6IHtcbiAgICAgICAgICAgICAgICBfY29tcG9uZW50OiBcIkBidWRpYmFzZS9zdGFuZGFyZC1jb21wb25lbnRzL2lucHV0XCIsXG4gICAgICAgICAgICAgICAgdmFsdWU6IHtcbiAgICAgICAgICAgICAgICAgICAgXCIjI2Jic3RhdGVcIjpgJHtyZWNvcmQubmFtZX0uJHtmaWVsZC5uYW1lfWAsXG4gICAgICAgICAgICAgICAgICAgIFwiIyNiYnNvdXJjZVwiOlwic3RvcmVcIlxuICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lOiBcImZvcm0tY29udHJvbFwiLFxuICAgICAgICAgICAgICAgIHR5cGU6IGZpZWxkLnR5cGUgPT09IFwic3RyaW5nXCIgPyBcInRleHRcIlxuICAgICAgICAgICAgICAgICAgICA6IGZpZWxkLnR5cGUgPT09IFwiZGF0ZXRpbWVcIiA/IFwiZGF0ZVwiXG4gICAgICAgICAgICAgICAgICAgIDogZmllbGQudHlwZSA9PT0gXCJudW1iZXJcIiA/IFwibnVtYmVyXCJ