feat : creation du composant datatable (WIP)

2026-02-18 14:54:18 +01:00
parent c229d0ab62
commit 32fe51caaa
20 changed files with 287 additions and 64 deletions
--- a/frontend/pages/admin/carrier/carrier-list.vue
+++ b/frontend/pages/admin/carrier/carrier-list.vue
@@ -18,7 +18,7 @@
 </template>

 <script setup lang="ts">
-import type {ColumnConfig, Row} from "~/services/datatable";
+import type {ColumnConfig, Row} from "~/services/dto/datatable-data";

 const router = useRouter()

--- a/frontend/pages/admin/customer/[[id]].vue
+++ b/frontend/pages/admin/customer/[[id]].vue
@@ -48,7 +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 type {ColumnConfig, Row} from "~/services/dto/datatable-data"
 import {useAuthStore} from "~/stores/auth"

 definePageMeta({layout: "default"})
--- a/frontend/pages/admin/customer/customer-list.vue
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -24,7 +24,7 @@
 </template>

 <script setup lang="ts">
-import type { ColumnConfig, Row } from "~/services/datatable"
+import type { ColumnConfig, Row } from "~/services/dto/datatable-data"
 import { formatAddresses } from "~/utils/datatable-formatters"
 import { useAuthStore } from "~/stores/auth"

