Merge pull request #5086 from Budibase/continue-if-button-action

'Continue if' button action
4 years ago · 9f3a0ce3c9
6 changed files with 109 additions and 2 deletions
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -45,6 +45,7 @@ const INITIAL_FRONTEND_STATE = {
    customThemes: false,
    devicePreview: false,
    messagePassing: false,
+    continueIfAction: false,
  },
  currentFrontEndType: "none",
  selectedScreenId: "",
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ContinueIf.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ContinueIf.svelte
@ -0,0 +1,78 @@
+<script>
+  import { Select, Body } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  export let parameters
+  export let bindings
+
+  const typeOptions = [
+    {
+      label: "Continue if",
+      value: "continue",
+    },
+    {
+      label: "Stop if",
+      value: "stop",
+    },
+  ]
+  const operatorOptions = [
+    {
+      label: "Equals",
+      value: "equal",
+    },
+    {
+      label: "Not equals",
+      value: "notEqual",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "continue"
+    }
+    if (!parameters.operator) {
+      parameters.operator = "equal"
+    }
+  })
+</script>
+
+<div class="root">
+  <Body size="S">
+    Configure a condition to be evaluated which can stop further actions from
+    being executed.
+  </Body>
+  <Select
+    bind:value={parameters.type}
+    options={typeOptions}
+    placeholder={null}
+  />
+  <DrawerBindableInput
+    placeholder="Value"
+    value={parameters.value}
+    on:change={e => (parameters.value = e.detail)}
+    {bindings}
+  />
+  <Select
+    bind:value={parameters.operator}
+    options={operatorOptions}
+    placeholder={null}
+  />
+  <DrawerBindableInput
+    placeholder="Reference value"
+    bind:value={parameters.referenceValue}
+    on:change={e => (parameters.referenceValue = 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>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
@ -13,3 +13,4 @@ export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte"
 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"
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@ -84,6 +84,11 @@
    {
      "name": "Export Data",
      "component": "ExportData"
+    },
+    {
+      "name": "Continue if / Stop if",
+      "component": "ContinueIf",
+      "dependsOnFeature": "continueIfAction"
    }
  ]
-}
+}
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -7,7 +7,8 @@
    "customThemes": true,
    "devicePreview": true,
    "messagePassing": true,
-    "rowSelection": true
+    "rowSelection": true,
+    "continueIfAction": true
  },
  "layout": {
    "name": "Layout",
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@ -261,6 +261,26 @@ const exportDataHandler = async action => {
  }
 }

+const continueIfHandler = action => {
+  const { type, value, operator, referenceValue } = action.parameters
+  if (!type || !operator) {
+    return
+  }
+  let match = false
+  if (value == null && referenceValue == null) {
+    match = true
+  } else if (value === referenceValue) {
+    match = true
+  } else {
+    match = JSON.stringify(value) === JSON.stringify(referenceValue)
+  }
+  if (type === "continue") {
+    return operator === "equal" ? match : !match
+  } else {
+    return operator === "equal" ? !match : match
+  }
+}
+
 const handlerMap = {
  ["Save Row"]: saveRowHandler,
  ["Duplicate Row"]: duplicateRowHandler,
@ -277,6 +297,7 @@ const handlerMap = {
  ["Update State"]: updateStateHandler,
  ["Upload File to S3"]: s3UploadHandler,
  ["Export Data"]: exportDataHandler,
+  ["Continue if / Stop if"]: continueIfHandler,
 }

 const confirmTextMap = {