mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
45 changed files with 235 additions and 1082 deletions
@ -1,14 +0,0 @@ |
|||
import resolve from "rollup-plugin-node-resolve" |
|||
|
|||
export default { |
|||
input: "src/generators.js", |
|||
output: [ |
|||
{ |
|||
file: "dist/generators.js", |
|||
format: "esm", |
|||
name: "budibaseStandardComponents", |
|||
sourcemap: "inline", |
|||
}, |
|||
], |
|||
plugins: [resolve()], |
|||
} |
|||
@ -1,4 +0,0 @@ |
|||
export { forms } from "./generators/formsGenerator" |
|||
export { indexTables } from "./generators/indexTablesGenerator" |
|||
export { app } from "./generators/appGenerator" |
|||
export { recordHomePageComponents as recordHomepages } from "./generators/recordHomePageGenerator" |
|||
@ -1,37 +0,0 @@ |
|||
import { |
|||
navContentComponentName, |
|||
selectNavContent, |
|||
} from "./selectedNavContentGenerator" |
|||
import { recordHomepages } from "./recordHomePageGenerator" |
|||
export 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", |
|||
}, |
|||
className: "p-3", |
|||
}, |
|||
}, |
|||
{ |
|||
name: "Login", |
|||
inherits: "@budibase/standard-components/login", |
|||
props: {}, |
|||
}, |
|||
...selectNavContent({ records, indexes, helpers }), |
|||
] |
|||
|
|||
export const navItem = ({ record }) => ({ |
|||
title: record.collectionName, |
|||
component: { |
|||
_component: navContentComponentName(record), |
|||
}, |
|||
}) |
|||
@ -1,18 +0,0 @@ |
|||
export 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: { |
|||
className: "btn btn-secondary", |
|||
}, |
|||
}, |
|||
] |
|||
@ -1,128 +0,0 @@ |
|||
import { buttons } from "./buttonGenerators" |
|||
|
|||
export const forms = ({ records, indexes, helpers }) => [ |
|||
...records.map(root), |
|||
...buttons({ records, indexes, helpers }), |
|||
] |
|||
|
|||
export 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/container", |
|||
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/container", |
|||
className: "btn-group", |
|||
children: [ |
|||
{ |
|||
component: button, |
|||
}, |
|||
], |
|||
}, |
|||
}) |
|||
@ -1,14 +0,0 @@ |
|||
export const getRecordPath = () => { |
|||
const parts = [] |
|||
|
|||
const add = current => { |
|||
parts.push(current.name) |
|||
if (current.parent().type === "root") { |
|||
return |
|||
} |
|||
|
|||
add(current.parent()) |
|||
} |
|||
|
|||
return parts.reverse().join("/") |
|||
} |
|||
@ -1,53 +0,0 @@ |
|||
import { getRecordPath } from "./getRecordPath" |
|||
|
|||
export const indexTables = ({ indexes, helpers }) => |
|||
indexes.map(i => indexTable(i, helpers)) |
|||
|
|||
const excludedColumns = ["id", "isNew", "key", "type", "sortKey"] |
|||
|
|||
export 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: { |
|||
path: `selectedrow_${index.name}`, |
|||
value: { |
|||
"##bbstate": "key", |
|||
"##bbsource": "event", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}) |
|||
|
|||
export const getIndexTableName = (index, record) => { |
|||
record = record || index.parent().type === "record" ? index.parent() : null |
|||
|
|||
return record |
|||
? `${getRecordPath(record)}/${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", |
|||
}, |
|||
}) |
|||
@ -1,183 +0,0 @@ |
|||
import { getIndexTableName, indexTables } from "./indexTablesGenerator" |
|||
|
|||
import { buttons } from "./buttonGenerators" |
|||
|
|||
export const recordHomePageComponents = ({ indexes, records, helpers }) => [ |
|||
...recordHomepages({ indexes, records }).map(component), |
|||
|
|||
...recordHomepages({ indexes, records }).map(homePageButtons), |
|||
|
|||
...indexTables({ indexes, records, helpers }), |
|||
|
|||
...buttons({ indexes, buttons, helpers }), |
|||
] |
|||
|
|||
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] |
|||
} |
|||
|
|||
export const recordHomepages = ({ indexes, records }) => |
|||
records |
|||
.filter(r => r.parent().type === "root") |
|||
.map(r => ({ |
|||
record: r, |
|||
index: findIndexForRecord(indexes, r), |
|||
})) |
|||
.filter(r => r.index) |
|||
|
|||
export const homepageComponentName = record => |
|||
`${record.name}/${record.name} homepage` |
|||
|
|||
const component = ({ record, index }) => ({ |
|||
inherits: "@budibase/standard-components/container", |
|||
name: homepageComponentName(record), |
|||
props: { |
|||
className: "d-flex flex-column h-100", |
|||
children: [ |
|||
{ |
|||
component: { |
|||
_component: `${record.name}/homepage buttons`, |
|||
}, |
|||
}, |
|||
{ |
|||
component: { |
|||
_component: getIndexTableName(index), |
|||
}, |
|||
className: "flex-gow-1 overflow-auto", |
|||
}, |
|||
], |
|||
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/container", |
|||
name: `${record.name}/homepage buttons`, |
|||
props: { |
|||
className: "btn-toolbar mt-4 mb-2", |
|||
children: [ |
|||
{ |
|||
component: { |
|||
_component: "@budibase/standard-components/container", |
|||
className: "btn-group mr-3", |
|||
children: [ |
|||
{ |
|||
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", |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
component: { |
|||
_component: "common/Default Button", |
|||
contentText: `Refresh`, |
|||
onClick: [ |
|||
{ |
|||
"##eventHandlerType": "List Records", |
|||
parameters: { |
|||
statePath: index.nodeKey(), |
|||
indexKey: index.nodeKey(), |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
component: { |
|||
_component: "@budibase/standard-components/if", |
|||
condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`, |
|||
thenComponent: { |
|||
_component: "@budibase/standard-components/container", |
|||
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", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}) |
|||
@ -1,32 +0,0 @@ |
|||
import { |
|||
recordHomepages, |
|||
homepageComponentName, |
|||
recordHomePageComponents, |
|||
} from "./recordHomePageGenerator" |
|||
import { formName, forms } from "./formsGenerator" |
|||
|
|||
export const selectNavContent = ({ indexes, records, helpers }) => [ |
|||
...recordHomepages({ indexes, records }).map(component), |
|||
|
|||
...recordHomePageComponents({ indexes, records, helpers }), |
|||
|
|||
...forms({ indexes, records, helpers }), |
|||
] |
|||
|
|||
export const navContentComponentName = record => |
|||
`${record.name}/${record.name} Nav Content` |
|||
|
|||
const component = ({ record }) => ({ |
|||
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), |
|||
}, |
|||
}, |
|||
}) |
|||
@ -1,14 +0,0 @@ |
|||
import resolve from "rollup-plugin-node-resolve" |
|||
|
|||
export default { |
|||
input: "src/generators.js", |
|||
output: [ |
|||
{ |
|||
file: "dist/generators.js", |
|||
format: "esm", |
|||
name: "budibaseStandardComponents", |
|||
sourcemap: "inline", |
|||
}, |
|||
], |
|||
plugins: [resolve()], |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
export const TEXTFIELD = { |
|||
STANDARD: { |
|||
variant: "standard" |
|||
}, |
|||
FILLED: { |
|||
variant: "filled" |
|||
}, |
|||
OUTLINED: { |
|||
variant: "outlined" |
|||
} |
|||
}; |
|||
@ -1,14 +0,0 @@ |
|||
import resolve from "rollup-plugin-node-resolve" |
|||
|
|||
export default { |
|||
input: "src/generators.js", |
|||
output: [ |
|||
{ |
|||
file: "dist/generators.js", |
|||
format: "esm", |
|||
name: "budibaseStandardComponents", |
|||
sourcemap: "inline", |
|||
}, |
|||
], |
|||
plugins: [resolve()], |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
export { app } from "./generators/appGenerator" |
|||
export { forms } from "./generators/formsGenerator" |
|||
export { buttons } from "./generators/buttonsGenerator" |
|||
export { headers } from "./generators/headersGenerator" |
|||
export { nav } from "./generators/navGenerator" |
|||
export { indexTables } from "./generators/indexTablesGenerator" |
|||
@ -1,6 +0,0 @@ |
|||
import { forms } from "./formsGenerator" |
|||
import { nav } from "./navGenerator" |
|||
|
|||
export const app = params => { |
|||
return [...nav(params), ...forms(params)] |
|||
} |
|||
@ -1,28 +0,0 @@ |
|||
export const buttons = () => [ |
|||
{ |
|||
name: "common/Primary Button", |
|||
description: "a styled button", |
|||
inherits: "@budibase/standard-components/button", |
|||
props: { |
|||
padding: "5px 7px", |
|||
border: "1px solid #EEE", |
|||
color: "#5F6368", |
|||
background: "##f2f2f2", |
|||
hoverColor: "black", |
|||
hoverBackground: "#cccccc", |
|||
}, |
|||
}, |
|||
{ |
|||
name: "common/Secondary Button", |
|||
description: "a styled button", |
|||
inherits: "@budibase/standard-components/button", |
|||
props: { |
|||
padding: "5px 7px", |
|||
border: "1px solid #EEE", |
|||
color: "#5F6368", |
|||
background: "##f2f2f2", |
|||
hoverColor: "black", |
|||
hoverBackground: "#cccccc", |
|||
}, |
|||
}, |
|||
] |
|||
@ -1,82 +0,0 @@ |
|||
import { headers } from "./headersGenerator" |
|||
|
|||
export const forms = ({ records, indexes }) => [ |
|||
...headers({ records, indexes }), |
|||
...records.map(root), |
|||
] |
|||
|
|||
const root = record => ({ |
|||
name: `${record.name} Form`, |
|||
description: `All fields on record '${record.nodeKey()}' `, |
|||
inherits: "@budibase/standard-components/stackpanel", |
|||
props: { |
|||
direction: "vertical", |
|||
children: [ |
|||
{ |
|||
control: { |
|||
_component: "common/H1", |
|||
value: `Edit ${record.name}`, |
|||
}, |
|||
}, |
|||
form(record), |
|||
saveCancelButtons(record), |
|||
], |
|||
}, |
|||
}) |
|||
|
|||
const form = record => ({ |
|||
control: { |
|||
_component: "@budibase/standard-components/form", |
|||
formControls: record.fields.map(f => ({ |
|||
label: f.label, |
|||
control: { |
|||
_component: "@budibase/standard-components/textbox", |
|||
value: { |
|||
"##bbstate": `current${record.name}.${f.name}`, |
|||
"##bbsource": "store", |
|||
}, |
|||
}, |
|||
})), |
|||
}, |
|||
}) |
|||
|
|||
const saveCancelButtons = record => ({ |
|||
control: { |
|||
_component: "@budibase/standard-components/stackpanel", |
|||
direction: "horizontal", |
|||
children: [ |
|||
paddedPanelForButton({ |
|||
_component: "common/Primary Button", |
|||
contentText: `Save ${record.name}`, |
|||
onClick: [ |
|||
{ |
|||
"##eventHandlerType": "Save Record", |
|||
parameters: { |
|||
statePath: `current${record.name}`, |
|||
}, |
|||
}, |
|||
], |
|||
}), |
|||
paddedPanelForButton({ |
|||
_component: "common/Secondary Button", |
|||
contentText: `Cancel`, |
|||
onClick: [ |
|||
{ |
|||
"##eventHandlerType": "Save Record", |
|||
parameters: { |
|||
statePath: `current${record.name}`, |
|||
}, |
|||
}, |
|||
], |
|||
}), |
|||
], |
|||
}, |
|||
}) |
|||
|
|||
const paddedPanelForButton = button => ({ |
|||
control: { |
|||
_component: "@budibase/standard-components/panel", |
|||
padding: "20px", |
|||
component: button, |
|||
}, |
|||
}) |
|||
@ -1,34 +0,0 @@ |
|||
export const headers = () => [ |
|||
{ |
|||
name: "common/H1", |
|||
description: "Header 1", |
|||
inherits: "@budibase/standard-components/text", |
|||
props: { |
|||
font: "20pt", |
|||
}, |
|||
}, |
|||
{ |
|||
name: "common/H2", |
|||
description: "Header 2", |
|||
inherits: "@budibase/standard-components/text", |
|||
props: { |
|||
font: "15pt", |
|||
}, |
|||
}, |
|||
{ |
|||
name: "common/H3", |
|||
description: "Header 3", |
|||
inherits: "@budibase/standard-components/text", |
|||
props: { |
|||
font: "12pt bold", |
|||
}, |
|||
}, |
|||
{ |
|||
name: "common/H4", |
|||
description: "Header 4", |
|||
inherits: "@budibase/standard-components/text", |
|||
props: { |
|||
font: "10pt bold", |
|||
}, |
|||
}, |
|||
] |
|||
@ -1,26 +0,0 @@ |
|||
export const indexTables = ({ indexes, helpers }) => |
|||
indexes |
|||
.filter(i => i.parent().type === "root") |
|||
.map(i => indexTable(i, helpers)) |
|||
|
|||
export const indexTableProps = (index, helpers) => ({ |
|||
data: { |
|||
"##bbstate": index.nodeKey(), |
|||
"##bbsource": "store", |
|||
}, |
|||
columns: helpers.indexSchema(index).map(column), |
|||
}) |
|||
|
|||
const indexTable = (index, helpers) => ({ |
|||
name: `tables/${index.name} Table`, |
|||
inherits: "@budibase/standard-components/table", |
|||
props: indexTableProps(index, helpers), |
|||
}) |
|||
|
|||
const column = col => ({ |
|||
title: col.name, |
|||
value: { |
|||
"##bbstate": col.name, |
|||
"##bbsource": "context", |
|||
}, |
|||
}) |
|||
@ -1,24 +0,0 @@ |
|||
import { indexTables } from "./indexTablesGenerator" |
|||
|
|||
export const nav = ({ records, indexes, helpers }) => [ |
|||
{ |
|||
name: "Application Root", |
|||
inherits: "@budibase/standard-components/nav", |
|||
props: { |
|||
items: indexes.filter(i => i.parent().type === "root").map(navItem), |
|||
selectedItem: { |
|||
"##bbstate": "selectedNav", |
|||
"##bbstatefallback": records[0].collectionName, |
|||
"##bbsource": "store", |
|||
}, |
|||
}, |
|||
}, |
|||
...indexTables({ records, indexes, helpers }), |
|||
] |
|||
|
|||
export const navItem = index => ({ |
|||
title: index.name, |
|||
component: { |
|||
_component: `tables/${index.name} Table`, |
|||
}, |
|||
}) |
|||
Loading…
Reference in new issue