feat(fournisseurs) : pagination serveur + search multi-champs (name/email/telephone) + filtre catégorie + tri

Backend - Nouveau ConstructeurSearchFilter : LIKE insensible casse sur name/email + LEFT JOIN telephones.numero, accessible via ?search= - Constructeur entity : ApiFilter ConstructeurSearchFilter, SearchFilter (categories.id exact), OrderFilter (name, email, createdAt) - paginationMaximumItemsPerPage 200 -> 2000 (pour ConstructeurSelect et MachineDetail qui chargent l'ensemble en cache) Frontend - useConstructeurs : nouvelle fonction fetchConstructeursPage({ page, itemsPerPage, search, categoryId, orderField, orderDirection }) renvoyant { items, totalItems, totalPages, currentPage } - constructeurs.vue : suppression du filtre/tri client, état page/perPage/totalItems/totalPages, watchers sur search/filter/sort qui reset page=1 et rechargent, prop pagination du DataTable câblée, recharge après create/update/delete Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-13 10:44:15 +02:00
parent 905d5c0957
commit f71f4c68da
4 changed files with 204 additions and 31 deletions
--- a/frontend/app/composables/useConstructeurs.ts
+++ b/frontend/app/composables/useConstructeurs.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useApi } from './useApi'
 import { useToast } from './useToast'
