feat: add search filters to categories and equipements lists
This commit is contained in:
@@ -20,10 +20,13 @@
|
|||||||
<div class="flex-1 overflow-auto p-6">
|
<div class="flex-1 overflow-auto p-6">
|
||||||
<div class="flex justify-between items-center mb-6">
|
<div class="flex justify-between items-center mb-6">
|
||||||
<h3 class="text-xl font-bold text-gray-900">Liste des Catégories</h3>
|
<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">
|
<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
|
+ Nouvelle Catégorie
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
@@ -64,5 +67,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -20,10 +20,13 @@
|
|||||||
<div class="flex-1 overflow-auto p-6">
|
<div class="flex-1 overflow-auto p-6">
|
||||||
<div class="flex justify-between items-center mb-6">
|
<div class="flex justify-between items-center mb-6">
|
||||||
<h3 class="text-xl font-bold text-gray-900">Liste des Équipements</h3>
|
<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">
|
<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
|
+ Nouvel Équipement
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<table class="w-full text-left border-collapse">
|
<table class="w-full text-left border-collapse">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
|
<tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
|
||||||
@@ -51,5 +54,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user