From b9824dc3ae8c06ce0b88ebe6d2fe2b498f295af8 Mon Sep 17 00:00:00 2001
From: Matteo <matteo@yuno.malio.fr>
Date: Tue, 17 Feb 2026 11:20:20 +0100
Subject: [PATCH] feat : admin bovin

---
 CHANGELOG.md                              |   3 +-
 frontend/layouts/default.vue              |  43 +++++++---
 frontend/pages/admin/bovin/[[id]].vue     | 100 ++++++++++++++++++++++
 frontend/pages/admin/bovin/list.vue       |  71 +++++++++++++++
 frontend/services/bovine-type.ts          |  46 +++++++++-
 frontend/services/dto/bovine-type-data.ts |  16 ++++
 src/Entity/BovineType.php                 |  17 +++-
 7 files changed, 281 insertions(+), 15 deletions(-)
 create mode 100644 frontend/pages/admin/bovin/[[id]].vue
 create mode 100644 frontend/pages/admin/bovin/list.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5e447b..70c1510 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,7 +47,8 @@ Ajouter dans le fichier .env du frontend
 * [#326] Admin modification creation client
 * [#325] Correction diverses
 * fix layout admin
-
+* Creation page admin listing bovins
+* Creation page admin ajout/modification bovins
 ### Changed
 
 ### Fixed
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index d78d48e..e973e3f 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -31,8 +31,8 @@
                             :href="href"
                             @click="navigate"
                             :class="route.path === '/'
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                         >
                             Accueil
                         </a>
@@ -48,8 +48,8 @@
                             :href="href"
                             @click="navigate"
                             :class="route.path.startsWith('/admin/supplier')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                         >
                             Fournisseurs
                         </a>
@@ -65,8 +65,8 @@
                             :href="href"
                             @click="navigate"
                             :class="route.path.startsWith('/admin/carrier')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                         >
                             Transporteurs
                         </a>
@@ -82,8 +82,8 @@
                             :href="href"
                             @click="navigate"
                             :class="route.path.startsWith('/admin/user')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                         >
                             Utilisateurs
                         </a>
@@ -99,12 +99,29 @@
                             :href="href"
                             @click="navigate"
                             :class="route.path.startsWith('/admin/customer')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                         >
                             Clients
                         </a>
                     </NuxtLink>
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/bovin/list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/bovin')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Bovins
+                        </a>
+                    </NuxtLink>
                 </nav>
 
                 <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
@@ -118,7 +135,8 @@
                         aria-haspopup="true"
                     >
                         <span class="capitalize font-bold">{{ userDisplayName }}</span>
-                        <span class="ml-[6px] inline-flex items-center font-bold transition-transform group-hover:rotate-180 group-focus-within:rotate-180">
+                        <span
+                            class="ml-[6px] inline-flex items-center font-bold transition-transform group-hover:rotate-180 group-focus-within:rotate-180">
                             <Icon name="mdi:chevron-down" size="20"/>
                         </span>
                     </button>
@@ -196,6 +214,9 @@
                         <NuxtLink v-if="auth.isAdmin" to="/admin/customer/customer-list" @click="closeMenu">
                             Clients
                         </NuxtLink>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/bovin/list" @click="closeMenu">
+                            Bovins
+                        </NuxtLink>
                     </nav>
 
                     <button
diff --git a/frontend/pages/admin/bovin/[[id]].vue b/frontend/pages/admin/bovin/[[id]].vue
new file mode 100644
index 0000000..bf06c20
--- /dev/null
+++ b/frontend/pages/admin/bovin/[[id]].vue
@@ -0,0 +1,100 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="text-primary-500 flex items-center justify-between">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ route.params.id ? 'Modifier bovin' : 'Ajout bovin' }}
+            </h1>
+
+            <UiButton
+                type="submit"
+                :disabled="isLoading || isHydrating"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] hover:opacity-80"
+            >
+                <Icon name="mdi:check" size="28" />
+                {{ isEdit ? 'Modifier' : 'Ajouter' }}
+            </UiButton>
+        </div>
+
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 py-12">
+            <UiTextInput label="Nom du bovin" id="bovin-name" v-model="form.name" />
+            <UiTextInput label="Code bovin" id="code-id" v-model="form.code" />
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {createBovin, getBovin, updateBovin} from "~/services/bovine-type";
+import type {BovinData, BovinFormData} from "~/services/dto/bovine-type-data";
+const router = useRouter()
+const route = useRoute()
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+function 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 idBovin = computed(() => resolveId(route.params.id))
+const isEdit = computed(() => idBovin.value !== null)
+
+const form = reactive<BovinFormData>({
+    name: '',
+    code: ''
+})
+
+
+const hydrateFromBovin = (bovin: BovinData | null) => {
+    if (!bovin) {
+        return
+    }
+    isHydrating.value = true
+    form.name = bovin.name ?? ''
+    form.code = bovin.code ?? ''
+    isHydrating.value = false
+}
+
+watch(
+    () => idBovin.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const bovin = await getBovin(id)
+            hydrateFromBovin(bovin)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+async function validate() {
+    if (isLoading.value || isHydrating.value) return
+
+    const normalizedBovinCode = form.code.trim()
+    const normalizedBovinName = form.name.trim()
+
+
+    const basePayload = {
+        name: normalizedBovinName,
+        code: normalizedBovinCode
+
+    }
+
+    if(idBovin.value){
+        await updateBovin(idBovin.value, basePayload)
+        await navigate()
+        return
+    }
+    await createBovin(basePayload)
+    await navigate()
+}
+
+async function navigate(){
+    return router.push("/admin/bovin/list")
+}
+</script>
diff --git a/frontend/pages/admin/bovin/list.vue b/frontend/pages/admin/bovin/list.vue
new file mode 100644
index 0000000..600b08d
--- /dev/null
+++ b/frontend/pages/admin/bovin/list.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold text-primary-500 uppercase">Liste des bovins</h1>
+        <NuxtLink
+            to="/admin/bovin"
+            class="inline-flex items-center justify-center
+                   text-xl text-white uppercase
+                   bg-primary-500 h-[50px] px-8 rounded
+                   hover:opacity-80 gap-2"
+            >
+            <Icon name="mdi:plus" size="28"  />
+            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
+                       grid grid-cols-2 gap-4
+                       bg-slate-100 px-4 py-3
+                       font-semibold uppercase
+                       tracking-wide"
+            >
+                <div class="col-span-1">Label</div>
+                <div class="col-span-1">Code</div>
+            </div>
+            <div v-if="bovinList.length === 0" class="px-4 py-6 text-slate-400">
+                Aucun client.
+            </div>
+            <div v-else>
+                <div
+                    v-for="bovin in bovinList"
+                    :key="bovin.id"
+                    class="grid grid-cols-2 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToBovin(bovin.id)"
+                >
+                    <div class="col-span-4">{{ bovin.name }}</div>
+                    <div class="col-span-4">{{ bovin.code }}</div>
+                </div>
+            </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 { getBovinList } from "~/services/bovine-type"
+import type { BovinData } from "~/services/dto/bovine-type-data"
+import { useAuthStore } from "~/stores/auth"
+
+const bovinList = ref<BovinData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToBovin = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/bovin/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    bovinList.value = await getBovinList()
+})
+</script>
diff --git a/frontend/services/bovine-type.ts b/frontend/services/bovine-type.ts
index 4e4dafd..ccd0dd7 100644
--- a/frontend/services/bovine-type.ts
+++ b/frontend/services/bovine-type.ts
@@ -1,5 +1,5 @@
 import { useApi } from '~/composables/useApi'
