From 1a00fbacdef62319e3517202a6d4687cfb479a0e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 11 Feb 2021 13:03:22 +0000 Subject: [PATCH 01/17] Add filtering to repeaters --- .../PropertyControls/FilterEditor.svelte | 75 +++++++++++++++++++ .../PropertiesPanel/SettingsView.svelte | 2 + packages/standard-components/manifest.json | 5 ++ packages/standard-components/src/List.svelte | 21 +++++- 4 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte new file mode 100644 index 0000000000..8c4f555159 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte @@ -0,0 +1,75 @@ + + + + + + + +
+
+ {#if !Object.keys(tempValue || {}).length} +

Add your first filter column.

+ + {/if} +
+ +
+
+
+
+ + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index 430e622c4f..70729bfe76 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -18,6 +18,7 @@ import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte" import SchemaSelect from "./PropertyControls/SchemaSelect.svelte" import EventsEditor from "./PropertyControls/EventsEditor" + import FilterEditor from "./PropertyControls/FilterEditor.svelte" import ScreenSelect from "./PropertyControls/ScreenSelect.svelte" import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte" import { IconSelect } from "./PropertyControls/IconSelect" @@ -73,6 +74,7 @@ field: FieldSelect, multifield: MultiFieldSelect, schema: SchemaSelect, + filter: FilterEditor, "field/string": StringFieldSelect, "field/number": NumberFieldSelect, "field/options": OptionsFieldSelect, diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index a7f237a790..571d7b42ab 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -118,6 +118,11 @@ "label": "Empty Text", "key": "noRowsMessage", "defaultValue": "No rows found." + }, + { + "type": "filter", + "label": "Filtering", + "key": "filter" } ] }, diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte index 9923851abb..db9ef152bb 100644 --- a/packages/standard-components/src/List.svelte +++ b/packages/standard-components/src/List.svelte @@ -4,6 +4,7 @@ export let datasource export let noRowsMessage + export let filter const { API, styleable, Provider, builderStore, ActionTypes } = getContext( "sdk" @@ -13,6 +14,7 @@ let loaded = false $: fetchData(datasource) + $: filteredRows = filterRows(rows, filter) $: actions = [ { type: ActionTypes.RefreshDatasource, @@ -21,21 +23,34 @@ }, ] - async function fetchData(datasource) { + const fetchData = async datasource => { if (!isEmpty(datasource)) { rows = await API.fetchDatasource(datasource) } loaded = true } + + const filterRows = (rows, filter) => { + if (!Object.keys(filter || {}).length) { + return rows + } + let filteredData = [...rows] + Object.keys(filter).forEach(field => { + filteredData = filteredData.filter(row => { + return row[field] === filter[field].value + }) + }) + return filteredData + }
- {#if rows.length > 0} + {#if filteredRows.length > 0} {#if $component.children === 0 && $builderStore.inBuilder}

Add some components to display.

{:else} - {#each rows as row} + {#each filteredRows as row} From ecdd1d32f85cab9467fdc2e4ee371934b83a0972 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 11 Feb 2021 14:27:27 +0000 Subject: [PATCH 02/17] Don't filter repeater results when filter is null --- packages/standard-components/src/List.svelte | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte index db9ef152bb..b0eda0af1d 100644 --- a/packages/standard-components/src/List.svelte +++ b/packages/standard-components/src/List.svelte @@ -36,9 +36,11 @@ } let filteredData = [...rows] Object.keys(filter).forEach(field => { - filteredData = filteredData.filter(row => { - return row[field] === filter[field].value - }) + if (filter[field].value != null && filter[field].value !== "") { + filteredData = filteredData.filter(row => { + return row[field] === filter[field].value + }) + } }) return filteredData } From 7f92c82298c1f2d9b15f711342ff917f10cdd4d7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Feb 2021 16:01:11 +0000 Subject: [PATCH 03/17] Fix calc view schemas not being determined correctly --- packages/builder/src/builderStore/dataBinding.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 55a6328ca3..7c48a1af2e 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -231,6 +231,15 @@ export const getSchemaForDatasource = (datasource, isForm = false) => { if (table) { if (type === "view") { schema = cloneDeep(table.views?.[datasource.name]?.schema) + + // Some calc views don't include a "name" property inside the schema + if (schema) { + Object.keys(schema).forEach(field => { + if (!schema[field].name) { + schema[field].name = field + } + }) + } } else if (type === "query" && isForm) { schema = {} const params = table.parameters || [] From 7494714845fd151375623656d10fc6e1b9c68d18 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Feb 2021 16:01:35 +0000 Subject: [PATCH 04/17] Fix views not hot reloading when table data changes --- packages/client/src/store/datasource.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/store/datasource.js b/packages/client/src/store/datasource.js index ac129efc10..d40fbbbfc1 100644 --- a/packages/client/src/store/datasource.js +++ b/packages/client/src/store/datasource.js @@ -15,7 +15,7 @@ export const createDatasourceStore = () => { let datasourceIds = [] // Extract table ID - if (datasource.type === "table") { + if (datasource.type === "table" || datasource.type === "view") { if (datasource.tableId) { datasourceIds.push(datasource.tableId) } From 2460280841fae1778e9c5d0a2f4a88d92c90c2c9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 18 Feb 2021 17:44:56 +0000 Subject: [PATCH 05/17] Fix and tidy up all button actions and drawers --- .../common/DrawerBindableInput.svelte | 12 +- .../PropertiesPanel/BindingPanel.svelte | 8 +- .../PropertyControls/DatasourceSelect.svelte | 89 ++++---- .../EventsEditor/EventEditor.svelte | 43 ++-- .../EventsEditor/EventEditorModal.svelte | 207 ------------------ .../EventsEditor/EventPropertyControl.svelte | 20 +- .../EventsEditor/actions/DeleteRow.svelte | 15 +- .../EventsEditor/actions/ExecuteQuery.svelte | 80 ++++--- .../EventsEditor/actions/NavigateTo.svelte | 4 +- .../actions/RefreshDatasource.svelte | 37 ---- .../EventsEditor/actions/SaveFields.svelte | 116 ++++------ .../EventsEditor/actions/SaveRow.svelte | 10 +- .../actions/TriggerAutomation.svelte | 137 ++++++------ .../EventsEditor/actions/ValidateForm.svelte | 4 +- .../EventsEditor/actions/index.js | 5 - .../PropertyControls/FilterEditor.svelte | 17 +- .../components/integration/QueryEditor.svelte | 9 +- .../integration/QueryFieldsBuilder.svelte | 9 +- .../integration/QueryParameterBuilder.svelte | 11 +- .../src/components/integration/index.svelte | 6 +- packages/client/src/utils/buttonActions.js | 10 +- packages/standard-components/src/List.svelte | 6 +- 22 files changed, 293 insertions(+), 562 deletions(-) delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte index 4b0109270a..b534376a55 100644 --- a/packages/builder/src/components/common/DrawerBindableInput.svelte +++ b/packages/builder/src/components/common/DrawerBindableInput.svelte @@ -10,10 +10,13 @@ export let value = "" export let bindings = [] + export let thin = true + export let title = "Bindings" + export let placeholder let bindingDrawer - let tempValue = value + $: tempValue = value $: readableValue = runtimeToReadableBinding(bindings, value) const handleClose = () => { @@ -28,15 +31,15 @@
onChange(event.target.value)} - placeholder="/screen" /> + {placeholder} />
- +
Add the objects on the left to enrich your text. @@ -57,7 +60,6 @@ diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte index 241864839a..9a239a4e1b 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte @@ -17,7 +17,9 @@ const automationsToCreate = value.filter( action => action["##eventHandlerType"] === "Trigger Automation" ) - automationsToCreate.forEach(action => createAutomation(action.parameters)) + for (let action of automationsToCreate) { + await createAutomation(action.parameters) + } dispatch("change", value) notifier.success("Component actions saved.") @@ -27,11 +29,8 @@ // called by the parent modal when actions are saved const createAutomation = async parameters => { if (parameters.automationId || !parameters.newAutomationName) return - await automationStore.actions.create({ name: parameters.newAutomationName }) - const appActionDefinition = $automationStore.blockDefinitions.TRIGGER.APP - const newBlock = $automationStore.selectedAutomation.constructBlock( "TRIGGER", "APP", @@ -39,19 +38,14 @@ ) newBlock.inputs = { - fields: Object.entries(parameters.fields).reduce( - (fields, [key, value]) => { - fields[key] = value.type - return fields - }, - {} - ), + fields: Object.keys(parameters.fields).reduce((fields, key) => { + fields[key] = "string" + return fields + }, {}), } automationStore.actions.addBlockToAutomation(newBlock) - await automationStore.actions.save($automationStore.selectedAutomation) - parameters.automationId = $automationStore.selectedAutomation.automation._id delete parameters.newAutomationName } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte index 79ee23acd7..425c6f9c58 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte @@ -37,8 +37,8 @@ a List
{:else} - - @@ -50,22 +50,15 @@ diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte index 68ed77f1d2..e18336fab5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte @@ -3,63 +3,57 @@ import { store, backendUiStore, currentAsset } from "builderStore" import { getBindableProperties } from "builderStore/dataBinding" import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte" + import IntegrationQueryEditor from "components/integration/index.svelte" export let parameters + $: query = $backendUiStore.queries.find(q => q._id === parameters.queryId) $: datasource = $backendUiStore.datasources.find( ds => ds._id === parameters.datasourceId ) $: bindableProperties = getBindableProperties( $currentAsset, $store.selectedComponentId - ).map(property => ({ - ...property, - category: property.type === "instance" ? "Component" : "Table", - label: property.readableBinding, - path: property.runtimeBinding, - })) + ) - $: query = - parameters.queryId && - $backendUiStore.queries.find(query => query._id === parameters.queryId) + function fetchQueryDefinition(query) { + const source = $backendUiStore.datasources.find( + ds => ds._id === query.datasourceId + ).source + return $backendUiStore.integrations[source].query[query.queryVerb] + } -
- - + + {/each} + + + + +{#if parameters.datasourceId} + + +{/if} - + - {#if parameters.datasourceId} - - - {/if} - - - - {#if query?.parameters?.length > 0} - - {#if query.fields.sql} -
{query.fields.queryString}
- {/if} - {/if} -
- - +{#if query?.parameters?.length > 0} + + +{/if} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte index 9d814bf369..65071837e7 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte @@ -13,8 +13,10 @@
- + (parameters.url = value.detail)} {bindings} /> diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte deleted file mode 100644 index 7be21fe153..0000000000 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - -
- - -
- - diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte index a7c44a5d6a..fb5cb3ef16 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte @@ -1,115 +1,89 @@ {#if fields} - {#each fields as field} - + {#each fields as field, idx} + {#if schemaFields} - updateFieldName(idx, event.target.value)}> {/each} {:else} - + updateFieldName(idx, event.target.value)} /> {/if} - - - - {/each} - + + updateFieldValue(idx, event.detail)} />
- + removeField(field[0])}>
{/each} -
- Add {fieldLabel} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte index d28a61dc39..bea93615c2 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte @@ -37,8 +37,8 @@ Repeater
{:else} - - @@ -49,7 +49,7 @@ + on:change={onFieldsChanged} /> {/if} {/if}
@@ -57,7 +57,7 @@ diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte index 3f61bbcb7e..1a3276800a 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte @@ -27,13 +27,11 @@ schema, } }) - $: hasAutomations = automations && automations.length > 0 - - $: selectedAutomation = - parameters && - parameters.automationId && - automations.find(a => a._id === parameters.automationId) + $: selectedAutomation = automations?.find( + a => a._id === parameters?.automationId + ) + $: selectedSchema = selectedAutomation?.schema const onFieldsChanged = e => { parameters.fields = e.detail @@ -42,95 +40,98 @@ const setNew = () => { automationStatus = AUTOMATION_STATUS.NEW parameters.automationId = undefined + parameters.fields = {} } const setExisting = () => { automationStatus = AUTOMATION_STATUS.EXISTING parameters.newAutomationName = "" + parameters.fields = {} + parameters.automationId = automations[0]?._id }
-
- - - +
+
+ + +
+
+ + +
-
- +
+ - + {#if automationStatus === AUTOMATION_STATUS.EXISTING} + + {:else} + + {/if} + + {#key parameters.automationId} + + {/key}
- - - - {#if automationStatus === AUTOMATION_STATUS.EXISTING} - - {:else} - - {/if} - -
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte index 3ebfda0bbb..d1f67015d5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte @@ -13,8 +13,8 @@
- -
@@ -57,17 +63,18 @@ From 8862d00646f4be18cf1c891a8a80e9993690b3f2 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Mon, 22 Feb 2021 09:03:04 +0000 Subject: [PATCH 09/17] Icon / header size updated i'd prefer if these were smaller but this involves a larger discussions around font-sizes within the builder --- .../data/datasource/[selectedDatasource]/index.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte index 158b701409..6415f3f9de 100644 --- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte +++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte @@ -45,13 +45,13 @@ {#if datasource}
- +
+ height="26" + width="26" />

{datasource.name}

@@ -101,7 +101,7 @@