Add searchbar in catalogue and update custom fuild bug

app/pages/pieces-catalog.vue

@@ -25,14 +25,33 @@
           </p>
         </header>
 
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <label class="w-full sm:w-64">
+            <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+            <input
+              v-model="searchTerm"
+              type="text"
+              class="input input-bordered input-sm w-full mt-1"
+              placeholder="Nom, référence ou catégorie…"
+            />
+          </label>
+          <p class="text-xs text-base-content/50 sm:text-right">
+            {{ filteredPieces.length }} / {{ piecesTotal }} résultat{{ filteredPieces.length > 1 ? 's' : '' }}
+          </p>
+        </div>
+
         <div v-if="loadingPieces" class="flex justify-center py-8">
           <span class="loading loading-spinner" aria-hidden="true" />
         </div>
 
-        <p v-else-if="!piecesList.length" class="text-sm text-base-content/70">
+        <p v-else-if="!piecesTotal" class="text-sm text-base-content/70">
           Aucune pièce n'a encore été créée.
         </p>
 
+        <p v-else-if="!filteredPieces.length" class="text-sm text-base-content/70">
+          Aucune pièce ne correspond à votre recherche.
+        </p>
+
         <div v-else class="overflow-x-auto">
           <table class="table table-sm md:table-md">
             <thead>
@@ -44,7 +63,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="piece in piecesList" :key="piece.id">
+              <tr v-for="piece in filteredPieces" :key="piece.id">
                 <td>{{ piece.name || 'Pièce sans nom' }}</td>
                 <td>{{ piece.typePiece?.name || '—' }}</td>
                 <td>{{ piece.reference || '—' }}</td>
@@ -77,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { usePieces } from '~/composables/usePieces'
 import { useToast } from '~/composables/useToast'
 
@@ -85,6 +104,25 @@ const { showError } = useToast()
 const { pieces, loadPieces, loading: loadingPiecesRef, deletePiece } = usePieces()
 const loadingPieces = computed(() => loadingPiecesRef.value)
 const piecesList = computed(() => pieces.value || [])
+const piecesTotal = computed(() => piecesList.value.length)
+
+const searchTerm = ref('')
+const filteredPieces = computed(() => {
+  const term = searchTerm.value.trim().toLowerCase()
+  if (!term) {
+    return piecesList.value
+  }
+  return piecesList.value.filter((piece) => {
+    const name = (piece?.name || '').toLowerCase()
+    const reference = (piece?.reference || '').toLowerCase()
+    const category = (piece?.typePiece?.name || '').toLowerCase()
+    return (
+      name.includes(term) ||
+      reference.includes(term) ||
+      category.includes(term)
+    )
+  })
+})
 
 const handleDeletePiece = async (piece: Record<string, any>) => {
   const hasLinkedElements =