feat : admin fournisseurs creation et modif (WIP)

frontend/components/supplier/supplier-form.vue

@@ -14,63 +14,28 @@
             </button>
         </div>
 
-        <div class="grid gap-y-16 gap-x-40 mb-16">
+        <div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16">
+            <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" />
 
-            <UiTextInput
+            <UiTextInput id="supplier-street" v-model="form.addresses[0].street" label="Rue" />
-                id="supplier-name"
+            <UiTextInput id="supplier-street2" v-model="form.addresses[0].street2" label="Complément" />
-                v-model="form.name"
+            <UiTextInput id="supplier-postalCode" v-model="form.addresses[0].postalCode" label="Code postal" />
-                label="Nom du fournisseur"
+            <UiTextInput id="supplier-city" v-model="form.addresses[0].city" label="Ville" />
-            />
+            <UiTextInput id="supplier-country" v-model="form.addresses[0].countryCode" label="Pays" />
-
-            <UiTextInput
-                id="supplier-email"
-                v-model="form.email"
-                label="Email"
-            />
-
-            <UiTextInput
-                id="supplier-phone"
-                v-model="form.phone"
-                label="Téléphone"
-            />
-
-            <UiTextInput
-                id="supplier-street"
-                v-model="form.addresses[0].street"
-                label="Rue"
-            />
-
-            <UiTextInput
-                id="supplier-street2"
-                v-model="form.addresses[0].street2"
-                label="Complément"
-            />
-
-            <UiTextInput
-                id="supplier-postalCode"
-                v-model="form.addresses[0].postalCode"
-                label="Code postal"
-            />
-
-            <UiTextInput
-                id="supplier-city"
-                v-model="form.addresses[0].city"
-                label="Ville"
-            />
-
-            <UiTextInput
-                id="supplier-country"
-                v-model="form.addresses[0].country"
-                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 { createSupplier, getSupplier, updateSupplier } from "~/services/supplier"
-import type { SupplierData, SupplierFormData } from "~/services/dto/supplier-data"
+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" })
 
@@ -87,50 +52,51 @@ const resolveId = (param: unknown) => {
 const supplierId = computed(() => resolveId(route.params.id))
 
 const isLoading = ref(false)
-const isHydrating = 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: [
+    addresses: [emptyAddress()],
-        {
-            id: null,
-            street: "",
-            street2: "",
-            postalCode: "",
-            city: "",
-            country: ""
-        }
-    ]
 })
 
 const hydrateFromSupplier = (supplier: SupplierData | null) => {
     if (!supplier) return
 
-    isHydrating.value = true
-
     form.name = supplier.name ?? ""
     form.email = supplier.email ?? ""
     form.phone = supplier.phone ?? ""
 
-    const a0 = supplier.addresses?.[0] ?? null
+    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) return
+    const a0 = supplier.addresses[0]
 
-    form.addresses[0].id = a0?.id ?? null
+    // si IRIs -> ignore
-    form.addresses[0].street = a0?.street ?? ""
+    if (typeof a0 === "string") return
-    form.addresses[0].street2 = a0?.street2 ?? ""
-    form.addresses[0].postalCode = a0?.postalCode ?? ""
-    form.addresses[0].city = a0?.city ?? ""
-    form.addresses[0].country = a0?.country ?? ""
 
