feat: add pagination to equipment and licence search screens

as-talange-web/src/main/resources/templates/parametrage/equipements_recherche.html

@@ -52,7 +52,7 @@
                 </form>
             </div>
 
-            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+            <div id="equipements-table-container" class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                 <table class="w-full text-left border-collapse">
                     <thead>
                         <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
@@ -67,7 +67,7 @@
                     </thead>
                     <tbody class="divide-y divide-gray-200 text-sm">
                         <tr th:if="${#lists.isEmpty(dotations)}">
-                            <td colspan="6" class="py-8 text-center text-gray-500">Aucun résultat trouvé pour cette recherche.</td>
+                            <td colspan="7" class="py-8 text-center text-gray-500">Aucun résultat trouvé pour cette recherche.</td>
                         </tr>
                         <tr th:each="dotation : ${dotations}" class="hover:bg-gray-50">
                             <td class="py-3 px-4 font-medium text-gray-900">
@@ -92,6 +92,64 @@
                         </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">
+                    <div th:if="${totalElements > 0}">
+                        Affichage de <span class="font-semibold" th:text="${currentPage * pageSize + 1}">1</span> à 
+                        <span class="font-semibold" th:text="${T(java.lang.Math).min((currentPage + 1) * pageSize, totalElements)}">20</span> sur 
+                        <span class="font-semibold" th:text="${totalElements}">100</span> équipements
+                    </div>
+                    <div th:if="${totalElements == 0}">
+                        Aucun équipement à afficher
+                    </div>
+                    <div class="flex items-center space-x-2" th:if="${totalPages > 1}">
+                        <!-- Page Précédente -->
+                        <a th:if="${currentPage > 0}"
+                           th:href="@{/admin/equipements/recherche(equipementId=${equipementId},categorieId=${categorieId},fourni=${fourni},page=${currentPage - 1})}"
+                           hx-get="/admin/equipements/recherche"
+                           hx-target="#equipements-table-container"
+                           hx-select="#equipements-table-container"
+                           hx-push-url="true"
+                           th:attr="hx-vals=|{&quot;equipementId&quot;: &quot;${equipementId != null ? equipementId : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;fourni&quot;: &quot;${fourni != null ? fourni : ''}&quot;, &quot;page&quot;: ${currentPage - 1}}|"
+                           class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
+                            Précédent
+                        </a>
+                        <span th:if="${currentPage == 0}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
+                            Précédent
+                        </span>
+
+                        <!-- Numéros de pages -->
+                        <th:block th:each="pageNum : ${#numbers.sequence(0, totalPages - 1)}" th:if="${totalPages > 0}">
+                            <a th:href="@{/admin/equipements/recherche(equipementId=${equipementId},categorieId=${categorieId},fourni=${fourni},page=${pageNum})}"
+                               hx-get="/admin/equipements/recherche"
+                               hx-target="#equipements-table-container"
+                               hx-select="#equipements-table-container"
+                               hx-push-url="true"
+                               th:attr="hx-vals=|{&quot;equipementId&quot;: &quot;${equipementId != null ? equipementId : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;fourni&quot;: &quot;${fourni != null ? fourni : ''}&quot;, &quot;page&quot;: ${pageNum}}|"
+                               th:text="${pageNum + 1}"
+                               class="px-3 py-1 rounded transition-colors"
+                               th:classappend="${currentPage == pageNum ? 'bg-blue-600 text-white' : 'border border-gray-300 hover:bg-gray-100'}">
+                                1
+                            </a>
+                        </th:block>
+
+                        <!-- Page Suivante -->
+                        <a th:if="${currentPage < totalPages - 1}"
+                           th:href="@{/admin/equipements/recherche(equipementId=${equipementId},categorieId=${categorieId},fourni=${fourni},page=${currentPage + 1})}"
+                           hx-get="/admin/equipements/recherche"
+                           hx-target="#equipements-table-container"
+                           hx-select="#equipements-table-container"
+                           hx-push-url="true"
+                           th:attr="hx-vals=|{&quot;equipementId&quot;: &quot;${equipementId != null ? equipementId : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;fourni&quot;: &quot;${fourni != null ? fourni : ''}&quot;, &quot;page&quot;: ${currentPage + 1}}|"
+                           class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
+                            Suivant
+                        </a>
+                        <span th:if="${currentPage == totalPages - 1}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
+                            Suivant
+                        </span>
+                    </div>
+                </div>
             </div>
 
         </div>

as-talange-web/src/main/resources/templates/parametrage/licences_recherche.html

@@ -62,7 +62,7 @@
                 </form>
             </div>
 
-            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <div id="licences-table-container" class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                 <div class="overflow-x-auto">
                     <table class="w-full text-left border-collapse min-w-[900px]">
                     <thead>
@@ -96,6 +96,64 @@
                     </tbody>
                     </table>
                 </div>
