feat: preserving name \ region on active search

by using post - all inputs of same form are sent
so in active search scenario changing region also sends current name,
or changing name also sends current region

had to make additional post endpoint,
but with cask i can directly use form-value as function argument
and can reuse the code, yay

16-countries-page-from-api/src/main/resources/templates/index.html

@@ -61,10 +61,10 @@
         hx-get="/country"
         hx-target="body"
         hx-push-url="true"
-        class="md:w-1/4 md:min-w-max"
+        class="contents"
       >
         <div
-          class="flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg md:w-full dark:bg-dark-blue"
+          class="md:w-1/4 md:min-w-max flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg dark:bg-dark-blue"
         >
           <!-- <p class="w-16 grid place-content-center">IC</p> -->
           <svg
@@ -87,11 +87,9 @@
             name="countryName"
             list="country.nameViews-list"
             placeholder="Search for a country..."
-            th:hx-get="@{~/}"
-            hx-trigger="keyup changed delay:500ms"
-            hx-select="#countries-main-list"
+            hx-post="/countries-cards"
             hx-target="#countries-main-list"
-            hx-swap="outerHTML"
+            hx-trigger="keyup changed delay:500ms"
           />
         </div>
         <datalist id="country.nameViews-list">
@@ -101,12 +99,10 @@
             value=""
           ></option>
         </datalist>
-      </form>
-      <form>
         <select
           name="region"
           class="block w-62 mt-1 h-14 md:h-16 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7 dark:bg-dark-blue"
-          hx-get="/countries-cards"
+          hx-post="/countries-cards"
           hx-target="#countries-main-list"
         >
           <option

16-countries-page-from-api/src/main/scala/example/Routes.scala

@@ -64,6 +64,15 @@ case class Routes(countries: List[Country])(implicit
     )
   }
 
+  @cask.postForm("/countries-cards")
+  def postPageOfCountriesCards(
+    region: cask.FormValue,
+    countryName: cask.FormValue
+  ) = {
+    println(s"in get for countries cards with $region and $countryName")
+    getPageOfCountriesCards(Some(region.value), 0, Some(countryName.value))
+  }
+
   /** this method returns directly set of cards and new anchor for loading next
     * page of cards
     *
@@ -98,7 +107,7 @@ case class Routes(countries: List[Country])(implicit
       context
     )
     // this is to store switch to another region in the history
-    val newUrl = s"/?region=${region.getOrElse("")}"
+    val newUrl = s"/?region=${region.getOrElse("")}&countryName=${countryName.getOrElse("")}"
     // only save url when new region is requested, not on addtional card loads
     val urlHeaderOpt = if (page == 0) Seq("HX-Push" -> newUrl) else Seq.empty
     Response(
@@ -140,7 +149,7 @@ case class Routes(countries: List[Country])(implicit
   }
 
   @cask.get("/country")
-  def getCountryPage(countryName: String) = {
+  def getCountryPage(countryName: String, region: Option[String] = None) = {
     val context = new Context()
     countries.find(_.name.common == countryName) match {
       case Some(selectedCountry) =>