@@ -34,7 +34,7 @@ const router = useRouter()
 const auth = useAuthStore()

 const columns: ColumnConfig[] = [
-    { key: "name", label: "Nom" },
+    { key: "name", label: "Nom", isSearchable:true},
    { key: "phone", label: "Téléphone" },
    { key: "email", label: "Email" },
    { key: "addresses", label: "Adresses", format: formatAddresses  },
--- a/frontend/pages/admin/supplier/[[id]].vue
+++ b/frontend/pages/admin/supplier/[[id]].vue
@@ -48,7 +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 type {ColumnConfig, Row} from "~/services/dto/datatable-data"
 import {useAuthStore} from "~/stores/auth"

 definePageMeta({layout: "default"})
--- a/frontend/pages/admin/supplier/supplier-list.vue
+++ b/frontend/pages/admin/supplier/supplier-list.vue
@@ -24,7 +24,7 @@
 </template>

 <script setup lang="ts">
-import type { ColumnConfig, Row } from "~/services/datatable"
+import type { ColumnConfig, Row } from "~/services/dto/datatable-data"
 import {formatAddresses} from "~/utils/datatable-formatters"
 import { useAuthStore } from "~/stores/auth"

@@ -34,7 +34,7 @@ const router = useRouter()
 const auth = useAuthStore()

 const columns: ColumnConfig[] = [
-    { key: "name", label: "Nom" },
+    { key: "name", label: "Nom", isSearchable:true },
    { key: "email", label: "Mail" },
    { key: "addresses", label: "Adresses",  format: formatAddresses },
 ]
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -25,7 +25,7 @@ definePageMeta({
 })

 import {ROLE} from "~/utils/constants";
-import type {ColumnConfig, Row} from "~/services/datatable";
+import type {ColumnConfig, Row} from "~/services/dto/datatable-data";
 import {formatRoleLabels} from "~/utils/datatable-formatters";

 const router = useRouter()
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -5,12 +5,12 @@
        <card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
        <card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
        <card-link label="PLAN DE SITE" link="/" iconName="material-symbols:warehouse-outline-rounded" />
-        <card-link link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
+        <card-link label="" link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
            <template #label>
                Réceptions<br>EN ATTENTE
            </template>
        </card-link>
-        <card-link link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container">
+        <card-link label=""  link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container">
            <template #label>
                EXPÉDITIONS<br>EN ATTENTE
            </template>
@@ -18,7 +18,7 @@
        <card-link label="CASES" link="/" iconName="material-symbols:bottom-sheets-outline" />
        <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
        <card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
-        <card-link link="/" iconName="mdi:cow">
+        <card-link label=""  link="/" iconName="mdi:cow">
            <template #label>
                PASSEPORT<br>DU BOVIN
            </template>
--- a/frontend/pages/reception/finish-reception.vue
+++ b/frontend/pages/reception/finish-reception.vue
@@ -7,6 +7,7 @@
    <UiDataTable
        :columns="columns"
        url="receptions"
+        class="ps-20"
        :query="{ isValid: true }"
        @row-click="goToReception"
    />
@@ -22,13 +23,14 @@ type ReceptionRow = {

 const router = useRouter()
 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}
+    { key: 'identificationNumber', label: 'Numero', isSearchable:true },
+    { key: 'receptionDate', label: 'Date de livraison', isSearchable: true, type: 'date' },
+    { key: 'supplier.name', label: 'Fournisseur', isSearchable: true },
+    { key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
+    { key: 'receptionType.label', label: 'Type', isSearchable: true, type:'selectTypeReception' },
+    { key: 'weights', label: 'Poids', format: formatWeights }
 ]
+
 const goToReception = (row: ReceptionRow) => {
    const id = Number(row?.id)
    if (!Number.isFinite(id)) return
--- a/frontend/pages/reception/waiting-reception.vue
+++ b/frontend/pages/reception/waiting-reception.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="flex items-center justify-between">
-        <div class="flex items-center gap-10">
+    <div class="flex items-center justify-start gap-10">
            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions en attente</h1>
-        </div>
    </div>
    <UiDataTable
        :columns="columns"
@@ -19,11 +17,11 @@ const router = useRouter()


 const columns = [
-    {key: 'supplier', label: 'Fournisseur'},
-    {key: 'address.fullAddress', label: 'Adresse'},
-    {key: 'receptionType', label: 'Type'},
-    {key: 'carrier', label: 'Transporteur'},
-    {key: 'licensePlate', label: 'Immatriculation'},
+    {key: 'supplier.name', label: 'Fournisseur', isSearchable:true},
+    { key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
+    {key: 'carrier.name', label: 'Transporteur', isSearchable:true},
+    {key: 'receptionType.label', label: 'Type', isSearchable:true, type:'selectTypeReception'},
+    {key: 'licensePlate', label: 'Immatriculation', isSearchable:true, type:'licensePlate'},
 ]


--- a/frontend/pages/shipment/finish-shipment.vue
+++ b/frontend/pages/shipment/finish-shipment.vue
@@ -17,10 +17,10 @@ import {formatBovinShipments, formatWeights} from "~/utils/datatable-formatters"

 const router = useRouter()
 const columns = [
-    {key: 'identificationNumber', label: 'Numero'},
-    {key: 'shipmentDate', label: 'Date de livraison'},
-    {key: 'customer', label: 'Client'},
-    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'identificationNumber', label: 'Numero',isSearchable:true},
+    {key: 'shipmentDate', label: 'Date de livraison',isSearchable:true, type:'date'},
+    {key: 'customer.name', label: 'Client',isSearchable:true},
+    {key: 'address.fullAddress', label: 'Adresse',isSearchable:true},
    {key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
    {key: 'weights', label: 'Poids', format: formatWeights}
 ]
--- a/frontend/pages/shipment/waiting-shipment.vue
+++ b/frontend/pages/shipment/waiting-shipment.vue
@@ -19,11 +19,11 @@ import {formatBovinShipments} from "~/utils/datatable-formatters";
 const router = useRouter()

 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'},
+    {key: 'customer.name', label: 'Client', isSearchable:true},
+    {key: 'address.fullAddress', label: 'Adresse', isSearchable:true},
+    {key: 'carrier.name', label: 'Transporteur', isSearchable:true},
+    {key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
+    {key: 'licencePlate', label: 'Immatriculation', isSearchable:true},
 ]

 type ReceptionRow = {