-    isHydrating.value = false
+    form.addresses[0].id = a0.id ?? null
+    form.addresses[0].label = a0.label ?? ""
+    form.addresses[0].street = a0.street ?? ""
+    form.addresses[0].street2 = a0.street2 ?? null
+    form.addresses[0].postalCode = a0.postalCode ?? ""
+    form.addresses[0].city = a0.city ?? ""
+    form.addresses[0].countryCode = a0.countryCode ?? ""
 }
 
 watch(
     () => supplierId.value,
     async (id) => {
         if (id === null) return
-
         isLoading.value = true
         try {
             const supplier = await getSupplier(id)
@@ -143,41 +109,56 @@ watch(
 )
 
 async function validate() {
+    if (isLoading.value) return
+    isLoading.value = true
+    errorMsg.value = null
 
-    const name = form.name.trim()
+    try {
-    const email = form.email.trim()
+        const name = form.name.trim()
-    const phone = form.phone.trim()
+        const email = (form.email ?? "").trim() || null
+        const phone = (form.phone ?? "").trim() || null
 
-    const a0 = form.addresses[0]
+        const a0 = form.addresses[0]
-    const street = a0.street.trim()
-    const street2 = (a0.street2 ?? "").trim()
-    const postalCode = a0.postalCode.trim()
-    const city = a0.city.trim()
-    const country = a0.country.trim()
 
-    const payload = {
+        const label = a0.label.trim() || name || "Adresse"
-        name,
+
-        email,
+        const addressPayload: AddressPayload = {
-        phone,
+            label,
-        addresses: [
+            street: a0.street.trim(),
-            {
+            street2: a0.street2?.trim() || null,
-                id: a0.id ?? undefined,
+            postalCode: a0.postalCode.trim(),
-                street,
+            city: a0.city.trim(),
-                street2: street2 || undefined,
+            countryCode: a0.countryCode.trim(),
-                postalCode,
+        }
-                city,
+
-                country
+        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) {
+            await updateSupplier(supplierId.value, supplierPayload)
+        } else {
+            await createSupplier(supplierPayload)
+        }
 
-    if (supplierId.value !== null) {
-        await updateSupplier(supplierId.value, payload)
         await router.push("/admin/supplier/supplier-list")
-        return
+    } catch (e) {
+        errorMsg.value = "Erreur lors de l’enregistrement."
+        throw e
+    } finally {
+        isLoading.value = false
     }
-
-    await createSupplier(payload)
-    await router.push("/admin/supplier/supplier-list")
 }
 </script>

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

@@ -1,16 +1,18 @@
 <template>
     <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase"> Fournisseurs </h1>
+        <h1 class="text-3xl font-bold uppercase">Fournisseurs</h1>
-        <NuxtLink to="/admin/supplier"
+        <NuxtLink
-                  class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            to="/admin/supplier"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
         >
             Ajouter
         </NuxtLink>
     </div>
+
     <div 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-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+                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>
@@ -18,31 +20,49 @@
                 <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">
-                <template v-if="supplier.addresses?.length">
+                <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"
+                >
+                    <div class="truncate">{{ supplier.name }}</div>
+                    <div class="truncate">{{ supplier.email }}</div>
+                    <div class="col-span-5">—</div>
+                </div>
+
+                <template v-else-if="isAddressObjectArray(supplier.addresses)">
                     <div
-                        v-for="addr in supplier.addresses"
+                        v-for="(address, idx) in supplier.addresses"
-                        :key="addr.id"
+                        :key="address.id ?? `${supplier.id}-${idx}-${address.street}-${address.postalCode}`"
-                        class="grid grid-cols-6 hover:bg-slate-50 border-t gap-4 px-4 py-2"
+                        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">
+                        <div class="truncate">{{ supplier.name }}</div>
-                            {{ supplier.name }}
+                        <div class="truncate">{{ supplier.email }}</div>
-                        </div>
+                        <div class="truncate">{{ address.street }}</div>
-                        <div class="truncate">
+                        <div class="truncate">{{ address.street2 }}</div>
-                            {{ supplier.email }}
+                        <div>{{ address.postalCode }}</div>
-                        </div>
+                        <div class="uppercase truncate">{{ address.city }}</div>
-                        <div class="truncate">
+                        <div class="uppercase truncate">{{ address.countryCode }}</div>
-                            {{ addr.street }}
+                    </div>
-                        </div>
+                </template>
-                        <div class="truncate">
+
-                            {{ addr.street2 }}
+                <template v-else>
-                        </div>
+                    <div
-                        <div>{{ addr.postalCode }}</div>
+                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                        <div class="uppercase truncate">
+                        @click="goToSupplier(supplier.id)"
-                            {{ addr.city }}
+                    >
+                        <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)
                         </div>
                     </div>
                 </template>
@@ -52,23 +72,26 @@
 </template>
 
 <script setup lang="ts">
-import type {SupplierData} from "~/services/dto/supplier-data"
+import { getSupplierList } from "~/services/supplier"
-import {getSupplierList} from "~/services/supplier"
+import type { SupplierData } from "~/services/dto/supplier-data"
+import type { AddressFormData } from "~/services/dto/address-data"
 
-definePageMeta({layout: "admin"})
+definePageMeta({ layout: "admin" })
 
 const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
 
-
 const goToSupplier = (id: number) => {
     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
+}
+
 onMounted(async () => {
-    supplierList.value = (await getSupplierList(false)) ?? []
+    supplierList.value = await getSupplierList()
 })
-
 </script>
-
-

frontend/services/address.ts

@@ -0,0 +1,35 @@
+import { useApi } from '~/composables/useApi'
+import type { AddressData } from '~/services/dto/address-data'
+export interface AddressPayload {
+    label: string
+    street: string
+    street2?: string | null
+    postalCode: string
+    city: string
+    countryCode: string
+}
+
+export interface AddressData extends AddressPayload {
+    id: number
+}
+
+export async function createAddress(
+    payload: AddressPayload
+): Promise<AddressData> {
+    const api = useApi()
+
+    return await api.post<AddressData>('addresses', payload, {
+        toastErrorKey: 'errors.address.create',
+    })
+}
+
+export async function updateAddress(
+    id: number,
+    payload: AddressPayload
+): Promise<AddressData> {
+    const api = useApi()
+
+    return await api.patch<AddressData>(`addresses/${id}`, payload, {
+        toastErrorKey: 'errors.address.update',
+    })
+}

frontend/services/dto/address-data.ts

@@ -6,13 +6,14 @@ export interface AddressData {
     postalCode: string
     city: string
     countryCode: string
-    fullAddress?: string
 }
+
 export interface AddressFormData {
     id?: number | null
+    label: string
     street: string
-    street2?: string
+    street2?: string | null
     postalCode: string
     city: string
-    country: string
+    countryCode: string
 }

frontend/services/dto/supplier-data.ts

@@ -1,12 +1,15 @@
-import type { AddressFormData } from '~/services/dto/address-data'
+import type { AddressFormData } from "~/services/dto/address-data"
+
+export type SupplierAddresses = AddressFormData[] | string[]
 
 export interface SupplierData {
     id: number
     name: string
     email?: string | null
     phone?: string | null
-    addresses: AddressFormData[]
+    addresses: SupplierAddresses
 }
+
 export interface SupplierFormData {
     name: string
     email?: string
@@ -18,8 +21,5 @@ export type SupplierPayload = {
     name: string
     email?: string | null
     phone?: string | null
-    street?: string | null
+    addresses: string[]
-    city?: string | null
-    postalCode?: string | null
-    country?: string | null
 }

frontend/services/supplier.ts

@@ -8,7 +8,7 @@ export type SupplierListResponse =
 export async function getSupplierList(): Promise<SupplierData[]> {
     const api = useApi()
     const response = await api.get<SupplierListResponse>("suppliers", {}, {
-        toastErrorKey: "errors.supplier.list"
+        toastErrorKey: "errors.supplier.list",
     })
 
     if (Array.isArray(response)) return response
@@ -20,23 +20,23 @@ export async function getSupplierList(): Promise<SupplierData[]> {
 
 export async function getSupplier(id: number): Promise<SupplierData> {
     const api = useApi()
-    return api.get<SupplierData>(`supplier/${id}`, {}, {
+    return api.get<SupplierData>(`suppliers/${id}`, {}, {
-        toastErrorKey: "errors.supplier.fetch"
+        toastErrorKey: "errors.supplier.fetch",
     })
 }
 
 export async function updateSupplier(id: number, payload: SupplierPayload): Promise<SupplierData> {
     const api = useApi()
-    return api.patch<SupplierData>(`supplier/${id}`, payload, {
+    return api.patch<SupplierData>(`suppliers/${id}`, payload, {
         toastErrorKey: "errors.supplier.update",
-        toastSuccessKey: "success.supplier.update"
+        toastSuccessKey: "success.supplier.update",
     })
 }
 
 export async function createSupplier(payload: SupplierPayload): Promise<SupplierData> {
     const api = useApi()
-    return api.post<SupplierData>("supplier", payload, {
+    return api.post<SupplierData>("suppliers", payload, {
         toastErrorKey: "errors.supplier.create",
-        toastSuccessKey: "success.supplier.create"
+        toastSuccessKey: "success.supplier.create",
     })
 }

src/Entity/Address.php

@@ -7,6 +7,8 @@ namespace App\Entity;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
@@ -23,6 +25,16 @@ use Symfony\Component\Serializer\Attribute\Groups;
         new GetCollection(
             normalizationContext: ['groups' => ['address:read']],
         ),
+        new Post(
+            normalizationContext: ['groups' => ['address:read']],
+            denormalizationContext: ['groups' => ['address:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
+        new Patch(
+            normalizationContext: ['groups' => ['address:read']],
+            denormalizationContext: ['groups' => ['address:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
     ],
     security: "is_granted('ROLE_USER')",
 )]
@@ -35,27 +47,27 @@ class Address
     private ?int $id = null;
 
     #[ORM\Column(length: 120)]
-    #[Groups(['address:read', 'supplier:read', 'reception:read'])]
+    #[Groups(['address:read', 'supplier:read', 'reception:read', 'address:write'])]
     private string $label = '';
 
     #[ORM\Column(length: 180)]
-    #[Groups(['address:read', 'supplier:read', 'reception:read'])]
+    #[Groups(['address:read', 'supplier:read', 'reception:read', 'address:write'])]
     private string $street = '';
 
     #[ORM\Column(name: 'street2', length: 180, nullable: true)]
-    #[Groups(['address:read', 'supplier:read', 'reception:read'])]
+    #[Groups(['address:read', 'supplier:read', 'reception:read', 'address:write'])]
     private ?string $street2 = null;
 
     #[ORM\Column(name: 'postal_code', length: 20)]
-    #[Groups(['address:read', 'supplier:read', 'reception:read'])]
+    #[Groups(['address:read', 'supplier:read', 'reception:read', 'address:write'])]
     private string $postalCode = '';
 
     #[ORM\Column(length: 120)]
-    #[Groups(['address:read', 'supplier:read', 'reception:read'])]
+    #[Groups(['address:read', 'supplier:read', 'reception:read', 'address:write'])]
     private string $city = '';
 
     #[ORM\Column(name: 'country_code', length: 2)]
-    #[Groups(['address:read', 'supplier:read'])]
+    #[Groups(['address:read', 'supplier:read', 'address:write'])]
     private string $countryCode = '';
 
     /**

src/Entity/Supplier.php

@@ -8,6 +8,8 @@ use ApiPlatform\Metadata\ApiProperty;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
@@ -24,6 +26,16 @@ use Symfony\Component\Serializer\Attribute\Groups;
         new GetCollection(
             normalizationContext: ['groups' => ['supplier:read']],
         ),
+        new Post(
+            normalizationContext: ['groups' => ['supplier:read']],
+            denormalizationContext: ['groups' => ['supplier:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
+        new Patch(
+            normalizationContext: ['groups' => ['supplier:read']],
+            denormalizationContext: ['groups' => ['supplier:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
     ],
     security: "is_granted('ROLE_USER')",
 )]
@@ -36,15 +48,15 @@ class Supplier
     private ?int $id = null;
 
     #[ORM\Column(length: 180)]
-    #[Groups(['supplier:read', 'reception:read'])]
+    #[Groups(['supplier:read', 'reception:read', 'supplier:write'])]
     private string $name = '';
 
     #[ORM\Column(length: 180, nullable: true)]
-    #[Groups(['supplier:read', 'reception:read'])]
+    #[Groups(['supplier:read', 'reception:read', 'supplier:write'])]
     private ?string $email = null;
 
     #[ORM\Column(length: 40, nullable: true)]
-    #[Groups(['supplier:read', 'reception:read'])]
+    #[Groups(['supplier:read', 'reception:read', 'supplier:write'])]
     private ?string $phone = null;
 
     /**
@@ -52,7 +64,7 @@ class Supplier
      */
     #[ORM\ManyToMany(targetEntity: Address::class, inversedBy: 'suppliers')]
     #[ORM\JoinTable(name: 'supplier_address')]
-    #[Groups(['supplier:read'])]
+    #[Groups(['supplier:read', 'supplier:write'])]
     #[ApiProperty(readableLink: true)]
     private Collection $addresses;
 
@@ -109,4 +121,30 @@ class Supplier
     {
         return $this->addresses;
     }
+
+    public function setAddresses(iterable $addresses): self
+    {
+        $this->addresses->clear();
+        foreach ($addresses as $address) {
+            $this->addAddress($address);
+        }
+
+        return $this;
+    }
+
+    public function addAddress(Address $address): self
+    {
+        if (!$this->addresses->contains($address)) {
+            $this->addresses->add($address);
+        }
+
+        return $this;
+    }
+
+    public function removeAddress(Address $address): self
+    {
+        $this->addresses->removeElement($address);
+
+        return $this;
+    }
 }