From 12dda8ee0d26248a3ae0d2fc7f5277badcb1095b Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Mon, 12 Oct 2020 11:44:43 +0200 Subject: [PATCH] turns off some functionality and adds theme options --- .../userInterface/temporaryPanelStructure.js | 7 ++++++ packages/standard-components/components.json | 13 ++++++++++- packages/standard-components/package.json | 9 ++++---- .../src/DataGrid/AttachmentCell/Button.svelte | 14 +++++------ .../src/DataGrid/Component.svelte | 23 +++++++++++-------- .../src/DataGrid/DateTime/Wrapper.svelte | 5 ++++ .../src/DataGrid/customRenderer.js | 12 ++++------ 7 files changed, 53 insertions(+), 30 deletions(-) create mode 100644 packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index f35a0422b0..1aef5d6beb 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -332,6 +332,13 @@ export default { valueKey: "checked", control: Checkbox, }, + { + label: "Theme", + key: "theme", + control: OptionSelect, + options: ["alpine", "alpine-dark", "balham", "balham-dark", "material"], + placeholder: "alpine", + }, ], }, children: [], diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 12ce6aeae4..4a7773377b 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -226,7 +226,18 @@ "data": true, "props": { "datasource": "models", - "editable": "bool" + "editable": "bool", + "theme": { + "type": "options", + "default": "alpine", + "options": [ + "alpine", + "alpine-dark", + "balham", + "balham-dark", + "material" + ] + } } }, "dataform": { diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 842990b22b..d99aeb1fd3 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -26,7 +26,7 @@ "rollup-plugin-terser": "^7.0.2", "shortid": "^2.2.15", "sirv-cli": "^0.4.4", - "svelte": "^3.28.0" + "svelte": "^3.29.0" }, "keywords": [ "svelte" @@ -37,15 +37,16 @@ "dependencies": { "@beyonk/svelte-googlemaps": "^2.2.0", "@budibase/bbui": "^1.41.0", - "@budibase/svelte-ag-grid": "^0.0.11", + "@budibase/svelte-ag-grid": "^0.0.12", "@fortawesome/fontawesome-free": "^5.14.0", "@svelteschool/svelte-forms": "^0.7.0", "britecharts": "^2.16.1", "d3-selection": "^1.4.2", "fast-sort": "^2.2.0", + "flatpickr": "^4.6.6", "fusioncharts": "^3.15.1-sr.1", "lodash.debounce": "^4.0.8", - "svelte-flatpickr": "^2.4.0", + "svelte-flatpickr": "^3.1.0", "svelte-fusioncharts": "^1.0.0" } -} \ No newline at end of file +} diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte index 720cd78f42..7715ea94cf 100644 --- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte +++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte @@ -12,22 +12,22 @@ export let files -
+ + - + on:newRecord={() => dispatch('newRecord')} /> + --> - + --> diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index 280f62a066..6df3bcc5e4 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -17,6 +17,7 @@ export let _bb export let datasource = {} export let editable + export let theme = 'alpine' let dataLoaded = false let data @@ -29,7 +30,7 @@ minWidth: 150, filter: true, }, - rowSelection: editable ? "multiple" : "single", + rowSelection: editable ? "multiple" : false, suppressRowClickSelection: !editable, } @@ -50,12 +51,7 @@ hide: shouldHideField(key), sortable: true, editable: editable && isEditable(schema[key].type), - cellRenderer: - editable && - getRenderer( - schema[key].type, // type - schema[key].constraints // options - ), + cellRenderer: editable && getRenderer(schema[key]), autoHeight: true, } }) @@ -67,8 +63,8 @@ const isEditable = type => type !== "boolean" && type !== "options" && - type !== "attachment" && - type !== "datetime" + // type !== "datetime" && + type !== "attachment" const shouldHideField = name => { if (name.startsWith("_")) return true @@ -107,6 +103,12 @@ } + + + +
{#if dataLoaded} {#if editable} @@ -121,6 +123,7 @@
{/if} .container { - --grid-height: 400px; + --grid-height: 800px; } .container :global(form) { display: grid; diff --git a/packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte b/packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte new file mode 100644 index 0000000000..b493626d64 --- /dev/null +++ b/packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index 51a7338c0b..4949e07f77 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -3,19 +3,18 @@ import AttachmentCell from './AttachmentCell/Button.svelte' import Select from './Select/Wrapper.svelte' -import { DatePicker } from "@budibase/bbui" +import DatePicker from "./DateTime/Wrapper.svelte" const renderers = new Map([ ["boolean", booleanRenderer], ["attachment", attachmentRenderer], - ["datetime", dateRenderer], ["options", optionsRenderer], ]) -export function getRenderer(type, options) { +export function getRenderer({ type, constraints }) { if (renderers.get(type)) { - return renderers.get(type)(options) + return renderers.get(type)(constraints) } else { return false } @@ -50,7 +49,7 @@ function attachmentRenderer(options) { } } function dateRenderer(options) { - return params => { + return function (params) { const container = document.createElement("div") const toggle = (e) => { params.setValue(e.detail[0][0]) @@ -62,12 +61,9 @@ function dateRenderer(options) { target: container, props: { value: params.value, - thin: true } }); - datePickerInstance.$on('change', toggle) - return container } }