From 7eddb3b36943c86b4ee7909f14c93b3973e5c84a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 21 Jun 2022 09:39:25 +0100 Subject: [PATCH] Add data binding for query params --- .../builder/src/builderStore/dataBinding.js | 8 +- .../client/src/components/ClientApp.svelte | 157 +++++++++--------- .../context/QueryParamsProvider.svelte | 8 + 3 files changed, 95 insertions(+), 78 deletions(-) create mode 100644 packages/client/src/components/context/QueryParamsProvider.svelte diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 9266fbd28e..2147d0be5b 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -390,11 +390,17 @@ const getUrlBindings = asset => { } }) const safeURL = makePropSafe("url") - return params.map(param => ({ + const urlParamBindings = params.map(param => ({ type: "context", runtimeBinding: `${safeURL}.${makePropSafe(param)}`, readableBinding: `URL.${param}`, })) + const queryParamsBinding = { + type: "context", + runtimeBinding: makePropSafe("query"), + readableBinding: "Query params", + } + return urlParamBindings.concat([queryParamsBinding]) } const getRoleBindings = () => { diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 3dbc02aba3..254a835bc7 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -24,6 +24,7 @@ import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte" import StateBindingsProvider from "components/context/StateBindingsProvider.svelte" import RowSelectionProvider from "components/context/RowSelectionProvider.svelte" + import QueryParamsProvider from "components/context/QueryParamsProvider.svelte" import SettingsBar from "components/preview/SettingsBar.svelte" import SelectionIndicator from "components/preview/SelectionIndicator.svelte" import HoverIndicator from "components/preview/HoverIndicator.svelte" @@ -94,95 +95,97 @@ - - - {#key $builderStore.selectedComponentId} - {#if $builderStore.inBuilder} - - {/if} - {/key} - - -
- -
- {#if showDevTools} - + + + + {#key $builderStore.selectedComponentId} + {#if $builderStore.inBuilder} + {/if} + {/key} -
- {#if permissionError} -
- - {@html ErrorSVG} - - You don't have permission to use this app - - - Ask your administrator to grant you access - - -
- {:else if !$screenStore.activeLayout} -
- - {@html ErrorSVG} - - Something went wrong rendering your app - - - Get in touch with support if this issue persists - - -
- {:else} - - {#key $screenStore.activeLayout._id} - - {/key} + +
+ +
+ {#if showDevTools} + + {/if} - -
+
- -
+ +
- - - - - - {/if} + + + + + + {/if} - {#if showDevTools} - - {/if} + {#if showDevTools} + + {/if} +
-
- - {#if $appStore.isDevApp} - - {/if} - {#if $builderStore.inBuilder || $devToolsStore.allowSelection} - - {/if} - {#if $builderStore.inBuilder} - - {/if} -
+ + {#if $appStore.isDevApp} + + {/if} + {#if $builderStore.inBuilder || $devToolsStore.allowSelection} + + {/if} + {#if $builderStore.inBuilder} + + {/if} +
+ diff --git a/packages/client/src/components/context/QueryParamsProvider.svelte b/packages/client/src/components/context/QueryParamsProvider.svelte new file mode 100644 index 0000000000..7f111a7043 --- /dev/null +++ b/packages/client/src/components/context/QueryParamsProvider.svelte @@ -0,0 +1,8 @@ + + + + +