feat : creation du composant datatable (WIP)

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>
 

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>

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>