feat : creation du composant datatable (WIP)

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

@@ -1,53 +1,43 @@
 <template>
-
     <div class="flex items-center justify-between ">
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
-            <NuxtLink
-                to="/admin/carrier"
-                class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
-            >
-                <Icon name="mdi:plus" size="28"  />
-                Ajouter
-            </NuxtLink>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+        <NuxtLink
+            to="/admin/carrier"
+            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
+        >
+            <Icon name="mdi:plus" size="28"/>
+            Ajouter
+        </NuxtLink>
     </div>
 
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-2 gap-4 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 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>
-
+    <UiDataTable
+        :columns="columns"
+        url="carriers"
+        @row-click="onCarrierRowClick"
+    />
 </template>
 
 <script setup lang="ts">
-import type {CarrierData} from "~/services/dto/carrier-data";
-import {getCarrierList} from "~/services/carrier";
+import type {ColumnConfig, Row} from "~/services/datatable";
 
-const carrierList = ref<CarrierData[]>()
 const router = useRouter()
 
+const columns: ColumnConfig[] = [
+    {key: "name", label: "Label"},
+    {key: "code", label: "Code"},
+]
+
 const goToCarrier = (id: number) => {
     router.push(`/admin/carrier/${id}`)
 }
 
+const onCarrierRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
+        goToCarrier(id)
+}
+
 definePageMeta({
     layout: 'default'
 })
-
-onMounted(async () => {
-    carrierList.value = await getCarrierList(false)
-})
 </script>

frontend/pages/admin/customer/[[id]].vue

@@ -32,45 +32,15 @@
                 Ajouter
             </UiButton>
         </div>
