feat(ui): ajoute la pagination et la recherche serveur

app/composables/usePieces.js

@@ -6,6 +6,7 @@ import { useConstructeurs } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 
 const pieces = ref([])
+const total = ref(0)
 const loading = ref(false)
 
 const extractCollection = (payload) => {
@@ -24,6 +25,16 @@ const extractCollection = (payload) => {
   return []
 }
 
+const extractTotal = (payload, fallbackLength) => {
+  if (typeof payload?.totalItems === 'number') {
+    return payload.totalItems
+  }
+  if (typeof payload?.['hydra:totalItems'] === 'number') {
+    return payload['hydra:totalItems']
+  }
+  return fallbackLength
+}
+
 export function usePieces () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
@@ -65,18 +76,58 @@ export function usePieces () {
     return piece
   }
 
-  const loadPieces = async () => {
+  /**
+   * Load pieces with pagination and search support
+   * @param {Object} options - Query options
+   * @param {string} [options.search] - Search term for name/reference
+   * @param {number} [options.page=1] - Current page (1-based)
+   * @param {number} [options.itemsPerPage=30] - Items per page
+   * @param {string} [options.orderBy='name'] - Field to order by
+   * @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
+   */
+  const loadPieces = async (options = {}) => {
     loading.value = true
     try {
-      const result = await get('/pieces')
+      const {
+        search = '',
+        page = 1,
+        itemsPerPage = 30,
+        orderBy = 'name',
+        orderDir = 'asc'
+      } = options
+
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        // API Platform uses property filters
+        params.set('name', search.trim())
+      }
+
+      // API Platform OrderFilter syntax: order[field]=direction
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/pieces?${params.toString()}`)
       if (result.success) {
         const items = extractCollection(result.data)
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
         pieces.value = enrichedItems
-        showInfo(`Chargement de ${pieces.value.length} pièce(s) réussi`)
+        total.value = extractTotal(result.data, items.length)
+        return {
+          success: true,
+          data: {
+            items: enrichedItems,
+            total: total.value,
+            page,
+            itemsPerPage
+          }
+        }
       }
+      return result
     } catch (error) {
       console.error('Erreur lors du chargement des pièces:', error)
+      return { success: false, error: error.message }
     } finally {
       loading.value = false
     }
@@ -89,7 +140,8 @@ export function usePieces () {
       const result = await post('/pieces', normalizedPayload)
       if (result.success) {
         const enriched = await withResolvedConstructeurs(result.data)
-        pieces.value.push(enriched)
+        pieces.value.unshift(enriched)
+        total.value += 1
         const displayName = result.data?.name
           || pieceData?.definition?.name
           || pieceData?.name
@@ -134,6 +186,7 @@ export function usePieces () {
       if (result.success) {
         const deletedPiece = pieces.value.find(piece => piece.id === id)
         pieces.value = pieces.value.filter(piece => piece.id !== id)
+        total.value = Math.max(0, total.value - 1)
         showSuccess(`Pièce "${deletedPiece?.name || 'inconnu'}" supprimée avec succès`)
       }
       return result
@@ -150,6 +203,7 @@ export function usePieces () {
 
   return {
     pieces,
+    total,
     loading,
     loadPieces,
     createPiece,