-import type {BovineTypeData} from "~/services/dto/bovine-type-data";
+import type { BovineTypeData, BovinData, BovinPayload } from "~/services/dto/bovine-type-data";
 
 export type BovineTypeListResponse =
     | BovineTypeData[]
@@ -21,3 +21,47 @@ export async function getBovineTypeList(): Promise<BovineTypeData[]> {
 
     return []
 }
+
+export async function getBovinList(): Promise<BovinData[]> {
+    const api = useApi()
+    const response = await api.get<BovineTypeListResponse>('bovine_types', {}, {
+        toastErrorKey: 'errors.bovin.list'
+    })
+
+    const items = Array.isArray(response)
+        ? response
+        : response && typeof response === 'object' && Array.isArray(response['hydra:member'])
+            ? response['hydra:member']
+            : []
+
+    return items.map(mapToBovinData)
+}
+
+export async function getBovin(id: number): Promise<BovinData> {
+    const api = useApi()
+    const response = await api.get<BovineTypeData>(`bovine_types/${id}`)
+    return mapToBovinData(response)
+}
+
+export async function createBovin(payload: BovinPayload = {}): Promise<BovinData> {
+    const api = useApi()
+    const response = await api.post<BovineTypeData>('bovine_types', toBovineTypePayload(payload))
+    return mapToBovinData(response)
+}
+
+export async function updateBovin(id: number, payload: BovinPayload = {}): Promise<BovinData> {
+    const api = useApi()
+    const response = await api.patch<BovineTypeData>(`bovine_types/${id}`, toBovineTypePayload(payload))
+    return mapToBovinData(response)
+}
+
+const mapToBovinData = (item: BovineTypeData): BovinData => ({
+    id: item.id,
+    name: item.label,
+    code: item.code
+})
+
+const toBovineTypePayload = (payload: BovinPayload): Partial<BovineTypeData> => ({
+    label: payload.name ?? undefined,
+    code: payload.code ?? undefined
+})
diff --git a/frontend/services/dto/bovine-type-data.ts b/frontend/services/dto/bovine-type-data.ts
index c12ca7c..7cccc03 100644
--- a/frontend/services/dto/bovine-type-data.ts
+++ b/frontend/services/dto/bovine-type-data.ts
@@ -3,3 +3,19 @@ export interface BovineTypeData{
     label: string
     code: string
 }
