2021-01-09 01:06:37 +13:00
|
|
|
<script>
|
2021-12-09 06:58:30 +13:00
|
|
|
import { Body, Button, Heading, Icon, Input, Layout } from "@budibase/bbui"
|
2021-01-12 23:28:41 +13:00
|
|
|
import {
|
|
|
|
readableToRuntimeBinding,
|
|
|
|
runtimeToReadableBinding,
|
2021-01-21 02:20:08 +13:00
|
|
|
} from "builderStore/dataBinding"
|
2021-05-01 03:17:57 +12:00
|
|
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
2021-01-09 01:06:37 +13:00
|
|
|
|
2021-01-12 09:17:56 +13:00
|
|
|
export let bindable = true
|
2021-01-09 01:06:37 +13:00
|
|
|
export let bindings = []
|
2021-12-09 06:58:30 +13:00
|
|
|
export let bindableOptions = []
|
2021-01-09 01:06:37 +13:00
|
|
|
export let customParams = {}
|
|
|
|
|
2021-12-09 06:58:30 +13:00
|
|
|
function newQueryBinding() {
|
|
|
|
bindings = [...bindings, {}]
|
2021-01-09 01:06:37 +13:00
|
|
|
}
|
|
|
|
|
2021-12-09 06:58:30 +13:00
|
|
|
function deleteQueryBinding(idx) {
|
|
|
|
bindings.splice(idx, 1)
|
|
|
|
bindings = bindings
|
2021-01-09 01:06:37 +13:00
|
|
|
}
|
2021-01-12 23:28:41 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
// This is necessary due to the way readable and writable bindings are stored.
|
|
|
|
// The readable binding in the UI gets converted to a UUID value that the client understands
|
|
|
|
// for parsing, then converted back so we can display it the readable form in the UI
|
2021-01-12 23:28:41 +13:00
|
|
|
function onBindingChange(param, valueToParse) {
|
2021-12-09 06:58:30 +13:00
|
|
|
customParams[param] = readableToRuntimeBinding(
|
|
|
|
bindableOptions,
|
|
|
|
valueToParse
|
|
|
|
)
|
2021-01-12 23:28:41 +13:00
|
|
|
}
|
2021-01-09 01:06:37 +13:00
|
|
|
</script>
|
|
|
|
|
2021-12-09 06:58:30 +13:00
|
|
|
<Layout noPadding={bindable} gap="S">
|
|
|
|
<div class="controls" class:height={!bindable}>
|
|
|
|
<Heading size="XS">Bindings</Heading>
|
2021-02-19 05:58:10 +13:00
|
|
|
{#if !bindable}
|
2021-12-09 06:58:30 +13:00
|
|
|
<Button secondary on:click={newQueryBinding}>Add Binding</Button>
|
2021-02-19 05:58:10 +13:00
|
|
|
{/if}
|
|
|
|
</div>
|
2021-04-30 23:31:45 +12:00
|
|
|
<Body size="S">
|
2021-02-23 01:23:46 +13:00
|
|
|
{#if !bindable}
|
2021-12-09 06:58:30 +13:00
|
|
|
Bindings come in two parts: the binding name, and a default/fallback
|
|
|
|
value. These bindings can be used as Handlebars expressions throughout the
|
|
|
|
query.
|
2021-02-23 01:23:46 +13:00
|
|
|
{:else}
|
2021-12-09 06:58:30 +13:00
|
|
|
Enter a value for each binding. The default values will be used for any
|
2021-02-23 01:23:46 +13:00
|
|
|
values left blank.
|
|
|
|
{/if}
|
2021-02-19 05:58:10 +13:00
|
|
|
</Body>
|
2021-12-09 06:58:30 +13:00
|
|
|
<div class="bindings" class:bindable>
|
|
|
|
{#each bindings as binding, idx}
|
2021-01-23 05:49:22 +13:00
|
|
|
<Input
|
2021-12-09 06:58:30 +13:00
|
|
|
placeholder="Binding Name"
|
2021-01-23 05:49:22 +13:00
|
|
|
thin
|
|
|
|
disabled={bindable}
|
2021-12-09 06:58:30 +13:00
|
|
|
bind:value={binding.name}
|
2021-04-28 01:26:03 +12:00
|
|
|
/>
|
2021-01-23 05:49:22 +13:00
|
|
|
<Input
|
|
|
|
placeholder="Default"
|
|
|
|
thin
|
|
|
|
disabled={bindable}
|
2021-12-09 06:58:30 +13:00
|
|
|
bind:value={binding.default}
|
2021-04-28 01:26:03 +12:00
|
|
|
/>
|
2021-01-12 09:17:56 +13:00
|
|
|
{#if bindable}
|
2021-02-19 06:44:56 +13:00
|
|
|
<DrawerBindableInput
|
2021-12-09 06:58:30 +13:00
|
|
|
title={`Query binding "${binding.name}"`}
|
2021-01-23 05:49:22 +13:00
|
|
|
placeholder="Value"
|
2021-01-12 09:17:56 +13:00
|
|
|
thin
|
2021-12-09 06:58:30 +13:00
|
|
|
on:change={evt => onBindingChange(binding.name, evt.detail)}
|
2021-04-28 01:26:03 +12:00
|
|
|
value={runtimeToReadableBinding(
|
2021-12-09 06:58:30 +13:00
|
|
|
bindableOptions,
|
|
|
|
customParams?.[binding.name]
|
2021-04-28 01:26:03 +12:00
|
|
|
)}
|
2021-12-09 06:58:30 +13:00
|
|
|
{bindableOptions}
|
2021-04-28 01:26:03 +12:00
|
|
|
/>
|
2021-01-13 05:49:11 +13:00
|
|
|
{:else}
|
2021-12-09 06:58:30 +13:00
|
|
|
<Icon hoverable name="Close" on:click={() => deleteQueryBinding(idx)} />
|
2021-01-12 09:17:56 +13:00
|
|
|
{/if}
|
2021-01-09 07:22:03 +13:00
|
|
|
{/each}
|
|
|
|
</div>
|
2021-04-29 01:40:15 +12:00
|
|
|
</Layout>
|
2021-01-09 01:06:37 +13:00
|
|
|
|
|
|
|
<style>
|
2021-12-09 06:58:30 +13:00
|
|
|
.bindings.bindable {
|
2021-01-13 05:49:11 +13:00
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
2021-01-12 09:17:56 +13:00
|
|
|
}
|
|
|
|
|
2021-02-19 05:58:10 +13:00
|
|
|
.controls {
|
|
|
|
display: flex;
|
2021-02-19 07:55:08 +13:00
|
|
|
align-items: center;
|
2021-02-19 05:58:10 +13:00
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
|
2021-12-09 06:58:30 +13:00
|
|
|
.bindings {
|
2021-01-09 01:06:37 +13:00
|
|
|
display: grid;
|
2021-01-12 09:17:56 +13:00
|
|
|
grid-template-columns: 1fr 1fr 5%;
|
2021-01-09 01:06:37 +13:00
|
|
|
grid-gap: 10px;
|
|
|
|
align-items: center;
|
2021-01-13 05:49:11 +13:00
|
|
|
}
|
2021-12-09 06:58:30 +13:00
|
|
|
|
|
|
|
.height {
|
|
|
|
height: 40px;
|
|
|
|
}
|
2021-01-09 01:06:37 +13:00
|
|
|
</style>
|