+
+                <!-- 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">
+                    <div th:if="${totalElements > 0}">
+                        Affichage de <span class="font-semibold" th:text="${currentPage * pageSize + 1}">1</span> à 
+                        <span class="font-semibold" th:text="${T(java.lang.Math).min((currentPage + 1) * pageSize, totalElements)}">20</span> sur 
+                        <span class="font-semibold" th:text="${totalElements}">100</span> licences
+                    </div>
+                    <div th:if="${totalElements == 0}">
+                        Aucune licence à afficher
+                    </div>
+                    <div class="flex items-center space-x-2" th:if="${totalPages > 1}">
+                        <!-- Page Précédente -->
+                        <a th:if="${currentPage > 0}"
+                           th:href="@{/admin/licences/recherche(nom=${nomFilter},prenom=${prenomFilter},categorieId=${categorieId},numeroLicence=${numeroLicenceFilter},email=${emailFilter},typeDemande=${typeDemandeFilter},page=${currentPage - 1})}"
+                           hx-get="/admin/licences/recherche"
+                           hx-target="#licences-table-container"
+                           hx-select="#licences-table-container"
+                           hx-push-url="true"
+                           th:attr="hx-vals=|{&quot;nom&quot;: &quot;${nomFilter != null ? nomFilter : ''}&quot;, &quot;prenom&quot;: &quot;${prenomFilter != null ? prenomFilter : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;numeroLicence&quot;: &quot;${numeroLicenceFilter != null ? numeroLicenceFilter : ''}&quot;, &quot;email&quot;: &quot;${emailFilter != null ? emailFilter : ''}&quot;, &quot;typeDemande&quot;: &quot;${typeDemandeFilter != null ? typeDemandeFilter : ''}&quot;, &quot;page&quot;: ${currentPage - 1}}|"
+                           class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
+                            Précédent
+                        </a>
+                        <span th:if="${currentPage == 0}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
+                            Précédent
+                        </span>
+
+                        <!-- Numéros de pages -->
+                        <th:block th:each="pageNum : ${#numbers.sequence(0, totalPages - 1)}" th:if="${totalPages > 0}">
+                            <a th:href="@{/admin/licences/recherche(nom=${nomFilter},prenom=${prenomFilter},categorieId=${categorieId},numeroLicence=${numeroLicenceFilter},email=${emailFilter},typeDemande=${typeDemandeFilter},page=${pageNum})}"
+                               hx-get="/admin/licences/recherche"
+                               hx-target="#licences-table-container"
+                               hx-select="#licences-table-container"
+                               hx-push-url="true"
+                               th:attr="hx-vals=|{&quot;nom&quot;: &quot;${nomFilter != null ? nomFilter : ''}&quot;, &quot;prenom&quot;: &quot;${prenomFilter != null ? prenomFilter : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;numeroLicence&quot;: &quot;${numeroLicenceFilter != null ? numeroLicenceFilter : ''}&quot;, &quot;email&quot;: &quot;${emailFilter != null ? emailFilter : ''}&quot;, &quot;typeDemande&quot;: &quot;${typeDemandeFilter != null ? typeDemandeFilter : ''}&quot;, &quot;page&quot;: ${pageNum}}|"
+                               th:text="${pageNum + 1}"
+                               class="px-3 py-1 rounded transition-colors"
+                               th:classappend="${currentPage == pageNum ? 'bg-blue-600 text-white' : 'border border-gray-300 hover:bg-gray-100'}">
+                                1
+                            </a>
+                        </th:block>
+
+                        <!-- Page Suivante -->
+                        <a th:if="${currentPage < totalPages - 1}"
+                           th:href="@{/admin/licences/recherche(nom=${nomFilter},prenom=${prenomFilter},categorieId=${categorieId},numeroLicence=${numeroLicenceFilter},email=${emailFilter},typeDemande=${typeDemandeFilter},page=${currentPage + 1})}"
+                           hx-get="/admin/licences/recherche"
+                           hx-target="#licences-table-container"
+                           hx-select="#licences-table-container"
+                           hx-push-url="true"
+                           th:attr="hx-vals=|{&quot;nom&quot;: &quot;${nomFilter != null ? nomFilter : ''}&quot;, &quot;prenom&quot;: &quot;${prenomFilter != null ? prenomFilter : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;numeroLicence&quot;: &quot;${numeroLicenceFilter != null ? numeroLicenceFilter : ''}&quot;, &quot;email&quot;: &quot;${emailFilter != null ? emailFilter : ''}&quot;, &quot;typeDemande&quot;: &quot;${typeDemandeFilter != null ? typeDemandeFilter : ''}&quot;, &quot;page&quot;: ${currentPage + 1}}|"
+                           class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
+                            Suivant
+                        </a>
+                        <span th:if="${currentPage == totalPages - 1}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
+                            Suivant
+                        </span>
+                    </div>
+                </div>
             </div>
         </div>
     </main>