feat(15): displaying existing answers in form step

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

@@ -105,6 +105,7 @@
         <label for="name" class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue">Name</label>
         <input
           id="name"
+          th:value="${formData.step1.name}"
           name="name"
           type="text"
           placeholder="e.g. Stephen King"
@@ -115,6 +116,7 @@
         >
         <input
           id="email"
+          th:value="${formData.step1.email}"
           name="email"
           type="email"
           placeholder="e.g. stephenking@lorem.com"
@@ -125,6 +127,7 @@
         >
         <input
           id="phone"
+          th:value="${formData.step1.phone}"
           name="phone"
           type="tel"
           placeholder="e.g. +1 234 567 890"

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

@@ -119,6 +119,7 @@
                 name="plan-type"
                 value="Arcade"
                 class="hidden peer"
+                th:checked="${formData.step2.planType.toString()} == 'Acrade'"
                 checked
               />
               <div
@@ -135,6 +136,7 @@
                 name="plan-type"
                 value="Advanced"
                 class="hidden peer"
+                th:checked="${formData.step2.planType.toString()} == 'Advanced'"
               />
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
@@ -150,6 +152,7 @@
                 name="plan-type"
                 value="Pro"
                 class="hidden peer"
+                th:checked="${formData.step2.planType.toString()} == 'Pro'"
               />
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
@@ -169,6 +172,7 @@
                 name="isPackageYearly"
                 role="switch"
                 id="packageDuration"
+                th:checked="${formData.step2.isYearly}"
               />
               <span class="row-start-1 text-marine-blue peer-checked:text-cool-gray">Monthly</span>
               <span class="row-start-1 text-cool-gray peer-checked:text-marine-blue">Yearly</span>

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

@@ -117,6 +117,7 @@
                 value="OnlineService"
                 name="addon-services"
                 class="my-7 w-6 h-6 peer"
+                th:checked="${formData.step3.containsAddon('OnlineService')}"
               />
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@@ -140,6 +141,7 @@
                 name="addon-services"
                 value="LargerStorage"
                 class="my-7 w-6 h-6 peer"
+                th:checked="${formData.step3.containsAddon('LargerStorage')}"
               />
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@@ -163,6 +165,7 @@
                 name="addon-services"
                 value="CustomProfile"
                 class="my-7 w-6 h-6 peer"
+                th:checked="${formData.step3.containsAddon('CustomProfile')}"
               />
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"

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

@@ -3,12 +3,21 @@ package multistepform
 import java.util.UUID
 
 object Models {
+  val testAnsw = Answers(
+      sessionId= "id1",
+      currentStep = 1,
+      step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
+      step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
+      step3 = StepAnswers.Step3(Set(Addons.LargerStorage), true),
+      step4 = StepAnswers.Step4(true)
+  )
+
   final case class Answers(
       sessionId: String = "id1",
       currentStep: Int = 1,
-      step1: StepAnswers.Step1 = StepAnswers.Step1(),
+      step1: StepAnswers.Step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
-      step2: StepAnswers.Step2 = StepAnswers.Step2(),
+      step2: StepAnswers.Step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
-      step3: StepAnswers.Step3 = StepAnswers.Step3(),
+      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
@@ -100,6 +109,11 @@ object Models {
         addons: Set[Addons] = Set.empty,
         override val submitted: Boolean = false
     ) extends StepAnswers {
+
+      def containsAddon(addonName: String): Boolean = {
+        addons.contains(Addons.valueOf(addonName))
+      }
+
       override def fromFormData(rawData: String): Step3 = {
         println(s"parsing step 3 data $rawData")
         // for multiple checkboxes data comes in form of