diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index b19715c73e..b8942fffe0 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -4,6 +4,10 @@ "indexDatatable": { "description": "Datatable based on an Index", "component": "Datatable" + }, + "recordForm": { + "description": "Form for saving a record", + "component": "Form" } }, "Body1": { @@ -77,7 +81,9 @@ "Datatable": { "name": "Datatable", "description": "A Material Design component to represent tabular data.", - "props": {}, + "props": { + "onLoad":"event" + }, "tags": [] }, "DatatableHead": { diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte index 9c179e2eb9..74ce2ef653 100644 --- a/packages/materialdesign-components/src/Datatable/Datatable.svelte +++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte @@ -7,6 +7,7 @@ import ClassBuilder from "../ClassBuilder.js" export let _bb + export let onLoad const cb = new ClassBuilder("data-table") setContext("BBMD:data-table:cb", cb) @@ -23,6 +24,7 @@ instance = new MDCDataTable(datatable) initialied = true } + _bb.call(onLoad) } } diff --git a/packages/materialdesign-components/src/Templates/recordForm.js b/packages/materialdesign-components/src/Templates/recordForm.js new file mode 100644 index 0000000000..56a6bfb0ac --- /dev/null +++ b/packages/materialdesign-components/src/Templates/recordForm.js @@ -0,0 +1,122 @@ +export default ({ records }) => + records.map(r => ({ + name: `Form for Record: ${r.nodeKey()}`, + props: outerContainer(r), + })) + +const outerContainer = record => ({ + _component: "@budibase/standard-components/container", + _code: "", + onLoad: [], + type: "div", + _children: [ + heading(record), + ...record.fields.map(f => field(record, f)), + buttons(record), + ], +}) + +const heading = record => ({ + _component: "@budibase/materialdesign-components/H3", + text: capitalize(record.name), +}) + +const field = (record, f) => { + if (f.type === "bool") return checkbox(record, f) + return textField(record, f) +} + +const textField = (record, f) => ({ + _component: "@budibase/materialdesign-components/Textfield", + label: f.label, + variant: "filled", + disabled: false, + fullwidth: false, + colour: "primary", + maxLength: f.typeOptions && f.typeOptions.maxLength ? f.typeOptions : 0, + placeholder: f.label, + value: fieldValueBinding(record, f), +}) + +const checkbox = (record, f) => ({ + _component: "@budibase/materialdesign-components/Checkbox", + label: f.label, + checked: fieldValueBinding(record, f), +}) + +const fieldValueBinding = (record, f) => `store.${record.name}.${f.name}` + +const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1) + +const buttons = record => ({ + _component: "@budibase/standard-components/container", + borderWidth: "1px 0px 0px 0px", + borderColor: "lightgray", + borderStyle: "solid", + _styles: { + position: { + column: ["", ""], + row: ["", ""], + margin: ["","","",""], + padding: ["30px","","",""], + height: [""], + width: [""], + zindex: [""] + }, + layout: { + templaterows: [""], + templatecolumns: [""] + }, + }, + _children: [ + { + _component: "@budibase/materialdesign-components/Button", + onClick: [ + { + "##eventHandlerType": "Save Record", + parameters: { + statePath: `${record.name}`, + }, + }, + { + "##eventHandlerType": "Navigate To", + parameters: { + url: `/${record.name}s`, + }, + }, + ], + variant: "raised", + colour: "primary", + size: "medium", + text: `Save ${capitalize(record.name)}`, + }, + { + _component: "@budibase/materialdesign-components/Button", + _styles: { + position: { + row: ["", ""], + column: ["", ""], + padding: ["", "", "", ""], + margin: ["", "", "", "10px"], + width: [""], + height: [""], + zindex: [""], + }, + layout: { + templatecolumns: [""], + templaterows: [""], + }, + }, + onClick: [ + { + "##eventHandlerType": "Navigate To", + parameters: { + url: `/${record.name}s`, + }, + }, + ], + colour: "secondary", + text: "Cancel", + }, + ], +}) diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index 88ca8190c4..d3cf736994 100644 --- a/packages/materialdesign-components/src/index.js +++ b/packages/materialdesign-components/src/index.js @@ -15,4 +15,5 @@ export { DatatableRow, } from "./Datatable" export { default as indexDatatable } from "./Templates/indexDatatable" +export { default as recordForm } from "./Templates/recordForm" export { List } from "./List"