work on converting popover to drawer

2021-02-23 16:43:03 +01:00 · 2021-02-23 16:43:03 +01:00 · 082c238b57
parent 2f749c49d5
commit 082c238b57
6 changed files with 274 additions and 47 deletions
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@ -0,0 +1,203 @@
+<script>
+    import groupBy from "lodash/fp/groupBy"
+    import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+    import { createEventDispatcher } from "svelte"
+    import { isValid } from "@budibase/string-templates"
+    import {
+      getBindableProperties,
+      readableToRuntimeBinding,
+    } from "builderStore/dataBinding"
+    import { currentAsset, store } from "../../../builderStore"
+    import { handlebarsCompletions } from "constants/completions"
+  
+    const dispatch = createEventDispatcher()
+  
+    export let bindableProperties
+    export let value = ""
+    export let bindingDrawer
+    export let valid = true
+    export let bindings = []
+  
+    let originalValue = value
+    let helpers = handlebarsCompletions()
+    let getCaretPosition
+    let search = ""
+    let validity = true
+  
+    $: categories = Object.entries(groupBy("category", bindings))
+    $: value && checkValid()
+    $: bindableProperties = getBindableProperties(
+      $currentAsset,
+      $store.selectedComponentId
+    )
+    $: console.log(value)
+    $: dispatch("update", value)
+    $: searchRgx = new RegExp(search, "ig")
+  
+    function checkValid() {
+        const runtimeValue = readableToRuntimeBinding(bindings, value)
+        validity = isValid(runtimeValue)
+    }
+  
+    function addToText(binding) {
+        const position = getCaretPosition()
+        const toAdd = `{{ ${binding.path} }}`
+        if (position.start) {
+        value =
+            value.substring(0, position.start) +
+            toAdd +
+            value.substring(position.end, value.length)
+        } else {
+        value += toAdd
+        }
+    }
+    export function cancel() {
+      dispatch("update", originalValue)
+      bindingDrawer.close()
+    }
+</script>
+
+<div class="container">
+    <div class="list">
+        <Heading small>Available bindings</Heading>
+        <Spacer medium />
+        <Input extraThin placeholder="Search" bind:value={search} />
+        <Spacer medium />
+        {#each categories as [categoryName, bindings]}
+        <Heading extraSmall>{categoryName}</Heading>
+        <Spacer extraSmall />
+        {#each bindings.filter(binding =>
+            binding.label.match(searchRgx)
+        ) as binding}
+            <div class="binding" on:click={() => addToText(binding)}>
+            <span class="binding__label">{binding.label}</span>
+            <span class="binding__type">{binding.type}</span>
+            <br />
+            <div class="binding__description">
+                {binding.description || ''}
+            </div>
+            </div>
+        {/each}
+        {/each}
+        <Heading extraSmall>Helpers</Heading>
+        <Spacer extraSmall />
+        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+            <div class="binding" on:click={() => addToText(helper)}>
+                <span class="binding__label">{helper.label}</span>
+                <br />
+                <div class="binding__description">
+                {@html helper.description || ''}
+                </div>
+                <pre>{helper.example || ''}</pre>
+            </div>
+        {/each}
+    </div>
+    <div class="text">
+        <TextArea
+        bind:getCaretPosition
+        thin
+        bind:value
+        placeholder="Add text, or click the objects on the left to add them to the textbox." />
+        {#if !validity}
+        <p class="syntax-error">
+            Current Handlebars syntax is invalid, please check the guide
+            <a href="https://handlebarsjs.com/guide/">here</a>
+            for more details.
+        </p>
+        {/if}
+    </div>
+</div>
+
+
+<style>
+    .container {
+      height: 40vh;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: 280px 1fr;
+    }
+  
+    .list {
+        border-right: var(--border-light);
+        padding: var(--spacing-l);
+        overflow: auto;
+    }
+    .list {
+        border-right: var(--border-light);
+        padding: var(--spacing-l);
+        overflow: auto;
+    }
+
+    .list::-webkit-scrollbar {
+        display: none;
+    }
+
+    .text {
+        padding: var(--spacing-l);
+        font-family: var(--font-sans);
+    }
+    .text :global(textarea) {
+        min-height: 100px;
+    }
+    .text :global(p) {
+        margin: 0;
+    }
+  
+    .binding {
+      font-size: 12px;
+      padding: var(--spacing-s);
+      border-radius: var(--border-radius-m);
+    }
+    .binding:hover {
+      background-color: var(--grey-2);
+      cursor: pointer;
+    }
+    .binding__label {
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+    .binding__description {
+      color: var(--grey-8);
+      margin-top: 2px;
+      white-space: normal;
+    }
+  
+    pre {
+      white-space: normal;
+    }
+  
+    .binding__type {
+      font-family: monospace;
+      background-color: var(--grey-2);
+      border-radius: var(--border-radius-m);
+      padding: 2px;
+      margin-left: 2px;
+      font-weight: 500;
+    }
+  
+    .editor {
+      padding-left: var(--spacing-l);
+    }
+    .editor :global(textarea) {
+      min-height: 60px;
+    }
+  
+    .controls {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-gap: var(--spacing-l);
+      align-items: center;
+      margin-top: var(--spacing-m);
+    }
+  
+    .syntax-error {
+      color: var(--red);
+      font-size: 12px;
+    }
+  
+    .syntax-error a {
+      color: var(--red);
+      text-decoration: underline;
+    }
+  </style>
+  
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -5,7 +5,8 @@
  import { Button, Input, Select, Label } from "@budibase/bbui"
  import { automationStore } from "builderStore"
  import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "../../common/BindableInput.svelte"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from './AutomationBindingPanel.svelte'

  export let block
  export let webhookModal
@ -64,10 +65,12 @@
    {:else if value.customType === 'password'}
      <Input type="password" extraThin bind:value={block.inputs[key]} />
    {:else if value.customType === 'email'}
-      <BindableInput
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
        type={'email'}
        extraThin
-        bind:value={block.inputs[key]}
+        value={block.inputs[key]}
+        on:update={e => block.inputs[key] = e.detail}
        {bindings} />
    {:else if value.customType === 'table'}
      <TableSelector bind:value={block.inputs[key]} />
@ -78,10 +81,12 @@
    {:else if value.customType === 'triggerSchema'}
      <SchemaSetup bind:value={block.inputs[key]} />
    {:else if value.type === 'string' || value.type === 'number'}
-      <BindableInput
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
        type={value.customType}
        extraThin
-        bind:value={block.inputs[key]}
+        value={block.inputs[key]}
+        on:update={e => block.inputs[key] = e.detail}
        {bindings} />
    {/if}
  </div>
@ -102,11 +107,4 @@
    font-size: var(--font-size-xs);
    color: var(--grey-7);
  }
-
-  textarea {
-    min-height: 150px;
-    font-family: inherit;
-    padding: 12px;
-    margin-top: 8px;
-  }
 </style>
--- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
@ -14,8 +14,6 @@
  import { handlebarsCompletions } from "constants/completions"
  import { readableToRuntimeBinding } from "builderStore/dataBinding"

-  const dispatch = createEventDispatcher()
-
  export let value = ""
  export let bindings = []
  export let anchor
@ -122,9 +120,10 @@

 <style>
  .container {
+    height: 40vh;
+    overflow-y: auto;
    display: grid;
    grid-template-columns: 280px 1fr;
-    width: 800px;
  }

  .bindings {
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@ -1,7 +1,8 @@
 <script>
  import { backendUiStore } from "builderStore"
  import { Select } from "@budibase/bbui"
-  import BindableInput from "../../common/BindableInput.svelte"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from './AutomationBindingPanel.svelte'

  export let value
  export let bindings
@ -39,9 +40,11 @@
            {/each}
          </Select>
        {:else if schema.type === 'string' || schema.type === 'number'}
-          <BindableInput
+          <DrawerBindableInput
+            panel={AutomationBindingPanel}
            extraThin
-            bind:value={value[field]}
+            value={value[field]}
+            on:update={e => value[field] = e.detail}
            label={field}
            type="string"
            {bindings} />
--- a/packages/builder/src/components/common/BindableInput.svelte
+++ b/packages/builder/src/components/common/BindableInput.svelte
@ -1,44 +1,64 @@
 <script>
+  import BindingPanel from "../automation/SetupPanel/AutomationBindingPanel.svelte"
+  import { runtimeToReadableBinding, readableToRuntimeBinding } from "builderStore/dataBinding"
+  import { Body, Button, Input, Icon, Drawer } from "@budibase/bbui"
+  
  import { createEventDispatcher } from "svelte"
-  import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
-  import { Input, Icon } from "@budibase/bbui"
-
  const dispatch = createEventDispatcher()
-
+  
+  export let value = ""
  export let bindings = []
-  export let value
+  export let thin = true
+  export let label = ""
+  export let title = "Bindings"
+  export let placeholder

-  let anchor
-  let popover = undefined
-  let enrichedValue
-  let inputProps

-  // Extract all other props to pass to input component
-  $: {
-    let { bindings, ...otherProps } = $$props
-    inputProps = otherProps
+  let bindingDrawer
+
+  $: tempValue = value
+  $: readableValue = runtimeToReadableBinding(bindings, value)
+
+  const handleClose = () => {
+    onChange(tempValue)
+    bindingDrawer.hide()
+  }
+
+  const onChange = value => {
+    dispatch("change", readableToRuntimeBinding(bindings, value))
  }
-  $: value && dispatch("change", value)
 </script>

-<div class="container" bind:this={anchor}>
-  <Input {...inputProps} bind:value />
-  <div class="icon" on:click={popover.show}>
-    <Icon name="edit" />
+<div class="control">
+  <Input
+    {thin}
+    {label}
+    value={readableValue}
+    on:change={event => onChange(event.target.value)}
+    {placeholder} />
+  <div class="icon" on:click={bindingDrawer.show}>
+    <Icon name="lightning" />
  </div>
 </div>
-<GenericBindingPopover
-  {anchor}
-  {bindings}
-  bind:value
-  bind:popover
-  align="right" />
+<Drawer bind:this={bindingDrawer} {title}>
+  <div slot="description">
+    <Body extraSmall grey>
+      Add the objects on the left to enrich your text.
+    </Body>
+  </div>
+  <heading slot="buttons">
+    <Button thin blue on:click={handleClose}>Save</Button>
+  </heading>
+  <div slot="body">
+    <BindingPanel
+      {value}
+      close={handleClose}
+      on:update={event => (tempValue = event.detail)}
+      {bindings} />
+  </div>
+</Drawer>

 <style>
-  .container {
-    position: relative;
-  }
-
  .icon {
    right: 2px;
    top: 5px;
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@ -10,13 +10,16 @@

  export let value = ""
  export let bindings = []
+  export let label
  export let thin = true
  export let title = "Bindings"
  export let placeholder
+  export let panel = BindingPanel

  let bindingDrawer

  $: tempValue = value
+  $: console.log('Value: ', tempValue)
  $: readableValue = runtimeToReadableBinding(bindings, value)

  const handleClose = () => {
@ -32,6 +35,7 @@
 <div class="control">
  <Input
    {thin}
+    {label}
    value={readableValue}
    on:change={event => onChange(event.target.value)}
    {placeholder} />
@ -49,7 +53,7 @@
    <Button thin blue on:click={handleClose}>Save</Button>
  </heading>
  <div slot="body">
-    <BindingPanel
+    <svelte:component this={panel}
      value={readableValue}
      close={handleClose}
      on:update={event => (tempValue = event.detail)}