From 43213bc6d65b3916360525d7dfd74d043d03e1eb Mon Sep 17 00:00:00 2001
From: Matteo <matteo@yuno.malio.fr>
Date: Thu, 12 Feb 2026 09:42:54 +0000
Subject: [PATCH] =?UTF-8?q?[#324]Cr=C3=A9ation=20d'une=20page=20d'administ?=
 =?UTF-8?q?ration=20:=20listing=20des=20customers=20(!24)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

| 324 | Création d'une page d'administration : listing des customers |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

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

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/24
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: Matteo <matteo@yuno.malio.fr>
Co-committed-by: Matteo <matteo@yuno.malio.fr>
---
 CHANGELOG.md                                  |   1 +
 frontend/layouts/admin.vue                    |   3 +
 frontend/pages/admin/customer/[[id]].vue      |  12 ++
 .../pages/admin/customer/customer-list.vue    | 112 ++++++++++++++++++
 4 files changed, 128 insertions(+)
 create mode 100644 frontend/pages/admin/customer/[[id]].vue
 create mode 100644 frontend/pages/admin/customer/customer-list.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b4eff4..49ccce5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ Ajouter dans le fichier .env du frontend
 * [#313] Admin modification creation fournisseur
 * [#275] Lister les expéditions en attente
 * [#276] Lister les expéditions terminées
+* [#324] Creation page admin listing clients
 
 ### Changed
 
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index b534cf4..d43521a 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -36,6 +36,9 @@
                     <NuxtLink to="/admin/user/list">
                         Utilisateurs
                     </NuxtLink>
+                    <NuxtLink to="/admin/customer/customer-list">
+                        Client
+                    </NuxtLink>
                 </div>
 
                 <div class="p-4">
diff --git a/frontend/pages/admin/customer/[[id]].vue b/frontend/pages/admin/customer/[[id]].vue
new file mode 100644
index 0000000..7a779c6
--- /dev/null
+++ b/frontend/pages/admin/customer/[[id]].vue
@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+definePageMeta({layout: "admin"})
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+</script>
diff --git a/frontend/pages/admin/customer/customer-list.vue b/frontend/pages/admin/customer/customer-list.vue
new file mode 100644
index 0000000..43a4073
--- /dev/null
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase">Client</h1>
+        <NuxtLink
+            to="/admin/customer"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            Ajouter
+        </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>Code</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 fournisseur.
+            </div>
+
+            <div v-for="customer in customerList" :key="customer.id">
+                <div
+                    v-if="!customer.addresses || customer.addresses.length === 0"
+                    class="grid grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToCustomer(customer.id)"
+                >
+                    <div class="truncate">{{ customer.label }}</div>
+                    <div class="truncate">{{ customer.code }}</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-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="goToCustomer(customer.id)"
+                    >
+                        <div class="truncate">
+                            {{ idx === 0 ? customer.label : "↳" }}
+                        </div>
+                        <div class="truncate">{{ idx === 0 ? customer.code : ""  }}</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="goToCustomer(customer.id)"
+                    >
+                        <div class="truncate">{{ customer.label }}</div>
+                        <div class="truncate">{{ customer.code }}</div>
+                        <div class="col-span-5 text-slate-400">
+                            Adresses non chargées
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <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 { useAuthStore } from "~/stores/auth"
+
+definePageMeta({ layout: "admin" })
+
+const customerList = ref<CustomerData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToCustomer = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/customer/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    customerList.value = await getCustomerList()
+})
+</script>