feat(15): submitting form data on step back

15-multi-step-form/src/main/resources/templates/step1.html

@@ -39,9 +39,9 @@
       class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
       id="form-step"
       th:fragment="formFragment(formData)"
-      hx-post="/submit-step/1"
+      hx-post="/submit-step/1/2"
       hx-swap="outerHTML"
-      action="/submit-step/1"
+      action="/submit-step/1/2"
       method="post"
     >
       <summary

15-multi-step-form/src/main/resources/templates/step2.html

@@ -39,9 +39,9 @@
       <form
         class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
         id="form-step"
-        hx-post="/submit-step/2"
+        hx-post="/submit-step/2/3"
         hx-swap="outerHTML"
-        action="/submit-step/2"
+        action="/submit-step/2/3"
         method="post"
         th:fragment="formFragment(formData)"
       >
@@ -119,7 +119,7 @@
                 name="plan-type"
                 value="Arcade"
                 class="hidden peer"
-                th:checked="${formData.step2.planType.toString()} == 'Acrade'"
+                th:checked="${formData.step2.planType.toString()} == 'Arcade'"
                 checked
               />
               <div
@@ -187,9 +187,9 @@
           class="flex flex-row items-center py-4 w-full bg-white md:items-end md:h-full"
         >
           <a
-            hx-get="/get-form/1"
+            hx-post="/submit-step/2/1"
-            hx-target="#form-step"
             hx-swap="outerHTML"
+            hx-target="#form-step"
             href="step1.html"
             class="ml-6 text-sm font-semibold md:pb-3 md:ml-20 md:text-base text-cool-gray"
             >Go Back</a

15-multi-step-form/src/main/resources/templates/step3.html

@@ -39,9 +39,9 @@
       <form
         class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
         id="form-step"
-        hx-post="/submit-step/3"
+        hx-post="/submit-step/3/4"
         hx-swap="outerHTML"
-        action="/submit-step/3"
+        action="/submit-step/3/4"
         method="post"
         th:fragment="formFragment(formData)"
       >
@@ -191,9 +191,9 @@
           class="flex flex-row items-center py-4 w-full bg-white md:items-end md:h-full"
         >
           <a
-            hx-get="/get-form/2"
+            hx-post="/submit-step/3/2"
-            hx-target="#form-step"
             hx-swap="outerHTML"
+            hx-target="#form-step"
             href="step2.html"
             class="ml-6 text-sm font-semibold md:pb-3 md:ml-20 md:text-base text-cool-gray"
             >Go Back</a

15-multi-step-form/src/main/resources/templates/step4.html

@@ -39,8 +39,8 @@
       <form
         class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
         id="form-step"
-        hx-post="/submit-step/4"
+        hx-post="/submit-step/4/5"
-        action="/submit-step/4"
+        action="/submit-step/4/5"
         hx-swap="outerHTML"
         method="post"
         th:fragment="formFragment(formData)"
@@ -134,9 +134,9 @@
           class="flex flex-row items-center py-4 w-full bg-white md:items-end md:h-full"
         >
           <a
-            hx-get="/get-form/3"
+            hx-post="/submit-step/4/3"
-            hx-target="#form-step"
             hx-swap="outerHTML"
+            hx-target="#form-step"
             href="step3.html"
             class="ml-6 text-sm font-semibold md:pb-3 md:ml-20 md:text-base text-cool-gray"
             >Go Back</a

15-multi-step-form/src/main/scala/multistepform/Models.scala

