222 lines
16 KiB
HTML
222 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Adhérents - AS Talange</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-900 flex h-screen overflow-hidden">
|
|
|
|
<!-- Sidebar -->
|
|
<div th:replace="~{fragments/sidebar :: sidebar}"></div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col h-screen overflow-hidden">
|
|
<!-- Header -->
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
|
<h2 class="text-lg font-semibold text-gray-800">Gestion des Adhérents</h2>
|
|
<button class="md:hidden text-gray-500 hover:text-gray-700">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Main section -->
|
|
<div class="flex-1 overflow-auto p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-xl font-bold text-gray-900">Liste des Adhérents</h3>
|
|
<a th:href="@{/adherents/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors inline-block">
|
|
+ Nouvel Adhérent
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 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..."
|
|
class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<button type="submit" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 border border-gray-300 transition-colors">Chercher</button>
|
|
<a th:if="${searchQuery != null and !searchQuery.isEmpty()}" th:href="@{/adherents}" class="text-sm text-gray-500 hover:text-gray-700 underline underline-offset-2 ml-2">Effacer</a>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse min-w-[1000px]">
|
|
<thead>
|
|
<tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
|
|
<th class="py-3 px-6 font-medium text-left">Nom</th>
|
|
<th class="py-3 px-6 font-medium text-left">Prénom</th>
|
|
<th class="py-3 px-6 font-medium text-left">Catégorie</th>
|
|
<th class="py-3 px-6 font-medium text-center">N° Licence</th>
|
|
<th class="py-3 px-6 font-medium text-left">Email</th>
|
|
<th class="py-3 px-6 font-medium text-center">Paiement</th>
|
|
<th class="py-3 px-6 font-medium text-right">Actions</th>
|
|
</tr>
|
|
<!-- Filter Row -->
|
|
<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" 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" 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" 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" 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" 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">
|
|
<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>
|
|
<option value="AUCUNE" th:selected="${paiementFilter == 'AUCUNE'}">Aucune licence</option>
|
|
</select>
|
|
</td>
|
|
<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="7" 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-3 px-4">
|
|
<!-- Aucune licence -->
|
|
<div th:if="${adherent.getLicenceActuelle() == null}" class="text-center text-gray-400 text-xs italic">
|
|
Aucune licence
|
|
</div>
|
|
<!-- Détails financiers -->
|
|
<div th:if="${adherent.getLicenceActuelle() != null}" class="flex flex-col items-center space-y-1">
|
|
<!-- Badge Statut -->
|
|
<span class="px-2 py-0.5 text-[9px] font-bold rounded-full uppercase tracking-wider"
|
|
th:classappend="${adherent.getLicenceActuelle().getResteAPayer().compareTo(T(java.math.BigDecimal).ZERO) == 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}"
|
|
th:text="${adherent.getLicenceActuelle().getResteAPayer().compareTo(T(java.math.BigDecimal).ZERO) == 0 ? 'À jour' : 'Reste à payer'}">
|
|
À jour
|
|
</span>
|
|
<!-- Tableau/Liste miniature des montants -->
|
|
<div class="text-[11px] font-mono text-gray-600 bg-gray-50 p-1.5 rounded-lg border border-gray-100 w-28 space-y-0.5 shadow-2xs mx-auto">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">Dû:</span>
|
|
<span class="font-semibold text-gray-800" th:text="|${adherent.getLicenceActuelle().getPrixTotal()} €|">150 €</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">Payé:</span>
|
|
<span class="font-semibold text-green-600" th:text="|${adherent.getLicenceActuelle().getSommePayee()} €|">100 €</span>
|
|
</div>
|
|
<div class="flex justify-between border-t border-gray-200 pt-0.5 mt-0.5">
|
|
<span class="text-gray-500 font-medium">Reste:</span>
|
|
<span class="font-bold" th:classappend="${adherent.getLicenceActuelle().getResteAPayer().compareTo(T(java.math.BigDecimal).ZERO) == 0 ? 'text-gray-800' : 'text-red-600'}" th:text="|${adherent.getLicenceActuelle().getResteAPayer()} €|">50 €</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</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> adhérents
|
|
</div>
|
|
<div th:if="${totalElements == 0}">
|
|
Aucun adhérent à afficher
|
|
</div>
|
|
<div class="flex items-center space-x-2" th:if="${totalPages > 1}">
|
|
<!-- Page Précédente -->
|
|
<button type="button"
|
|
th:if="${currentPage > 0}"
|
|
hx-get="/adherents"
|
|
hx-target="#adherents-table-container"
|
|
hx-select="#adherents-table-container"
|
|
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
|
|
</button>
|
|
<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}">
|
|
<button type="button"
|
|
hx-get="/adherents"
|
|
hx-target="#adherents-table-container"
|
|
hx-select="#adherents-table-container"
|
|
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"
|
|
th:classappend="${currentPage == pageNum ? 'bg-blue-600 text-white' : 'border border-gray-300 hover:bg-gray-100'}">
|
|
1
|
|
</button>
|
|
</th:block>
|
|
|
|
<!-- Page Suivante -->
|
|
<button type="button"
|
|
th:if="${currentPage < totalPages - 1}"
|
|
hx-get="/adherents"
|
|
hx-target="#adherents-table-container"
|
|
hx-select="#adherents-table-container"
|
|
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
|
|
</button>
|
|
<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>
|
|
</body>
|
|
</html>
|