feat : admin fournisseurs creation et modif (WIP)

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

@@ -1,8 +1,191 @@
 <template>
-    <SupplierForm/>
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between gap-10">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
+            </h1>
+
+            <button
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                type="submit"
+                :disabled="isLoading || !auth.isAdmin"
+            >
+                {{ supplierId ? "Sauvegarder" : "Ajouter" }}
+            </button>
+        </div>
+
+        <div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-10 py-12  border-b border-black ">
+            <UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" :disabled="!auth.isAdmin"/>
+            <UiTextInput id="supplier-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin"/>
+            <UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin"/>
+        </div>
+
+        <div class="flex items-center justify-between mb-4 py-6 border-t border-black"></div>
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-3xl font-bold uppercase">Adresses fournisseur</h2>
+            <button
+                type="button"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                :disabled="supplierId === null || !auth.isAdmin"
+                @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 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>
+    </form>
 </template>
+
 <script setup lang="ts">
-definePageMeta({
-    layout: 'admin'
+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 {useAuthStore} from "~/stores/auth"
+
+definePageMeta({layout: "admin"})
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+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 supplierId = computed(() => resolveId(route.params.id))
+const isLoading = ref(false)
+const form = reactive<SupplierFormData>({
+    name: "",
+    email: "",
+    phone: "",
+    addresses: [],
 })
+
+const goToAddAddress = () => {
+    if (supplierId.value === null || !auth.isAdmin) 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 || !auth.isAdmin) 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
+    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(
+    () => supplierId.value,
+    async (id) => {
+        if (id === null) return
+        isLoading.value = true
+        try {
+            const supplier = await getSupplier(id)
+            hydrateFromSupplier(supplier)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+    if (isLoading.value) return
+    if (!auth.isAdmin) return
+    isLoading.value = true
+
+    try {
+        const name = form.name.trim()
+        const email = (form.email ?? "").trim() || null
+        const phone = (form.phone ?? "").trim() || null
+
+        const supplierPayload: SupplierPayload = {
+            name,
+            email,
+            phone,
+        }
+
+        if (supplierId.value !== null) {
+            await updateSupplier(supplierId.value, supplierPayload)
+        } else {
+            await createSupplier(supplierPayload)
+        }
+
+        await router.push("/admin/supplier/supplier-list")
+    } finally {
+        isLoading.value = false
+    }
+}
 </script>

frontend/pages/admin/supplier/address.vue

@@ -1,7 +1,47 @@
 <template>
-    <AddressAddAddress />
+    <Address type="supplier" :address="address" @validate="validate"/>
 </template>
 
 <script setup lang="ts">
+import type {AddressData, AddressPayload} from "~/services/address";
+import {createAddress, getAddress, updateAddress} from "~/services/address";
+import {getSupplier, updateSupplier} from "~/services/supplier";
+import type {SupplierData} from "~/services/dto/supplier-data";
+
 definePageMeta({ layout: "admin" })
+
+const route = useRoute()
+const router = useRouter()
+const supplierId = computed(() => { return Number(route.query.supplierId) })
+const supplier = ref<SupplierData|null>(null);
+const addressId = computed(() => { return route.query.addressId !== undefined ? Number(route.query.addressId) : null })
+const address = ref<AddressData|null>(null)
+
+const validate = async (address: AddressPayload) => {
+    try {
+        if (addressId.value !== null) {
+            await updateAddress(addressId.value, address)
+        } else {
+            await addAddress(address)
+        }
+    } finally {
+        await router.push('/admin/supplier/' + supplierId.value)
+    }
+}
+
+const addAddress = async (address: AddressPayload) => {
+    const response: AddressData = await createAddress(address)
+    const addressIRI = `/api/addresses/${response.id}`
+    const existingIris = (supplier.value.addresses ?? []).map((item: any) => `/api/addresses/${item.id}`)
+    const next = [...new Set([...existingIris, addressIRI])]
+
+    return await updateSupplier(supplierId.value, { addresses: next })
+}
+
+onMounted(async () => {
+    supplier.value = await getSupplier(supplierId.value)
+    if (addressId.value !== null) {
+        address.value = await getAddress(addressId.value)
+    }
+})
 </script>

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

@@ -4,12 +4,14 @@
         <NuxtLink
             to="/admin/supplier"
             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 class="mt-6 border border-slate-200 mb-16">
+    <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"
@@ -30,19 +32,19 @@
             <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 cursor-pointer hover:bg-slate-50"
+                    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="col-span-1"></div>
-                    <div class="col-span-1"></div>
-                    <div class="col-span-1"></div>
-                    <div class="col-span-1"></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="isAddressObjectArray(supplier.addresses)">
+                <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}`"
@@ -53,12 +55,12 @@
                         <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 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>
 
@@ -70,36 +72,41 @@
                         <div class="truncate">{{ supplier.name }}</div>
                         <div class="truncate">{{ supplier.email }}</div>
                         <div class="col-span-5 text-slate-400">
-                            Adresses non chargées (IRIs)
+                            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 { getSupplierList } from "~/services/supplier"
 import type { SupplierData } from "~/services/dto/supplier-data"
-import type { AddressFormData } from "~/services/dto/address-data"
+import { useAuthStore } from "~/stores/auth"
 
 definePageMeta({ layout: "admin" })
 
 const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
+const auth = useAuthStore()
 
 const goToSupplier = (id: number) => {
+    if (!auth.isAdmin) return
     router.push(`/admin/supplier/${id}`)
 }
 
-function isAddressObjectArray(value: SupplierData["addresses"]): value is AddressFormData[] {
-    if (!Array.isArray(value) || value.length === 0) return false
-    const v0 = value[0]
-    return typeof v0 === "object" && v0 !== null && "street" in v0 && "postalCode" in v0
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
 }
 
 onMounted(async () => {
+    if (!auth.isAdmin) return
     supplierList.value = await getSupplierList()
 })
 </script>