@@ -4,45 +4,48 @@ import java.util.UUID
 
 object Models {
   val testAnsw = Answers(
-      sessionId= "id1",
+    sessionId = "id1",
-      currentStep = 1,
+    currentStep = 1,
-      step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
+    step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
-      step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
+    step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
-      step3 = StepAnswers.Step3(Set(Addons.LargerStorage), true),
+    step3 = StepAnswers.Step3(Set(Addons.LargerStorage), true),
-      step4 = StepAnswers.Step4(true)
+    step4 = StepAnswers.Step4(true)
   )
 
   final case class Answers(
       sessionId: String = "id1",
       currentStep: Int = 1,
-      step1: StepAnswers.Step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
+      step1: StepAnswers.Step1 =
-      step2: StepAnswers.Step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
+        StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
-      step3: StepAnswers.Step3 = StepAnswers.Step3(Set(Addons.LargerStorage), true),
+      step2: StepAnswers.Step2 =
+        StepAnswers.Step2(PlanType.Advanced, true, true),
+      step3: StepAnswers.Step3 =
+        StepAnswers.Step3(Set(Addons.LargerStorage), true),
       step4: StepAnswers.Step4 = StepAnswers.Step4()
   ) {
     // this is not enforced by compiler, sad, maintain by hand in html template files
     def fragmentName: String = s"step${currentStep}"
-    def updateStep(stepNum: Int, rawData: String): Answers = {
+    def updateStep(stepNum: Int, rawData: String, nextStep: Int): Answers = {
       stepNum match {
         case 1 =>
           this.copy(
             step1 = this.step1.fromFormData(rawData),
-            currentStep = stepNum + 1
+            currentStep = nextStep
           )
         case 2 =>
           this.copy(
             step2 = this.step2.fromFormData(rawData),
-            currentStep = stepNum + 1
+            currentStep = nextStep
           )
         case 3 =>
           this.copy(
             step3 = this.step3.fromFormData(rawData),
-            currentStep = stepNum + 1
+            currentStep = nextStep
           )
         case 4 =>
           this.copy(
-            currentStep = stepNum + 1,
+            step4 = this.step4,
-            step4 = this.step4
+            currentStep = nextStep
           )
         case _ => this
       }

15-multi-step-form/src/main/scala/multistepform/Routes.scala

@@ -7,6 +7,8 @@ import cask.endpoints.ParamReader
 import java.util.UUID
 import scala.jdk.CollectionConverters._
 import multistepform.Models.Answers
+import scala.annotation.internal.requiresCapability
+import java.net.URLDecoder
 
 case class Routes()(implicit cc: castor.Context, log: cask.Logger)
     extends cask.Routes {
@@ -85,54 +87,11 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
     )
   }
 
-  @cask.get("/get-form/:stepNum")
+  @cask.post("/submit-step/:stepNum/:nextStep")
-  def getFormByStep(stepNum: Int, sessionId: cask.Cookie) = {
-    val id = sessionId.value
-    val answersData = Sessions.sessionReplies.get(id)
-    println(s"returning to step $stepNum with data $answersData")
-    answersData match {
-      case Some(state) => {
-        val stepData = stepNum match {
-          case 1 => state.step1
-          case 2 => state.step2
-          case 3 => state.step3
-          case 4 => state.step4
-        }
-
-        if (!stepData.submitted) {
-          cask.Response(
-            s"Your previous answer for step $stepNum not found, please reload the page"
-          )
-        } else {
-          val context = new Context()
-          val updatedState = state.copy(currentStep = stepNum)
-          Sessions.sessionReplies.update(id, updatedState)
-          context.setVariable(formDataContextVarName, updatedState)
-          val formFragment = templateEngine.process(
-            updatedState.fragmentName,
-            Set("formFragment").asJava,
-            context
-          )
-          cask.Response(
-            formFragment,
-            headers = Seq("Content-Type" -> "text/html;charset=UTF-8")
-          )
-        }
-      }
-      case None =>
-        cask.Response(
-          "Your previous answers not found, please reload the page",
-          404
-        )
-    }
-
-  }
-
-  // i guess let's make step a hidden input?
-  @cask.post("/submit-step/:stepNum")
   def submitStep(
       sessionId: cask.Cookie,
       stepNum: Int,
+      nextStep: Int,
       request: cask.Request
   ) = {
     val id = sessionId.value
@@ -140,7 +99,9 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
 
     val userAnswers = Sessions.sessionReplies.getOrElse(id, Answers(id))
 
-    val updatedAnswers = userAnswers.updateStep(stepNum, request.text())
+    val submittedData = URLDecoder.decode(request.text() , "UTF-8")
+
+    val updatedAnswers = userAnswers.updateStep(stepNum, submittedData, nextStep)
 
     Sessions.sessionReplies.update(id, updatedAnswers)