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

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

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

  function newQueryParameter() {
    parameters = [...parameters, {}]
  }

  function deleteQueryParameter(idx) {
    parameters.splice(idx, 1)
    parameters = parameters
  }

  // 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) {
    const parsedBindingValue = readableToRuntimeBinding(bindings, valueToParse)
    customParams[param] = parsedBindingValue
  }
</script>

<section>
  <div class="controls">
    <Heading s>Parameters</Heading>
    {#if !bindable}
      <Button secondary on:click={newQueryParameter}>Add Param</Button>
    {/if}
  </div>
  <Body s>
    {#if !bindable}
      Parameters come in two parts: the parameter name, and a default/fallback
      value.
    {:else}
      Enter a value for each parameter. The default values will be used for any
      values left blank.
    {/if}
  </Body>
  <Spacer large />
  <div class="parameters" class:bindable>
    {#each parameters as parameter, idx}
      <Input
        placeholder="Parameter Name"
        thin
        disabled={bindable}
        bind:value={parameter.name}
      />
      <Input
        placeholder="Default"
        thin
        disabled={bindable}
        bind:value={parameter.default}
      />
      {#if bindable}
        <DrawerBindableInput
          title={`Query parameter "${parameter.name}"`}
          placeholder="Value"
          thin
          on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
          value={runtimeToReadableBinding(
            bindings,
            customParams?.[parameter.name]
          )}
          {bindings}
        />
      {:else}
        <Icon
          hoverable
          name="Close"
          on:click={() => deleteQueryParameter(idx)}
        />
      {/if}
    {/each}
  </div>
</section>

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

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

  .parameters {
    display: grid;
    grid-template-columns: 1fr 1fr 5%;
    grid-gap: 10px;
    align-items: center;
  }
</style>
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`<script>`
replace remix 2021-04-23 21:55:27 +12:00			`import { Icon, Body, Button, Input, Heading, Spacer } 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"`
Fix and tidy up all button actions and drawers 2021-02-19 06:44:56 +13:00			`import DrawerBindableInput from "components/common/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 parameters = []`
			`export let bindings = []`
			`export let customParams = {}`

			`function newQueryParameter() {`
			`parameters = [...parameters, {}]`
			`}`

			`function deleteQueryParameter(idx) {`
			`parameters.splice(idx, 1)`
			`parameters = parameters`
			`}`
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) {`
			`const parsedBindingValue = readableToRuntimeBinding(bindings, valueToParse)`
			`customParams[param] = parsedBindingValue`
			`}`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`</script>`

binding data context in component 2021-01-09 07:22:03 +13:00			`<section>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<div class="controls">`
Update some leftover header sizes 2021-04-23 22:55:36 +12:00			`<Heading s>Parameters</Heading>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{#if !bindable}`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Button secondary on:click={newQueryParameter}>Add Param</Button>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{/if}`
			`</div>`
Update some leftover header sizes 2021-04-23 22:55:36 +12:00			`<Body s>`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 01:23:46 +13:00			`{#if !bindable}`
			`Parameters come in two parts: the parameter name, and a default/fallback`
			`value.`
			`{:else}`
			`Enter a value for each parameter. The default values will be used for any`
			`values left blank.`
			`{/if}`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`</Body>`
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			`<Spacer large />`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`<div class="parameters" class:bindable>`
binding data context in component 2021-01-09 07:22:03 +13:00			`{#each parameters as parameter, 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`
			`placeholder="Parameter Name"`
			`thin`
			`disabled={bindable}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`bind:value={parameter.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			`<Input`
			`placeholder="Default"`
			`thin`
			`disabled={bindable}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`bind:value={parameter.default}`
			`/>`
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`
			title={`Query parameter "${parameter.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`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`on:change={(evt) => onBindingChange(parameter.name, evt.detail)}`
			`value={runtimeToReadableBinding(`
			`bindings,`
			`customParams?.[parameter.name]`
			`)}`
			`{bindings}`
			`/>`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`{:else}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<Icon`
			`hoverable`
			`name="Close"`
			`on:click={() => deleteQueryParameter(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>`
			`</section>`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00
			`<style>`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`.parameters.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;`
lint 2021-02-20 03:31:07 +13:00			`height: 40px;`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`}`

Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`.parameters {`
			`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			`}`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`</style>`