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

app/composables/useProducts.js

@@ -42,6 +42,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 useProducts () {
   const { showError } = useToast()
   const { get, post, patch, delete: del } = useApi()
@@ -77,32 +87,62 @@ export function useProducts () {
     return product
   }
 
+  /**
+   * Load products 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)
+   * @param {boolean} [options.force=false] - Force reload even if already loaded
+   */
   const loadProducts = async (options = {}) => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'name',
+      orderDir = 'asc',
+      force = false
+    } = options
+
     if (loading.value) {
       return {
         success: true,
-        data: { items: products.value, total: total.value },
-      }
-    }
-    if (loaded.value && !options.force) {
-      return {
-        success: true,
-        data: { items: products.value, total: total.value },
+        data: { items: products.value, total: total.value, page, itemsPerPage },
       }
     }
 
     loading.value = true
     error.value = null
     try {
-      const result = await get('/products?itemsPerPage=100')
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('name', search.trim())
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/products?${params.toString()}`)
       if (result.success) {
         const items = extractCollection(result.data)
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
         products.value = enrichedItems
-        total.value = typeof result.data?.totalItems === 'number'
-          ? result.data.totalItems
-          : items.length
+        total.value = extractTotal(result.data, items.length)
         loaded.value = true
+        return {
+          success: true,
+          data: {
+            items: enrichedItems,
+            total: total.value,
+            page,
+            itemsPerPage
+          }
+        }
       } else if (result.error) {
         error.value = result.error
         showError(`Impossible de charger les produits: ${result.error}`)