budibase/packages/builder/src/components/integration/QueryBindingBuilder.svelte

<script>
  import { Body, Button, Heading, Icon, Input, Layout } from "@budibase/bbui"
  import {
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "builderStore/dataBinding"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"

  export let bindable = true
  export let bindings = []
  export let bindableOptions = []
  export let customParams = {}

  function newQueryBinding() {
    bindings = [...bindings, {}]
  }

  function deleteQueryBinding(idx) {
    bindings.splice(idx, 1)
    bindings = bindings
  }

  // 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
  function onBindingChange(param, valueToParse) {
    customParams[param] = readableToRuntimeBinding(
      bindableOptions,
      valueToParse
    )
  }
</script>

<Layout noPadding={bindable} gap="S">
  <div class="controls" class:height={!bindable}>
    <Heading size="XS">Bindings</Heading>
    {#if !bindable}
      <Button secondary on:click={newQueryBinding}>Add Binding</Button>
    {/if}
  </div>
  <Body size="S">
    {#if !bindable}
      Bindings come in two parts: the binding name, and a default/fallback
      value. These bindings can be used as Handlebars expressions throughout the
      query.
    {:else}
      Enter a value for each binding. The default values will be used for any
      values left blank.
    {/if}
  </Body>
  <div class="bindings" class:bindable>
    {#each bindings as binding, idx}
      <Input
        placeholder="Binding Name"
        thin
        disabled={bindable}
        bind:value={binding.name}
      />
      <Input
        placeholder="Default"
        thin
        disabled={bindable}
        bind:value={binding.default}
      />
      {#if bindable}
        <DrawerBindableInput
          title={`Query binding "${binding.name}"`}
          placeholder="Value"
          thin
          on:change={evt => onBindingChange(binding.name, evt.detail)}
          value={runtimeToReadableBinding(
            bindableOptions,
            customParams?.[binding.name]
          )}
          {bindableOptions}
        />
      {:else}
        <Icon hoverable name="Close" on:click={() => deleteQueryBinding(idx)} />
      {/if}
    {/each}
  </div>
</Layout>

<style>
  .bindings.bindable {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bindings {
    display: grid;
    grid-template-columns: 1fr 1fr 5%;
    grid-gap: 10px;
    align-items: center;
  }

  .height {
    height: 40px;
  }
</style>
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`<script>`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`import { Body, Button, Heading, Icon, Input, Layout } from "@budibase/bbui"`
readable to writable bindings 2021-01-12 23:28:41 +13:00			`import {`
			`readableToRuntimeBinding,`
			`runtimeToReadableBinding,`
Fix incorrect paths after merge 2021-01-21 02:20:08 +13:00			`} from "builderStore/dataBinding"`
Moving drawers around to be a common component as they are utilised in a few places, keep all the binding work together, as well as some fixing for readable/runtime binding detection and conversion. 2021-05-01 03:17:57 +12:00			`import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00
styling, async data fetching 2021-01-12 09:17:56 +13:00			`export let bindable = true`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`export let bindings = []`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`export let bindableOptions = []`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`export let customParams = {}`

Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`function newQueryBinding() {`
			`bindings = [...bindings, {}]`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`}`

Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`function deleteQueryBinding(idx) {`
			`bindings.splice(idx, 1)`
			`bindings = bindings`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`}`
readable to writable bindings 2021-01-12 23:28:41 +13:00
further syntax highlighting updates 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`
readable to writable bindings 2021-01-12 23:28:41 +13:00			`function onBindingChange(param, valueToParse) {`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`customParams[param] = readableToRuntimeBinding(`
			`bindableOptions,`
			`valueToParse`
			`)`
readable to writable bindings 2021-01-12 23:28:41 +13:00			`}`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`</script>`

Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`<Layout noPadding={bindable} gap="S">`
			`<div class="controls" class:height={!bindable}>`
			`<Heading size="XS">Bindings</Heading>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{#if !bindable}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`<Button secondary on:click={newQueryBinding}>Add Binding</Button>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{/if}`
			`</div>`
Convert Body component to use size="" prop 2021-04-30 23:31:45 +12:00			`<Body size="S">`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 01:23:46 +13:00			`{#if !bindable}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 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.`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 01:23:46 +13:00			`{:else}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`Enter a value for each binding. The default values will be used for any`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 01:23:46 +13:00			`values left blank.`
			`{/if}`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`</Body>`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`<div class="bindings" class:bindable>`
			`{#each bindings as binding, idx}`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`<Input`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`placeholder="Binding Name"`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`thin`
			`disabled={bindable}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`bind:value={binding.name}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`/>`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`<Input`
			`placeholder="Default"`
			`thin`
			`disabled={bindable}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`bind:value={binding.default}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`/>`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`{#if bindable}`
Fix and tidy up all button actions and drawers 2021-02-19 06:44:56 +13:00			`<DrawerBindableInput`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			title={`Query binding "${binding.name}"`}
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`placeholder="Value"`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`thin`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`on:change={evt => onBindingChange(binding.name, evt.detail)}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`value={runtimeToReadableBinding(`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`bindableOptions,`
			`customParams?.[binding.name]`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`)}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`{bindableOptions}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`/>`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`{:else}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`<Icon hoverable name="Close" on:click={() => deleteQueryBinding(idx)} />`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`{/if}`
binding data context in component 2021-01-09 07:22:03 +13:00			`{/each}`
			`</div>`
Remove spacer and use Layout 2021-04-29 01:40:15 +12:00			`</Layout>`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00
			`<style>`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`.bindings.bindable {`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`grid-template-columns: 1fr 1fr 1fr;`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`}`

design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`.controls {`
			`display: flex;`
more design updates 2021-02-19 07:55:08 +13:00			`align-items: center;`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`justify-content: space-between;`
			`}`

Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`.bindings {`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`display: grid;`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`grid-template-columns: 1fr 1fr 5%;`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`grid-gap: 10px;`
			`align-items: center;`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`}`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00
			`.height {`
			`height: 40px;`
			`}`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`</style>`