-        <div class="overflow-x-auto mb-10">
-            <table class="w-full border-collapse">
-                <thead>
-                <tr class="text-left border-b border-gray-200">
-                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
-                </tr>
-                </thead>
-                <tbody>
-                <template v-if="form.addresses.length === 0">
-                    <tr>
-                        <td colspan="6" class="py-4 text-slate-400">
-                            Aucune adresse.
-                        </td>
-                    </tr>
-                </template>
-                <template v-else>
-                    <tr
-                        v-for="(address, index) in form.addresses"
-                        :key="address.id ?? index"
-                        class="border-b border-gray-100 hover:bg-slate-50"
-                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
-                        @click="goToEditAddress(address.id ?? null)"
-                    >
-                        <td class="py-3 pr-4">{{ address.label || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
-                    </tr>
-                </template>
-                </tbody>
-            </table>
-        </div>
+        <UiDataTable
+            class="mb-10"
+            :columns="addressColumns"
+            :url="customerId !== null ? `customers/${customerId}` : ''"
+            response-path="addresses"
+            :items-per-page="5"
+            :row-clickable="auth.isAdmin"
+            @row-click="onAddressRowClick"
+        />
     </form>
 </template>
 
@@ -78,6 +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 {useAuthStore} from "~/stores/auth"
 
 definePageMeta({layout: "default"})
@@ -100,6 +71,14 @@ const form = reactive<CustomerFormData>({
     email: "",
     addresses: [],
 })
+const addressColumns: ColumnConfig[] = [
+    {key: "label", label: "Libellé"},
+    {key: "street", label: "Rue"},
+    {key: "street2", label: "Complément"},
+    {key: "postalCode", label: "Code postal"},
+    {key: "city", label: "Ville"},
+    {key: "countryCode", label: "Pays"},
+]
 
 const goToAddAddress = () => {
     if (customerId.value === null || !auth.isAdmin) return
@@ -122,29 +101,16 @@ const goToEditAddress = (addressId: number | null) => {
     })
 }
 
+const onAddressRowClick = (row: Row) => {
+    const id = Number(row.id)
+    goToEditAddress(Number.isFinite(id) ? id : null)
+}
+
 const hydrateFromCustomer = (customer: CustomerData | null) => {
     if (!customer) return
     form.name = customer.name ?? ""
     form.phone = customer.phone ?? ""
     form.email = customer.email ?? ""
-    if (!Array.isArray(customer.addresses) || customer.addresses.length === 0) {
-        form.addresses = []
-        return
-    }
-    if (typeof customer.addresses[0] === "string") {
-        form.addresses = []
-        return
-    }
-
-    form.addresses = customer.addresses.map((address) => ({
-        id: address.id ?? null,
-        label: address.label ?? "",
-        street: address.street ?? "",
-        street2: address.street2 ?? null,
-        postalCode: address.postalCode ?? "",
-        city: address.city ?? "",
-        countryCode: address.countryCode ?? "",
-    }))
 }
 
 watch(

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

@@ -12,106 +12,48 @@
         </NuxtLink>
     </div>
 
-    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
-        <div class="max-h-96 overflow-y-auto">
-            <div
-                class="sticky top-0 z-10 grid grid-cols-8 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
-            >
-                <div>Nom</div>
-                <div>Téléphone</div>
-                <div>Email</div>
-                <div>Rue</div>
-                <div>Complément</div>
-                <div>Code Postal</div>
-                <div>Ville</div>
-                <div>Pays</div>
-            </div>
-
-            <div v-if="customerList.length === 0" class="px-4 py-6 text-slate-400">
-                Aucun client.
-            </div>
-
-            <div v-for="customer in customerList" :key="customer.id">
-                <div
-                    v-if="!customer.addresses || customer.addresses.length === 0"
-                    class="grid grid-cols-8 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
-                    @click="goToCustomer(customer.id)"
-                >
-                    <div class="truncate">{{ customer.name || "—" }}</div>
-                    <div class="truncate">{{ customer.phone || "—" }}</div>
-                    <div class="truncate">{{ customer.email || "—" }}</div>
-                    <div class="col-span-1">Pas d'adresse</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                </div>
-
-                <template v-else-if="customer.addresses.length > 0">
-                    <div
-                        v-for="(address, idx) in customer.addresses"
-                        :key="address.id ?? `${customer.id}-${idx}-${address.street}-${address.postalCode}`"
-                        class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
-                        @click="goToCustomer(customer.id)"
-                    >
-                        <div class="truncate">
-                            {{ idx === 0 ? (customer.name || "—") : "↳" }}
-                        </div>
-                        <div class="truncate">{{ idx === 0 ? (customer.phone || "—") : ""  }}</div>
-                        <div class="truncate">{{ idx === 0 ? (customer.email || "—") : ""  }}</div>
-                        <div class="truncate">{{ address.street || "—" }}</div>
-                        <div class="truncate">{{ address.street2 || "—" }}</div>
-                        <div>{{ address.postalCode || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
-                    </div>
-                </template>
-
-                <template v-else>
-                    <div
-                        class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        @click="goToCustomer(customer.id)"
-                    >
-                        <div class="truncate">{{ customer.name || "—" }}</div>
-                        <div class="truncate">{{ customer.phone || "—" }}</div>
-                        <div class="truncate">{{ customer.email || "—" }}</div>
-                        <div class="col-span-5 text-slate-400">
-                            Adresses non chargées
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        v-if="auth.isAdmin"
+        :columns="columns"
+        url="customers"
+        @row-click="onCustomerRowClick"
+    />
     <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
         Accès réservé aux administrateurs.
     </div>
 </template>
 
 <script setup lang="ts">
-import { getCustomerList } from "~/services/customer"
-import type { CustomerData } from "~/services/dto/customer-data"
+import type { ColumnConfig, Row } from "~/services/datatable"
+import { formatAddresses } from "~/utils/datatable-formatters"
 import { useAuthStore } from "~/stores/auth"
 
 definePageMeta({ layout: "default" })
 
-const customerList = ref<CustomerData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
 
+const columns: ColumnConfig[] = [
+    { key: "name", label: "Nom" },
+    { key: "phone", label: "Téléphone" },
+    { key: "email", label: "Email" },
+    { key: "addresses", label: "Adresses", format: formatAddresses  },
+]
+
 const goToCustomer = (id: number) => {
     if (!auth.isAdmin) return
     router.push(`/admin/customer/${id}`)
 }
 
+const onCustomerRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
+    goToCustomer(id)
+}
+
 const handleAddClick = (event: Event) => {
     if (auth.isAdmin) return
     event.preventDefault()
 }
 
-onMounted(async () => {
-    if (!auth.isAdmin) return
-    customerList.value = await getCustomerList()
-})
 </script>

frontend/pages/admin/supplier/[[id]].vue

@@ -32,45 +32,15 @@
                 Ajouter
             </UiButton>
         </div>
-        <div class="overflow-x-auto mb-10">
-            <table class="w-full border-collapse">
-                <thead>
-                <tr class="text-left border-b border-gray-200">
-                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
-                </tr>
-                </thead>
-                <tbody>
-                <template v-if="form.addresses.length === 0">
-                    <tr>
-                        <td colspan="6" class="py-4 text-slate-400">
-                            Aucune adresse.
-                        </td>
-                    </tr>
-                </template>
-                <template v-else>
-                    <tr
-                        v-for="(address, index) in form.addresses"
-                        :key="address.id ?? index"
-                        class="border-b border-gray-100 hover:bg-slate-50"
-                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
-                        @click="goToEditAddress(address.id ?? null)"
-                    >
-                        <td class="py-3 pr-4">{{ address.label || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
-                    </tr>
-                </template>
-                </tbody>
-            </table>
-        </div>
+        <UiDataTable
+            class="mb-10"
+            :columns="addressColumns"
+            :url="supplierId !== null ? `suppliers/${supplierId}` : ''"
+            response-path="addresses"
+            :items-per-page="5"
+            :row-clickable="auth.isAdmin"
+            @row-click="onAddressRowClick"
+        />
     </form>
 </template>
 
@@ -78,6 +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 {useAuthStore} from "~/stores/auth"
 
 definePageMeta({layout: "default"})
@@ -100,6 +71,14 @@ const form = reactive<SupplierFormData>({
     phone: "",
     addresses: [],
 })
+const addressColumns: ColumnConfig[] = [
+    {key: "label", label: "Libellé"},
+    {key: "street", label: "Rue"},
+    {key: "street2", label: "Complément"},
+    {key: "postalCode", label: "Code postal"},
+    {key: "city", label: "Ville"},
+    {key: "countryCode", label: "Pays"},
+]
 
 const goToAddAddress = () => {
     if (supplierId.value === null || !auth.isAdmin) return
@@ -124,29 +103,16 @@ const goToEditAddress = (addressId: number | null) => {
     })
 }
 
+const onAddressRowClick = (row: Row) => {
+    const id = Number(row.id)
+    goToEditAddress(Number.isFinite(id) ? id : null)
+}
+
 const hydrateFromSupplier = (supplier: SupplierData | null) => {
     if (!supplier) return
     form.name = supplier.name ?? ""
     form.email = supplier.email ?? ""
     form.phone = supplier.phone ?? ""
-    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
-        form.addresses = []
-        return
-    }
-    if (typeof supplier.addresses[0] === "string") {
-        form.addresses = []
-        return
-    }
-
-    form.addresses = supplier.addresses.map((address) => ({
-        id: address.id ?? null,
-        label: address.label ?? "",
-        street: address.street ?? "",
-        street2: address.street2 ?? null,
-        postalCode: address.postalCode ?? "",
-        city: address.city ?? "",
-        countryCode: address.countryCode ?? "",
-    }))
 }
 
 watch(

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

@@ -12,102 +12,47 @@
         </NuxtLink>
     </div>
 
-    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
-        <div class="max-h-96 overflow-y-auto">
-            <div
-                class="sticky top-0 z-10 grid grid-cols-7 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
-            >
-                <div>Nom</div>
-                <div>Mail</div>
-                <div>Rue</div>
-                <div>Complément</div>
-                <div>Code Postal</div>
-                <div>Ville</div>
-                <div>Pays</div>
-            </div>
-
-            <div v-if="supplierList.length === 0" class="px-4 py-6 text-slate-400">
-                Aucun fournisseur.
-            </div>
-
-            <div v-for="supplier in supplierList" :key="supplier.id">
-                <div
-                    v-if="!supplier.addresses || supplier.addresses.length === 0"
-                    class="grid grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
-                    @click="goToSupplier(supplier.id)"
-                >
-                    <div class="truncate">{{ supplier.name }}</div>
-                    <div class="truncate">{{ supplier.email }}</div>
-                    <div class="col-span-1">Pas d'adresse</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                    <div class="uppercase truncate">{{"—"}}</div>
-                </div>
-
-                <template v-else-if="supplier.addresses.length > 0">
-                    <div
-                        v-for="(address, idx) in supplier.addresses"
-                        :key="address.id ?? `${supplier.id}-${idx}-${address.street}-${address.postalCode}`"
-                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
-                        @click="goToSupplier(supplier.id)"
-                    >
-                        <div class="truncate">
-                            {{ idx === 0 ? supplier.name : "↳" }}
-                        </div>
-                        <div class="truncate">{{ idx === 0 ? supplier.email : ""  }}</div>
-                        <div class="truncate">{{ address.street || "—" }}</div>
-                        <div class="truncate">{{ address.street2 || "—" }}</div>
-                        <div>{{ address.postalCode || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
-                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
-                    </div>
-                </template>
-
-                <template v-else>
-                    <div
-                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        @click="goToSupplier(supplier.id)"
-                    >
-                        <div class="truncate">{{ supplier.name }}</div>
-                        <div class="truncate">{{ supplier.email }}</div>
-                        <div class="col-span-5 text-slate-400">
-                            Adresses non chargées
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        v-if="auth.isAdmin"
+        :columns="columns"
+        url="suppliers"
+        @row-click="onSupplierRowClick"
+    />
     <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
         Accès réservé aux administrateurs.
     </div>
 </template>
 
 <script setup lang="ts">
-import { getSupplierList } from "~/services/supplier"
-import type { SupplierData } from "~/services/dto/supplier-data"
+import type { ColumnConfig, Row } from "~/services/datatable"
+import {formatAddresses} from "~/utils/datatable-formatters"
 import { useAuthStore } from "~/stores/auth"
 
 definePageMeta({ layout: "default" })
 
-const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
 
+const columns: ColumnConfig[] = [
+    { key: "name", label: "Nom" },
+    { key: "email", label: "Mail" },
+    { key: "addresses", label: "Adresses",  format: formatAddresses },
+]
+
 const goToSupplier = (id: number) => {
     if (!auth.isAdmin) return
     router.push(`/admin/supplier/${id}`)
 }
 
+const onSupplierRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
+    goToSupplier(id)
+}
+
 const handleAddClick = (event: Event) => {
     if (auth.isAdmin) return
     event.preventDefault()
 }
 
-onMounted(async () => {
-    if (!auth.isAdmin) return
-    supplierList.value = await getSupplierList()
-})
 </script>

frontend/pages/admin/user/list.vue

@@ -11,29 +11,11 @@
 
     </div>
 
-    <div>
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Username</div>
-                <div>Role</div>
-            </div>
-            <div
-                v-for="user in userList"
-                :key="user.id"
-                class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t items-center"
-                role="button"
-                tabindex="0"
-                @click="goToUser(user.id)"
-            >
-                <div>
-                    {{ user.username }}
-                </div>
-                <div>
-                    {{ getRoleLabels(user.roles) }}
-                </div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="admin/users"
+        @row-click="onUserRowClick"
+    />
 </template>
 
 
@@ -42,29 +24,21 @@ definePageMeta({
     layout: 'default'
 })
 
-import type {UserData} from "~/services/dto/user-data";
-import {getAdminUsers} from "~/services/auth";
 import {ROLE} from "~/utils/constants";
+import type {ColumnConfig, Row} from "~/services/datatable";
+import {formatRoleLabels} from "~/utils/datatable-formatters";
 
-const userList = ref<UserData[]>([])
 const router = useRouter()
 const roleLabelByValue = new Map(ROLE.map((role) => [role.value, role.label]))
 
-const goToUser = (id: number) => {
+const columns: ColumnConfig[] = [
+    { key: "username", label: "Username" },
+    { key: "roles", label: "Role", format: (value) => formatRoleLabels(value, roleLabelByValue) },
+]
+
+const onUserRowClick = (row: Row) => {
+    const id = Number(row.id)
+    if (!Number.isFinite(id)) return
     router.push(`/admin/user/${id}`)
 }
-
-const getRoleLabels = (roles?: string[]) => {
-    if (!roles || roles.length === 0) {
-        return ' ---'
-    }
-
-    return roles
-        .map((role) => roleLabelByValue.get(role) ?? role)
-        .join(', ')
-}
-
-onMounted(async () => {
-    userList.value = await getAdminUsers()
-})
 </script>