feat : creation du composant datatable (WIP)

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>