From 01b28f358a9888ca1fd5683bc0223c85941532cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 18 Aug 2021 15:21:18 +0100
Subject: [PATCH] Add button actions for navigating form steps

---
 .../EventsEditor/actions/NextFormStep.svelte  | 35 +++++++++++++++++++
 .../EventsEditor/actions/PrevFormStep.svelte  | 35 +++++++++++++++++++
 .../EventsEditor/actions/index.js             | 10 ++++++
 packages/client/src/utils/buttonActions.js    | 18 ++++++++++
 .../src/forms/FormStep.svelte                 |  9 ++++-
 5 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte

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
new file mode 100644
index 0000000000..a635e158cb
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
@@ -0,0 +1,35 @@
+<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
new file mode 100644
index 0000000000..4efcd8378c
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
@@ -0,0 +1,35 @@
+<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/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index c769a2300f..75feb533a7 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,6 +7,8 @@ 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"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -52,4 +54,12 @@ export default [
     name: "Close Screen Modal",
     component: CloseScreenModal,
   },
+  {
+    name: "Next Form Step",
+    component: NextFormStep,
+  },
+  {
+    name: "Previous Form Step",
+    component: PrevFormStep,
+  },
 ]
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 408b35a705..dc190bad2f 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -99,6 +99,22 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
+const nextFormStepHandler = 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
+  )
+}
+
 const closeScreenModalHandler = () => {
   // Emit this as a window event, so parent screens which are iframing us in
   // can close the modal
@@ -116,6 +132,8 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
+  ["Next Form Step"]: nextFormStepHandler,
+  ["Previous Form Step"]: prevFormStepHandler,
 }
 
 const confirmTextMap = {
diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index 449978ec08..45db9d1f52 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -7,12 +7,19 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
   const formContext = getContext("form")
+
+  $: formState = formContext?.formState
 </script>
 
 {#if !formContext}
   <Placeholder text="Form steps need to be wrapped in a form" />
-{:else}
+{:else if step === $formState.step}
   <div use:styleable={$component.styles}>
+    <div>
+      Step {step} is visible!
+    </div>
     <slot />
   </div>
+{:else}
+  <div>hiding step {step}!</div>
 {/if}