From e7c02e2fb8c4d73e30efd8a05acb6819767aceeb Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 8 Feb 2022 14:52:08 +0000
Subject: [PATCH] allow use of plain inputs for automations enabling use of
 bindings in all types

---
 .../builderStore/store/automation/index.js    |   7 ++
 .../FlowChart/ConfigModal.svelte              |  25 ++++
 .../FlowChart/FlowChart.svelte                |  17 +++
 .../FlowChart/FlowItem.svelte                 |   1 -
 .../automation/SetupPanel/RowSelector.svelte  | 111 +++++++++---------
 .../SetupPanel/RowSelectorTypes.svelte        |  64 ++++++++++
 6 files changed, 171 insertions(+), 54 deletions(-)
 create mode 100644 packages/builder/src/components/automation/AutomationBuilder/FlowChart/ConfigModal.svelte
 create mode 100644 packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 7bd0ccca22..e2b9e53eda 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -45,6 +45,7 @@ const automationActions = store => ({
       return state
     })
   },
+
   save: async automation => {
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
@@ -119,6 +120,12 @@ const automationActions = store => ({
       name: block.name,
     })
   },
+  toggleFieldControl: value => {
+    store.update(state => {
+      state.selectedAutomation.automation.rowFieldControl = value
+      return state
+    })
+  },
   deleteAutomationBlock: block => {
     store.update(state => {
       const idx =
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ConfigModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ConfigModal.svelte
new file mode 100644
index 0000000000..26a95f8860
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ConfigModal.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { automationStore } from "builderStore"
+
+  import { ModalContent, Toggle } from "@budibase/bbui"
+
+  $: rowControl = $automationStore.selectedAutomation.automation.rowFieldControl
+  async function toggleFieldControl(evt) {
+    await automationStore.actions.toggleFieldControl(evt.detail)
+    await automationStore.actions.save(
+      $automationStore.selectedAutomation?.automation
+    )
+  }
+</script>
+
+<ModalContent
+  title="Automation Configuration"
+  confirmText="Test"
+  showConfirmButton={false}
+>
+  <Toggle
+    bind:value={rowControl}
+    on:change={toggleFieldControl}
+    text="Fine Grained Row Control"
+  />
+</ModalContent>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 2d6881d652..f39bc2d337 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -12,9 +12,12 @@
     notifications,
     Modal,
   } from "@budibase/bbui"
+  import ConfigModal from "./ConfigModal.svelte"
 
   export let automation
   export let onSelect
+
+  let configModal
   let testDataModal
   let blocks
   let confirmDeleteDialog
@@ -59,6 +62,16 @@
       <div class="subtitle">
         <Heading size="S">{automation.name}</Heading>
         <div style="display:flex;">
+          <div class="iconPadding">
+            <div class="icon">
+              <Icon
+                hoverable
+                size="M"
+                on:click={configModal.show}
+                name="Settings"
+              />
+            </div>
+          </div>
           <div class="iconPadding">
             <div class="icon">
               <Icon
@@ -103,6 +116,10 @@
   <Modal bind:this={testDataModal} width="30%">
     <TestDataModal {testAutomation} />
   </Modal>
+
+  <Modal bind:this={configModal}>
+    <ConfigModal />
+  </Modal>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index fe94b7e63f..0c5ec6e438 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -26,7 +26,6 @@
   let resultsModal
   let setupToggled
   let blockComplete
-
   $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
     step => (block.id ? step.id === block.id : step.stepId === block.stepId)
   )
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index fc812e0289..8a09b0b091 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,18 +1,12 @@
 <script>
   import { tables } from "stores/backend"
-  import {
-    Select,
-    Toggle,
-    DatePicker,
-    Multiselect,
-    TextArea,
-  } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
   import { automationStore } from "builderStore"
+  import RowSelectorTypes from "./RowSelectorTypes.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -21,6 +15,16 @@
   let table
   let schemaFields
 
+  let placeholders = {
+    number: 10,
+    boolean: "true",
+    datetime: "2022-02-16T12:00:00.000Z ",
+    options: "1",
+    array: "1,2,3,4",
+    link: "ro_ta_123_456",
+    longform: "long form text",
+  }
+
   $: {
     table = $tables.list.find(table => table._id === value?.tableId)
     schemaFields = Object.entries(table?.schema ?? {})
@@ -32,23 +36,39 @@
     })
   }
 
+  $: currentAutomation = $automationStore.selectedAutomation.automation
+  $: console.log(currentAutomation)
   const onChangeTable = e => {
     value["tableId"] = e.detail
     dispatch("change", value)
   }
 