+
+export interface BovinData {
+    id: number
+    name: string
+    code: string
+}
+
+export interface BovinFormData {
+    name: string
+    code: string
+}
+
+export type BovinPayload = {
+    name?: string | null
+    code?: string | null
+}
diff --git a/src/Entity/BovineType.php b/src/Entity/BovineType.php
index ee12732..7ea90a7 100644
--- a/src/Entity/BovineType.php
+++ b/src/Entity/BovineType.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;
 
@@ -20,6 +22,17 @@ use Symfony\Component\Serializer\Attribute\Groups;
         new GetCollection(
             normalizationContext: ['groups' => ['bovine-type:read']],
         ),
+        new Post(
+            normalizationContext: ['groups' => ['bovine-type:read']],
+            denormalizationContext: ['groups' => ['bovine-type:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
+        new Patch(
+            requirements: ['id' => '\d+'],
+            normalizationContext: ['groups' => ['bovine-type:read']],
+            denormalizationContext: ['groups' => ['bovine-type:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
     ],
     security: "is_granted('ROLE_USER')",
 )]
@@ -32,11 +45,11 @@ class BovineType
     private ?int $id = null;
 
     #[ORM\Column(length: 120)]
-    #[Groups(['bovine-type:read', 'reception:read', 'reception-bovine:read'])]
+    #[Groups(['bovine-type:read', 'bovine-type:write', 'reception:read', 'reception-bovine:read'])]
     private ?string $label = null;
 
     #[ORM\Column(length: 50)]
-    #[Groups(['bovine-type:read', 'reception:read', 'reception-bovine:read'])]
+    #[Groups(['bovine-type:read', 'bovine-type:write', 'reception:read', 'reception-bovine:read'])]
     private ?string $code = null;
 
     public function getId(): ?int