efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: filtering countries on GET index

Browse Source
This commit is contained in:
efim 2023-09-23 16:28:14 +00:00
parent 153f5ef9ce
commit c260d348d7
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../public/output.css" th:href=@{~/public/output.css} <link href="../public/output.css" th:href=@{~/public/output.css}
rel="stylesheet" /> rel="stylesheet" />
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
</head> </head>
@ -41,8 +42,12 @@
<select <select
class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none" class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none"
> >
<option value="" selected disabled>Filter by Region</option> <option value="" selected disabled
<option th:each="region: ${regionsSet}" th:value="${region}" th:text="${region}" value="Africa">Africa</option> th:selected=${#strings.isEmpty(selectedRegion)}
>Filter by Region</option>
<option th:each="region: ${regionsSet}" th:value="${region}" th:text="${region}"
th:selected="${selectedRegion == region}"
value="Africa">Africa</option>
<option th:remove="all" value="Americas">Americas</option> <option th:remove="all" value="Americas">Americas</option>
<option th:remove="all" value="Asia">Asia</option> <option th:remove="all" value="Asia">Asia</option>
<option th:remove="all" value="Europe">Europe</option> <option th:remove="all" value="Europe">Europe</option>
@ -52,6 +57,7 @@
</nav> </nav>
<main class="flex flex-col items-center gap-10 pb-8" <main class="flex flex-col items-center gap-10 pb-8"
th:remove="all-but-first" th:remove="all-but-first"
th:fragment="countries-main (countriesList)"
> >
<article <article
th:each="country : ${countriesList}" th:each="country : ${countriesList}"

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

@ -6,6 +6,7 @@ import org.thymeleaf.TemplateEngine
import org.thymeleaf.context.Context import org.thymeleaf.context.Context
import org.thymeleaf.templatemode.TemplateMode import org.thymeleaf.templatemode.TemplateMode
import scala.jdk.CollectionConverters._ import scala.jdk.CollectionConverters._
import cask.model.Request
case class Routes(countries: List[Country])(implicit case class Routes(countries: List[Country])(implicit
cc: castor.Context, cc: castor.Context,
@ -27,12 +28,18 @@ case class Routes(countries: List[Country])(implicit
val engine: TemplateEngine = buildTemplateEngine() val engine: TemplateEngine = buildTemplateEngine()
@cask.get("/") @cask.get("/")
def hello() = { def indexPage(region: Option[String] = None) = {
val context = new Context() val context = new Context()
val regions = countries.map(_.region).distinct.sorted.asJava val regions = countries.map(_.region).distinct.sorted.asJava
val selectedCountries = region match {
case None => countries
case Some(selectedRegion) => countries.filter(_.region == selectedRegion)
}
context.setVariable("regionsSet", regions) context.setVariable("regionsSet", regions)
context.setVariable("countriesList", countries.asJava) context.setVariable("countriesList", selectedCountries.asJava)
context.setVariable("selectedRegion", region.getOrElse(""))
val indexPage = engine.process("index", context) val indexPage = engine.process("index", context)
Response( Response(