New feature: Event Action Goto if

Budibase · May 16, 2023 · 33ef87f · 33ef87f
1 parent a552964
commit 33ef87f
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 2 deletions.
diff --git a/...omponents/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/Debug.svelte b/...omponents/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/Debug.svelte
@@ -0,0 +1,46 @@
+<script>
+  import { Select, Body } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  export let parameters
+
+  const debugOptions = [
+    {
+      label: "true",
+      value: "true",
+    },
+    {
+      label: "false",
+      value: "false",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.debug) {
+      parameters.debug = "false"
+    }
+  })
+</script>
+
+<div class="root">
+  <Body size="S">
+    Enable/Disable debug mode, print actions executions debug information 
+    to browser console. This action must place at top of actions list.
+  </Body>
+  <Select
+    bind:value={parameters.debug}
+    options={debugOptions}
+    placeholder={null}
+  />
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/...mponents/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/GotoIf.svelte b/...mponents/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/GotoIf.svelte
@@ -0,0 +1,95 @@
+<script>
+  import { Select, Body, Label } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  export let parameters
+  export let bindings
+
+  const operatorOptions = [
+    {
+      label: "Equals",
+      value: "equal",
+    },
+    {
+      label: "Not equals",
+      value: "notEqual",
+    },
+    {
+      label: "Greater than",
+      value: "greaterThan",
+    },
+    {
+      label: "Less than",
+      value: "lessThan",
+    },
+    {
+      label: "Greater than or equal to",
+      value: "greaterThanOrEqual",
+    },
+    {
+      label: "Less than or equal to",
+      value: "lessThanOrEqual",
+    }
+  ]
+
+  onMount(() => {
+    if (!parameters.operator) {
+      parameters.operator = "equal"
+    }
+    if (!parameters.maxloop) {
+      parameters.maxloop = 100
+    }
+  })
+</script>
+
+<div class="root">
+  <Body size="S">
+    Configure a condition to be evaluated which can goto other actions step.
+  </Body>
+  <Label small>Value</Label>
+  <DrawerBindableInput
+    placeholder="Value"
+    value={parameters.value}
+    on:change={e => (parameters.value = e.detail)}
+    {bindings}
+  />
+  <Label small>Operator</Label>
+  <Select
+    bind:value={parameters.operator}
+    options={operatorOptions}
+    placeholder={null}
+  />
+  <Label small>Reference value</Label>
+  <DrawerBindableInput
+    placeholder="Reference value"
+    bind:value={parameters.referenceValue}
+    on:change={e => (parameters.referenceValue = e.detail)}
+    {bindings}
+  />
+  <Label small>Goto Step Number</Label>
+  <DrawerBindableInput
+    placeholder="Goto Step Number"
+    bind:value={parameters.gotostep}
+    on:change={e => (parameters.gotostep = e.detail)}
+    {bindings}
+  />
+  <Label small>Max Loop</Label>
+  <DrawerBindableInput
+    placeholder="Max Loop iterations to prevent infinite goto loop"
+    bind:value={parameters.maxloop}
+    on:change={e => (parameters.maxloop = e.detail)}
+    {bindings}
+  />
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/...components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/Stop.svelte b/...components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/Stop.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Select, Body } from "@budibase/bbui"
+  import { onMount } from "svelte"
+
+  onMount(() => {
+  })
+</script>
+
+<div class="root">
+  <Body size="S">
+    Stop actions from being executed from here.
+  </Body>
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/...rc/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js b/...rc/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
@@ -14,5 +14,8 @@ export { default as DuplicateRow } from "./DuplicateRow.svelte"
 export { default as S3Upload } from "./S3Upload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
+export { default as GotoIf } from "./GotoIf.svelte"
+export { default as Stop } from "./Stop.svelte"
+export { default as Debug } from "./Debug.svelte"
 export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
 export { default as ShowNotification } from "./ShowNotification.svelte"
