From c786d4edae10271fd1b03e816a30b395e85a1ef1 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 31 Aug 2020 10:12:06 +0200
Subject: [PATCH] groups components and table in separate categories

---
 .../userInterface/BindingDropdown.svelte      | 28 ++++++++++++++-----
 packages/builder/yarn.lock                    |  8 +++---
 2 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 7dd67f378..bc291aed1 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -1,4 +1,5 @@
 <script>
+  import groupBy from "lodash/fp/groupBy"
   import { Button, TextArea, Label, Body } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
@@ -18,18 +19,30 @@
   function cancel() {
     dispatch("update", originalValue)
     close()
-    console.log("test")
   }
+
+  $: ({ instance, context } = groupBy("type", bindableProperties))
 </script>
 
 <div class="container">
   <div class="list">
     <Label size="l" color="dark">Objects</Label>
-    <ul>
-      {#each bindableProperties as { readableBinding }}
-        <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-      {/each}
-    </ul>
+    {#if context}
+      <Label size="s" color="dark">Table</Label>
+      <ul>
+        {#each context as { readableBinding }}
+          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+        {/each}
+      </ul>
+    {/if}
+    {#if instance}
+      <Label size="s" color="dark">Components</Label>
+      <ul>
+        {#each instance as { readableBinding }}
+          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+        {/each}
+      </ul>
+    {/if}
   </div>
   <div class="text">
     <Label size="l" color="dark">Data binding</Label>
@@ -40,7 +53,7 @@
     <TextArea bind:value placeholder="" />
     <div class="controls">
       <a href="#">
-        <Label size="s" color="light">Learn more about binding</Label>
+        <Body size="s" color="light">Learn more about binding</Body>
       </a>
       <Button on:click={cancel} secondary>Cancel</Button>
       <Button on:click={close} primary>Done</Button>
@@ -60,6 +73,7 @@
   .controls {
     margin-top: var(--spacing-m);
     display: grid;
+    align-items: center;
     grid-gap: var(--spacing-l);
     grid-template-columns: 1fr auto auto;
   }
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index ebbbe2b5b..26031bb60 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -688,10 +688,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.29.0":
-  version "1.29.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.0.tgz#f10815d6c8cb6125e2688960cd71640e2ce53c9b"
-  integrity sha512-pRnYxkymKE4DNWPJoutygIiUQFZ+sWSmL1aTVa//O6+GemieEwukT9JbMQ7+RdTHnWANJd0OxPGwAYvNEETOaw==
+"@budibase/bbui@^1.29.1":
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
+  integrity sha512-t8zxP7IIHQ4CMT+CRZWUvMgD6NC01J/dwH+pBerR8lJPSygmCOmrDy3ySfSmqcIhzjCbPIVtk32UKnXFqHtzRQ==
   dependencies:
     sirv-cli "^0.4.6"
 