-import { extractCollection } from '~/shared/utils/apiHelpers'
+import { extractCollection, extractTotal } from '~/shared/utils/apiHelpers'

 export interface ConstructeurTelephone {
  '@id'?: string
@@ -33,6 +33,24 @@ interface ConstructeurResult {
  error?: string
 }

+export interface ConstructeurPageOptions {
+  page?: number
+  itemsPerPage?: number
+  search?: string
+  categoryId?: string
+  orderField?: 'name' | 'email' | 'createdAt'
+  orderDirection?: 'asc' | 'desc'
+}
+
+export interface ConstructeurPageResult {
+  success: boolean
+  items: Constructeur[]
+  totalItems: number
+  totalPages: number
+  currentPage: number
+  error?: string
+}
+
 const constructeurs = ref<Constructeur[]>([])
 const loading = ref(false)
 const loaded = ref(false)
@@ -83,8 +101,10 @@ export function useConstructeurs() {
    }
    loading.value = true
    try {
-      const query = search ? `?search=${encodeURIComponent(search)}` : ''
-      const result = await get(`/constructeurs${query}`)
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', '2000')
+      if (search) params.set('search', search)
+      const result = await get(`/constructeurs?${params.toString()}`)
      if (result.success) {
        const items = extractCollection(result.data)
        constructeurs.value = uniqueConstructeurs(items)
@@ -104,6 +124,37 @@ export function useConstructeurs() {
    return loadConstructeurs(search)
  }

+  const fetchConstructeursPage = async (opts: ConstructeurPageOptions = {}): Promise<ConstructeurPageResult> => {
+    const page = Math.max(1, opts.page ?? 1)
+    const itemsPerPage = Math.max(1, opts.itemsPerPage ?? 30)
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('page', String(page))
+      params.set('itemsPerPage', String(itemsPerPage))
+      if (opts.search && opts.search.trim()) params.set('search', opts.search.trim())
+      if (opts.categoryId) params.set('categories.id', opts.categoryId)
+      if (opts.orderField) {
+        params.set(`order[${opts.orderField}]`, opts.orderDirection ?? 'asc')
+      }
+      const result = await get(`/constructeurs?${params.toString()}`)
+      if (!result.success) {
+        return { success: false, items: [], totalItems: 0, totalPages: 0, currentPage: page, error: result.error }
+      }
+      const items = extractCollection<Constructeur>(result.data)
+      const totalItems = extractTotal(result.data, items.length)
+      const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage))
+      upsertConstructeurs(items)
+      return { success: true, items, totalItems, totalPages, currentPage: page }
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors du chargement de la page fournisseurs:', error)
+      return { success: false, items: [], totalItems: 0, totalPages: 0, currentPage: page, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
  const createConstructeur = async (data: Record<string, unknown>): Promise<ConstructeurResult> => {
    loading.value = true
    try {
@@ -227,6 +278,7 @@ export function useConstructeurs() {
    loading,
    loadConstructeurs,
    searchConstructeurs,
+    fetchConstructeursPage,
    createConstructeur,
    updateConstructeur,
    deleteConstructeur,
--- a/frontend/app/pages/constructeurs.vue
+++ b/frontend/app/pages/constructeurs.vue
@@ -19,13 +19,17 @@
      <div class="card-body space-y-4">
        <DataTable
          :columns="columns"
-          :rows="filteredConstructeurs"
+          :rows="pageItems"
          :loading="loading"
          :sort="currentSort"
-          :show-counter="false"
+          :pagination="paginationState"
+          :show-counter="true"
+          :show-per-page="true"
          empty-message="Aucun fournisseur trouvé."
          no-results-message="Aucun fournisseur trouvé."
          @sort="handleSort"
+          @update:current-page="onPageChange"
+          @update:per-page="onPerPageChange"
        >
          <template #toolbar>
            <div class="flex flex-col sm:flex-row gap-3 w-full">
@@ -204,7 +208,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import DataTable from '~/components/common/DataTable.vue'
 import FieldEmail from '~/components/form/FieldEmail.vue'
 import FieldPhone from '~/components/form/FieldPhone.vue'
@@ -229,10 +233,17 @@ interface ConstructeurFormState {

 const api = useApi()
 const { canEdit } = usePermissions()
-const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
+const { constructeurs, loading, createConstructeur, updateConstructeur, deleteConstructeur, fetchConstructeursPage } = useConstructeurs()
 const { categories: allCategories, loadCategories } = useConstructeurCategories()
 const { showError } = useToast()

+const pageItems = ref<typeof constructeurs.value>([])
+const totalItems = ref(0)
+const totalPages = ref(0)
+const currentPage = ref(1)
+const perPage = ref(30)
+const perPageOptions = [15, 30, 50, 100]
+
 const columns = [
  { key: 'name', label: 'Nom', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
@@ -261,6 +272,44 @@ const handleSort = (sort) => {
  sortDir.value = sort.direction
 }

+const paginationState = computed(() => ({
+  currentPage: currentPage.value,
+  totalPages: totalPages.value,
+  totalItems: totalItems.value,
+  pageItems: pageItems.value.length,
+  perPage: perPage.value,
+  perPageOptions,
+}))
+
+const SORTABLE_FIELDS = new Set(['name', 'email', 'createdAt'])
+
+const loadPage = async () => {
+  const orderField = SORTABLE_FIELDS.has(sortKey.value)
+    ? (sortKey.value as 'name' | 'email' | 'createdAt')
+    : 'name'
+  const result = await fetchConstructeursPage({
+    page: currentPage.value,
+    itemsPerPage: perPage.value,
+    search: searchTerm.value,
+    categoryId: selectedCategoryId.value || undefined,
+    orderField,
+    orderDirection: sortDir.value === 'desc' ? 'desc' : 'asc',
+  })
+  if (!result.success) {
+    if (result.error) showError(result.error)
+    pageItems.value = []
+    totalItems.value = 0
+    totalPages.value = 0
+    return
+  }
+  pageItems.value = result.items
+  totalItems.value = result.totalItems
+  totalPages.value = result.totalPages
+  if (currentPage.value > result.totalPages && result.totalPages > 0) {
+    currentPage.value = result.totalPages
+  }
+}
+
 const modalOpen = ref(false)
 const saving = ref(false)
 const editingConstructeur = ref<Record<string, any> | null>(null)
@@ -268,29 +317,31 @@ const form = ref<ConstructeurFormState>({ name: '', email: '', telephones: [], c

 const rowPhones = constructeurPhones

-const filteredConstructeurs = computed(() => {
-  const key = sortKey.value
-  const dir = sortDir.value === 'desc' ? -1 : 1
-  let sorted = [...constructeurs.value].sort((a, b) => {
-    if (key === 'createdAt') {
-      return dir * (new Date(a[key] || 0).getTime() - new Date(b[key] || 0).getTime())
-    }
-    return dir * (a[key] || '').localeCompare(b[key] || '')
-  })
-  if (selectedCategoryId.value) {
-    sorted = sorted.filter(item => (item.categories || []).some(cat => cat.id === selectedCategoryId.value))
-  }
-  if (!searchTerm.value) { return sorted }
-  const term = searchTerm.value.toLowerCase()
-  return sorted.filter((item) => {
-    const haystack = [item.name, item.email, ...rowPhones(item).map(t => t.numero)]
-    return haystack.some(value => value && String(value).toLowerCase().includes(term))
-  })
+const debouncedSearch = debounce(() => {
+  currentPage.value = 1
+  loadPage()
+}, 300)
+
+watch(selectedCategoryId, () => {
+  currentPage.value = 1
+  loadPage()
 })

-const debouncedSearch = debounce(async () => {
-  await searchConstructeurs(searchTerm.value)
-}, 300)
+watch([sortKey, sortDir], () => {
+  currentPage.value = 1
+  loadPage()
+})
+
+const onPageChange = (page: number) => {
+  currentPage.value = page
+  loadPage()
+}
+
+const onPerPageChange = (value: number) => {
+  perPage.value = value
+  currentPage.value = 1
+  loadPage()
+}

 const formatDate = formatFrenchDate

@@ -386,7 +437,7 @@ const saveConstructeur = async () => {
  saving.value = false
  if (result.success) {
    closeModal()
-    await searchConstructeurs(searchTerm.value)
+    await loadPage()
  }
 }

@@ -397,6 +448,10 @@ const confirmDelete = async (constructeur) => {
  const result = await deleteConstructeur(constructeur.id)
  if (!result.success && result.error) {
    showError(result.error)
+    return
+  }
+  if (result.success) {
+    await loadPage()
  }
 }

@@ -408,7 +463,7 @@ const loadStats = async () => {
 }

 onMounted(() => {
-  loadConstructeurs()
+  loadPage()
  loadCategories()
  loadStats()
 })
--- a/src/Entity/Constructeur.php
+++ b/src/Entity/Constructeur.php
@@ -4,6 +4,9 @@ declare(strict_types=1);

 namespace App\Entity;

+use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
+use ApiPlatform\Metadata\ApiFilter;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Delete;
 use ApiPlatform\Metadata\Get;
@@ -12,6 +15,7 @@ use ApiPlatform\Metadata\Patch;
 use ApiPlatform\Metadata\Post;
 use ApiPlatform\Metadata\Put;
 use App\Entity\Trait\CuidEntityTrait;
+use App\Filter\ConstructeurSearchFilter;
 use App\Repository\ConstructeurRepository;
 use DateTimeImmutable;
 use Doctrine\Common\Collections\ArrayCollection;
@@ -26,6 +30,9 @@ use Symfony\Component\Validator\Constraints as Assert;
 #[ORM\Entity(repositoryClass: ConstructeurRepository::class)]
 #[ORM\Table(name: 'constructeurs')]
 #[ORM\HasLifecycleCallbacks]
+#[ApiFilter(ConstructeurSearchFilter::class)]
+#[ApiFilter(SearchFilter::class, properties: ['categories.id' => 'exact'])]
+#[ApiFilter(OrderFilter::class, properties: ['name', 'email', 'createdAt'])]
 #[ApiResource(
    description: 'Fournisseurs et constructeurs. Référentiel partagé entre les machines, pièces, composants et produits pour identifier les fabricants et distributeurs.',
    operations: [
@@ -37,7 +44,7 @@ use Symfony\Component\Validator\Constraints as Assert;
        new Delete(security: "is_granted('ROLE_GESTIONNAIRE')"),
    ],
    paginationClientItemsPerPage: true,
-    paginationMaximumItemsPerPage: 200,
+    paginationMaximumItemsPerPage: 2000,
    normalizationContext: ['groups' => ['constructeur:read']],
    denormalizationContext: ['groups' => ['constructeur:write']]
 )]
--- a/src/Filter/ConstructeurSearchFilter.php
+++ b/src/Filter/ConstructeurSearchFilter.php
@@ -0,0 +1,59 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Filter;
+
+use ApiPlatform\Doctrine\Orm\Filter\AbstractFilter;
+use ApiPlatform\Doctrine\Orm\Util\QueryNameGeneratorInterface;
+use ApiPlatform\Metadata\Operation;
+use Doctrine\ORM\QueryBuilder;
+
+/**
+ * Search filter pour Constructeur : LIKE insensible à la casse sur name, email
+ * + LEFT JOIN sur la collection telephones pour matcher aussi sur telephone.numero.
+ * Param query : ?search=...
+ */
+final class ConstructeurSearchFilter extends AbstractFilter
+{
+    public function getDescription(string $resourceClass): array
+    {
+        return [
+            'search' => [
+                'property'    => null,
+                'type'        => 'string',
+                'required'    => false,
+                'description' => 'Recherche dans le nom, l\'email et les numéros de téléphone du fournisseur.',
+                'openapi'     => [
+                    'allowEmptyValue' => true,
+                ],
+            ],
+        ];
+    }
+
+    protected function filterProperty(string $property, mixed $value, QueryBuilder $queryBuilder, QueryNameGeneratorInterface $queryNameGenerator, string $resourceClass, ?Operation $operation = null, array $context = []): void
+    {
+        if ('search' !== $property || !is_string($value) || '' === trim($value)) {
+            return;
+        }
+
+        $alias       = $queryBuilder->getRootAliases()[0];
+        $telAlias    = $queryNameGenerator->generateJoinAlias('telephones');
+        $paramName   = $queryNameGenerator->generateParameterName('search');
+        $likePattern = '%'.mb_strtolower(trim($value)).'%';
+
+        $queryBuilder
+            ->leftJoin(sprintf('%s.telephones', $alias), $telAlias)
+            ->andWhere(sprintf(
+                'LOWER(%1$s.name) LIKE :%4$s OR LOWER(%1$s.email) LIKE :%4$s OR LOWER(%2$s.numero) LIKE :%4$s',
+                $alias,
+                $telAlias,
+                '',
+                $paramName,
+            ))
+            ->setParameter($paramName, $likePattern)
+        ;
+
+        $queryBuilder->groupBy(sprintf('%s.id', $alias));
+    }
+}