[#317] Création d'une page d'administration : modification/création d'un transporteur (!18)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|           #317       |      Création d'une page d'administration : modification/création d'un transporteur           |

## 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: #18
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: sroy <sebastien@yuno.malio.fr>
Co-committed-by: sroy <sebastien@yuno.malio.fr>

.idea/workspace.xml

@@ -778,4 +778,4 @@
       <option value=".github/prompts" />
     </promptFileLocations>
   </component>
-</project>
+</project>

CHANGELOG.md

@@ -32,6 +32,7 @@ Ajouter dans le fichier .env du frontend
 * [#316] Admin liste des transporteurs
 * [#312] Creation administration listing fournisseurs
 * [#315] Creation page admin utilisateur
+* [#317] Admin modification creation transporteur
 
 ### Changed
 

frontend/i18n/locales/fr.json

@@ -46,7 +46,11 @@
             "list": "Impossible de récupérer la liste des races de bovins."
         },
         "carrier": {
-            "list": "Impossible de récupérer la liste des transporteurs."
+            "list": "Impossible de récupérer la liste des transporteurs.",
+            "fetch": "Impossible de récupérer les données du transporteur",
+            "update": "Impossible de mettre à jour le transporteur",
+            "create": "Impossible de créer le transporteur"
+
         },
         "driver": {
             "list": "Impossible de récupérer la liste des chauffeurs."
@@ -71,6 +75,10 @@
             "create": "Utilisateur créé avec succès.",
             "login": "Connexion réussie.",
             "logout": "Déconnexion réussie."
+        },
+        "carrier": {
+            "update": "Transporteur mis à jour",
+            "create": "Transporteur créé"
         }
     }
 }

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

@@ -0,0 +1,101 @@
+
+<template>
+    <form @submit.prevent="validate">
+    <div class="flex items-center justify-between ">
+        <h1 class="text-3xl font-bold uppercase">
+            {{ route.params.id ? 'Modifier transporteur' : 'Ajout transporteur' }}
+        </h1>
+
+        <button
+            type="submit"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+        >Enregistrer
+        </button>
+    </div>
+
+    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+
+        <UiTextInput
+            label = "nom du fournisseur"
+            id="carrier-name"
+            v-model="form.name"
+        />
+
+        <UiTextInput
+                label = "code fournisseur"
+                id="code-id"
+                v-model="form.code"
+        />
+    </div>
+    </form>
+
+</template>
+
+<script setup lang="ts">
+import {createCarrier, getCarrier, updateCarrier} from "~/services/carrier";
+import type {CarrierData, CarrierFormData} from "~/services/dto/carrier-data";
+const router = useRouter()
+const route = useRoute()
+const idCarrier = Number(route.params.id)
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+const form = reactive<CarrierFormData>({
+    code:'',
+    name:''
+})
+
+definePageMeta({
+    layout: 'admin'
+})
+
+const hydrateFromUser = (carrier: CarrierData | null) => {
+    if (!carrier) {
+        return
+    }
+    isHydrating.value = true
+    form.name = carrier.name ?? ''
+    form.code = carrier.code ?? ''
+    isHydrating.value = false
+}
+
+watch(
+    () => idCarrier,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getCarrier(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+async function validate() {
+
+    const normalizedCarrierCode = form.code.trim()
+    const normalizedCarrierName = form.name.trim()
+
+    const basePayload = {
+        name: normalizedCarrierName,
+        code: normalizedCarrierCode
+
+    }
+
+    if(idCarrier){
+        await updateCarrier(idCarrier, basePayload)
+        navigate()
+        return
+    }
+    await createCarrier(basePayload)
+    navigate()
+}
+
+function navigate(){
+    router.push("/admin/carrier/carrier-list")
+}
+</script>

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

@@ -2,11 +2,11 @@
 
     <div class="flex items-center justify-between ">
             <h1 class="text-3xl font-bold uppercase">listes des transporteurs</h1>
-            <button
-                @Click="goToCarrier()"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] "
+            <NuxtLink
+                to="/admin/carrier"
+                class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
             >Ajouter
-            </button>
+            </NuxtLink>
     </div>
 
         <div class="mt-6 border border-slate-200 mb-16 ">
@@ -37,8 +37,8 @@ import {getCarrierList} from "~/services/carrier";
 const carrierList = ref<CarrierData[]>()
 const router = useRouter()
 
-const goToCarrier = (id: number|null = null) => {
-    id !== null ? router.push(`/admin/carrier/${id}`) : router.push(`/admin/carrier`)
+const goToCarrier = (id: number) => {
+    router.push(`/admin/carrier/${id}`)
 }
 
 definePageMeta({

frontend/services/carrier.ts

@@ -1,5 +1,5 @@
 import { useApi } from '~/composables/useApi'
-import type { CarrierData } from '~/services/dto/carrier-data'
+import type {CarrierData, CarrierPayload} from "~/services/dto/carrier-data";
 
 export type CarrierListResponse =
     | CarrierData[]
@@ -21,3 +21,26 @@ export async function getCarrierList(): Promise<CarrierData[]> {
 
     return []
 }
+
+export async function getCarrier(id: number) {
+    const api = useApi()
+    return api.get<CarrierData>(`carriers/${id}`, {}, {
+        toastErrorKey: 'errors.carrier.fetch'
+    })
+}
+
+export async function updateCarrier(id: number, payload: CarrierPayload) {
+    const api = useApi()
+    return api.patch<CarrierData>(`carriers/${id}`, payload, {
+        toastErrorKey: 'errors.carrier.update',
+        toastSuccessKey: 'success.carrier.update'
+    })
+}
+
+export async function createCarrier(payload: CarrierPayload = {}) {
+    const api = useApi()
+    return api.post<CarrierData>('carriers', payload, {
+        toastErrorKey: 'errors.carrier.create',
+        toastSuccessKey: 'success.carrier.update'
+    })
+}

frontend/services/dto/carrier-data.ts

@@ -3,3 +3,13 @@ export interface CarrierData {
     name: string
     code: string
 }
+
+export interface CarrierFormData {
+    name: string
+    code: string
+}
+
+export type CarrierPayload = {
+    name?: string | null
+    code?: string
+}

src/Entity/Carrier.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\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Attribute\Groups;
 
@@ -21,6 +23,15 @@ use Symfony\Component\Serializer\Attribute\Groups;
         new GetCollection(
             normalizationContext: ['groups' => ['carrier:read']],
         ),
+        new Post(
+            normalizationContext: ['groups' => ['carrier:read']],
+            denormalizationContext: ['groups' => ['carrier:write']],
+        ),
+        new Patch(
+            requirements: ['id' => '\d+'],
+            normalizationContext: ['groups' => ['carrier:read']],
+            denormalizationContext: ['groups' => ['carrier:write']],
+        ),
     ],
     security: "is_granted('ROLE_USER')",
 )]
@@ -33,11 +44,11 @@ class Carrier
     private ?int $id = null;
 
     #[ORM\Column(length: 180)]
-    #[Groups(['carrier:read', 'driver:read', 'vehicle:read', 'reception:read'])]
+    #[Groups(['carrier:read', 'carrier:write', 'driver:read', 'vehicle:read', 'reception:read'])]
     private string $name = '';
 
     #[ORM\Column(length: 30, nullable: true)]
-    #[Groups(['carrier:read', 'driver:read', 'vehicle:read', 'reception:read'])]
+    #[Groups(['carrier:read', 'carrier:write', 'driver:read', 'vehicle:read', 'reception:read'])]
     private ?string $code = null;
 
     public function getId(): ?int