url bindings test values
This commit is contained in:
Peter Clement
parent
73de5ad1cf
commit
c26d9f4e13
|
|
@ -0,0 +1,94 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { Input } from "@budibase/bbui"
|
||||
import { previewStore } from "@/stores/builder"
|
||||
|
||||
export let baseRoute = ""
|
||||
export let testValue = ""
|
||||
|
||||
// Extract route parameters (anything starting with :)
|
||||
$: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || []
|
||||
$: {
|
||||
if ($previewStore.selectedComponentContext?.url?.testValue !== undefined) {
|
||||
testValue = $previewStore.selectedComponentContext.url.testValue
|
||||
}
|
||||
}
|
||||
|
||||
const onVariableChange = e => {
|
||||
previewStore.updateUrl({ route: baseRoute, testValue: e.detail })
|
||||
previewStore.requestComponentContext()
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
previewStore.requestComponentContext()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="url-test-section">
|
||||
<div class="label">URL Variable Testing</div>
|
||||
<div class="url-pattern">Pattern: {baseRoute}</div>
|
||||
<div class="url-test-container">
|
||||
<div class="base-input">
|
||||
<Input disabled={true} value={`/${baseRoute.split("/")[1]}/`} />
|
||||
</div>
|
||||
<div class="variable-input">
|
||||
<Input
|
||||
value={testValue}
|
||||
on:change={onVariableChange}
|
||||
placeholder={routeParams.length
|
||||
? `e.g. ${routeParams.map(p => p.slice(1)).join("/")}`
|
||||
: "Add test values"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.url-test-section {
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.url-pattern {
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.url-test-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.base-input {
|
||||
width: 40%;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.base-input :global(.spectrum-Textfield-input) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
.variable-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.variable-input :global(.spectrum-Textfield-input) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Override input styles to make them look connected */
|
||||
.url-test-container :global(.spectrum-Textfield:focus-within) {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,9 +15,11 @@
|
|||
import ButtonActionEditor from "@/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
|
||||
import { getBindableProperties } from "@/dataBinding"
|
||||
import BarButtonList from "@/components/design/settings/controls/BarButtonList.svelte"
|
||||
import URLVariableTestInput from "@/components/design/settings/controls/URLVariableTestInput.svelte"
|
||||
|
||||
$: bindings = getBindableProperties($selectedScreen, null)
|
||||
$: screenSettings = getScreenSettings($selectedScreen)
|
||||
let urlTestValue = ""
|
||||
|
||||
let errors = {}
|
||||
|
||||
|
|
@ -93,6 +95,14 @@
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "urlTest",
|
||||
control: URLVariableTestInput,
|
||||
props: {
|
||||
baseRoute: screen.routing?.route,
|
||||
testValue: urlTestValue,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return settings
|
||||
|
|
|
|||
|
|
@ -86,6 +86,10 @@ export class PreviewStore extends BudiStore<PreviewState> {
|
|||
this.sendEvent("builder-state", data)
|
||||
}
|
||||
|
||||
updateUrl(data: Record<string, any>) {
|
||||
this.sendEvent("builder-test-url", data)
|
||||
}
|
||||
|
||||
requestComponentContext() {
|
||||
this.sendEvent("request-context")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
|
||||
import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
|
||||
import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
|
||||
import TestUrlBindingsProvider from "components/context/TestUrlBindingsProvider.svelte"
|
||||
import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
|
||||
import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
|
||||
import SettingsBar from "components/preview/SettingsBar.svelte"
|
||||
|
|
@ -168,107 +169,109 @@
|
|||
<StateBindingsProvider>
|
||||
<RowSelectionProvider>
|
||||
<QueryParamsProvider>
|
||||
<SnippetsProvider>
|
||||
<!-- Settings bar can be rendered outside of device preview -->
|
||||
<!-- Key block needs to be outside the if statement or it breaks -->
|
||||
{#key $builderStore.selectedComponentId}
|
||||
{#if $builderStore.inBuilder}
|
||||
<SettingsBar />
|
||||
{/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 />
|
||||
<TestUrlBindingsProvider>
|
||||
<SnippetsProvider>
|
||||
<!-- Settings bar can be rendered outside of device preview -->
|
||||
<!-- Key block needs to be outside the if statement or it breaks -->
|
||||
{#key $builderStore.selectedComponentId}
|
||||
{#if $builderStore.inBuilder}
|
||||
<SettingsBar />
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<div id="app-body">
|
||||
{#if permissionError}
|
||||
<div class="error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">
|
||||
You don't have permission to use this app
|
||||
</Heading>
|
||||
<Body size="S">
|
||||
Ask your administrator to grant you access
|
||||
</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else if !$screenStore.activeLayout}
|
||||
<div class="error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">
|
||||
Something went wrong rendering your app
|
||||
</Heading>
|
||||
<Body size="S">
|
||||
Get in touch with support if this issue
|
||||
persists
|
||||
</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else if embedNoScreens}
|
||||
<div class="error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">
|
||||
This Budibase app is not publicly accessible
|
||||
</Heading>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else}
|
||||
<CustomThemeWrapper>
|
||||
{#key $screenStore.activeLayout._id}
|
||||
<Component
|
||||
isLayout
|
||||
instance={$screenStore.activeLayout.props}
|
||||
/>
|
||||
{/key}
|
||||
|
||||
<!-- Layers on top of app -->
|
||||
<NotificationDisplay />
|
||||
<ConfirmationDisplay />
|
||||
<PeekScreenDisplay />
|
||||
</CustomThemeWrapper>
|
||||
<!-- 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 showDevTools}
|
||||
<DevTools />
|
||||
<div id="app-body">
|
||||
{#if permissionError}
|
||||
<div class="error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">
|
||||
You don't have permission to use this app
|
||||
</Heading>
|
||||
<Body size="S">
|
||||
Ask your administrator to grant you access
|
||||
</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else if !$screenStore.activeLayout}
|
||||
<div class="error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">
|
||||
Something went wrong rendering your app
|
||||
</Heading>
|
||||
<Body size="S">
|
||||
Get in touch with support if this issue
|
||||
persists
|
||||
</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else if embedNoScreens}
|
||||
<div class="error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">
|
||||
This Budibase app is not publicly accessible
|
||||
</Heading>
|
||||
</Layout>
|
||||
</div>
|
||||
{:else}
|
||||
<CustomThemeWrapper>
|
||||
{#key $screenStore.activeLayout._id}
|
||||
<Component
|
||||
isLayout
|
||||
instance={$screenStore.activeLayout.props}
|
||||
/>
|
||||
{/key}
|
||||
|
||||
<!-- Layers on top of app -->
|
||||
<NotificationDisplay />
|
||||
<ConfirmationDisplay />
|
||||
<PeekScreenDisplay />
|
||||
</CustomThemeWrapper>
|
||||
{/if}
|
||||
|
||||
{#if showDevTools}
|
||||
<DevTools />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !$builderStore.inBuilder && $featuresStore.logoEnabled}
|
||||
<FreeFooter />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !$builderStore.inBuilder && $featuresStore.logoEnabled}
|
||||
<FreeFooter />
|
||||
<!-- Preview and dev tools utilities -->
|
||||
{#if $appStore.isDevApp}
|
||||
<SelectionIndicator />
|
||||
{/if}
|
||||
{#if $builderStore.inBuilder || $devToolsStore.allowSelection}
|
||||
<HoverIndicator />
|
||||
{/if}
|
||||
{#if $builderStore.inBuilder}
|
||||
<DNDHandler />
|
||||
<GridDNDHandler />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Preview and dev tools utilities -->
|
||||
{#if $appStore.isDevApp}
|
||||
<SelectionIndicator />
|
||||
{/if}
|
||||
{#if $builderStore.inBuilder || $devToolsStore.allowSelection}
|
||||
<HoverIndicator />
|
||||
{/if}
|
||||
{#if $builderStore.inBuilder}
|
||||
<DNDHandler />
|
||||
<GridDNDHandler />
|
||||
{/if}
|
||||
</div>
|
||||
</SnippetsProvider>
|
||||
</SnippetsProvider>
|
||||
</TestUrlBindingsProvider>
|
||||
</QueryParamsProvider>
|
||||
</RowSelectionProvider>
|
||||
</StateBindingsProvider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<script>
|
||||
import Provider from "./Provider.svelte"
|
||||
import { routeStore } from "stores"
|
||||
</script>
|
||||
|
||||
<Provider key="url" data={$routeStore.testUrlParams}>
|
||||
<slot />
|
||||
</Provider>
|
||||
|
|
@ -10,6 +10,7 @@ import {
|
|||
eventStore,
|
||||
hoverStore,
|
||||
stateStore,
|
||||
routeStore,
|
||||
} from "./stores"
|
||||
import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
|
||||
import { get } from "svelte/store"
|
||||
|
|
@ -108,6 +109,9 @@ const loadBudibase = async () => {
|
|||
} else if (type === "builder-state") {
|
||||
const [[key, value]] = Object.entries(data)
|
||||
stateStore.actions.setValue(key, value)
|
||||
} else if (type === "builder-test-url") {
|
||||
const { route, testValue } = data
|
||||
routeStore.actions.setTestUrlParams(route, testValue)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -119,7 +119,19 @@ const createRouteStore = () => {
|
|||
const base = window.location.href.split("#")[0]
|
||||
return `${base}#${relativeURL}`
|
||||
}
|
||||
const setTestUrlParams = (route: string, testValue: string) => {
|
||||
const routeSegments = route.split("/").slice(2)
|
||||
const testSegments = testValue.split("/")
|
||||
const params: Record<string, string> = {}
|
||||
|
||||
routeSegments.forEach((segment, index) => {
|
||||
if (segment.startsWith(":") && index < testSegments.length) {
|
||||
params[segment.slice(1)] = testSegments[index]
|
||||
}
|
||||
})
|
||||
|
||||
store.update(state => ({ ...state, testUrlParams: params }))
|
||||
}
|
||||
return {
|
||||
subscribe: store.subscribe,
|
||||
actions: {
|
||||
|
|
@ -130,6 +142,7 @@ const createRouteStore = () => {
|
|||
setQueryParams,
|
||||
setActiveRoute,
|
||||
setRouterLoaded,
|
||||
setTestUrlParams,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue