From f8f1580fc785fcb3667c91289afb09117fa3b996 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Fri, 14 Jul 2023 05:03:18 +0000
Subject: [PATCH] feat(15): making fragments, loading based on step

---
 15-multi-step-form/src/main/resources/public/out.css     | 4 ++++
 .../src/main/resources/templates/index.html              | 9 ++++++---
 .../src/main/resources/templates/step1.html              | 1 +
 .../src/main/resources/templates/step2.html              | 5 +++--
 .../src/main/resources/templates/step3.html              | 5 +++--
 .../src/main/resources/templates/step4.html              | 5 +++--
 .../src/main/resources/templates/step5.html              | 1 +
 .../src/main/scala/multistepform/Models.scala            | 5 ++++-
 .../src/main/scala/multistepform/Routes.scala            | 9 +++++++++
 9 files changed, 34 insertions(+), 10 deletions(-)
diff --git a/15-multi-step-form/src/main/resources/public/out.css b/15-multi-step-form/src/main/resources/public/out.css
index bc64c84..53795a2 100644
--- a/15-multi-step-form/src/main/resources/public/out.css
+++ b/15-multi-step-form/src/main/resources/public/out.css
@@ -665,6 +665,10 @@ video {
   height: 100vh;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .w-11\/12 {
   width: 91.666667%;
 }
diff --git a/15-multi-step-form/src/main/resources/templates/index.html b/15-multi-step-form/src/main/resources/templates/index.html
index e1683c8..417fba0 100644
--- a/15-multi-step-form/src/main/resources/templates/index.html
+++ b/15-multi-step-form/src/main/resources/templates/index.html
@@ -33,15 +33,18 @@
   </head>
   <body>
     <main class="grid place-content-center w-screen h-screen bg-magnolia">
-
-      <section>
+      <section
+        hx-get="/get-form"
+        hx-trigger="load"
+        hx-swap="outerHTML"
+      >
+        <!-- here be immediate hx-get for the form. to subscitute the body -->
         <img class="w-14 text-green-500 fill-current" th:src="'public/images/tail-spin.svg'" src="../public/images/tail-spin.svg" alt="loading..." />
       </section>
 
       <section class="absolute top-0 end-0" id="new-session-control">
         <button hx-get="/force-new-session">Request new session</button>
       </section>
-      <!-- here be immediate hx-get for the form. to subscitute the body -->
       <div class="fixed inset-x-0 bottom-0 attribution">
         Challenge by
         <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
diff --git a/15-multi-step-form/src/main/resources/templates/step1.html b/15-multi-step-form/src/main/resources/templates/step1.html
index a09450b..39bd6ce 100644
--- a/15-multi-step-form/src/main/resources/templates/step1.html
+++ b/15-multi-step-form/src/main/resources/templates/step1.html
@@ -38,6 +38,7 @@
     <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"
+      th:fragment="formFragment(formData)"
     >
       <summary
         class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
diff --git a/15-multi-step-form/src/main/resources/templates/step2.html b/15-multi-step-form/src/main/resources/templates/step2.html
index bc395d1..affffbb 100644
--- a/15-multi-step-form/src/main/resources/templates/step2.html
+++ b/15-multi-step-form/src/main/resources/templates/step2.html
@@ -36,9 +36,10 @@
     <![endif]-->
 
     <main class="grid place-content-center h-screen">
-      <article
+      <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"
+        th:fragment="formFragment(formData)"
       >
         <summary
           class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -188,7 +189,7 @@
             >Next Step</a
           >
         </section>
-      </article>
+      </form>
     </main>
   </body>
 </html>
diff --git a/15-multi-step-form/src/main/resources/templates/step3.html b/15-multi-step-form/src/main/resources/templates/step3.html
index af32ad8..57d7482 100644
--- a/15-multi-step-form/src/main/resources/templates/step3.html
+++ b/15-multi-step-form/src/main/resources/templates/step3.html
@@ -36,9 +36,10 @@
     <![endif]-->
 
     <main class="grid place-content-center h-screen">
-      <article
+      <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"
+        th:fragment="formFragment(formData)"
       >
         <summary
           class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -181,7 +182,7 @@
             >Next Step</a
           >
         </section>
-      </article>
+      </form>
     </main>
   </body>
 </html>
diff --git a/15-multi-step-form/src/main/resources/templates/step4.html b/15-multi-step-form/src/main/resources/templates/step4.html
index e7d3555..81c2874 100644
--- a/15-multi-step-form/src/main/resources/templates/step4.html
+++ b/15-multi-step-form/src/main/resources/templates/step4.html
@@ -36,9 +36,10 @@
     <![endif]-->
 
     <main class="grid place-content-center h-screen">
-      <article
+      <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"
+        th:fragment="formFragment(formData)"
       >
         <summary
           class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -140,7 +141,7 @@
             >Confirm</a
           >
         </section>
-      </article>
+      </form>
     </main>
   </body>
 </html>
diff --git a/15-multi-step-form/src/main/resources/templates/step5.html b/15-multi-step-form/src/main/resources/templates/step5.html
index 972d20d..f770e57 100644
--- a/15-multi-step-form/src/main/resources/templates/step5.html
+++ b/15-multi-step-form/src/main/resources/templates/step5.html
@@ -39,6 +39,7 @@
       <article
         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)"
       >
         <summary
           class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
diff --git a/15-multi-step-form/src/main/scala/multistepform/Models.scala b/15-multi-step-form/src/main/scala/multistepform/Models.scala
index 2dffec3..1c51ed0 100644
--- a/15-multi-step-form/src/main/scala/multistepform/Models.scala
+++ b/15-multi-step-form/src/main/scala/multistepform/Models.scala
@@ -6,5 +6,8 @@ object Models {
   final case class Answers(
     sessionId: String = "id1",
     currentStep: Int = 1,
-  )
+    // fragmentName: String = "step1",
+  ) {
+    def fragmentName: String = s"step${currentStep}"
+  }
 }
diff --git a/15-multi-step-form/src/main/scala/multistepform/Routes.scala b/15-multi-step-form/src/main/scala/multistepform/Routes.scala
index fa814ac..e3ec272 100644
--- a/15-multi-step-form/src/main/scala/multistepform/Routes.scala
+++ b/15-multi-step-form/src/main/scala/multistepform/Routes.scala
@@ -5,6 +5,7 @@ import org.thymeleaf.TemplateEngine
 import org.thymeleaf.context.Context
 import cask.endpoints.ParamReader
 import java.util.UUID
+import scala.jdk.CollectionConverters._
 
 case class Routes()(implicit cc: castor.Context, log: cask.Logger)
     extends cask.Routes {
@@ -59,7 +60,15 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
    */
   @cask.get("/get-form")
   def getForm(sessionId: cask.Cookie) = {
+    val state = Models.Answers(currentStep = 1)
     cask.Response("yoyo")
+    val context = new Context()
+    context.setVariable("formData", state)
+    val formFragment = templateEngine.process(state.fragmentName, Set("formFragment").asJava, context)
+    cask.Response(
+      formFragment,
+      headers = Seq("Content-Type" -> "text/html;charset=UTF-8")
+    )
   }
 
   @cask.staticResources("/public")
