From 3ffe00fe2f83dea02dbb7cae105a46431b1e54a8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 10 Feb 2021 15:49:23 +0000 Subject: [PATCH 1/9] Make URL params available to client apps via context --- packages/client/src/components/Router.svelte | 16 +++++++--------- packages/client/src/components/Screen.svelte | 17 +++++++++-------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte index efa0e321aa..ddbe7b77e9 100644 --- a/packages/client/src/components/Router.svelte +++ b/packages/client/src/components/Router.svelte @@ -1,5 +1,5 @@ -{#each configs as config (config.id)} +{#key config.id}
-{/each} +{/key} diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte index 76dbdf229c..02a7a33bec 100644 --- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte @@ -24,7 +24,7 @@ $: value && checkValid() $: bindableProperties = getBindableProperties( - $currentAsset.props, + $currentAsset, $store.selectedComponentId ) $: dispatch("update", value) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte index 75702b7cdb..5675774139 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte @@ -47,7 +47,7 @@ type: "query", })) $: bindableProperties = getBindableProperties( - $currentAsset.props, + $currentAsset, $store.selectedComponentId ) $: queryBindableProperties = bindableProperties.map(property => ({ 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 287f76d9e3..79ee23acd7 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 @@ -10,7 +10,7 @@ export let parameters $: dataProviderComponents = getDataProviderComponents( - $currentAsset.props, + $currentAsset, $store.selectedComponentId ) $: { 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 74d27df027..68ed77f1d2 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 @@ -10,7 +10,7 @@ ds => ds._id === parameters.datasourceId ) $: bindableProperties = getBindableProperties( - $currentAsset.props, + $currentAsset, $store.selectedComponentId ).map(property => ({ ...property, 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 041237266e..9d814bf369 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 @@ -1,18 +1,23 @@
- - - {/each} - + (parameters.url = value.detail)} + {bindings} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index 430e622c4f..889c7d5dcd 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -18,7 +18,6 @@ import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte" import SchemaSelect from "./PropertyControls/SchemaSelect.svelte" import EventsEditor from "./PropertyControls/EventsEditor" - import ScreenSelect from "./PropertyControls/ScreenSelect.svelte" import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte" import { IconSelect } from "./PropertyControls/IconSelect" import ColorPicker from "./PropertyControls/ColorPicker.svelte" @@ -62,7 +61,6 @@ text: Input, select: OptionSelect, datasource: DatasourceSelect, - screen: ScreenSelect, detailScreen: DetailScreenSelect, boolean: Checkbox, number: Input, diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js index 18a894beaa..161565e789 100644 --- a/packages/client/src/utils/componentProps.js +++ b/packages/client/src/utils/componentProps.js @@ -44,7 +44,7 @@ export const enrichProps = async (props, context) => { let enrichedProps = await enrichDataBindings(validProps, totalContext) // Enrich button actions if they exist - if (props._component.endsWith("/button") && enrichedProps.onClick) { + if (props._component?.endsWith("/button") && enrichedProps.onClick) { enrichedProps.onClick = enrichButtonActions( enrichedProps.onClick, totalContext diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index cbebe1986c..fbf62c02d9 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -137,9 +137,10 @@ "key": "subheading" }, { - "type": "screen", + "type": "text", "label": "Link URL", - "key": "destinationUrl" + "key": "destinationUrl", + "placeholder": "/screen" } ] }, @@ -170,9 +171,10 @@ "key": "linkText" }, { - "type": "screen", - "label": "Link Url", - "key": "linkUrl" + "type": "text", + "label": "Link URL", + "key": "linkUrl", + "placeholder": "/screen" }, { "type": "color", @@ -339,9 +341,10 @@ "key": "text" }, { - "type": "screen", + "type": "text", "label": "URL", - "key": "url" + "key": "url", + "placeholder": "/screen" }, { "type": "boolean", @@ -412,9 +415,10 @@ "key": "linkText" }, { - "type": "screen", + "type": "text", "label": "Link URL", - "key": "linkUrl" + "key": "linkUrl", + "placeholder": "/screen" }, { "type": "color", From 284018fefafdda03124254712e3ea22d2cdeeebe Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 16 Feb 2021 13:17:13 +0000 Subject: [PATCH 6/9] Rename form data bindings to Fields instead of Schema --- packages/builder/src/builderStore/dataBinding.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 22b2b02f37..bc42f23ee6 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -107,7 +107,7 @@ const getContextBindings = (asset, componentId) => { // Forms are an edge case which do not need table schemas if (isForm) { schema = buildFormSchema(component) - tableName = "Schema" + tableName = "Fields" } else { if (!datasource) { return From 8d1f082cc9777959d485d296bed1ff9e4e625613 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 16 Feb 2021 13:17:30 +0000 Subject: [PATCH 7/9] Fix drawer bindable input not updating when typing with drawer closed --- .../builder/src/components/common/DrawerBindableInput.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte index af0da92463..4b0109270a 100644 --- a/packages/builder/src/components/common/DrawerBindableInput.svelte +++ b/packages/builder/src/components/common/DrawerBindableInput.svelte @@ -30,7 +30,7 @@ onChange(event.detail)} + on:change={event => onChange(event.target.value)} placeholder="/screen" />
From d8b28899b8bb33555c88741bfaf851cdf936cb59 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 16 Feb 2021 13:27:38 +0000 Subject: [PATCH 8/9] Make form always inherit closest datasource --- packages/standard-components/src/forms/Form.svelte | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte index d65c851f43..848248362f 100644 --- a/packages/standard-components/src/forms/Form.svelte +++ b/packages/standard-components/src/forms/Form.svelte @@ -18,16 +18,8 @@ let table let fieldMap = {} - // Checks if the closest data context matches the model for this forms - // datasource, and use it as the initial form values if so - const getInitialValues = context => { - return context && context.tableId === datasource?.tableId ? context : {} - } - - // Use the closest data context as the initial form values if it matches - const initialValues = getInitialValues( - $context[`${$context.closestComponentId}`] - ) + // Use the closest data context as the initial form values + const initialValues = $context[`${$context.closestComponentId}`] || {} // Form state contains observable data about the form const formState = writable({ values: initialValues, errors: {}, valid: true }) From af1654a3c9b19bc7bafb88c6a91fffb21e03a70a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 16 Feb 2021 15:30:20 +0000 Subject: [PATCH 9/9] Ensure form doesn't inherit built in datasources --- packages/standard-components/src/forms/Form.svelte | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte index 848248362f..54246c6ef0 100644 --- a/packages/standard-components/src/forms/Form.svelte +++ b/packages/standard-components/src/forms/Form.svelte @@ -18,8 +18,16 @@ let table let fieldMap = {} + // Returns the closes data context which isn't a built in context + const getInitialValues = context => { + if (["user", "url"].includes(context.closestComponentId)) { + return {} + } + return context[`${context.closestComponentId}`] || {} + } + // Use the closest data context as the initial form values - const initialValues = $context[`${$context.closestComponentId}`] || {} + const initialValues = getInitialValues($context) // Form state contains observable data about the form const formState = writable({ values: initialValues, errors: {}, valid: true })