feat : creation du composant datatable (WIP)

2026-02-16 16:05:04 +01:00
parent d16a81630c
commit 316a20c43a
7 changed files with 358 additions and 130 deletions
--- a/config/packages/api_platform.yaml
+++ b/config/packages/api_platform.yaml
@@ -3,6 +3,8 @@ api_platform:
    version: 1.0.0
    defaults:
        stateless: true
+        pagination_client_items_per_page: true
+        pagination_maximum_items_per_page: 100
        cache_headers:
            vary: ['Content-Type', 'Authorization', 'Origin']
    formats:
--- a/config/reference.php
+++ b/config/reference.php
@@ -1,7 +1,5 @@
 <?php

-declare(strict_types=1);
-
 // This file is auto-generated and is for apps only. Bundles SHOULD NOT rely on its content.

 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
@@ -1472,7 +1470,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
 *     mercure?: bool|array{
 *         enabled?: bool|Param, // Default: false
 *         hub_url?: scalar|Param|null, // The URL sent in the Link HTTP header. If not set, will default to the URL for MercureBundle's default hub. // Default: null
- *         include_type?: bool|Param, // Always include @var in updates (including delete ones). // Default: false
+ *         include_type?: bool|Param, // Always include @type in updates (including delete ones). // Default: false
 *     },
 *     messenger?: bool|array{
 *         enabled?: bool|Param, // Default: false
--- a/frontend/components/ui/UiDataTable.vue
+++ b/frontend/components/ui/UiDataTable.vue
@@ -1,22 +1,268 @@
 <template>
-    <table class="w-full border-collapse border border-slate-300">
-        <thead>
-        <tr>
-            <th
-                v-for="(column, index) in columns"
-                :key="index"
-                class="border border-slate-300 px-3 py-2 text-left"
-            >
-                {{ column }}
-            </th>
-        </tr>
-        </thead>
-    </table>
+    <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">
+            <tr>
+                <th
+                    v-for="column in normalizedColumns"
+                    :key="column.key"
+                    class="border border-slate-300 px-3 py-2 text-left"
+                >
+                    <span>{{ column.label }}</span>
+                </th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-if="loading">
+                <td
+                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
+                    :colspan="normalizedColumns.length || 1"
+                >
+                    Chargement...
+                </td>
+            </tr>
+            <tr v-else-if="rows.length === 0">
+                <td
+                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
+                    :colspan="normalizedColumns.length || 1"
+                >
+                    Aucune donnée
+                </td>
+            </tr>
+            <template v-else>
+                <tr
+                    v-for="(row, rowIndex) in rows"
+                    :key="rowIndex"
+                    class="cursor-pointer"
+                    @click="onRowClick(row)"
+                >
+                    <td
+                        v-for="column in normalizedColumns"
+                        :key="column.key"
+                        class="border border-slate-300 px-2 py-2 whitespace-pre-line"
+                    >
+                        {{ formatColumnValue(row, column) }}
+                    </td>
+                </tr>
+            </template>
+            </tbody>
+        </table>
+
+        <div class="flex items-center justify-between">
+            <p class="text-sm text-slate-600">
+                {{ pageLabel }}
+            </p>
+            <div class="flex items-center gap-2 mt-4">
+                <button
+                    type="button"
+                    class="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="currentPage <= 1 || loading"
+                    @click="currentPage = currentPage - 1"
+                >
+                    Précédent
+                </button>
+                <button
+                    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'"
+                    :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"
+                    :disabled="currentPage >= totalPages || loading"
+                    @click="currentPage = currentPage + 1"
+                >
+                    Suivant
+                </button>
+            </div>
+        </div>
+    </div>
 </template>

 <script setup lang="ts">
-defineProps<{
-    columns: string[]
-    data?: any[]
+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
+})
+
+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 normalizedColumns = computed(() => {
+    if (props.columns.length > 0) {
+        return props.columns.map((column) => ({
+            key: column.key,
+            label: column.label ?? column.key,
+            format: column.format
+        }))
+    }
+
+    if (rows.value.length === 0) {
+        return []
+    }
+
+    return Object.keys(rows.value[0])
+        .filter((key) => !key.startsWith('@'))
+        .map((key) => ({
+            key,
+            label: key
+        }))
+})
+
+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
+
+    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)
+        .sort((a, b) => a - b)
+
+    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) {
+            items.push('...')
+        }
+        items.push(value)
+    }
+
+    return items
+})
+const pageLabel = computed(() => {
+    if (total.value === 0) {
+        return '0 resultat'
+    }
+    const start = (currentPage.value - 1) * props.itemsPerPage + 1
+    const end = Math.min(currentPage.value * props.itemsPerPage, total.value)
+    return `${start}-${end} sur ${total.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) {
+            currentPage.value = 1
+            return
+        }
+
+        await loadPage()
+    },
+    {immediate: true, deep: 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> {
+    loading.value = true
+
+    try {
+        const requestQuery: Record<string, unknown> = {
+            ...props.query,
+            page: currentPage.value,
+            itemsPerPage: props.itemsPerPage
+        }
+
+        const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {
+            headers: {
+                Accept: 'application/ld+json'
+            }
+        })
+
+        if (Array.isArray(response)) {
+            rows.value = response
+            total.value = response.length
+            return
+        }
+
+        const mappedRows = response['hydra:member'] ?? response.member ?? response.items ?? []
+        rows.value = Array.isArray(mappedRows) ? mappedRows : []
+        total.value = Number(response['hydra:totalItems'] ?? response.totalItems ?? rows.value.length)
+    } finally {
+        loading.value = false
+    }
+}
+
+function onRowClick(row: Row): void {
+    emit('rowClick', row)
+}
+
+// Lit une valeur imbriquée dans une ligne à partir d'un chemin de type "objet.sousObjet.cle".
+function readPath(source: Row, path: string): unknown {
+    return path.split('.').reduce<unknown>((acc, key) => (acc as Row | undefined)?.[key], source)
+}
+
+// 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]')
+    }
+    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 }
+): string {
+    const value = readPath(row, column.key)
+    if (column.format) {
+        return column.format(value, row)
+    }
+
+    return formatCell(value)
+}
 </script>
--- a/frontend/pages/datatable.vue
+++ b/frontend/pages/datatable.vue
@@ -1,10 +1,19 @@
 <template>
    <UiDataTable
-        :columns="rowsLabel"
+        :columns="columns"
+        url="receptions"
+        :items-per-page="2"
    />
 </template>
-<script setup lang="ts">

-const rowsLabel = ['Numéro', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids']
+<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>

--- a/frontend/pages/reception/finish-reception.vue
+++ b/frontend/pages/reception/finish-reception.vue
@@ -1,58 +1,34 @@
 <template>
    <div class="flex items-center justify-start gap-10 mt-16">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
-            <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
+        <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
+        <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
    </div>

-    <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Numéro</div>
-                <div>Date</div>
-                <div>Fournisseur</div>
-                <div>Adresse</div>
-                <div>Type réception</div>
-                <div>Poids</div>
-            </div>
-            <div
-                v-for="reception in receptionList"
-                :key="reception.id"
-                class="grid grid-cols-6 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)"
-            >
-                <div>{{ reception.identificationNumber}}</div>
-                <div>{{ reception.receptionDate}}</div>
-                <div>{{ reception.supplier?.name }}</div>
-                <div>{{ reception.address?.fullAddress }}</div>
-                <div>{{ reception.receptionType?.label }}</div>
-                <div>Plein : {{ formatWeighing(reception, 'gross') }} <br> Vide : {{ formatWeighing(reception, 'tare') }}</div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="receptions"
+        :query="{ isValid: true }"
+        @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 formatWeighing = (reception: ReceptionData, type: 'gross' | 'tare') => {
-    const entry = reception.weights?.find((weight) => weight.type === type)
-    if (!entry || entry.weight == null || entry.dsd == null) {
-        return '—'
-    }
-    return `${entry.weight} kg`
+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}
+]
+type ReceptionRow = {
+    id?: number | string
 }
-
-const goToReception = (id: number) => {
+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>
--- a/frontend/pages/shipment/finish-shipment.vue
+++ b/frontend/pages/shipment/finish-shipment.vue
@@ -4,44 +4,12 @@
        <h1 class="text-3xl font-bold uppercase">listes des expéditions finie</h1>
    </div>

-    <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Numéro</div>
-                <div>Date</div>
-                <div>Client</div>
-                <div>Adresse</div>
-                <div>Type d'expéditon</div>
-                <div>Poids</div>
-            </div>
-            <div
-                v-for="shipment in shipmentList"
-                :key="shipment
-               .id"
-                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goShipment(shipment.id)"
-            >
-                <div>{{ shipment.identificationNumber }}</div>
-                <div>{{ shipment.shipmentDate }}</div>
-                <div>{{ shipment.customer?.name }}</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>Vide : {{ formatWeighing(shipment, 'tare') }} <br>  Plein :{{ formatWeighing(shipment, 'gross') }}</div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="shipments"
+        :query="{ isValid: true }"
+        @row-click="goToShipment"
+    />
 </template>

 <script setup lang="ts">
@@ -50,32 +18,20 @@ import {getShipmentList} from "~/services/shipment";

 const shipmentList = ref<ShipmentData[]>()
 const router = useRouter()
-
-const formatWeighing = (shipment: ShipmentData, type: 'gross' | 'tare') => {
-    const entry = shipment.weights?.find((weight) => weight.type === type)
-    if (!entry || entry.weight == null || entry.dsd == null) {
-        return '—'
-    }
-    return `${entry.weight} kg`
+const columns = [
+    {key: 'identificationNumber', label: 'Numero'},
+    {key: 'shipmentDate', label: 'Date de livraison'},
+    {key: 'customer', label: 'Client'},
+    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
+    {key: 'weights', label: 'Poids', format: formatWeights}
+]
+type ReceptionRow = {
+    id?: number | string
 }
-
-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 goShipment = (id: number) => {
+const goToShipment = (row: ReceptionRow) => {
+    const id = Number(row?.id)
+    if (!Number.isFinite(id)) return
    router.push(`/shipment/update/${id}`)
 }
-
-onMounted(async () => {
-    shipmentList.value = await getShipmentList(true)
-})
 </script>
--- a/frontend/utils/datatable-formatters.ts
+++ b/frontend/utils/datatable-formatters.ts
@@ -0,0 +1,41 @@
+export const formatBovinShipments = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) return '-'
+    return value.map((item: any) => {
+        const label = item?.shipmentType?.label ?? item?.shipmentType?.code ??
+            'Type inconnu'
+        const qty = item?.nbBovinSend ?? '-'
+        return `${label} (${qty})`
+    }).join(', ')
+}
+
+export const formatWeights = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) return '-'
+
+    return value
+        .map((item: any) => {
+            const type = item?.type === 'tare'
+                ? 'Poids à vide'
+                : item?.type === 'gross'
+                    ? 'Poids à plein'
+                    : (item?.type ?? 'Poids')
+
+            const weight = item?.weight ?? '-'
+            return `${type}: ${weight}`
+        })
+        .join(', ')
+}
+
+export const formatPelletBuildings = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) return '-'
+
+    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'
+
+            return `${pelletLabel} : ${buildingLabel}`
+        })
+        .join('\n')
+}