diff --git a/...r/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json b/...r/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@@ -1,5 +1,9 @@
 {
   "actions": [
+    {
+      "name": "Debug",
+      "component": "Debug"
+    },
     {
       "name": "Save Row",
       "component": "SaveRow",
@@ -94,6 +98,14 @@
       "component": "ContinueIf",
       "dependsOnFeature": "continueIfAction"
     },
+    {
+      "name": "Goto if",
+      "component": "GotoIf"
+    },
+    {
+      "name": "Stop",
+      "component": "Stop"
+    },
     {
       "name": "Show Notification",
       "component": "ShowNotification",

diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
@@ -16,6 +16,8 @@ import { ActionTypes } from "constants"
 import { enrichDataBindings } from "./enrichDataBinding"
 import { Helpers } from "@budibase/bbui"
 
+let debug = false
+
 const saveRowHandler = async (action, context) => {
   const { fields, providerId, tableId } = action.parameters
   let payload
@@ -304,6 +306,41 @@ const continueIfHandler = action => {
   }
 }
 
+const gotoIfHandler = action => {
+  const { value, operator, referenceValue } = action.parameters
+  if (!operator) {
+    return
+  }
+
+  switch (operator) {
+    case "equal":
+      return value === referenceValue
+    case "notEqual":
+      return value !== referenceValue
+    case "greaterThan":
+      return value > referenceValue
+    case "lessThan":
+      return value < referenceValue
+    case "greaterThanOrEqual":
+      return value >= referenceValue
+    case "lessThanOrEqual":
+      return value <= referenceValue
+    default:
+      return false
+  }
+}
+
+const stopHandler = action => {
+  return false
+}
+
+const debugHandler = action => {
+  debug = JSON.parse(action.parameters.debug.toLowerCase()) //set global to true/false
+  console.log("Step: 1")
+  console.log("Debug:", action.parameters.debug)
+  return true
+}
+
 const showNotificationHandler = action => {
   const { message, type, autoDismiss } = action.parameters
   if (!message || !type) {
@@ -330,6 +367,9 @@ const handlerMap = {
   ["Upload File to S3"]: s3UploadHandler,
   ["Export Data"]: exportDataHandler,
   ["Continue if / Stop if"]: continueIfHandler,
+  ["Goto if"]: gotoIfHandler,
+  ["Stop"]: stopHandler,
+  ["Debug"]: debugHandler,
   ["Show Notification"]: showNotificationHandler,
 }
 
@@ -362,7 +402,8 @@ export const enrichButtonActions = (actions, context) => {
     // Inherit any previous button context which may have come from actions
     // before a confirmable action since this breaks the chain.
     let buttonContext = context.actions || []
-
+    let stepnumber = 0
+    let infinitiveGotoLoopProtectCounter = 0
     for (let i = 0; i < handlers.length; i++) {
       try {
         // Skip any non-existent action definitions
@@ -420,8 +461,29 @@ export const enrichButtonActions = (actions, context) => {
 
         // For non-confirmable actions, execute the handler immediately
         else {
+          debug && console.log("Step:", i+1)
+          debug && console.log("Running action:", action)
           const result = await callback()
-          if (result === false) {
+          debug && console.log("result:", result)
+
+          //Goto step if result is true
+          if(action["##eventHandlerType"] === "Goto if" && result === true) {
+            let maxGotoLoop = action.parameters.maxloop ? parseInt(action.parameters.maxloop) : 100
+            // if infinitive goto loop detected, stop the goto loop immediately
+            if(infinitiveGotoLoopProtectCounter >= maxGotoLoop) {
+              buttonContext.push(result)
+              continue
+            }
+            infinitiveGotoLoopProtectCounter++
+
+            stepnumber = parseInt(action.parameters.gotostep)
+            i = stepnumber - 1 - 1 // -1 for i++ and -1 for goto step
+            buttonContext.push(result)
+            continue //jump now by skip current iteration
+          }
+
+          // Stop executing further actions on false
+          if (result === false && action["##eventHandlerType"] !== "Goto if") {
             return
           } else {
             buttonContext.push(result)