From 23d83739b0e39183716c11486bc28623701b9611 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 12 Jan 2021 10:28:41 +0000
Subject: [PATCH] readable to writable bindings

---
 .../builder/src/builderStore/store/backend.js    |  2 +-
 .../integration/QueryParameterBuilder.svelte     | 16 +++++++++++++++-
 .../components/integration/QueryViewer.svelte    |  1 +
 .../src/components/integration/index.svelte      | 15 +++++++++++----
 .../userInterface/BindableInput.svelte           |  5 +++++
 .../userInterface/DataBindingDrawer/index.svelte |  2 +-
 .../EventsEditor/actions/ExecuteQuery.svelte     |  2 +-
 .../userInterface/TableViewSelect.svelte         |  4 +---
 packages/server/src/api/routes/query.js          |  3 +--
 9 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 507b4e3fe9..0ada121790 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -142,7 +142,7 @@ export const getBackendUiStore = () => {
       delete: async queryId => {
         await api.delete(`/api/queries/${queryId}`)
         store.update(state => {
-          state.datasources = state.queries.filter(
+          state.queries = state.queries.filter(
             existing => existing._id !== queryId
           )
           if (state.selectedQueryId === queryId) {
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 91f0eb023c..ef9a1f25a3 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,6 +1,10 @@
 <script>
   import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
   import BindableInput from "components/userInterface/BindableInput.svelte"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/replaceBindings"
 
   export let bindable = true
   export let parameters = []
@@ -15,6 +19,12 @@
     parameters.splice(idx, 1)
     parameters = parameters
   }
+
+  function onBindingChange(param, valueToParse) {
+    const parsedBindingValue = readableToRuntimeBinding(bindings, valueToParse)
+    console.log(parsedBindingValue)
+    customParams[param] = parsedBindingValue
+  }
 </script>
 
 <section>
@@ -33,7 +43,11 @@
         <BindableInput
           type="string"
           thin
-          bind:value={customParams[parameter.name]}
+          on:change={evt => {
+            console.log('changing', evt.detail)
+            onBindingChange(parameter.name, evt.detail)
+          }}
+          value={runtimeToReadableBinding(bindings, customParams[parameter.name])}
           {bindings} />
       {/if}
       <i
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index a77e0cc211..66d0ca1c49 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -126,6 +126,7 @@
 </script>
 
 <section>
+  <Heading>{query.name}</Heading>
   <div class="config">
     <Label extraSmall grey>Query Name</Label>
     <Input thin bind:value={query.name} />
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 3876df5a09..3c370f9b19 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -16,11 +16,18 @@
   }
 </script>
 
+<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+<Spacer large />
+
+<Label grey medium>Query</Label>
+
 {#if query.queryType === QueryTypes.SQL}
-  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-  <Spacer large />
   <TextArea bind:value={query.queryString} />
   <!-- <Editor label="Query" on:change={updateQuery} value={query.queryString} /> -->
 {:else if query.queryType === QueryTypes.JSON}
-
-{:else if query.queryType === QueryTypes.FIELDS}{/if}
+  <!-- <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+  <Spacer large />
+  <TextArea bind:value={query.queryString} /> -->
+{:else if query.queryType === QueryTypes.FIELDS}
+  <!-- {#each Object.keys()} -->
+{/if}
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 76624abd06..b1521bee20 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -1,9 +1,13 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import GenericBindingPopover from "./GenericBindingPopover.svelte"
   import { Input, Icon } from "@budibase/bbui"
 
+  const dispatch = createEventDispatcher()
+
   export let bindings = []
   export let value
+
   let anchor
   let popover = undefined
   let enrichedValue
@@ -14,6 +18,7 @@
     let { bindings, ...otherProps } = $$props
     inputProps = otherProps
   }
+  $: value && dispatch("change", value)
 </script>
 
 <div class="container" bind:this={anchor}>
diff --git a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
index aaf78f20fc..023784b3f2 100644
--- a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
+++ b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
@@ -20,7 +20,7 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
   function closeDatabindingDrawer() {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 060d8fe412..a8e7d15e93 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -20,7 +20,7 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
   $: query =
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 715a2f200e..42ac6e7c7e 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -63,11 +63,9 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
-  $: console.log("selected", value)
-
   $: links = bindableProperties
     .filter(x => x.fieldSchema?.type === "link")
     .map(property => {
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 35f1f31f12..22d308bac9 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -39,13 +39,12 @@ function generateQueryValidation() {
 function generateQueryPreviewValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
-    query: Joi.string().required(),
+    query: Joi.string(),
     datasourceId: Joi.string().required(),
     parameters: Joi.object({}).required().unknown(true)
   }))
 }
 
-// TODO: sort out auth so apps have the right permissions
 router
   .get("/api/queries", authorized(BUILDER), queryController.fetch)
   .post(