feat : creation du composant datatable (WIP)

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>