allow use of plain inputs for automations enabling use of bindings in all types

2022-02-08 14:52:08 +00:00 · 2022-02-08 14:52:08 +00:00 · e7c02e2fb8
parent a076d7ccf1
commit e7c02e2fb8
6 changed files with 171 additions and 54 deletions
--- 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 =
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ConfigModal.svelte
+++ 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>
--- 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>
--- 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)
  )
--- 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}
+            {#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)}
+                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}
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ 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}