refacto(tables) : composant DataTable global + migration de toutes les tables

- Nouveau composant DataTable réutilisable avec tri par en-têtes, pagination, filtres colonnes
- Nouveau composable useDataTable (sort/page/search/perPage/columnFilters + persistance URL)
- Migration des 9 tables : constructeurs, comments, admin, pieces-catalog, component-catalog, product-catalog, documents, activity-log, ManagementView (catégories)
- Filtres "Type de" server-side (ipartial) pour pièces, composants, produits

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/composables/useComments.ts

@@ -68,15 +68,21 @@ export function useComments() {
   const fetchAllComments = async (options: {
     status?: string
     entityType?: string
+    entityName?: string
     page?: number
     itemsPerPage?: number
+    orderBy?: string
+    orderDir?: string
   } = {}): Promise<CommentListResult> => {
     loading.value = true
     try {
       const params = new URLSearchParams()
       if (options.status) params.set('status', options.status)
       if (options.entityType) params.set('entityType', options.entityType)
-      params.set('order[createdAt]', 'desc')
+      if (options.entityName) params.set('entityName', options.entityName)
+      const sortField = options.orderBy || 'createdAt'
+      const sortDir = options.orderDir || 'desc'
+      params.set(`order[${sortField}]`, sortDir)
       params.set('itemsPerPage', String(options.itemsPerPage || 30))
       params.set('page', String(options.page || 1))
 

app/composables/useComposants.ts

@@ -41,6 +41,7 @@ interface LoadComposantsOptions {
   itemsPerPage?: number
   orderBy?: string
   orderDir?: 'asc' | 'desc'
+  typeName?: string
   force?: boolean
 }
 
@@ -107,10 +108,11 @@ export function useComposants() {
       itemsPerPage = 30,
       orderBy = 'name',
       orderDir = 'asc',
+      typeName,
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && page === 1) {
+    if (!force && loaded.value && !search && !typeName && page === 1) {
       return {
         success: true,
         data: { items: composants.value, total: total.value, page, itemsPerPage },
@@ -135,6 +137,10 @@ export function useComposants() {
         params.set('name', search.trim())
       }
 
+      if (typeName && typeName.trim()) {
+        params.set('typeComposant.name', typeName.trim())
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/composants?${params.toString()}`)

app/composables/useDataTable.ts

@@ -0,0 +1,186 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { useUrlState } from './useUrlState'
+import type { DataTableSort, DataTablePagination, DataTableColumnFilters, SortDirection } from '~/shared/types/dataTable'
+
+export interface UseDataTableDeps {
+  /** Called whenever sort/page/search/perPage/filter changes. The composable does NOT fetch data itself. */
+  fetchData: () => void | Promise<void>
+}
+
+export interface UseDataTableOptions {
+  /** Default sort field */
+  defaultSort?: string
+  /** Default sort direction */
+  defaultDirection?: SortDirection
+  /** Default items per page */
+  defaultPerPage?: number
+  /** Available per-page options */
+  perPageOptions?: number[]
+  /** Search debounce in ms. Default: 300 */
+  searchDebounceMs?: number
+  /** Whether to persist state to URL. Default: true */
+  persistToUrl?: boolean
+  /** Extra URL state params for page-specific filters */
+  extraParams?: Record<string, { default: string | number; type?: 'string' | 'number' }>
+}
+
+export interface UseDataTableReturn {
+  searchTerm: Ref<string>
+  sortField: Ref<string>
+  sortDirection: Ref<SortDirection>
+  currentPage: Ref<number>
+  itemsPerPage: Ref<number>
+  columnFilters: Ref<DataTableColumnFilters>
+  filters: Record<string, Ref<string | number>>
+  sort: ComputedRef<DataTableSort>
+  pagination: (total: Ref<number>, pageItems: Ref<number>) => ComputedRef<DataTablePagination>
+  handleSort: (newSort: DataTableSort) => void
+  handlePageChange: (page: number) => void
+  handlePerPageChange: (perPage: number) => void
+  handleFilterChange: () => void
+  handleColumnFiltersChange: (filters: DataTableColumnFilters) => void
+  debouncedSearch: () => void
+  refresh: () => void
+  perPageOptions: number[]
+}
+
+export function useDataTable(
+  deps: UseDataTableDeps,
+  options: UseDataTableOptions = {},
+): UseDataTableReturn {
+  const {
+    defaultSort = 'name',
+    defaultDirection = 'asc',
+    defaultPerPage = 20,
+    perPageOptions = [20, 50, 100],
+    searchDebounceMs = 300,
+    persistToUrl = true,
+    extraParams = {},
+  } = options
+
+  let searchTerm: Ref<string>
+  let sortField: Ref<string>
+  let sortDirection: Ref<SortDirection>
+  let currentPage: Ref<number>
+  let itemsPerPage: Ref<number>
+  const filters: Record<string, Ref<string | number>> = {}
+
+  if (persistToUrl) {
+    const paramDefs: Record<string, { default: string | number; type?: 'string' | 'number'; debounce?: number }> = {
+      page: { default: 1, type: 'number' },
+      perPage: { default: defaultPerPage, type: 'number' },
+      q: { default: '', debounce: searchDebounceMs },
+      sort: { default: defaultSort },
+      dir: { default: defaultDirection },
+      ...extraParams,
+    }
+
+    const state = useUrlState(paramDefs, {
+      onRestore: () => deps.fetchData(),
+    })
+
+    searchTerm = state.q as Ref<string>
+    sortField = state.sort as Ref<string>
+    sortDirection = state.dir as unknown as Ref<SortDirection>
+    currentPage = state.page as unknown as Ref<number>
+    itemsPerPage = state.perPage as unknown as Ref<number>
+
+    for (const key of Object.keys(extraParams)) {
+      filters[key] = (state as Record<string, Ref<string | number>>)[key]!
+    }
+  }
+  else {
+    searchTerm = ref('')
+    sortField = ref(defaultSort)
+    sortDirection = ref(defaultDirection) as Ref<SortDirection>
+    currentPage = ref(1)
+    itemsPerPage = ref(defaultPerPage)
+
+    for (const [key, def] of Object.entries(extraParams)) {
+      filters[key] = ref(def.default)
+    }
+  }
+
+  // Search debounce
+  let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+  const debouncedSearch = () => {
+    if (searchTimeout) clearTimeout(searchTimeout)
+    searchTimeout = setTimeout(() => {
+      currentPage.value = 1
+      deps.fetchData()
+    }, searchDebounceMs)
+  }
+
+  // Sort
+  const sort = computed<DataTableSort>(() => ({
+    field: sortField.value,
+    direction: sortDirection.value,
+  }))
+
+  const handleSort = (newSort: DataTableSort) => {
+    sortField.value = newSort.field
+    sortDirection.value = newSort.direction
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Pagination
+  const handlePageChange = (page: number) => {
+    currentPage.value = page
+    deps.fetchData()
+  }
+
+  const handlePerPageChange = (perPage: number) => {
+    itemsPerPage.value = perPage
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Column filters
+  const columnFilters = ref<DataTableColumnFilters>({})
+
+  const handleColumnFiltersChange = (newFilters: DataTableColumnFilters) => {
+    columnFilters.value = newFilters
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Generic filter change handler (resets page and refetches)
+  const handleFilterChange = () => {
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  const pagination = (total: Ref<number>, pageItems: Ref<number>): ComputedRef<DataTablePagination> =>
+    computed(() => ({
+      currentPage: currentPage.value,
+      totalPages: Math.ceil(total.value / itemsPerPage.value) || 1,
+      totalItems: total.value,
+      pageItems: pageItems.value,
+      perPageOptions,
+      perPage: itemsPerPage.value,
+    }))
+
+  const refresh = () => deps.fetchData()
+
+  return {
+    searchTerm,
+    sortField,
+    sortDirection,
+    currentPage,
+    itemsPerPage,
+    columnFilters,
+    filters,
+    sort,
+    pagination,
+    handleSort,
+    handlePageChange,
+    handlePerPageChange,
+    handleFilterChange,
+    handleColumnFiltersChange,
+    debouncedSearch,
+    refresh,
+    perPageOptions,
+  }
+}

app/composables/usePieces.ts

@@ -42,6 +42,7 @@ interface LoadPiecesOptions {
   itemsPerPage?: number
   orderBy?: string
   orderDir?: 'asc' | 'desc'
+  typeName?: string
   force?: boolean
 }
 
@@ -117,10 +118,11 @@ export function usePieces() {
       itemsPerPage = 30,
       orderBy = 'name',
       orderDir = 'asc',
+      typeName,
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && page === 1) {
+    if (!force && loaded.value && !search && !typeName && page === 1) {
       return {
         success: true,
         data: { items: pieces.value, total: total.value, page, itemsPerPage },
@@ -145,6 +147,10 @@ export function usePieces() {
         params.set('name', search.trim())
       }
 
+      if (typeName && typeName.trim()) {
+        params.set('typePiece.name', typeName.trim())
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/pieces?${params.toString()}`)

app/composables/useProducts.ts

@@ -40,6 +40,7 @@ interface LoadProductsOptions {
   itemsPerPage?: number
   orderBy?: string
   orderDir?: 'asc' | 'desc'
+  typeName?: string
   force?: boolean
 }
 
@@ -116,10 +117,11 @@ export function useProducts() {
       itemsPerPage = 30,
       orderBy = 'name',
       orderDir = 'asc',
+      typeName,
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && page === 1) {
+    if (!force && loaded.value && !search && !typeName && page === 1) {
       return {
         success: true,
         data: { items: products.value, total: total.value, page, itemsPerPage },
@@ -144,6 +146,10 @@ export function useProducts() {
         params.set('name', search.trim())
       }
 
+      if (typeName && typeName.trim()) {
+        params.set('typeProduct.name', typeName.trim())
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/products?${params.toString()}`)