From 52fbd5fcf8748fbbe67858799528834ad358390e Mon Sep 17 00:00:00 2001
From: Youssef <youssef.kaouachi@gmail.com>
Date: Sun, 31 May 2026 02:11:08 +0200
Subject: [PATCH] fix: refactoring de la gestion HTMX des filtres avec triggers
 precis

---
 .../resources/templates/adherents/list.html   | 106 +++++++++---------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/as-talange-web/src/main/resources/templates/adherents/list.html b/as-talange-web/src/main/resources/templates/adherents/list.html
index 31d5214..1f61dd3 100644
--- a/as-talange-web/src/main/resources/templates/adherents/list.html
+++ b/as-talange-web/src/main/resources/templates/adherents/list.html
@@ -34,7 +34,17 @@
                 </a>
             </div>
 
-            <div id="adherents-table-container" class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <!-- Table Container with Wrapper-level HTMX triggers for filters -->
+            <div id="adherents-table-container" 
+                 hx-get="/adherents" 
+                 hx-target="this" 
+                 hx-select="#adherents-table-container" 
+                 hx-trigger="change from:#filter-row, keyup changed delay:300ms from:#filter-row" 
+                 hx-include="#filter-row input, #filter-row select, input[name='query']" 
+                 hx-sync="this:replace" 
+                 hx-on::config-request="if (event.detail.trigger.tagName !== 'BUTTON') { event.detail.parameters['page'] = 0; }"
+                 class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                 
                 <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                     <form hx-get="/adherents" hx-target="#adherents-table-container" hx-select="#adherents-table-container" class="flex items-center space-x-2">
                         <input type="text" name="query" th:value="${searchQuery}" placeholder="Nom, Prénom ou N° Licence..." 
@@ -44,10 +54,6 @@
                     </form>
                 </div>
                 
-                <form id="filter-form" hx-get="/adherents" hx-target="#adherents-table-container" hx-select="#adherents-table-container" hx-trigger="change, keyup changed delay:300ms" hx-sync="this:replace" hx-on::config-request="if (event.detail.trigger.tagName !== 'BUTTON') { event.detail.parameters['page'] = 0; }" class="m-0">
-                    <input type="hidden" name="query" th:value="${searchQuery}">
-                </form>
-                
                 <table class="w-full text-left border-collapse">
                     <thead>
                         <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
@@ -61,30 +67,30 @@
                             <th class="py-3 px-6 font-medium text-right">Actions</th>
                         </tr>
                         <!-- Filter Row -->
-                        <tr class="bg-gray-100 border-b border-gray-200 text-xs">
+                        <tr id="filter-row" class="bg-gray-100 border-b border-gray-200 text-xs">
                             <td class="py-2 px-3">
-                                <input type="text" id="filterNom" name="nom" form="filter-form" th:value="${nomFilter}" placeholder="Filtrer Nom..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <input type="text" id="filterNom" name="nom" th:value="${nomFilter}" placeholder="Filtrer Nom..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                             </td>
                             <td class="py-2 px-3">
-                                <input type="text" id="filterPrenom" name="prenom" form="filter-form" th:value="${prenomFilter}" placeholder="Filtrer Prénom..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <input type="text" id="filterPrenom" name="prenom" th:value="${prenomFilter}" placeholder="Filtrer Prénom..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                             </td>
                             <td class="py-2 px-3">
-                                <select id="filterCategorie" name="categorie" form="filter-form" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <select id="filterCategorie" name="categorie" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                                     <option value="">Toutes</option>
                                     <option th:each="cat : ${categories}" th:value="${cat.nom}" th:text="${cat.nom}" th:selected="${categorieFilter == cat.nom}"></option>
                                 </select>
                             </td>
                             <td class="py-2 px-3">
-                                <input type="text" id="filterLicence" name="licence" form="filter-form" th:value="${licenceFilter}" placeholder="Filtrer N°..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <input type="text" id="filterLicence" name="licence" th:value="${licenceFilter}" placeholder="Filtrer N°..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                             </td>
                             <td class="py-2 px-3">
