From ffee7ff2fe3c16de42fdebdb5f3cb91953a84715 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 25 Aug 2020 10:15:51 +0200
Subject: [PATCH] adds panel interface

---
 .../userInterface/BindingDropdown.svelte      | 49 +++++++++++++++----
 .../userInterface/PropertyControl.svelte      | 22 +++++----
 2 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 342acaae81..17bd731a33 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -1,17 +1,48 @@
 <script>
-  export let value = "Something is wrong"
+  import { TextArea } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let bindableProperties
+  export let value = ""
+
+  function addToText(readableBinding) {
+    value = value + `{{ ${readableBinding} }}`
+  }
+
+  $: dispatch("update", value)
 </script>
 
-<div class="container">{value}</div>
-<button on:click>Get stuff!</button>
-<ul>
-  <li>1</li>
-  <li>2</li>
-  <li>3</li>
-  <li>4</li>
-</ul>
+<div class="container">
+  <div class="text">
+    <TextArea
+      bind:value
+      placeholder="Enter your name"
+      label="Construct your text" />
+  </div>
+  <div class="list">
+    <ul>
+      {#each bindableProperties as { readableBinding }}
+        <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+      {/each}
+    </ul>
+  </div>
+</div>
 
 <style>
+  .container {
+    grid-gap: 20px;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+  .text {
+    width: 600px;
+    display: grid;
+  }
+  .list {
+    width: 150px;
+  }
   ul {
     list-style: none;
     padding-left: 0;
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index fbc3e47a49..ab3a98a8d6 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -35,14 +35,15 @@
     const boundValues = val.match(/{{([^}]+)}}/g)
 
     // Replace with names:
-    boundValues.forEach(v => {
-      const binding = bindableProperties.find(({ readableBinding }) => {
-        return v === `{{ ${readableBinding} }}`
+    boundValues &&
+      boundValues.forEach(v => {
+        const binding = bindableProperties.find(({ readableBinding }) => {
+          return v === `{{ ${readableBinding} }}`
+        })
+        if (binding) {
+          val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
+        }
       })
-      if (binding) {
-        val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
-      }
-    })
     onChange(key, val)
   }
 
@@ -61,7 +62,7 @@
   const safeValue = () => {
     getBindableProperties()
     let temp = value
-    const boundValues = value.match(/{{([^}]+)}}/g) || []
+    const boundValues = (value && value.match(/{{([^}]+)}}/g)) || []
     console.log(boundValues)
 
     // Replace with names:
@@ -100,7 +101,10 @@
   <button on:click={dropdown.show}>O</button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="right">
-  <BindingDropdown />
+  <BindingDropdown
+    {...handlevalueKey(value)}
+    on:update={e => handleChange(key, e.detail)}
+    {bindableProperties} />
 </DropdownMenu>
 
 <style>