fix: refactoring de la gestion HTMX des filtres avec triggers precis
This commit is contained in:
@@ -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>
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user