From 7f0739027782a44ff7444231d32d061ac9632eb9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 09:54:54 +0100
Subject: [PATCH] Add single button action for changing form step

---
 .../EventsEditor/EventEditor.svelte           |  4 +-
 .../actions/ChangeFormStep.svelte             | 68 +++++++++++++++++++
 .../EventsEditor/actions/ClearForm.svelte     |  2 +-
 .../actions/CloseScreenModal.svelte           |  1 -
 .../EventsEditor/actions/LogOut.svelte        |  1 -
 .../EventsEditor/actions/NavigateTo.svelte    |  2 +-
 .../EventsEditor/actions/NextFormStep.svelte  | 35 ----------
 .../EventsEditor/actions/PrevFormStep.svelte  | 35 ----------
 .../EventsEditor/actions/ValidateForm.svelte  |  2 +-
 .../EventsEditor/actions/index.js             | 11 +--
 packages/client/src/constants.js              |  3 +-
 packages/client/src/utils/buttonActions.js    | 16 ++---
 packages/standard-components/manifest.json    |  6 +-
 .../src/forms/InnerForm.svelte                | 18 +++--
 14 files changed, 93 insertions(+), 111 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 2e2a318610..4ff746a034 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -33,7 +33,7 @@
 
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
+    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY])?.component
 
   // Select the first action if we delete an action
   $: {
@@ -116,7 +116,7 @@
     </ActionMenu>
   </Layout>
   <Layout noPadding>
-    {#if selectedAction}
+    {#if selectedActionComponent}
       <div class="selected-action-container">
         <svelte:component
           this={selectedActionComponent}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte
new file mode 100644
index 0000000000..ca2df71c6d
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { Select, Label, Stepper } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { onMount } from "svelte"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ChangeFormStep"
+  )
+
+  const typeOptions = [
+    {
+      label: "Next step",
+      value: "next",
+    },
+    {
+      label: "Previous step",
+      value: "prev",
+    },
+    {
+      label: "First step",
+      value: "first",
+    },
+    {
+      label: "Specific step",
+      value: "specific",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "next"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    placeholder={null}
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+  <Label small>Step</Label>
+  <Select bind:value={parameters.type} options={typeOptions} />
+  {#if parameters.type === "specific"}
+    <Label small>Number</Label>
+    <Stepper bind:value={parameters.number} />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
index 74eae6283c..b3bf7ebf7c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
@@ -29,7 +29,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
index 0afb8dd46e..873c9ccf65 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
@@ -11,7 +11,6 @@
 
 <style>
   .root {
-    max-width: 800px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
index 8782127243..3434d63480 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
@@ -8,7 +8,6 @@
 
 <style>
   .root {
-    max-width: 800px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index 5a0e163655..d90b645315 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -25,7 +25,7 @@
     align-items: center;
     gap: var(--spacing-m);
     grid-template-columns: auto 1fr;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
deleted file mode 100644
index a635e158cb..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
-
-  export let parameters
-
-  $: actionProviders = getActionProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId,
-    "NextFormStep"
-  )
-</script>
-
-<div class="root">
-  <Label small>Form</Label>
-  <Select
-    bind:value={parameters.componentId}
-    options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
-  />
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
deleted file mode 100644
index 4efcd8378c..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
-
-  export let parameters
-
-  $: actionProviders = getActionProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId,
-    "PrevFormStep"
-  )
-</script>
-
-<div class="root">
-  <Label small>Form</Label>
-  <Select
-    bind:value={parameters.componentId}
-    options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
-  />
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index d61c9567d8..e572dc6c1c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -34,7 +34,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 75feb533a7..9cf2461b77 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -7,8 +7,7 @@ import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
 import CloseScreenModal from "./CloseScreenModal.svelte"
-import NextFormStep from "./NextFormStep.svelte"
-import PrevFormStep from "./PrevFormStep.svelte"
+import ChangeFormStep from "./ChangeFormStep.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -55,11 +54,7 @@ export default [
     component: CloseScreenModal,
   },
   {
-    name: "Next Form Step",
-    component: NextFormStep,
-  },
-  {
-    name: "Previous Form Step",
-    component: PrevFormStep,
+    name: "Change Form Step",
+    component: ChangeFormStep,
   },
 ]
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 99e95e8398..d2237ba3b9 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -7,8 +7,7 @@ export const ActionTypes = {
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
   ClearForm: "ClearForm",
-  NextFormStep: "NextFormStep",
-  PrevFormStep: "PrevFormStep",
+  ChangeFormStep: "ChangeFormStep",
 }
 
 export const ApiVersion = "1"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 6affe66491..a18cd74891 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -105,19 +105,12 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
-const nextFormStepHandler = async (action, context) => {
+const changeFormStepHandler = async (action, context) => {
   return await executeActionHandler(
     context,
     action.parameters.componentId,
-    ActionTypes.NextFormStep
-  )
-}
-
-const prevFormStepHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.PrevFormStep
+    ActionTypes.ChangeFormStep,
+    action.parameters
   )
 }
 
@@ -138,8 +131,7 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
-  ["Next Form Step"]: nextFormStepHandler,
-  ["Previous Form Step"]: prevFormStepHandler,
+  ["Change Form Step"]: changeFormStepHandler,
 }
 
 const confirmTextMap = {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 785b549c31..b54812e8b3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1706,8 +1706,7 @@
     "actions": [
       "ValidateForm",
       "ClearForm",
-      "NextFormStep",
-      "PrevFormStep"
+      "ChangeFormStep"
     ],
     "styles": ["size"],
     "settings": [
@@ -1768,9 +1767,6 @@
     "icon": "Form",
     "hasChildren": true,
     "illegalChildren": ["section"],
-    "actions": [
-      "ValidateFormStep"
-    ],
     "styles": ["size"],
     "settings": [
       {
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 3719de4750..5422d50d1b 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -140,11 +140,16 @@
         get(field).fieldApi.clearValue()
       })
     },
-    nextStep: () => {
-      currentStep.update(step => step + 1)
-    },
-    prevStep: () => {
-      currentStep.update(step => Math.max(1, step - 1))
+    changeStep: ({ type, number }) => {
+      if (type === "next") {
+        currentStep.update(step => step + 1)
+      } else if (type === "prev") {
+        currentStep.update(step => Math.max(1, step - 1))
+      } else if (type === "first") {
+        currentStep.set(1)
+      } else if (type === "specific" && number && !isNaN(number)) {
+        currentStep.set(number)
+      }
     },
     setStep: step => {
       if (step) {
@@ -249,8 +254,7 @@
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.clear },
-    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
-    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
+    { type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
   ]
 </script>