feat : admin fournisseurs creation et modif (WIP)

frontend/components/address/add-address.vue

@@ -0,0 +1,238 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between gap-10">
+            <div>
+                <h1 class="text-3xl font-bold uppercase">
+                    {{ addressId ? "Modification d'une adresse" : "Ajout d'une adresse" }}
+                </h1>
+                <p v-if="entityName" class="text-sm text-slate-500 mt-1">
+                    {{ entityLabel }} : {{ entityName }}
+                </p>
+            </div>
+
+            <button
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                type="submit"
+                :disabled="isLoading || entityId === null"
+            >
+                {{ addressId ? "Sauvegarder" : "Ajouter" }}
+            </button>
+        </div>
+
+        <div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16 mt-10">
+            <UiTextInput id="address-label" v-model="form.label" label="Libellé" />
+            <UiTextInput id="address-street" v-model="form.street" label="Rue" />
+            <UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
+            <UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
+            <UiTextInput id="address-city" v-model="form.city" label="Ville" />
+            <UiTextInput id="address-country" v-model="form.countryCode" label="Pays" />
+        </div>
+
+        <p v-if="errorMsg" class="text-red-600 mt-4">{{ errorMsg }}</p>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue"
+import { createAddress, getAddress, updateAddress, type AddressPayload } from "~/services/address"
+import { getSupplier, updateSupplier } from "~/services/supplier"
+import type { SupplierPayload } from "~/services/dto/supplier-data"
+
+const route = useRoute()
+const router = useRouter()
+const { $i18n } = useNuxtApp()
+
+type AddressOwner = {
+    id: number
+    name?: string | null
+    email?: string | null
+    phone?: string | null
+    addresses?: unknown
+}
+
+type AddressOwnerAdapter = {
+    loadEntity: (id: number) => Promise<AddressOwner>
+    updateEntity: (id: number, payload: unknown) => Promise<unknown>
+    buildUpdatePayload: (owner: AddressOwner | null, addresses: string[]) => unknown
+    getEntityName: (owner: AddressOwner | null) => string
+    normalizeAddresses: (addresses: AddressOwner["addresses"]) => string[]
+}
+
+const props = defineProps<{
+    entityType?: "supplier" | "customer"
+    entityId?: number | null
+    returnPath?: string
+    adapter?: Partial<AddressOwnerAdapter>
+}>()
+
+const resolveId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+const entityType = computed<"supplier" | "customer">(() => {
+    if (props.entityType) return props.entityType
+    const queryType = route.query.entityType
+    if (queryType === "customer" || queryType === "supplier") return queryType
+    const path = route.path
+    if (path.includes("/customer/")) return "customer"
+    return "supplier"
+})
+
+const entityId = computed(() => {
+    if (props.entityId !== undefined) return props.entityId ?? null
+    const typeKey = `${entityType.value}Id`
+    return resolveId(route.query[typeKey]) ?? resolveId(route.query.entityId)
+})
+const addressId = computed(() => resolveId(route.query.addressId))
+
+const entity = ref<AddressOwner | null>(null)
+const entityName = computed(() => activeAdapter.value.getEntityName(entity.value))
+const entityLabel = computed(() => (entityType.value === "customer" ? "Client" : "Fournisseur"))
+
+const isLoading = ref(false)
+const errorMsg = ref<string | null>(null)
+
+const form = reactive<AddressPayload>({
+    label: "",
+    street: "",
+    street2: null,
+    postalCode: "",
+    city: "",
+    countryCode: "",
+})
+
+const defaultSupplierAdapter: AddressOwnerAdapter = {
+    loadEntity: getSupplier,
+    updateEntity: updateSupplier,
+    buildUpdatePayload: (owner, addresses) => ({
+        name: owner?.name ?? "",
+        email: owner?.email ?? null,
+        phone: owner?.phone ?? null,
+        addresses,
+    } satisfies SupplierPayload),
+    getEntityName: (owner) => owner?.name ?? "",
+    normalizeAddresses: (value) => {
+        if (!Array.isArray(value) || value.length === 0) return []
+        if (typeof value[0] === "string") {
+            return value.filter((item): item is string => typeof item === "string")
+        }
+        return value
+            .map((address) =>
+                address && typeof address === "object" && "id" in address && address.id
+                    ? `/api/addresses/${address.id}`
+                    : null
+            )
+            .filter((item): item is string => Boolean(item))
+    },
+}
+
+const activeAdapter = computed<AddressOwnerAdapter>(() => ({
+    ...defaultSupplierAdapter,
+    ...props.adapter,
+}))
+
+watch(
+    () => [entityId.value, addressId.value] as const,
+    async ([entityIdValue, addressIdValue]) => {
+        if (entityIdValue === null) {
+            entity.value = null
+            return
+        }
+        isLoading.value = true
+        try {
+            entity.value = await activeAdapter.value.loadEntity(entityIdValue)
+            if (addressIdValue !== null) {
+                const address = await getAddress(addressIdValue)
+                form.label = address.label ?? ""
+                form.street = address.street ?? ""
+                form.street2 = address.street2 ?? null
+                form.postalCode = address.postalCode ?? ""
+                form.city = address.city ?? ""
+                form.countryCode = address.countryCode ?? ""
+            } else {
+                form.label = ""
+                form.street = ""
+                form.street2 = null
+                form.postalCode = ""
+                form.city = ""
+                form.countryCode = ""
+            }
+        } finally {
+            isLoading.value = false
+        }
+    },
+    { immediate: true }
+)
+
+async function validate() {
+    if (isLoading.value) return
+    if (entityId.value === null) {
+        errorMsg.value = String($i18n.t("errors.address.entityNotFound"))
+        return
+    }
+    errorMsg.value = null
+    isLoading.value = true
+
+    try {
+        if (!entity.value) {
+            entity.value = await activeAdapter.value.loadEntity(entityId.value)
+        }
+
+        const payload: AddressPayload = {
+            label: form.label.trim() || entityName.value || "Adresse",
+            street: form.street.trim(),
+            street2: form.street2?.trim() || null,
+            postalCode: form.postalCode.trim(),
+            city: form.city.trim(),
+            countryCode: form.countryCode.trim().toUpperCase(),
+        }
+        if (!payload.street) {
+            errorMsg.value = String($i18n.t("errors.address.streetRequired"))
+            return
+        }
+        if (!payload.postalCode) {
+            errorMsg.value = String($i18n.t("errors.address.postalCodeRequired"))
+            return
+        }
+        if (!payload.city) {
+            errorMsg.value = String($i18n.t("errors.address.cityRequired"))
+            return
+        }
+        if (payload.countryCode.length !== 2) {
+            errorMsg.value = String($i18n.t("errors.address.countryCodeInvalid"))
+            return
+        }
+
+        let updatedAddressId = addressId.value
+        if (addressId.value !== null) {
+            const updated = await updateAddress(addressId.value, payload)
+            updatedAddressId = updated.id
+        } else {
+            const created = await createAddress(payload)
+            updatedAddressId = created.id
+        }
+
+        if (updatedAddressId !== null) {
+            const existingAddresses = activeAdapter.value.normalizeAddresses(entity.value?.addresses ?? [])
+            const updatedAddresses = existingAddresses.includes(`/api/addresses/${updatedAddressId}`)
+                ? existingAddresses
+                : [...existingAddresses, `/api/addresses/${updatedAddressId}`]
+
+            const updatePayload = activeAdapter.value.buildUpdatePayload(entity.value, updatedAddresses)
+            await activeAdapter.value.updateEntity(entityId.value, updatePayload)
+        }
+        const returnPath =
+            props.returnPath ?? `/admin/${entityType.value}/${entityId.value}`
+        await router.push(returnPath)
+    } catch (e) {
+        const errorKey = addressId.value !== null ? "errors.address.update" : "errors.address.create"
+        errorMsg.value = String($i18n.t(errorKey))
+        throw e
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>

frontend/components/supplier/supplier-form.vue

@@ -14,16 +14,60 @@
             </button>
         </div>
 
-        <div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16">
+        <div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-10">
             <UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" />
             <UiTextInput id="supplier-email" v-model="form.email" label="Email" />
             <UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" />
+        </div>
 
-            <UiTextInput id="supplier-street" v-model="form.addresses[0].street" label="Rue" />
+        <div class="flex items-center justify-between mb-4">
-            <UiTextInput id="supplier-street2" v-model="form.addresses[0].street2" label="Complément" />
+            <h2 class="text-2xl font-bold uppercase">Adresse fournisseur</h2>
-            <UiTextInput id="supplier-postalCode" v-model="form.addresses[0].postalCode" label="Code postal" />
+            <button
-            <UiTextInput id="supplier-city" v-model="form.addresses[0].city" label="Ville" />
+                type="button"
-            <UiTextInput id="supplier-country" v-model="form.addresses[0].countryCode" label="Pays" />
+                class="text-sm uppercase bg-primary-500 text-white h-[40px] px-6"
+                :disabled="supplierId === null"
+                @click="goToAddAddress"
+            >
+                Ajouter
+            </button>
+        </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 cursor-pointer hover:bg-slate-50"
+                            @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>
 
         <p v-if="errorMsg" class="text-red-600 mt-4">{{ errorMsg }}</p>
@@ -33,14 +77,13 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from "vue"
 import { createSupplier, getSupplier, updateSupplier } from "~/services/supplier"
-import { createAddress, updateAddress, type AddressPayload } from "~/services/address"
 import type { SupplierData, SupplierFormData, SupplierPayload } from "~/services/dto/supplier-data"
-import type { AddressFormData } from "~/services/dto/address-data"
 
 definePageMeta({ layout: "admin" })
 
 const route = useRoute()
 const router = useRouter()
+const { $i18n } = useNuxtApp()
 
 const resolveId = (param: unknown) => {
     const idStr = Array.isArray(param) ? param[0] : param
@@ -54,23 +97,36 @@ const supplierId = computed(() => resolveId(route.params.id))
 const isLoading = ref(false)
 const errorMsg = ref<string | null>(null)
 
-const emptyAddress = (): AddressFormData => ({
-    id: null,
-    label: "",
-    street: "",
-    street2: null,
-    postalCode: "",
-    city: "",
-    countryCode: "",
-})
-
 const form = reactive<SupplierFormData>({
     name: "",
     email: "",
     phone: "",
-    addresses: [emptyAddress()],
+    addresses: [],
 })
 
+const goToAddAddress = () => {
+    if (supplierId.value === null) return
+    router.push({
+        path: "/admin/supplier/address",
+        query: {
+            supplierId: String(supplierId.value),
+            fromSupplier: "1",
+        },
+    })
+}
+
+const goToEditAddress = (addressId: number | null) => {
+    if (supplierId.value === null || addressId === null) return
+    router.push({
+        path: "/admin/supplier/address",
+        query: {
+            supplierId: String(supplierId.value),
+            addressId: String(addressId),
+            fromSupplier: "1",
+        },
+    })
+}
+
 const hydrateFromSupplier = (supplier: SupplierData | null) => {
     if (!supplier) return
 
@@ -78,18 +134,24 @@ const hydrateFromSupplier = (supplier: SupplierData | null) => {
     form.email = supplier.email ?? ""
     form.phone = supplier.phone ?? ""
 
-    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) return
+    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
-    const a0 = supplier.addresses[0]
+        form.addresses = []
+        return
+    }
+    if (typeof supplier.addresses[0] === "string") {
+        form.addresses = []
+        return
+    }
 
-    if (typeof a0 === "string") return
+    form.addresses = supplier.addresses.map((address) => ({
-
+        id: address.id ?? null,
-    form.addresses[0].id = a0.id ?? null
+        label: address.label ?? "",
-    form.addresses[0].label = a0.label ?? ""
+        street: address.street ?? "",
-    form.addresses[0].street = a0.street ?? ""
+        street2: address.street2 ?? null,
-    form.addresses[0].street2 = a0.street2 ?? null
+        postalCode: address.postalCode ?? "",
-    form.addresses[0].postalCode = a0.postalCode ?? ""
+        city: address.city ?? "",
-    form.addresses[0].city = a0.city ?? ""
+        countryCode: address.countryCode ?? "",
-    form.addresses[0].countryCode = a0.countryCode ?? ""
+    }))
 }
 
 watch(
@@ -114,36 +176,17 @@ async function validate() {
 
     try {
         const name = form.name.trim()
+        if (!name) {
+            errorMsg.value = String($i18n.t("errors.supplier.nameRequired"))
+            return
+        }
         const email = (form.email ?? "").trim() || null
         const phone = (form.phone ?? "").trim() || null
 
-        const a0 = form.addresses[0]
-
-        const label = a0.label.trim() || name || "Adresse"
-
-        const addressPayload: AddressPayload = {
-            label,
-            street: a0.street.trim(),
-            street2: a0.street2?.trim() || null,
-            postalCode: a0.postalCode.trim(),
-            city: a0.city.trim(),
-            countryCode: a0.countryCode.trim(),
-        }
-
-        let addressId: number
-        if (a0.id) {
-            const updated = await updateAddress(a0.id, addressPayload)
-            addressId = updated.id
-        } else {
-            const created = await createAddress(addressPayload)
-            addressId = created.id
-            a0.id = addressId
-        }
         const supplierPayload: SupplierPayload = {
             name,
             email,
             phone,
-            addresses: [`/api/addresses/${addressId}`],
         }
 
         if (supplierId.value !== null) {
@@ -154,7 +197,8 @@ async function validate() {
 
         await router.push("/admin/supplier/supplier-list")
     } catch (e) {
-        errorMsg.value = "Erreur lors de l’enregistrement."
+        const errorKey = supplierId.value !== null ? "errors.supplier.update" : "errors.supplier.create"
+        errorMsg.value = String($i18n.t(errorKey))
         throw e
     } finally {
         isLoading.value = false

frontend/i18n/locales/fr.json

@@ -37,7 +37,21 @@
             "delete": "Impossible de supprimer le bovin."
         },
         "supplier": {
-            "list": "Impossible de récupérer la liste des fournisseurs."
+            "list": "Impossible de récupérer la liste des fournisseurs.",
+            "fetch": "Impossible de récupérer le fournisseur.",
+            "create": "Impossible de créer le fournisseur.",
+            "update": "Impossible de mettre à jour le fournisseur.",
+            "nameRequired": "Le nom du fournisseur est obligatoire."
+        },
+        "address": {
+            "fetch": "Impossible de récupérer l'adresse.",
+            "create": "Impossible de créer l'adresse.",
+            "update": "Impossible de mettre à jour l'adresse.",
+            "entityNotFound": "Entité introuvable.",
+            "streetRequired": "La rue est obligatoire.",
+            "postalCodeRequired": "Le code postal est obligatoire.",
+            "cityRequired": "La ville est obligatoire.",
+            "countryCodeInvalid": "Le pays doit être un code ISO2 (2 lettres)."
         },
         "truck": {
             "list": "Impossible de récupérer la liste des camions."
@@ -70,6 +84,14 @@
         "reception": {
             "update": "Réception mise à jour avec succès."
         },
+        "supplier": {
+            "create": "Fournisseur créé avec succès.",
+            "update": "Fournisseur mis à jour avec succès."
+        },
+        "address": {
+            "create": "Adresse créée avec succès.",
+            "update": "Adresse mise à jour avec succès."
+        },
         "auth": {
             "update": "Utilisateur mis à jour avec succès.",
             "create": "Utilisateur créé avec succès.",

frontend/pages/admin/supplier/address.vue

@@ -0,0 +1,7 @@
+<template>
+    <AddressAddAddress />
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: "admin" })
+</script>

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

@@ -30,11 +30,16 @@
             <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 text-slate-400"
+                    class="grid grid-cols-7 border-t gap-4 px-4 py-2 cursor-pointer hover:bg-slate-50"
+                    @click="goToSupplier(supplier.id)"
                 >
                     <div class="truncate">{{ supplier.name }}</div>
                     <div class="truncate">{{ supplier.email }}</div>
-                    <div class="col-span-5">—</div>
+                    <div class="col-span-1">Pas d'adresse</div>
+                    <div class="col-span-1"></div>
+                    <div class="col-span-1"></div>
+                    <div class="col-span-1"></div>
+                    <div class="col-span-1"></div>
                 </div>
 
                 <template v-else-if="isAddressObjectArray(supplier.addresses)">
@@ -42,10 +47,13 @@
                         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">{{ supplier.name }}</div>
+                        <div class="truncate">
-                        <div class="truncate">{{ supplier.email }}</div>
+                            {{ 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>

frontend/services/address.ts

@@ -20,6 +20,7 @@ export async function createAddress(
 
     return await api.post<AddressData>('addresses', payload, {
         toastErrorKey: 'errors.address.create',
+        toastSuccessKey: 'success.address.create',
     })
 }
 
@@ -31,5 +32,14 @@ export async function updateAddress(
 
     return await api.patch<AddressData>(`addresses/${id}`, payload, {
         toastErrorKey: 'errors.address.update',
+        toastSuccessKey: 'success.address.update',
+    })
+}
+
+export async function getAddress(id: number): Promise<AddressData> {
+    const api = useApi()
+
+    return await api.get<AddressData>(`addresses/${id}`, {}, {
+        toastErrorKey: 'errors.address.fetch',
     })
 }

frontend/services/dto/supplier-data.ts

@@ -21,5 +21,5 @@ export type SupplierPayload = {
     name: string
     email?: string | null
     phone?: string | null
-    addresses: string[]
+    addresses?: string[]
 }