ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add data binding for query params

master
Andrew Kingston 4 years ago
parent
67eecf4d8e
commit
f9ef0da58e
3 changed files with 95 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      packages/builder/src/builderStore/dataBinding.js
  2. 157
      packages/client/src/components/ClientApp.svelte
  3. 8
      packages/client/src/components/context/QueryParamsProvider.svelte

8
packages/builder/src/builderStore/dataBinding.js
View File

@ -390,11 +390,17 @@ const getUrlBindings = asset => {
} }
}) })
const safeURL = makePropSafe("url") const safeURL = makePropSafe("url")
return params.map(param => ({ const urlParamBindings = params.map(param => ({
type: "context", type: "context",
runtimeBinding: `${safeURL}.${makePropSafe(param)}`, runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
readableBinding: `URL.${param}`, readableBinding: `URL.${param}`,
})) }))
const queryParamsBinding = {
type: "context",
runtimeBinding: makePropSafe("query"),
readableBinding: "Query params",
}
return urlParamBindings.concat([queryParamsBinding])
} }
const getRoleBindings = () => { const getRoleBindings = () => {

157
packages/client/src/components/ClientApp.svelte
View File

@ -24,6 +24,7 @@
import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte" import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
import StateBindingsProvider from "components/context/StateBindingsProvider.svelte" import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
import RowSelectionProvider from "components/context/RowSelectionProvider.svelte" import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
import SettingsBar from "components/preview/SettingsBar.svelte" import SettingsBar from "components/preview/SettingsBar.svelte"
import SelectionIndicator from "components/preview/SelectionIndicator.svelte" import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
import HoverIndicator from "components/preview/HoverIndicator.svelte" import HoverIndicator from "components/preview/HoverIndicator.svelte"
@ -94,95 +95,97 @@
<UserBindingsProvider> <UserBindingsProvider>
<StateBindingsProvider> <StateBindingsProvider>
<RowSelectionProvider> <RowSelectionProvider>
<!-- Settings bar can be rendered outside of device preview --> <QueryParamsProvider>
<!-- Key block needs to be outside the if statement or it breaks --> <!-- Settings bar can be rendered outside of device preview -->
{#key $builderStore.selectedComponentId} <!-- Key block needs to be outside the if statement or it breaks -->
{#if $builderStore.inBuilder} {#key $builderStore.selectedComponentId}
<SettingsBar /> {#if $builderStore.inBuilder}
{/if} <SettingsBar />
{/key}
<!-- Clip boundary for selection indicators -->
<div
id="clip-root"
class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"}
>
<!-- Actual app -->
<div id="app-root">
{#if showDevTools}
<DevToolsHeader />
{/if} {/if}
{/key}
<!-- Clip boundary for selection indicators -->
<div
id="clip-root"
class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"}
>
<!-- Actual app -->
<div id="app-root">
{#if showDevTools}
<DevToolsHeader />
{/if}
<div id="app-body"> <div id="app-body">
{#if permissionError} {#if permissionError}
<div class="error"> <div class="error">
<Layout justifyItems="center" gap="S"> <Layout justifyItems="center" gap="S">
{@html ErrorSVG} {@html ErrorSVG}
<Heading size="L"> <Heading size="L">
You don't have permission to use this app You don't have permission to use this app
</Heading> </Heading>
<Body size="S"> <Body size="S">
Ask your administrator to grant you access Ask your administrator to grant you access
</Body> </Body>
</Layout> </Layout>
</div> </div>
{:else if !$screenStore.activeLayout} {:else if !$screenStore.activeLayout}
<div class="error"> <div class="error">
<Layout justifyItems="center" gap="S"> <Layout justifyItems="center" gap="S">
{@html ErrorSVG} {@html ErrorSVG}
<Heading size="L"> <Heading size="L">
Something went wrong rendering your app Something went wrong rendering your app
</Heading> </Heading>
<Body size="S"> <Body size="S">
Get in touch with support if this issue persists Get in touch with support if this issue persists
</Body> </Body>
</Layout> </Layout>
</div> </div>
{:else} {:else}
<CustomThemeWrapper> <CustomThemeWrapper>
{#key $screenStore.activeLayout._id} {#key $screenStore.activeLayout._id}
<Component <Component
isLayout isLayout
instance={$screenStore.activeLayout.props} instance={$screenStore.activeLayout.props}
/> />
{/key} {/key}
<!-- <!--
Flatpickr needs to be inside the theme wrapper. Flatpickr needs to be inside the theme wrapper.
It also needs its own container because otherwise it hijacks It also needs its own container because otherwise it hijacks
key events on the whole page. It is painful to work with. key events on the whole page. It is painful to work with.
--> -->
<div id="flatpickr-root" /> <div id="flatpickr-root" />
<!-- Modal container to ensure they sit on top --> <!-- Modal container to ensure they sit on top -->
<div class="modal-container" /> <div class="modal-container" />
<!-- Layers on top of app --> <!-- Layers on top of app -->
<NotificationDisplay /> <NotificationDisplay />
<ConfirmationDisplay /> <ConfirmationDisplay />
<PeekScreenDisplay /> <PeekScreenDisplay />
</CustomThemeWrapper> </CustomThemeWrapper>
{/if} {/if}
{#if showDevTools} {#if showDevTools}
<DevTools /> <DevTools />
{/if} {/if}
</div>
</div> </div>
</div>
<!-- Preview and dev tools utilities --> <!-- Preview and dev tools utilities -->
{#if $appStore.isDevApp} {#if $appStore.isDevApp}
<SelectionIndicator /> <SelectionIndicator />
{/if} {/if}
{#if $builderStore.inBuilder || $devToolsStore.allowSelection} {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
<HoverIndicator /> <HoverIndicator />
{/if} {/if}
{#if $builderStore.inBuilder} {#if $builderStore.inBuilder}
<DNDHandler /> <DNDHandler />
{/if} {/if}
</div> </div>
</QueryParamsProvider>
</RowSelectionProvider> </RowSelectionProvider>
</StateBindingsProvider> </StateBindingsProvider>
</UserBindingsProvider> </UserBindingsProvider>

8
packages/client/src/components/context/QueryParamsProvider.svelte
View File

@ -0,0 +1,8 @@
<script>
import Provider from "./Provider.svelte"
import { routeStore } from "stores"
</script>
<Provider key="query" data={$routeStore.queryParams}>
<slot />
</Provider>
Write Preview
Loading…
Cancel
Save