feat: add search filters to categories and equipements lists
AS Talange CI/CD Pipeline - Production / Build & Run Unit Tests (push) Successful in 1m45s
AS Talange CI/CD Pipeline - Production / Deploy to Prod Environment (push) Successful in 2m42s

This commit is contained in:
2026-06-30 15:11:16 +02:00
parent 6ea00db0dc
commit f641ccc519
2 changed files with 32 additions and 6 deletions
@@ -20,10 +20,13 @@
<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 Catégories</h3>
<div class="flex items-center space-x-4">
<input type="text" id="searchInput" placeholder="Rechercher une catégorie..." class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64">
<a th:href="@{/categories/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700">
+ Nouvelle Catégorie
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="overflow-x-auto">
@@ -64,5 +67,15 @@
</div>
</div>
</main>
<script>
document.getElementById('searchInput').addEventListener('keyup', function() {
let filter = this.value.toLowerCase();
let rows = document.querySelectorAll('tbody tr.hover\\:bg-gray-50');
rows.forEach(row => {
let text = row.textContent.toLowerCase();
row.style.display = text.includes(filter) ? '' : 'none';
});
});
</script>
</body>
</html>
@@ -20,10 +20,13 @@
<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 Équipements</h3>
<div class="flex items-center space-x-4">
<input type="text" id="searchInput" placeholder="Rechercher un équipement..." class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64">
<a th:href="@{/equipements/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700">
+ Nouvel Équipement
</a>
</div>
</div>
<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">
@@ -51,5 +54,15 @@
</div>
</div>
</main>
<script>
document.getElementById('searchInput').addEventListener('keyup', function() {
let filter = this.value.toLowerCase();
let rows = document.querySelectorAll('tbody tr.hover\\:bg-gray-50');
rows.forEach(row => {
let text = row.textContent.toLowerCase();
row.style.display = text.includes(filter) ? '' : 'none';
});
});
</script>
</body>
</html>