From df455c2719a1c88701e70a8e37ce0041a28cdf1b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 12 Nov 2021 15:19:25 +0000 Subject: [PATCH] Add data block component --- .../builder/src/builderStore/dataBinding.js | 1 + .../design/AppPreview/componentStructure.json | 3 +- packages/client/manifest.json | 198 ++++++++++++++++++ .../src/components/BlockComponent.svelte | 2 +- .../client/src/components/Component.svelte | 7 +- .../components/app/blocks/DataBlock.svelte | 60 ++++++ .../client/src/components/app/blocks/index.js | 1 + 7 files changed, 267 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index d4d535a532..e63e922f4f 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -346,6 +346,7 @@ export const getSchemaForDatasource = (asset, datasource, isForm = false) => { const queries = get(queriesStores).list table = queries.find(query => query._id === datasource._id) } else if (type === "field") { + table = { name: datasource.fieldName } const { fieldType } = datasource if (fieldType === "attachment") { schema = { diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index c4fd33b084..c602000a03 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -4,7 +4,8 @@ "icon": "Article", "children": [ "tableblock", - "cardsblock" + "cardsblock", + "datablock" ] }, "section", diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4a50a11fce..eec7b82c5c 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2932,5 +2932,203 @@ "type": "schema", "suffix": "repeater" } + }, + "datablock": { + "name": "Data block", + "icon": "ViewList", + "illegalChildren": ["section"], + "hasChildren": true, + "showSettingsBar": true, + "settings": [ + { + "type": "dataSource", + "label": "Data", + "key": "dataSource" + }, + { + "type": "filter", + "label": "Filtering", + "key": "filter" + }, + { + "type": "field", + "label": "Sort Column", + "key": "sortColumn" + }, + { + "type": "select", + "label": "Sort Order", + "key": "sortOrder", + "options": ["Ascending", "Descending"], + "defaultValue": "Descending" + }, + { + "type": "number", + "label": "Limit", + "key": "limit", + "defaultValue": 10 + }, + { + "type": "boolean", + "label": "Paginate", + "key": "paginate" + }, + { + "section": true, + "name": "Layout settings", + "settings": [ + { + "type": "text", + "label": "Empty Text", + "key": "noRowsMessage", + "defaultValue": "No rows found" + }, + { + "type": "select", + "label": "Direction", + "key": "direction", + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "Column", + "value": "column", + "barIcon": "ViewRow", + "barTitle": "Column layout" + }, + { + "label": "Row", + "value": "row", + "barIcon": "ViewColumn", + "barTitle": "Row layout" + } + ], + "defaultValue": "column" + }, + { + "type": "select", + "label": "Horiz. Align", + "key": "hAlign", + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "Left", + "value": "left", + "barIcon": "AlignLeft", + "barTitle": "Align left" + }, + { + "label": "Center", + "value": "center", + "barIcon": "AlignCenter", + "barTitle": "Align center" + }, + { + "label": "Right", + "value": "right", + "barIcon": "AlignRight", + "barTitle": "Align right" + }, + { + "label": "Stretch", + "value": "stretch", + "barIcon": "MoveLeftRight", + "barTitle": "Align stretched horizontally" + } + ], + "defaultValue": "stretch" + }, + { + "type": "select", + "label": "Vert. Align", + "key": "vAlign", + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "Top", + "value": "top", + "barIcon": "AlignTop", + "barTitle": "Align top" + }, + { + "label": "Middle", + "value": "middle", + "barIcon": "AlignMiddle", + "barTitle": "Align middle" + }, + { + "label": "Bottom", + "value": "bottom", + "barIcon": "AlignBottom", + "barTitle": "Align bottom" + }, + { + "label": "Stretch", + "value": "stretch", + "barIcon": "MoveUpDown", + "barTitle": "Align stretched vertically" + } + ], + "defaultValue": "top" + }, + { + "type": "select", + "label": "Gap", + "key": "gap", + "showInBar": true, + "barStyle": "picker", + "options": [ + { + "label": "None", + "value": "N" + }, + { + "label": "Small", + "value": "S" + }, + { + "label": "Medium", + "value": "M" + }, + { + "label": "Large", + "value": "L" + } + ], + "defaultValue": "M" + } + ] + } + ], + "context": [ + { + "type": "static", + "suffix": "provider", + "values": [ + { + "label": "Rows", + "key": "rows" + }, + { + "label": "Rows Length", + "key": "rowsLength" + }, + { + "label": "Schema", + "key": "schema" + }, + { + "label": "Page Number", + "key": "pageNumber" + } + ] + }, + { + "type": "schema", + "suffix": "repeater" + } + ] } } diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index 589998994d..c23f18f55c 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/packages/client/src/components/BlockComponent.svelte @@ -30,6 +30,6 @@ } - + diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 346de98f2f..443691595e 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -17,6 +17,7 @@ export let instance = {} export let isLayout = false export let isScreen = false + export let isBlock = false // The enriched component settings let enrichedSettings @@ -44,7 +45,6 @@ // Get contexts const context = getContext("context") const insideScreenslot = !!getContext("screenslot") - const insideBlock = !!getContext("block") // Create component context const componentStore = writable({}) @@ -69,7 +69,7 @@ $: interactive = $builderStore.inBuilder && ($builderStore.previewType === "layout" || insideScreenslot) && - !insideBlock + !isBlock $: draggable = interactive && !isLayout && !isScreen $: droppable = interactive && !isLayout && !isScreen @@ -262,6 +262,7 @@ class:droppable class:empty class:interactive + class:block={isBlock} data-id={id} data-name={name} > @@ -272,7 +273,7 @@ {/each} {:else if emptyState} - {:else if insideBlock} + {:else if isBlock} {/if} diff --git a/packages/client/src/components/app/blocks/DataBlock.svelte b/packages/client/src/components/app/blocks/DataBlock.svelte index e69de29bb2..935de48cbc 100644 --- a/packages/client/src/components/app/blocks/DataBlock.svelte +++ b/packages/client/src/components/app/blocks/DataBlock.svelte @@ -0,0 +1,60 @@ + + + +
+ + {#if $component.empty} + + {:else} + + + + {/if} + +
+ diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js index af238b901d..56d2fcbd01 100644 --- a/packages/client/src/components/app/blocks/index.js +++ b/packages/client/src/components/app/blocks/index.js @@ -1,2 +1,3 @@ export { default as tableblock } from "./TableBlock.svelte" export { default as cardsblock } from "./CardsBlock.svelte" +export { default as datablock } from "./DataBlock.svelte"