Improve data binding popup and finish component bindings

6 years ago · ec4a4047b6
6 changed files with 73 additions and 78 deletions
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@ -71,9 +71,14 @@ export const getBindableComponents = rootComponent => {
    return definition.bindable
  }
  const components = findAllMatchingComponents(rootComponent, componentSelector)
-  console.log(components)
-
-  return []
+  return components.map(component => {
+    return {
+      type: "instance",
+      providerId: component._id,
+      runtimeBinding: `${component._id}`,
+      readableBinding: `${component._instanceName}`,
+    }
+  })
 }

 /**
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte
@ -21,42 +21,51 @@
  }

  $: ({ instance, context } = groupBy("type", bindableProperties))
+  $: hasBindableProperties = !!bindableProperties?.length
 </script>

 <div class="container" data-cy="binding-dropdown-modal">
  <div class="list">
-    <Heading extraSmall>Objects</Heading>
-    <Spacer medium />
-    {#if context}
-      <Heading extraSmall>Tables</Heading>
-      <ul>
-        {#each context as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-    {#if instance}
-      <Heading extraSmall>Components</Heading>
-      <ul>
-        {#each instance as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
+    {#if hasBindableProperties}
+      {#if context}
+        <Heading extraSmall>Contexts</Heading>
+        <Spacer small />
+        <ul>
+          {#each context as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>
+              {readableBinding}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      {#if instance}
+        <Spacer medium />
+        <Heading extraSmall>Components</Heading>
+        <Spacer small />
+        <ul>
+          {#each instance as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>
+              {readableBinding}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    {:else}
+      <div class="empty">There aren't any bindable properties available.</div>
    {/if}
  </div>
  <div class="text">
-    <Heading extraSmall>Data binding</Heading>
+    <Heading extraSmall>Data Binding</Heading>
    <Spacer small />
    <Body extraSmall lh>
      Binding connects one piece of data to another and makes it dynamic. Click
-      the objects on the left, to add them to the textbox.
+      the objects on the left to add them to the extbox.
    </Body>
    <Spacer large />
    <TextArea
      thin
      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the
-      textbox." />
+      placeholder="Add text, or click the objects on the left to add them to the textbox." />
    <div class="controls">
      <a href="https://docs.budibase.com/design/binding">
        <Body small grey>Learn more about binding</Body>
@ -84,9 +93,11 @@
    grid-template-columns: 1fr auto auto;
  }
  .list {
-    width: 150px;
+    width: 200px;
    border-right: 1.5px solid var(--grey-4);
    padding: var(--spacing-xl);
+    max-height: 300px;
+    overflow: auto;
  }
  .text {
    width: 600px;
@ -96,9 +107,11 @@
  .text :global(p) {
    margin: 0;
  }
+  .text :global(textarea) {
+    min-height: 50px;
+  }
  ul {
    list-style: none;
-    padding-left: 0;
    margin: 0;
    padding: 0;
  }
@ -108,7 +121,7 @@
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--grey-7);
-    padding: var(--spacing-s) 0;
+    padding: var(--spacing-xs) 0;
    margin: auto 0px;
    align-items: center;
    cursor: pointer;
@ -116,10 +129,14 @@

  li:hover {
    color: var(--ink);
-    font-weight: 500;
  }

  li:active {
    color: var(--blue);
  }
+
+  div.empty {
+    font-size: var(--font-size-xs);
+    color: var(--grey-5);
+  }
 </style>
--- a/packages/builder/src/components/design/temporaryPanelStructure.js
+++ b/packages/builder/src/components/design/temporaryPanelStructure.js
@ -850,40 +850,6 @@ export default {
            settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
          },
        },
-        {
-          name: "Login",
-          _component: "@budibase/standard-components/login",
-          description:
-            "A component that automatically generates a login screen for your app.",
-          icon: "ri-login-box-line",
-          children: [],
-          showOnAsset: ["login-screen"],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Name",
-                key: "name",
-                control: Input,
-              },
-              {
-                label: "Logo",
-                key: "logo",
-                control: Input,
-              },
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Button Text",
-                key: "buttonText",
-                control: Input,
-              },
-            ],
-          },
-        },
        {
          name: "Row Detail",
          _component: "@budibase/standard-components/rowdetail",
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -21,21 +21,6 @@
 			"logoUrl": "string"
 		}
 	},
-	"login": {
-		"name": "Login Control",
-		"description": "A control that accepts email, password an also handles password resets",
-		"props": {
-			"logo": "string",
-			"title": "string",
-			"buttonText": "string"
-		},
-		"tags": [
-			"login",
-			"credentials",
-			"password",
-			"logon"
-		]
-	},
 	"richtext": {
 		"name": "Rich Text",
 		"description": "A component that allows the user to enter long form text.",
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -269,5 +269,27 @@
        "key": "text"
      }
    ]
+  },
+  "login": {
+    "description": "A component that automatically generates a login screen for your app.",
+    "icon": "ri-login-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Logo",
+        "key": "logo"
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "text",
+        "label": "Button Text",
+        "key": "buttonText"
+      }
+    ]
  }
 }
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@ -17,9 +17,9 @@ export { default as card } from "./Card.svelte"
 export { default as form } from "./DataFormWide.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export { default as text } from "./Text.svelte"
+export { default as login } from "./Login.svelte"

 // export { default as heading } from "./Heading.svelte"
-// export { default as login } from "./Login.svelte"
 // export { default as link } from "./Link.svelte"
 // export { default as image } from "./Image.svelte"
 // export { default as navigation } from "./Navigation.svelte"