feat : creation du composant datatable (WIP)

frontend/components/ui/UiDataTable.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mt-6">
-        <table class="min-w-full border-collapse border border-slate-300">
-            <thead class="gap-4 bg-slate-100 px-4 py-3 uppercase tracking-wide">
+        <table class="min-w-full border border-slate-300">
+            <thead class="bg-slate-100 uppercase tracking-wide">
             <tr>
                 <th
                     v-for="column in normalizedColumns"
@@ -15,15 +15,15 @@
             <tbody>
             <tr v-if="loading">
                 <td
-                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
+                    class="border border-slate-300 px-3 py-2 text-left text-slate-500"
                     :colspan="normalizedColumns.length || 1"
                 >
                     Chargement...
                 </td>
             </tr>
-            <tr v-else-if="rows.length === 0">
+            <tr v-else-if="displayedRows.length === 0">
                 <td
-                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
+                    class="border border-slate-300 px-3 py-2 text-left text-slate-500"
                     :colspan="normalizedColumns.length || 1"
                 >
                     Aucune donnée
@@ -31,10 +31,10 @@
             </tr>
             <template v-else>
                 <tr
-                    v-for="(row, rowIndex) in rows"
+                    v-for="(row, rowIndex) in displayedRows"
                     :key="rowIndex"
-                    class="cursor-pointer"
-                    @click="onRowClick(row)"
+                    :class="props.rowClickable ? 'cursor-pointer' : ''"
+                    @click="props.rowClickable ? onRowClick(row) : null"
                 >
                     <td
                         v-for="column in normalizedColumns"
@@ -48,14 +48,14 @@
             </tbody>
         </table>
 
-        <div class="flex items-center justify-between">
-            <p class="text-sm text-slate-600">
+        <div class="flex items-center justify-between mt-4">
+            <p class="text-slate-600">
                 {{ pageLabel }}
             </p>
-            <div class="flex items-center gap-2 mt-4">
+            <div class="flex items-center gap-2">
                 <button
                     type="button"
-                    class="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="rounded border border-slate-300 px-2 py-1 disabled:cursor-not-allowed disabled:opacity-50"
                     :disabled="currentPage <= 1 || loading"
                     @click="currentPage = currentPage - 1"
                 >
@@ -65,18 +65,19 @@
                     v-for="(item, index) in paginationItems"
                     :key="`${item}-${index}`"
                     type="button"
-                    class="min-w-9 rounded border px-3 py-1 disabled:cursor-default"
-                    :class="typeof item === 'number' && item === currentPage
-                        ? 'border-primary-500 bg-primary-500 text-white'
-                        : 'border-slate-300'"
+                    class="min-w-9 rounded border px-2 py-1"
+                    :class="item === currentPage
+                            ? 'border-primary-500 bg-primary-500 text-white'
+                            : 'border-slate-300'"
                     :disabled="loading || item === '...'"
                     @click="typeof item === 'number' ? (currentPage = item) : null"
                 >
                     {{ item }}
                 </button>
+
                 <button
                     type="button"
-                    class="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="rounded border border-slate-300 px-2 py-1 disabled:cursor-not-allowed disabled:opacity-50"
                     :disabled="currentPage >= totalPages || loading"
                     @click="currentPage = currentPage + 1"
                 >
@@ -88,42 +89,43 @@
 </template>
 
 <script setup lang="ts">
-type Row = Record<string, unknown>
-
-type ColumnConfig = {
-    key: string
-    label?: string
-    format?: (value: unknown, row: Row) => string
-}
-type HydraCollection<T> = {
-    'hydra:member': T[]
-    'hydra:totalItems': number
-}
-type AnyCollection<T> = HydraCollection<T> & {
-    member?: T[]
-    items?: T[]
-    totalItems?: number
-}
-
-const props = withDefaults(defineProps<{
-    url: string
-    columns?: ColumnConfig[]
-    query?: Record<string, unknown>
-    itemsPerPage?: number
-}>(), {
-    columns: () => [],
-    query: () => ({}),
-    itemsPerPage: 10
-})
+import {Row,ColumnConfig, AnyCollection, PaginationItem }from '~/services/datatable'
+import {useApi} from "~/composables/useApi";
 
 const api = useApi()
-const emit = defineEmits<{
-    rowClick: [row: Row]
-}>()
 const loading = ref(false)
 const currentPage = ref(1)
 const rows = ref<Row[]>([])
 const total = ref(0)
