active search

src/main/java/codes/yam/contacts/ContactController.java

@@ -1,5 +1,6 @@
 package codes.yam.contacts;
 
+import io.github.wimdeblauwe.htmx.spring.boot.mvc.HtmxRequest;
 import jakarta.validation.Valid;
 import java.net.URI;
 import java.util.List;
@@ -25,12 +26,17 @@ public class ContactController {
   public String contacts(
       @RequestParam(required = false) String q,
       @PageableDefault(sort = "last", size = 15) Pageable pageable,
+      HtmxRequest htmxRequest,
       Model model) {
-    model.addAttribute("contactPage", contactService.list(q, pageable));
+    var page = contactService.list(q, pageable);
+    model.addAttribute("contactPage", page);
+    model.addAttribute("contacts", page.getContent());
     model.addAttribute("search", q);
     model.addAttribute("sort", pageable.getSort().stream()
         .map(o -> o.getProperty() + "," + o.getDirection().name().toLowerCase())
         .collect(Collectors.joining(",")));
+    if ("nav-search".equals(htmxRequest.getTriggerId())) //noinspection SpringMVCViewInspection
+      return "fragments/contact-list-rows :: rows";
     return "contacts/index";
   }
 

src/main/resources/templates/contacts/index.html

@@ -8,21 +8,8 @@
 <!--/*@thymesVar id="contactPage" type="org.springframework.data.domain.Page<codes.yam.contacts.Contact>"*/-->
 <div layout:fragment="content">
 
-  <!-- Empty state -->
-  <div th:if="${contactPage.content.isEmpty()}"
-       class="bg-base-100 border border-base-300 rounded-lg py-16 text-center">
-    <div class="w-10 h-10 bg-base-200 rounded-full flex items-center justify-center mx-auto mb-3">
-      <i data-lucide="user-round" class="w-[18px] h-[18px] text-base-content/40"></i>
-    </div>
-    <p class="text-sm font-medium text-base-content">No contacts found</p>
-    <p class="text-sm text-base-content/50 mt-1">
-      <span th:if="${!#strings.isEmpty(search)}">Try a different search term or </span>
-      <a th:href="@{/contacts/new}" class="text-base-content underline underline-offset-2">add your first contact</a>
-    </p>
-  </div>
-
   <!-- Table -->
-  <form th:unless="${contactPage.content.isEmpty()}"
+  <form
         th:attr="hx-delete=@{/contacts}"
         hx-target="body"
         hx-push-url="true"

src/main/resources/templates/fragments/contact-list-rows.html

@@ -4,6 +4,19 @@
 <th:block th:fragment="rows(contacts)">
   <!--/*@thymesVar id="contacts" type="java.util.List<codes.yam.contacts.Contact>"*/-->
   <!--/*@thymesVar id="contact" type="codes.yam.contacts.Contact"*/-->
+  <!--/*@thymesVar id="search" type="java.lang.String"*/-->
+  <tr th:if="${contacts.isEmpty()}">
+    <td colspan="4" class="py-16 text-center">
+      <div class="w-10 h-10 bg-base-200 rounded-full flex items-center justify-center mx-auto mb-3">
+        <i data-lucide="user-round" class="w-4.5 h-4.5 text-base-content/40"></i>
+      </div>
+      <p class="text-sm font-medium text-base-content">No contacts found</p>
+      <p class="text-sm text-base-content/50 mt-1">
+        <span th:if="${!#strings.isEmpty(search)}">Try a different search term or </span>
+        <a th:href="@{/contacts/new}" class="text-base-content underline underline-offset-2">add your first contact</a>
+      </p>
+    </td>
+  </tr>
   <tr th:each="contact : ${contacts}" th:object="${contact}"
       class="hover:bg-base-300 cursor-pointer group"
       th:onclick="|window.location='@{/contacts/{slug}(slug=*{slug})}'|">

src/main/resources/templates/layout.html

@@ -42,7 +42,10 @@
         <input id="nav-search" name="q"
                th:placeholder="${contactPage != null ? 'Search ' + contactPage.totalElements + ' contacts' : 'Search contacts'}"
                th:value="${search} ?: ''"
+               th:attr="hx-get=@{/contacts}"
+               hx-trigger="search, keyup delay:200ms changed"
                type="search"
+               hx-target="tbody"
                class="w-full h-8 pl-9 pr-3 text-sm bg-base-200 border border-base-300 rounded-md focus:outline-none focus:ring-2 focus:ring-base-content focus:border-transparent placeholder:text-base-content/40"/>
       </div>
     </form>