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

<script>
  import { 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 small lh>Parameters</Heading>
    {#if !bindable}
      <Button secondary on:click={newQueryParameter}>Add Param</Button>
    {/if}
  </div>
  <Body small grey>
    {#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}
        <i
          class="ri-close-circle-line delete"
          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;
    margin-bottom: var(--spacing-xl);
  }

  .delete {
    transition: all 0.2s;
  }

  .delete:hover {
    transform: scale(1.1);
    font-weight: 500;
    cursor: pointer;
  }
</style>
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`<script>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`import { 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">`
lint 2021-02-20 03:31:07 +13:00			`<Heading small lh>Parameters</Heading>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{#if !bindable}`
			`<Button secondary on:click={newQueryParameter}>Add Param</Button>`
			`{/if}`
			`</div>`
			`<Body small grey>`
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}`
			`bind:value={parameter.name} />`
			`<Input`
			`placeholder="Default"`
			`thin`
			`disabled={bindable}`
			`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`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`on:change={evt => onBindingChange(parameter.name, evt.detail)}`
Fix builder crashing when selecting another query datasource when query drawer is open 2021-01-21 23:38:58 +13:00			`value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}`
styling, async data fetching 2021-01-12 09:17:56 +13:00			`{bindings} />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`{:else}`
			`<i`
			`class="ri-close-circle-line delete"`
			`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;`
binding data context in component 2021-01-09 07:22:03 +13:00			`margin-bottom: var(--spacing-xl);`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`}`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00
			`.delete {`
			`transition: all 0.2s;`
			`}`

			`.delete:hover {`
			`transform: scale(1.1);`
			`font-weight: 500;`
			`cursor: pointer;`
			`}`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`</style>`