+const isNestedMode = computed(() => Boolean(props.responsePath))
+const effectiveTotal = computed(() => total.value)
+const emit = defineEmits<{
+    rowClick: [row: Row]
+}>()
+
+const props = withDefaults(defineProps<{
+    url?: string
+    responsePath?: string
+    columns?: ColumnConfig[]
+    query?: Record<string, unknown>
+    itemsPerPage?: number
+    rowClickable?: boolean
+}>(), {
+    url: '',
+    responsePath: '',
+    columns: () => [],
+    query: () => ({}),
+    itemsPerPage: 10,
+    rowClickable: true
+})
+
+const displayedRows = computed<Row[]>(() => {
+    if (!isNestedMode.value) return rows.value
+
+    const startIndex = (currentPage.value - 1) * props.itemsPerPage
+    const endIndex = startIndex + props.itemsPerPage
+    return rows.value.slice(startIndex, endIndex)
+})
 
 const normalizedColumns = computed(() => {
     if (props.columns.length > 0) {
@@ -134,11 +136,11 @@ const normalizedColumns = computed(() => {
         }))
     }
 
-    if (rows.value.length === 0) {
+    if (displayedRows.value.length === 0) {
         return []
     }
 
-    return Object.keys(rows.value[0])
+    return Object.keys(displayedRows.value[0])
         .filter((key) => !key.startsWith('@'))
         .map((key) => ({
             key,
@@ -146,67 +148,95 @@ const normalizedColumns = computed(() => {
         }))
 })
 
-const totalPages = computed(() => Math.max(1, Math.ceil(total.value / props.itemsPerPage)))
-const paginationItems = computed<Array<number | '...'>>(() => {
-    const totalPagesValue = totalPages.value
-    const page = currentPage.value
+const totalPages = computed(() => Math.max(1, Math.ceil(effectiveTotal.value / props.itemsPerPage)),)
 
-    if (totalPagesValue <= 7) {
-        return Array.from({ length: totalPagesValue }, (_, index) => index + 1)
-    }
-
-    const pages = new Set<number>([1, totalPagesValue, page - 1, page, page + 1])
-    const sortedPages = Array.from(pages)
-        .filter((value) => value >= 1 && value <= totalPagesValue)
+function getVisiblePages(page: number, lastPage: number): number[] {
+    const candidates = new Set([1, page - 1, page, page + 1, lastPage])
+    return Array.from(candidates)
+        .filter((p) => p >= 1 && p <= lastPage)
         .sort((a, b) => a - b)
+}
+
+function insertEllipses(sortedPages: number[]): PaginationItem[] {
+    const items: PaginationItem[] = []
 
-    const items: Array<number | '...'> = []
     for (let i = 0; i < sortedPages.length; i++) {
-        const value = sortedPages[i]
-        const previousValue = sortedPages[i - 1]
-        if (previousValue != null && value - previousValue > 1) {
+        const current = sortedPages[i]
+        const previous = sortedPages[i - 1]
+        if (previous != null && current - previous > 1) {
             items.push('...')
         }
-        items.push(value)
+        items.push(current)
     }
-
     return items
+}
+const paginationItems = computed<PaginationItem[]>(() => {
+    const pages = getVisiblePages(currentPage.value, totalPages.value)
+    return insertEllipses(pages)
 })
+
 const pageLabel = computed(() => {
-    if (total.value === 0) {
-        return '0 resultat'
-    }
+    if (!effectiveTotal.value) return '0 résultat'
+
     const start = (currentPage.value - 1) * props.itemsPerPage + 1
-    const end = Math.min(currentPage.value * props.itemsPerPage, total.value)
-    return `${start}-${end} sur ${total.value}`
+    const end = Math.min(currentPage.value * props.itemsPerPage, effectiveTotal.value)
+
+    return `${start}-${end} sur ${effectiveTotal.value}`
 })
 
-// Surveille pagination et filtres pour recharger la liste ; si les filtres changent, revient d'abord à la page 1.
 watch(
-    () => ({
-        page: currentPage.value,
-        query: props.query,
-        url: props.url,
-        itemsPerPage: props.itemsPerPage
-    }),
-    async (state, previousState) => {
-        const queryChanged = JSON.stringify(state.query ?? {}) !== JSON.stringify(previousState?.query ?? {})
-
-        if (queryChanged && state.page !== 1) {
+    () => [props.url, props.itemsPerPage, JSON.stringify(props.query ?? {}), props.responsePath],
+    async () => {
+        if (currentPage.value !== 1) {
             currentPage.value = 1
-            return
+            if (!isNestedMode.value) return
         }
-
         await loadPage()
     },
-    {immediate: true, deep: true}
+    { immediate: true }
+)
+
+watch(
+    () => currentPage.value,
+    async () => {
+        if (isNestedMode.value) return
+        await loadPage()
+    }
+)
+
+watch(
+    () => [totalPages.value, currentPage.value],
+    () => {
+        if (currentPage.value > totalPages.value) {
+            currentPage.value = totalPages.value
+        }
+    },
+    { immediate: true }
 )
 
 // Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
 async function loadPage(): Promise<void> {
+    if (!props.url) {
+        rows.value = []
+        total.value = 0
+        return
+    }
+
     loading.value = true
 
     try {
+        if (isNestedMode.value) {
+            const response = await api.get<Row>(props.url, props.query, {
+                headers: {
+                    Accept: 'application/ld+json'
+                }
+            })
+            const nestedRows = readPath(response, props.responsePath)
+            rows.value = Array.isArray(nestedRows) ? nestedRows as Row[] : []
+            total.value = rows.value.length
+            return
+        }
+
         const requestQuery: Record<string, unknown> = {
             ...props.query,
             page: currentPage.value,
@@ -245,7 +275,9 @@ function readPath(source: Row, path: string): unknown {
 // Formate une valeur brute pour l'affichage dans une cellule (vide, tableau, objet ou valeur simple).
 function formatCell(value: unknown): string {
     if (value == null || value === '') return '-'
+
     if (Array.isArray(value)) return value.length ? value.map(formatCell).join(', ') : '-'
+
     if (typeof value === 'object') {
         const objectValue = value as Row
         return String(objectValue.label ?? objectValue.name ?? objectValue.code ?? objectValue.id ?? '[object]')
@@ -253,7 +285,6 @@ function formatCell(value: unknown): string {
     return String(value)
 }
 
-// Résout la valeur de colonne pour une ligne et applique un formateur personnalisé s'il existe.
 function formatColumnValue(
     row: Row,
     column: { key: string; format?: (value: unknown, row: Row) => string }

frontend/pages/admin/carrier/carrier-list.vue

@@ -1,53 +1,43 @@
 <template>
-
     <div class="flex items-center justify-between ">
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
-            <NuxtLink
-                to="/admin/carrier"
-                class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
-            >
-                <Icon name="mdi:plus" size="28"  />
-                Ajouter
-            </NuxtLink>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+        <NuxtLink
+            to="/admin/carrier"
+            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
+        >
+            <Icon name="mdi:plus" size="28"/>
+            Ajouter
+        </NuxtLink>
     </div>
 
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-2 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Label</div>
-                <div>Code</div>
-            </div>
-            <div
-                v-for="carrier in carrierList"
-                :key="carrier.id"
-                class="grid grid-cols-2 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToCarrier(carrier.id)"
-                @keydown.enter="goToCarrier(carrier.id)"
-            >
-                <div>{{ carrier.name}}</div>
-                <div>{{ carrier.code }}</div>
-            </div>
-        </div>
-
+    <UiDataTable
+        :columns="columns"
+        url="carriers"
+        @row-click="onCarrierRowClick"
+    />
 </template>
 
 <script setup lang="ts">
-import type {CarrierData} from "~/services/dto/carrier-data";
-import {getCarrierList} from "~/services/carrier";
+import type {ColumnConfig, Row} from "~/services/datatable";
 
-const carrierList = ref<CarrierData[]>()
 const router = useRouter()
 
+const columns: ColumnConfig[] = [
+    {key: "name", label: "Label"},
+    {key: "code", label: "Code"},
+]
+
 const goToCarrier = (id: number) => {
     router.push(`/admin/carrier/${id}`)
 }
 
+const onCarrierRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
+        goToCarrier(id)
+}
+
 definePageMeta({
     layout: 'default'
 })
-
-onMounted(async () => {
-    carrierList.value = await getCarrierList(false)
-})
 </script>

frontend/pages/admin/customer/[[id]].vue

@@ -32,45 +32,15 @@
                 Ajouter
             </UiButton>
         </div>
-        <div class="overflow-x-auto mb-10">
-            <table class="w-full border-collapse">
-                <thead>
-                <tr class="text-left border-b border-gray-200">
-                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
-                </tr>
-                </thead>
-                <tbody>
-                <template v-if="form.addresses.length === 0">
-                    <tr>
-                        <td colspan="6" class="py-4 text-slate-400">
-                            Aucune adresse.
-                        </td>
-                    </tr>
-                </template>
-                <template v-else>
-                    <tr
-                        v-for="(address, index) in form.addresses"
-                        :key="address.id ?? index"
-                        class="border-b border-gray-100 hover:bg-slate-50"
-                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
-                        @click="goToEditAddress(address.id ?? null)"
-                    >
-                        <td class="py-3 pr-4">{{ address.label || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
-                    </tr>
-                </template>
-                </tbody>
-            </table>
-        </div>
+        <UiDataTable
+            class="mb-10"
+            :columns="addressColumns"
+            :url="customerId !== null ? `customers/${customerId}` : ''"
+            response-path="addresses"
+            :items-per-page="5"
+            :row-clickable="auth.isAdmin"
+            @row-click="onAddressRowClick"
+        />
     </form>
 </template>
 
@@ -78,6 +48,7 @@
 import {computed, reactive, ref, watch} from "vue"
 import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
 import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
+import type {ColumnConfig, Row} from "~/services/datatable"
 import {useAuthStore} from "~/stores/auth"
 
 definePageMeta({layout: "default"})
@@ -100,6 +71,14 @@ const form = reactive<CustomerFormData>({
     email: "",
     addresses: [],
 })
+const addressColumns: ColumnConfig[] = [
+    {key: "label", label: "Libellé"},
+    {key: "street", label: "Rue"},
+    {key: "street2", label: "Complément"},
+    {key: "postalCode", label: "Code postal"},
+    {key: "city", label: "Ville"},
+    {key: "countryCode", label: "Pays"},
+]
 
 const goToAddAddress = () => {
     if (customerId.value === null || !auth.isAdmin) return
@@ -122,29 +101,16 @@ const goToEditAddress = (addressId: number | null) => {
     })
 }
 
+const onAddressRowClick = (row: Row) => {
+    const id = Number(row.id)
+    goToEditAddress(Number.isFinite(id) ? id : null)
+}
+
 const hydrateFromCustomer = (customer: CustomerData | null) => {
     if (!customer) return
     form.name = customer.name ?? ""
     form.phone = customer.phone ?? ""
     form.email = customer.email ?? ""
-    if (!Array.isArray(customer.addresses) || customer.addresses.length === 0) {
-        form.addresses = []
-        return
-    }
-    if (typeof customer.addresses[0] === "string") {
-        form.addresses = []
-        return
-    }
-
-    form.addresses = customer.addresses.map((address) => ({
-        id: address.id ?? null,
-        label: address.label ?? "",
-        street: address.street ?? "",
-        street2: address.street2 ?? null,
-        postalCode: address.postalCode ?? "",
-        city: address.city ?? "",
-        countryCode: address.countryCode ?? "",
-    }))
 }
 
 watch(

frontend/pages/admin/customer/customer-list.vue

@@ -12,106 +12,48 @@
         </NuxtLink>
     </div>
 
-    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
-        <div class="max-h-96 overflow-y-auto">
-            <div
-                class="sticky top-0 z-10 grid grid-cols-8 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
-            >
-                <div>Nom</div>
-                <div>Téléphone</div>
-                <div>Email</div>
-                <div>Rue</div>
-                <div>Complément</div>
-                <div>Code Postal</div>
-                <div>Ville</div>
-                <div>Pays</div>
-            </div>
-
-            <div v-if="customerList.length === 0" class="px-4 py-6 text-slate-400">
-                Aucun client.
-            </div>
-
-            <div v-for="customer in customerList" :key="customer.id">
-                <div
-                    v-if="!customer.addresses || customer.addresses.length === 0"
-                    class="grid grid-cols-8 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
-                    @click="goToCustomer(customer.id)"
-                >
-                    <div class="truncate">{{ customer.name || "—" }}</div>
-                    <div class="truncate">{{ customer.phone || "—" }}</div>
-                    <div class="truncate">{{ customer.email || "—" }}</div>
-                    <div class="col-span-1">Pas d'adresse</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                </div>
-
-                <template v-else-if="customer.addresses.length > 0">
-                    <div
-                        v-for="(address, idx) in customer.addresses"
-                        :key="address.id ?? `${customer.id}-${idx}-${address.street}-${address.postalCode}`"
-                        class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
-                        @click="goToCustomer(customer.id)"
-                    >
-                        <div class="truncate">
-                            {{ idx === 0 ? (customer.name || "—") : "↳" }}
-                        </div>
-                        <div class="truncate">{{ idx === 0 ? (customer.phone || "—") : ""  }}</div>
-                        <div class="truncate">{{ idx === 0 ? (customer.email || "—") : ""  }}</div>
-                        <div class="truncate">{{ address.street || "—" }}</div>
-                        <div class="truncate">{{ address.street2 || "—" }}</div>
-                        <div>{{ address.postalCode || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
-                    </div>
-                </template>
-
-                <template v-else>
-                    <div
-                        class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        @click="goToCustomer(customer.id)"
-                    >
-                        <div class="truncate">{{ customer.name || "—" }}</div>
-                        <div class="truncate">{{ customer.phone || "—" }}</div>
-                        <div class="truncate">{{ customer.email || "—" }}</div>
-                        <div class="col-span-5 text-slate-400">
-                            Adresses non chargées
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        v-if="auth.isAdmin"
+        :columns="columns"
+        url="customers"
+        @row-click="onCustomerRowClick"
+    />
     <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
         Accès réservé aux administrateurs.
     </div>
 </template>
 
 <script setup lang="ts">
-import { getCustomerList } from "~/services/customer"
-import type { CustomerData } from "~/services/dto/customer-data"
+import type { ColumnConfig, Row } from "~/services/datatable"
+import { formatAddresses } from "~/utils/datatable-formatters"
 import { useAuthStore } from "~/stores/auth"
 
 definePageMeta({ layout: "default" })
 
-const customerList = ref<CustomerData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
 
+const columns: ColumnConfig[] = [
+    { key: "name", label: "Nom" },
+    { key: "phone", label: "Téléphone" },
+    { key: "email", label: "Email" },
+    { key: "addresses", label: "Adresses", format: formatAddresses  },
+]
+
 const goToCustomer = (id: number) => {
     if (!auth.isAdmin) return
     router.push(`/admin/customer/${id}`)
 }
 
+const onCustomerRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
+    goToCustomer(id)
+}
+
 const handleAddClick = (event: Event) => {
     if (auth.isAdmin) return
     event.preventDefault()
 }
 
-onMounted(async () => {
-    if (!auth.isAdmin) return
-    customerList.value = await getCustomerList()
-})
 </script>

frontend/pages/admin/supplier/[[id]].vue

@@ -32,45 +32,15 @@
                 Ajouter
             </UiButton>
         </div>
-        <div class="overflow-x-auto mb-10">
-            <table class="w-full border-collapse">
-                <thead>
-                <tr class="text-left border-b border-gray-200">
-                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
-                </tr>
-                </thead>
-                <tbody>
-                <template v-if="form.addresses.length === 0">
-                    <tr>
-                        <td colspan="6" class="py-4 text-slate-400">
-                            Aucune adresse.
-                        </td>
-                    </tr>
-                </template>
-                <template v-else>
-                    <tr
-                        v-for="(address, index) in form.addresses"
-                        :key="address.id ?? index"
-                        class="border-b border-gray-100 hover:bg-slate-50"
-                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
-                        @click="goToEditAddress(address.id ?? null)"
-                    >
-                        <td class="py-3 pr-4">{{ address.label || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
-                    </tr>
-                </template>
-                </tbody>
-            </table>
-        </div>
+        <UiDataTable
+            class="mb-10"
+            :columns="addressColumns"
+            :url="supplierId !== null ? `suppliers/${supplierId}` : ''"
+            response-path="addresses"
+            :items-per-page="5"
+            :row-clickable="auth.isAdmin"
+            @row-click="onAddressRowClick"
+        />
     </form>
 </template>
 
@@ -78,6 +48,7 @@
 import {computed, reactive, ref, watch} from "vue"
 import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
 import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
+import type {ColumnConfig, Row} from "~/services/datatable"
 import {useAuthStore} from "~/stores/auth"
 
 definePageMeta({layout: "default"})
@@ -100,6 +71,14 @@ const form = reactive<SupplierFormData>({
     phone: "",
     addresses: [],
 })
+const addressColumns: ColumnConfig[] = [
+    {key: "label", label: "Libellé"},
+    {key: "street", label: "Rue"},
+    {key: "street2", label: "Complément"},
+    {key: "postalCode", label: "Code postal"},
+    {key: "city", label: "Ville"},
+    {key: "countryCode", label: "Pays"},
+]
 
 const goToAddAddress = () => {
     if (supplierId.value === null || !auth.isAdmin) return
@@ -124,29 +103,16 @@ const goToEditAddress = (addressId: number | null) => {
     })
 }
 
+const onAddressRowClick = (row: Row) => {
+    const id = Number(row.id)
+    goToEditAddress(Number.isFinite(id) ? id : null)
+}
+
 const hydrateFromSupplier = (supplier: SupplierData | null) => {
     if (!supplier) return
     form.name = supplier.name ?? ""
     form.email = supplier.email ?? ""
     form.phone = supplier.phone ?? ""
-    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
-        form.addresses = []
-        return
-    }
-    if (typeof supplier.addresses[0] === "string") {
-        form.addresses = []
-        return
-    }
-
-    form.addresses = supplier.addresses.map((address) => ({
-        id: address.id ?? null,
-        label: address.label ?? "",
-        street: address.street ?? "",
-        street2: address.street2 ?? null,
-        postalCode: address.postalCode ?? "",
-        city: address.city ?? "",
-        countryCode: address.countryCode ?? "",
-    }))
 }
 
 watch(

frontend/pages/admin/supplier/supplier-list.vue

@@ -12,102 +12,47 @@
         </NuxtLink>
     </div>
 
-    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
-        <div class="max-h-96 overflow-y-auto">
-            <div
-                class="sticky top-0 z-10 grid grid-cols-7 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
-            >
-                <div>Nom</div>
-                <div>Mail</div>
-                <div>Rue</div>
-                <div>Complément</div>
-                <div>Code Postal</div>
-                <div>Ville</div>
-                <div>Pays</div>
-            </div>
-
-            <div v-if="supplierList.length === 0" class="px-4 py-6 text-slate-400">
-                Aucun fournisseur.
-            </div>
-
-            <div v-for="supplier in supplierList" :key="supplier.id">
-                <div
-                    v-if="!supplier.addresses || supplier.addresses.length === 0"
-                    class="grid grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
-                    @click="goToSupplier(supplier.id)"
-                >
-                    <div class="truncate">{{ supplier.name }}</div>
-                    <div class="truncate">{{ supplier.email }}</div>
-                    <div class="col-span-1">Pas d'adresse</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                </div>
-
-                <template v-else-if="supplier.addresses.length > 0">
-                    <div
-                        v-for="(address, idx) in supplier.addresses"
-                        :key="address.id ?? `${supplier.id}-${idx}-${address.street}-${address.postalCode}`"
-                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
-                        @click="goToSupplier(supplier.id)"
-                    >
-                        <div class="truncate">
-                            {{ idx === 0 ? supplier.name : "↳" }}
-                        </div>
-                        <div class="truncate">{{ idx === 0 ? supplier.email : ""  }}</div>
-                        <div class="truncate">{{ address.street || "—" }}</div>
-                        <div class="truncate">{{ address.street2 || "—" }}</div>
-                        <div>{{ address.postalCode || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
-                    </div>
-                </template>
-
-                <template v-else>
-                    <div
-                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        @click="goToSupplier(supplier.id)"
-                    >
-                        <div class="truncate">{{ supplier.name }}</div>
-                        <div class="truncate">{{ supplier.email }}</div>
-                        <div class="col-span-5 text-slate-400">
-                            Adresses non chargées
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        v-if="auth.isAdmin"
+        :columns="columns"
+        url="suppliers"
+        @row-click="onSupplierRowClick"
+    />
     <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
         Accès réservé aux administrateurs.
     </div>
 </template>
 
 <script setup lang="ts">
-import { getSupplierList } from "~/services/supplier"
-import type { SupplierData } from "~/services/dto/supplier-data"
+import type { ColumnConfig, Row } from "~/services/datatable"
+import {formatAddresses} from "~/utils/datatable-formatters"
 import { useAuthStore } from "~/stores/auth"
 
 definePageMeta({ layout: "default" })
 
-const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
 
+const columns: ColumnConfig[] = [
+    { key: "name", label: "Nom" },
+    { key: "email", label: "Mail" },
+    { key: "addresses", label: "Adresses",  format: formatAddresses },
+]
+
 const goToSupplier = (id: number) => {
     if (!auth.isAdmin) return
     router.push(`/admin/supplier/${id}`)
 }
 
+const onSupplierRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
+    goToSupplier(id)
+}
+
 const handleAddClick = (event: Event) => {
     if (auth.isAdmin) return
     event.preventDefault()
 }
 
-onMounted(async () => {
-    if (!auth.isAdmin) return
-    supplierList.value = await getSupplierList()
-})
 </script>

frontend/pages/admin/user/list.vue

@@ -11,29 +11,11 @@
 
     </div>
 
-    <div>
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Username</div>
-                <div>Role</div>
-            </div>
-            <div
-                v-for="user in userList"
-                :key="user.id"
-                class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t items-center"
-                role="button"
-                tabindex="0"
-                @click="goToUser(user.id)"
-            >
-                <div>
-                    {{ user.username }}
-                </div>
-                <div>
-                    {{ getRoleLabels(user.roles) }}
-                </div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="admin/users"
+        @row-click="onUserRowClick"
+    />
 </template>
 
 
@@ -42,29 +24,21 @@ definePageMeta({
     layout: 'default'
 })
 
-import type {UserData} from "~/services/dto/user-data";
-import {getAdminUsers} from "~/services/auth";
 import {ROLE} from "~/utils/constants";
+import type {ColumnConfig, Row} from "~/services/datatable";
+import {formatRoleLabels} from "~/utils/datatable-formatters";
 
-const userList = ref<UserData[]>([])
 const router = useRouter()
 const roleLabelByValue = new Map(ROLE.map((role) => [role.value, role.label]))
 
-const goToUser = (id: number) => {
+const columns: ColumnConfig[] = [
+    { key: "username", label: "Username" },
+    { key: "roles", label: "Role", format: (value) => formatRoleLabels(value, roleLabelByValue) },
+]
+
+const onUserRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
     router.push(`/admin/user/${id}`)
 }
-
-const getRoleLabels = (roles?: string[]) => {
-    if (!roles || roles.length === 0) {
-        return ' ---'
-    }
-
-    return roles
-        .map((role) => roleLabelByValue.get(role) ?? role)
-        .join(', ')
-}
-
-onMounted(async () => {
-    userList.value = await getAdminUsers()
-})
 </script>

frontend/pages/datatable.vue

@@ -1,19 +0,0 @@
-<template>
-    <UiDataTable
-        :columns="columns"
-        url="receptions"
-        :items-per-page="2"
-    />
-</template>
-
-<script setup lang="ts">
-const columns = [
-    {key: 'identificationNumber', label: 'Numero'},
-    {key: 'receptionDate', label: 'Date de livraison'},
-    {key: 'supplier', label: 'Fournisseur'},
-    {key: 'address.fullAddress', label: 'Adresse'},
-    {key: 'receptionType', label: 'Type'},
-    {key: 'weights', label: 'Poids', format: formatWeights}
-]
-</script>
-

frontend/pages/reception/finish-reception.vue

@@ -14,6 +14,12 @@
 
 <script setup lang="ts">
 
+import {formatWeights} from "~/utils/datatable-formatters";
+
+type ReceptionRow = {
+    id?: number | string
+}
+
 const router = useRouter()
 const columns = [
     {key: 'identificationNumber', label: 'Numero'},
@@ -23,16 +29,9 @@ const columns = [
     {key: 'receptionType', label: 'Type'},
     {key: 'weights', label: 'Poids', format: formatWeights}
 ]
-type ReceptionRow = {
-    id?: number | string
-}
 const goToReception = (row: ReceptionRow) => {
     const id = Number(row?.id)
     if (!Number.isFinite(id)) return
     router.push(`/reception/update/${id}`)
 }
-
-onMounted(async () => {
-    receptionList.value = await getReceptionList(true)
-})
 </script>

frontend/pages/reception/waiting-reception.vue

@@ -5,47 +5,34 @@
             <h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions en attente</h1>
         </div>
     </div>
-
-    <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16">
-            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Fournisseur</div>
-                <div>Adresse</div>
-                <div>Type réception</div>
-                <div>Transporteur</div>
-                <div>Immatriculation</div>
-            </div>
-            <div
-                v-for="reception in receptionList"
-                :key="reception.id"
-                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToReception(reception.id)"
-                @keydown.enter="goToReception(reception.id)"
-            >
-                <div>{{ reception.supplier?.name }}</div>
-                <div>{{ reception.address?.fullAddress }}</div>
-                <div>{{ reception.receptionType?.label }}</div>
-                <div>{{ reception.carrier?.name }}</div>
-                <div>{{ reception.licensePlate }}</div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="receptions"
+        :query="{ isValid: false }"
+        @row-click="goToReception"
+    />
 </template>
 
 <script setup lang="ts">
-import type {ReceptionData} from "~/services/dto/reception-data";
-import {getReceptionList} from "~/services/reception";
-
-const receptionList = ref<ReceptionData[]>()
 const router = useRouter()
 
-const goToReception = (id: number) => {
+
+
+const columns = [
+    {key: 'supplier', label: 'Fournisseur'},
+    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'receptionType', label: 'Type'},
+    {key: 'carrier', label: 'Transporteur'},
+    {key: 'licensePlate', label: 'Immatriculation'},
+]
+
+
+type ReceptionRow = {
+    id?: number | string
+}
+const goToReception = (row: ReceptionRow) => {
+    const id = Number(row?.id)
+    if (!Number.isFinite(id)) return
         router.push(`/reception/${id}`)
 }
-
-onMounted(async () => {
-    receptionList.value = await getReceptionList(false)
-})
 </script>

frontend/pages/shipment/finish-shipment.vue

@@ -13,10 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import type {ShipmentData} from "~/services/dto/shipment-data";
-import {getShipmentList} from "~/services/shipment";
+import {formatBovinShipments, formatWeights} from "~/utils/datatable-formatters";
 
-const shipmentList = ref<ShipmentData[]>()
 const router = useRouter()
 const columns = [
     {key: 'identificationNumber', label: 'Numero'},

frontend/pages/shipment/waiting-shipment.vue

@@ -5,69 +5,34 @@
             <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions en attente</h1>
         </div>
     </div>
-
-    <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Client</div>
-                <div>Adresse</div>
-                <div>Type d'expéditions</div>
-                <div>Transporteur</div>
-                <div>Immatriculation</div>
-            </div>
-            <div
-                v-for="shipment in shipmentList"
-                :key="shipment.id"
-                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToShipment(shipment.id)"
-                @keydown.enter="goToShipment(shipment.id)"
-            >
-                <div>{{ shipment.customer?.label }}</div>
-                <div>{{ shipment.address?.fullAddress }}</div>
-                <div>
-                    <template v-if="formatBovinShipmentLines(shipment).length">
-                        <div
-                            v-for="(line, index) in formatBovinShipmentLines(shipment)"
-                            :key="index"
-                            class="leading-5"
-                        >
-                            {{ line }}
-                        </div>
-                    </template>
-                </div>
-                <div>{{ shipment.carrier?.name }}</div>
-                <div>{{ shipment.licencePlate }}</div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="shipments"
+        :query="{ isValid: false }"
+        @row-click="goToShipment"
+    />
 </template>
 
 <script setup lang="ts">
+import {formatBovinShipments} from "~/utils/datatable-formatters";
 
-import type {ShipmentData} from "~/services/dto/shipment-data";
-import {getShipmentList} from "~/services/shipment";
-
-const shipmentList = ref<ShipmentData[]>()
 const router = useRouter()
 
-const goToShipment = (id: number) => {
-    router.push(`/shipment/${id}`)
-}
-const formatBovinShipmentLines = (shipment: ShipmentData) => {
-    if (!shipment.bovinShipments?.length) {
-        return []
-    }
-    return shipment.bovinShipments.map((entry) => {
-        const label = typeof entry.shipmentType === 'string'
-            ? entry.shipmentType
-            : entry.shipmentType?.label
-        return `${label ?? '—'} : ${entry.nbBovinSend ?? '—'}`
-    })
+const columns = [
+    {key: 'customer', label: 'Client'},
+    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'bovinShipments', label: 'Type d\'expéditions', format:formatBovinShipments},
+    {key: 'carrier', label: 'Transporteur'},
+    {key: 'Plate', label: 'Immatriculation'},
+]
+
+type ReceptionRow = {
+    id?: number | string
 }
 
-onMounted(async () => {
-    shipmentList.value = await getShipmentList(false)
-})
+const goToShipment = (row: ReceptionRow) => {
+    const id = Number(row?.id)
+    if (!Number.isFinite(id)) return
+    router.push(`/shipment/${id}`)
+}
 </script>

frontend/services/datatable.ts

@@ -0,0 +1,18 @@
+export type Row = Record<string, unknown>
+
+export type ColumnConfig = {
+    key: string
+    label?: string
+    format?: (value: unknown, row: Row) => string
+}
+type HydraCollection<T> = {
+    'hydra:member': T[]
+    'hydra:totalItems': number
+}
+export type AnyCollection<T> = HydraCollection<T> & {
+    member?: T[]
+    items?: T[]
+    totalItems?: number
+}
+
+export type PaginationItem = number | '...'

frontend/utils/datatable-formatters.ts

@@ -4,7 +4,7 @@ export const formatBovinShipments = (value: unknown): string => {
         const label = item?.shipmentType?.label ?? item?.shipmentType?.code ??
             'Type inconnu'
         const qty = item?.nbBovinSend ?? '-'
-        return `${label} (${qty})`
+        return `${label} : ${qty}`
     }).join(', ')
 }
 
@@ -13,29 +13,53 @@ export const formatWeights = (value: unknown): string => {
 
     return value
         .map((item: any) => {
-            const type = item?.type === 'tare'
-                ? 'Poids à vide'
-                : item?.type === 'gross'
-                    ? 'Poids à plein'
-                    : (item?.type ?? 'Poids')
-
+            const type = item?.type === 'tare' ? 'Poids à vide': item?.type === 'gross' ? 'Poids à plein': (item?.type ?? 'Poids')
             const weight = item?.weight ?? '-'
             return `${type}: ${weight}`
         })
+        .join('\n ')
+}
+
+export const formatRoleLabels = (
+    value: unknown,
+    roleLabelByValue: Map<string, string>,
+): string => {
+    if (!Array.isArray(value) || value.length === 0) {
+        return ' - '
+    }
+
+    return value
+        .map((role) => {
+            const key = String(role)
+            return roleLabelByValue.get(key) ?? key
+        })
         .join(', ')
 }
 
-export const formatPelletBuildings = (value: unknown): string => {
-    if (!Array.isArray(value) || value.length === 0) return '-'
+export const formatAddresses = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) {
+        return " - "
+    }
+
+    if (typeof value[0] === 'string') {
+        return 'Adresses non chargées'
+    }
 
     return value
-        .map((item: any) => {
-            const pelletLabel =
-                item?.pelletType?.label ?? item?.pelletType?.code ?? 'Granule inconnu'
-            const buildingLabel =
-                item?.building?.label ?? item?.building?.code ?? 'Bâtiment inconnu'
+        .map((item) => {
+            if (!item || typeof item !== 'object') return '-'
+            const address = item as Record<string, unknown>
+            const street = String(address.street ?? '').trim()
+            const street2 = String(address.street2 ?? '').trim()
+            const postalCode = String(address.postalCode ?? '').trim()
+            const city = String(address.city ?? '').trim()
+            const countryCode = String(address.countryCode ?? '').trim().toUpperCase()
 
-            return `${pelletLabel} : ${buildingLabel}`
+            const firstLine = [street, street2].filter(Boolean).join(', ')
+            const secondLine = [postalCode, city].filter(Boolean).join(' ')
+            const finalLine = [firstLine, secondLine, countryCode].filter(Boolean).join(', ')
+
+            return finalLine || '-'
         })
         .join('\n')
 }

src/Entity/Reception.php

@@ -5,6 +5,7 @@ declare(strict_types=1);
 namespace App\Entity;
 
 use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
 use ApiPlatform\Metadata\ApiFilter;
 use ApiPlatform\Metadata\ApiProperty;
 use ApiPlatform\Metadata\ApiResource;
@@ -29,6 +30,7 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
 #[ORM\HasLifecycleCallbacks]
 #[ORM\Table(name: 'reception')]
 #[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
+#[ApiFilter(SearchFilter::class, properties: ['licensePlate' => 'exact'])]
 #[ApiResource(
     operations: [
         new Get(