feat: ajout du composant datatable sur tous les écrans (!48)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #48
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/admin/carrier/carrier-list.vue

@@ -1,51 +1,62 @@
 <template>
-
-    <div class="flex items-center justify-between ">
-            <h1 class="text-4xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+    <div class="flex items-center justify-between">
+        <h1 class="text-4xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+    </div>
+
+    <div class="mt-7 mb-11">
+        <UiDataTable
+            v-model:page="page"
+            v-model:per-page="perPage"
+            :columns="columns"
+            :items="items"
+            :total-items="totalItems"
+            :loading="loading"
+            row-clickable
+            @row-click="goToCarrier"
+        >
+            <template #header-name>
+                <UiTextInput v-model="filters.name" placeholder="Label" size="compact" />
+            </template>
+            <template #header-code>
+                <UiTextInput v-model="filters.code" placeholder="Code" size="compact" />
+            </template>
+        </UiDataTable>
     </div>
 
-        <div class="mt-7 border border-slate-200 mb-11 ">
-            <div class="grid grid-cols-2 gap-4 text-primary-700 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Label</div>
-                <div>Code</div>
-            </div>
-            <div
-                v-for="carrier in carrierList"
-                :key="carrier.id"
-                class="grid grid-cols-2 text-primary-700 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToCarrier(carrier.id)"
-                @keydown.enter="goToCarrier(carrier.id)"
-            >
-                <div>{{ carrier.name}}</div>
-                <div>{{ carrier.code }}</div>
-            </div>
-        </div>
     <div class="flex justify-center items-center">
         <NuxtLink
             to="/admin/carrier"
             class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
         >
-            <Icon name="mdi:plus" size="28"  />
+            <Icon name="mdi:plus" size="28" />
             Ajouter
         </NuxtLink>
     </div>
-
 </template>
 
 <script setup lang="ts">
-import type {CarrierData} from "~/services/dto/carrier-data";
-import {getCarrierList} from "~/services/carrier";
+import type { CarrierData } from '~/services/dto/carrier-data'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
-const carrierList = ref<CarrierData[]>()
 const router = useRouter()
 
-const goToCarrier = (id: number) => {
-    router.push(`/admin/carrier/${id}`)
+const { items, totalItems, page, perPage, filters, loading, reload } =
+    useDataTableServerState<CarrierData>(
+        'carriers',
+        {
+            name: '',
+            code: ''
+        }
+    )
+
+const columns = [
+    { key: 'name', label: 'Label' },
+    { key: 'code', label: 'Code' }
+]
+
+const goToCarrier = (carrier: CarrierData) => {
+    router.push(`/admin/carrier/${carrier.id}`)
 }
 
-onMounted(async () => {
-    carrierList.value = await getCarrierList(false)
-})
+onMounted(reload)
 </script>