From db69673a9d99c2c4960d78445d28fa35c83f5549 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 7 May 2020 22:15:09 +0100 Subject: [PATCH] data components --- .../ModelDataTable/modals/CreateUser.svelte | 6 - .../ComponentPropertiesPanel.svelte | 8 +- .../EventsEditor/EventEditorModal.svelte | 6 +- .../EventsEditor/EventsEditor.svelte | 2 - .../EventsEditor/HandlerSelector.svelte | 1 - .../EventsEditor/StateBindingCascader.svelte | 1 - .../userInterface/PropControl.svelte | 8 +- .../components/userInterface/PropsView.svelte | 6 - .../userInterface/StateBindingControl.svelte | 9 +- .../userInterface/temporaryPanelStructure.js | 16 +++ packages/client/src/index.js | 7 +- packages/server/src/api/controllers/record.js | 5 +- packages/standard-components/components.json | 39 +++++++ packages/standard-components/package.json | 7 +- packages/standard-components/rollup.config.js | 6 +- .../standard-components/src/DataChart.svelte | 106 +++++------------- .../standard-components/src/DataForm.svelte | 69 ++++++++++-- .../standard-components/src/DataList.svelte | 87 ++++++++++++++ .../standard-components/src/DataSearch.svelte | 17 +++ .../standard-components/src/DataTable.svelte | 33 ++---- packages/standard-components/src/index.js | 3 + 21 files changed, 292 insertions(+), 150 deletions(-) create mode 100644 packages/standard-components/src/DataList.svelte create mode 100644 packages/standard-components/src/DataSearch.svelte diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte index 3ac4328f7e..e5f5625be8 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte @@ -46,10 +46,4 @@ background: #fafafa; border-radius: 0.5rem; } - select { - width: 100%; - } - option { - padding: 10px; - } diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 2164cd86cd..76d0c5605c 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -1,6 +1,5 @@ diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index 41c7049b8b..c85607bd8f 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -25,7 +25,6 @@ export const EVENT_TYPE = "event" export let component - export let onPropChanged = () => {} export let components let modalOpen = false @@ -74,7 +73,6 @@ + import { store } from "builderStore"; import Checkbox from "../common/Checkbox.svelte" import Textbox from "../common/Textbox.svelte" import Dropdown from "../common/Dropdown.svelte" import StateBindingControl from "./StateBindingControl.svelte" - export let setProp = () => {} export let index export let prop_name export let prop_value export let prop_definition = {} - - const setComponentProp = props => { - setProp(propDef.____name, props) - }
@@ -23,7 +19,7 @@ type={prop_definition.type || prop_definition} options={prop_definition.options} styleBindingProperty={prop_definition.styleBindingProperty} - onChanged={v => setProp(prop_name, v)} /> + onChanged={v => store.setComponentProp(prop_name, v)} /> {/if}
diff --git a/packages/builder/src/components/userInterface/PropsView.svelte b/packages/builder/src/components/userInterface/PropsView.svelte index 7687c794b8..108b37b795 100644 --- a/packages/builder/src/components/userInterface/PropsView.svelte +++ b/packages/builder/src/components/userInterface/PropsView.svelte @@ -6,17 +6,12 @@ import IconButton from "../common/IconButton.svelte" export let component - export let onPropChanged = () => {} export let components let errors = [] const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"] $: componentDef = components[component._component] - - let setProp = (name, value) => { - onPropChanged(name, value) - }
@@ -27,7 +22,6 @@ {#if prop_def !== 'event'}
@@ -26,10 +27,12 @@ {:else if type === 'models'} {:else if type === 'options' || type === 'models'} diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 17b008028e..5aeb6cf2ec 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -189,6 +189,22 @@ export default { commonProps: {}, children: [], }, + { + name: "Chart", + _component: "@budibase/standard-components/datachart", + description: "Shiny chart", + icon: "ri-bar-chart-line", + commonProps: {}, + children: [], + }, + { + name: "List", + _component: "@budibase/standard-components/datalist", + description: "Shiny list", + icon: "ri-file-list-line", + commonProps: {}, + children: [], + }, ], }, ], diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 00d3df0682..9c1e95df45 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -29,9 +29,12 @@ export const loadBudibase = async opts => { // let { appRootPath } = frontendDefinition; // appRootPath = appRootPath === "" ? "" : "/" + trimSlash(appRootPatl) - const componentLibraryModules = opts.componentLibraries || {} + const componentLibraryModules = opts && opts.componentLibraries || {} - const libraries = frontendDefinition.libraries || [] + const libraries = frontendDefinition.libraries || [ + "@budibase/materialdesign-components", + "@budibase/standard-components" + ] for (let library of libraries) { // fetch the JavaScript for the component libraries from the server diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js index 980fb648f6..313d852a93 100644 --- a/packages/server/src/api/controllers/record.js +++ b/packages/server/src/api/controllers/record.js @@ -45,7 +45,10 @@ exports.save = async function(ctx) { // record: record, // }) - ctx.body = record + ctx.body = { + ...record, + ...response + } ctx.status = 200 ctx.message = `${model.name} created successfully` } diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 80bd42ec21..abc72cad72 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -276,6 +276,45 @@ "model": "models" } }, + "datalist": { + "description": "A configurable data list that attaches to your backend models.", + "data": true, + "props": { + "model": "models", + "layout": { + "type": "options", + "default": "list", + "options": [ + "list", + "grid" + ] + } + } + }, + "datachart": { + "description": "shiny chart", + "data": true, + "props": { + "model": "models", + "type": { + "type": "options", + "default": "column2d", + "options": [ + "column3d", + "line", + "area2d", + "bar2d", + "bar3d", + "pie2d", + "pie3d", + "doughnut2d", + "doughnut3d", + "pareto2d", + "pareto3d" + ] + } + } + }, "link": { "description": "an HTML anchor tag", "props": { diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index a575356d38..5243d546b2 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -14,6 +14,7 @@ "devDependencies": { "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", + "@rollup/plugin-commonjs": "^11.1.0", "bcryptjs": "2.4.3", "fs-extra": "^8.1.0", "lodash": "^4.17.15", @@ -34,5 +35,9 @@ ], "version": "0.0.32", "license": "MIT", - "gitHead": "b1f4f90927d9e494e513220ef060af28d2d42455" + "gitHead": "b1f4f90927d9e494e513220ef060af28d2d42455", + "dependencies": { + "fusioncharts": "^3.15.1-sr.1", + "svelte-fusioncharts": "^1.0.0" + } } diff --git a/packages/standard-components/rollup.config.js b/packages/standard-components/rollup.config.js index 5b6b0ee50a..078b107232 100644 --- a/packages/standard-components/rollup.config.js +++ b/packages/standard-components/rollup.config.js @@ -1,5 +1,6 @@ import svelte from "rollup-plugin-svelte" import resolve from "rollup-plugin-node-resolve" +import commonjs from "@rollup/plugin-commonjs" export default { input: "src/index.js", @@ -15,6 +16,9 @@ export default { svelte({ hydratable: true, }), - resolve(), + resolve({ + browser: true, + }), + commonjs() ], } diff --git a/packages/standard-components/src/DataChart.svelte b/packages/standard-components/src/DataChart.svelte index 4d403ce725..7ddb3228f5 100644 --- a/packages/standard-components/src/DataChart.svelte +++ b/packages/standard-components/src/DataChart.svelte @@ -1,22 +1,38 @@ - - - - - - - {#each headers as header} - - {/each} - - - - {#each data as row} - - {#each headers as header} - {#if row[header]} - - {/if} - {/each} - - {/each} - -
{header}
{row[header]}
- - - - +
+ +
\ No newline at end of file diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte index 5121709b5a..1316b51fe8 100644 --- a/packages/standard-components/src/DataForm.svelte +++ b/packages/standard-components/src/DataForm.svelte @@ -2,26 +2,73 @@ import { onMount } from "svelte" export let _bb - export let _viewName export let _instanceId + export let model let username let password + let newModel = { + modelId: model._id + } + let store = _bb.store + + $: fields = Object.keys(model.schema) + + async function save() { + const SAVE_RECORD_URL = `/api/${_instanceId}/records` + const response = await _bb.api.post(SAVE_RECORD_URL, newModel); + const json = await response.json(); + + store.update(state => { + state[model._id] = [ + ...state[model._id], + json + ] + return state + }); + } + + const handleInput = field => event => { + let value + + if (event.target.type === "checkbox") { + value = event.target.checked + newModel[field] = value + return + } + + if (event.target.type === "number") { + value = parseInt(event.target.value) + newModel[field] = value + return + } + + value = event.target.value + newModel[field] = value + } -
+ +

{model.name}

-
- - -
-
- - -
+ {#each fields as field} +
+ + +
+ {/each}
+
diff --git a/packages/standard-components/src/DataList.svelte b/packages/standard-components/src/DataList.svelte new file mode 100644 index 0000000000..00732917a2 --- /dev/null +++ b/packages/standard-components/src/DataList.svelte @@ -0,0 +1,87 @@ + + +
+ {#each data as data} +
+
    + {#each Object.keys(data) as key} +
  • + + {key}: + + + {data[key]} + +
    • + {/each} +
+
+ {/each} +
+ + diff --git a/packages/standard-components/src/DataSearch.svelte b/packages/standard-components/src/DataSearch.svelte new file mode 100644 index 0000000000..3e4f0dec65 --- /dev/null +++ b/packages/standard-components/src/DataSearch.svelte @@ -0,0 +1,17 @@ + + +
+ + +
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte index 375cb932bd..e0139952b4 100644 --- a/packages/standard-components/src/DataTable.svelte +++ b/packages/standard-components/src/DataTable.svelte @@ -1,38 +1,38 @@ - - - @@ -54,19 +54,6 @@
- -