-                                <input type="text" id="filterEmail" name="email" form="filter-form" th:value="${emailFilter}" placeholder="Filtrer Email..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <input type="text" id="filterEmail" name="email" th:value="${emailFilter}" placeholder="Filtrer Email..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                             </td>
                             <td class="py-2 px-3">
-                                <input type="text" id="filterTelephone" name="telephone" form="filter-form" th:value="${telephoneFilter}" placeholder="Filtrer Tél..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <input type="text" id="filterTelephone" name="telephone" th:value="${telephoneFilter}" placeholder="Filtrer Tél..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                             </td>
                             <td class="py-2 px-3">
-                                <select id="filterPaiement" name="paiement" form="filter-form" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                <select id="filterPaiement" name="paiement" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                                     <option value="">Tous</option>
                                     <option value="A_JOUR" th:selected="${paiementFilter == 'A_JOUR'}">À jour</option>
                                     <option value="RESTE" th:selected="${paiementFilter == 'RESTE'}">Reste à payer</option>
@@ -94,40 +100,40 @@
                             <td class="py-2 px-3"></td>
                         </tr>
                     </thead>
-                        <tbody class="divide-y divide-gray-200 text-sm">
-                            <tr th:if="${#lists.isEmpty(adherents)}">
-                                <td colspan="8" class="py-8 text-center text-gray-500">Aucun adhérent enregistré.</td>
-                            </tr>
-                            <tr th:each="adherent : ${adherents}" class="hover:bg-gray-50 transition-colors adherent-row">
-                                <td class="py-4 px-6 font-medium text-gray-900">
-                                    <span th:text="${adherent.nom}">Dupont</span>
-                                    <div class="text-[10px] text-gray-400 font-normal mt-0.5">
-                                        <span th:text="${adherent.sexe == 'FEMININ' ? 'Féminin' : 'Masculin'}">Masculin</span>
-                                        <span class="mx-1">|</span>
-                                        <span th:text="${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">Joueur</span>
-                                    </div>
-                                </td>
-                                <td class="py-4 px-6 font-medium text-gray-900" th:text="${adherent.prenom}">Jean</td>
-                                <td class="py-4 px-6 text-gray-600 font-medium" 
-                                    th:text="${adherent.getLicenceActuelle() != null ? adherent.getLicenceActuelle().getCategorie().getNom() + (adherent.getLicenceActuelle().getEquipe() != null ? ' (' + adherent.getLicenceActuelle().getEquipe().getNom() + ')' : '') : '-'}">-</td>
-                                <td class="py-4 px-6 text-center text-gray-600 font-mono text-xs" 
-                                    th:text="${adherent.getLicenceActuelle() != null and adherent.getLicenceActuelle().numeroLicence != null and !adherent.getLicenceActuelle().numeroLicence.isEmpty() ? adherent.getLicenceActuelle().numeroLicence : '-'}">-</td>
-                                <td class="py-4 px-6 text-gray-600" th:text="${adherent.email}">jean@example.com</td>
-                                <td class="py-4 px-6 text-gray-600" th:text="${adherent.telephone}">0600000000</td>
-                                <td class="py-4 px-6 text-center">
-                                    <span class="px-2 py-1 text-xs font-semibold rounded-full" 
-                                          th:classappend="${adherent.getStatutPaiement() == 'À jour' ? 'bg-green-100 text-green-800' : (adherent.getStatutPaiement() == 'Aucune licence' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800')}"
-                                          th:text="${adherent.getStatutPaiement()}">À jour</span>
-                                </td>
-                                <td class="py-4 px-6 text-right flex justify-end space-x-3 items-center">
-                                    <a th:href="@{/adherents/{id}/edit(id=${adherent.id})}" class="text-indigo-600 hover:text-indigo-900 font-medium bg-indigo-50 px-3 py-1 rounded-lg">Voir / Modifier</a>
-                                    <form th:action="@{/adherents/{id}/delete(id=${adherent.id})}" method="post" onsubmit="return confirm('Supprimer cet adhérent ?');">
-                                        <button type="submit" class="text-red-600 hover:text-red-800 font-medium">Supprimer</button>
-                                    </form>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <tbody class="divide-y divide-gray-200 text-sm">
+                        <tr th:if="${#lists.isEmpty(adherents)}">
+                            <td colspan="8" class="py-8 text-center text-gray-500">Aucun adhérent enregistré.</td>
+                        </tr>
+                        <tr th:each="adherent : ${adherents}" class="hover:bg-gray-50 transition-colors adherent-row">
+                            <td class="py-4 px-6 font-medium text-gray-900">
+                                <span th:text="${adherent.nom}">Dupont</span>
+                                <div class="text-[10px] text-gray-400 font-normal mt-0.5">
+                                    <span th:text="${adherent.sexe == 'FEMININ' ? 'Féminin' : 'Masculin'}">Masculin</span>
+                                    <span class="mx-1">|</span>
+                                    <span th:text="${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">Joueur</span>
+                                </div>
+                            </td>
+                            <td class="py-4 px-6 font-medium text-gray-900" th:text="${adherent.prenom}">Jean</td>
+                            <td class="py-4 px-6 text-gray-600 font-medium" 
+                                th:text="${adherent.getLicenceActuelle() != null ? adherent.getLicenceActuelle().getCategorie().getNom() + (adherent.getLicenceActuelle().getEquipe() != null ? ' (' + adherent.getLicenceActuelle().getEquipe().getNom() + ')' : '') : '-'}">-</td>
+                            <td class="py-4 px-6 text-center text-gray-600 font-mono text-xs" 
+                                th:text="${adherent.getLicenceActuelle() != null and adherent.getLicenceActuelle().numeroLicence != null and !adherent.getLicenceActuelle().numeroLicence.isEmpty() ? adherent.getLicenceActuelle().numeroLicence : '-'}">-</td>
+                            <td class="py-4 px-6 text-gray-600" th:text="${adherent.email}">jean@example.com</td>
+                            <td class="py-4 px-6 text-gray-600" th:text="${adherent.telephone}">0600000000</td>
+                            <td class="py-4 px-6 text-center">
+                                <span class="px-2 py-1 text-xs font-semibold rounded-full" 
+                                      th:classappend="${adherent.getStatutPaiement() == 'À jour' ? 'bg-green-100 text-green-800' : (adherent.getStatutPaiement() == 'Aucune licence' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800')}"
+                                      th:text="${adherent.getStatutPaiement()}">À jour</span>
+                            </td>
+                            <td class="py-4 px-6 text-right flex justify-end space-x-3 items-center">
+                                <a th:href="@{/adherents/{id}/edit(id=${adherent.id})}" class="text-indigo-600 hover:text-indigo-900 font-medium bg-indigo-50 px-3 py-1 rounded-lg">Voir / Modifier</a>
+                                <form th:action="@{/adherents/{id}/delete(id=${adherent.id})}" method="post" onsubmit="return confirm('Supprimer cet adhérent ?');">
+                                    <button type="submit" class="text-red-600 hover:text-red-800 font-medium">Supprimer</button>
+                                </form>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
 
                 <!-- Pagination Footer -->
                 <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between bg-gray-50 text-sm text-gray-700">
@@ -146,7 +152,7 @@
                                 hx-get="/adherents"
                                 hx-target="#adherents-table-container"
                                 hx-select="#adherents-table-container"
-                                hx-include="#filter-form"
+                                hx-include="#filter-row input, #filter-row select, input[name='query']"
                                 th:attr="hx-vals=|{'page': ${currentPage - 1}}|"
                                 class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
                             Précédent
@@ -161,7 +167,7 @@
                                     hx-get="/adherents"
                                     hx-target="#adherents-table-container"
                                     hx-select="#adherents-table-container"
-                                    hx-include="#filter-form"
+                                    hx-include="#filter-row input, #filter-row select, input[name='query']"
                                     th:attr="hx-vals=|{'page': ${pageNum}}|"
                                     th:text="${pageNum + 1}"
                                     class="px-3 py-1 rounded transition-colors"
@@ -176,7 +182,7 @@
                                 hx-get="/adherents"
                                 hx-target="#adherents-table-container"
                                 hx-select="#adherents-table-container"
-                                hx-include="#filter-form"
+                                hx-include="#filter-row input, #filter-row select, input[name='query']"
                                 th:attr="hx-vals=|{'page': ${currentPage + 1}}|"
                                 class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
                             Suivant