-  const onChange = (e, field) => {
-    value[field] = e.detail
+  const coerce = (value, type) => {
+    console.log(type)
+    if (type === "boolean") {
+      return value === "true"
+    }
+    if (type === "number") {
+      return Number(value)
+    }
+    if (type === "options" || type === "link") {
+      return [value]
+    }
+    if (type === "array") {
+      return value.split(",")
+    }
+
+    return value
+  }
+
+  const onChange = (e, field, type) => {
+    value[field] = coerce(e.detail, type)
     dispatch("change", value)
   }
 
   // Ensure any nullish tableId values get set to empty string so
   // that the select works
   $: if (value?.tableId == null) value = { tableId: "" }
-
-  function schemaHasOptions(schema) {
-    return !!schema.constraints?.inclusion?.length
-  }
 </script>
 
 <Select
@@ -62,50 +82,35 @@
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if !schema.autocolumn}
-        {#if schemaHasOptions(schema) && schema.type !== "array"}
-          <Select
-            on:change={e => onChange(e, field)}
-            label={field}
-            value={value[field]}
-            options={schema.constraints.inclusion}
-          />
-        {:else if schema.type === "datetime"}
-          <DatePicker
-            label={field}
-            value={value[field]}
-            on:change={e => onChange(e, field)}
-          />
-        {:else if schema.type === "boolean"}
-          <Toggle
-            text={field}
-            value={value[field]}
-            on:change={e => onChange(e, field)}
-          />
-        {:else if schema.type === "array"}
-          <Multiselect
-            bind:value={value[field]}
-            label={field}
-            options={schema.constraints.inclusion}
-          />
-        {:else if schema.type === "longform"}
-          <TextArea label={field} bind:value={value[field]} />
-        {:else if schema.type === "link"}
-          <LinkedRowSelector bind:linkedRows={value[field]} {schema} />
-        {:else if schema.type === "string" || schema.type === "number"}
+        {#if schema.type !== "attachment"}
           {#if $automationStore.selectedAutomation.automation.testData}
-            <ModalBindableInput
-              value={value[field]}
-              panel={AutomationBindingPanel}
-              label={field}
-              type={value.customType}
-              on:change={e => onChange(e, field)}
-              {bindings}
-            />
+            {#if $automationStore.selectedAutomation.automation.rowFieldControl}
+              <RowSelectorTypes
+                {field}
+                {schema}
+                {bindings}
+                {value}
+                {onChange}
+              />
+            {:else}
+              <ModalBindableInput
+                placeholder={placeholders[schema.type]}
+                value={value[field]}
+                panel={AutomationBindingPanel}
+                label={field}
+                type={value.customType}
+                on:change={e => onChange(e, field, schema.type)}
+                {bindings}
+              />
+            {/if}
+          {:else if $automationStore.selectedAutomation.automation.rowFieldControl}
+            <RowSelectorTypes {field} {schema} {bindings} {value} {onChange} />
           {:else}
             <DrawerBindableInput
+              placeholder={placeholders[schema.type]}
               panel={AutomationBindingPanel}
               value={value[field]}
-              on:change={e => onChange(e, field)}
+              on:change={e => onChange(e, field, schema.type)}
               label={field}
               type="string"
               {bindings}
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
new file mode 100644
index 0000000000..8b6318f9e0
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -0,0 +1,64 @@
+<script>
+  import {
+    Select,
+    Toggle,
+    DatePicker,
+    Multiselect,
+    TextArea,
+  } from "@budibase/bbui"
+  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
+  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
+
+  export let onChange
+  export let field
+  export let schema
+  export let value
+  export let bindings
+
+  function schemaHasOptions(schema) {
+    return !!schema.constraints?.inclusion?.length
+  }
+</script>
+
+{#if schemaHasOptions(schema) && schema.type !== "array"}
+  <Select
+    on:change={e => onChange(e, field)}
+    label={field}
+    value={value[field]}
+    options={schema.constraints.inclusion}
+  />
+{:else if schema.type === "datetime"}
+  <DatePicker
+    label={field}
+    value={value[field]}
+    on:change={e => onChange(e, field)}
+  />
+{:else if schema.type === "boolean"}
+  <Toggle
+    text={field}
+    value={value[field]}
+    on:change={e => onChange(e, field)}
+  />
+{:else if schema.type === "array"}
+  <Multiselect
+    bind:value={value[field]}
+    label={field}
+    options={schema.constraints.inclusion}
+  />
+{:else if schema.type === "longform"}
+  <TextArea label={field} bind:value={value[field]} />
+{:else if schema.type === "link"}
+  <LinkedRowSelector bind:linkedRows={value[field]} {schema} />
+{:else if schema.type === "string" || schema.type === "number"}
+  <DrawerBindableInput
+    panel={AutomationBindingPanel}
+    value={value[field]}
+    on:change={e => onChange(e, field)}
+    label={field}
+    type="string"
+    {bindings}
+    fillWidth={true}
+    allowJS={false}
+  />
+{/if}