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

@@ -16,7 +16,7 @@
         </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="Nom du bovin" id="bovin-label" v-model="form.label" />
             <UiTextInput label="Code bovin" id="code-id" v-model="form.code" />
         </div>
     </form>
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import {createBovin, getBovin, updateBovin} from "~/services/bovine-type";
-import type {BovinData, BovinFormData} from "~/services/dto/bovine-type-data";
+import type {BovineTypeData, BovinFormData} from "~/services/dto/bovine-type-data";
 const router = useRouter()
 const route = useRoute()
 const isLoading = ref(false)
@@ -41,17 +41,17 @@ const idBovin = computed(() => resolveId(route.params.id))
 const isEdit = computed(() => idBovin.value !== null)
 
 const form = reactive<BovinFormData>({
-    name: '',
+    label: '',
     code: ''
 })
 
 
-const hydrateFromBovin = (bovin: BovinData | null) => {
+const hydrateFromBovin = (bovin: BovineTypeData | null) => {
     if (!bovin) {
         return
     }
     isHydrating.value = true
-    form.name = bovin.name ?? ''
+    form.label = bovin.label ?? ''
     form.code = bovin.code ?? ''
     isHydrating.value = false
 }
@@ -76,22 +76,26 @@ async function validate() {
     if (isLoading.value || isHydrating.value) return
 
     const normalizedBovinCode = form.code.trim()
-    const normalizedBovinName = form.name.trim()
+    const normalizedBovinLabel = form.label.trim()
 
 
     const basePayload = {
-        name: normalizedBovinName,
+        label: normalizedBovinLabel,
         code: normalizedBovinCode
 
     }
 
-    if(idBovin.value){
-        await updateBovin(idBovin.value, basePayload)
+    isLoading.value = true
+    try {
+        if (isEdit.value && idBovin.value !== null) {
+            await updateBovin(idBovin.value, basePayload)
+        } else {
+            await createBovin(basePayload)
+        }
         await navigate()
-        return
+    } finally {
+        isLoading.value = false
     }
-    await createBovin(basePayload)
-    await navigate()
 }
 
 async function navigate(){

frontend/pages/admin/bovin/list.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold text-primary-500 uppercase">Liste des bovins</h1>
+        <h1 class="text-3xl font-bold text-primary-500 uppercase">Liste des types 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"
-            >
+            @click="handleAddClick"
+        >
             <Icon name="mdi:plus" size="28"  />
             Ajouter
         </NuxtLink>
@@ -21,7 +22,7 @@
                        font-semibold uppercase
                        tracking-wide"
             >
-                <div class="col-span-1">Label</div>
+                <div class="col-span-1">Nom</div>
                 <div class="col-span-1">Code</div>
             </div>
             <div v-if="bovinList.length === 0" class="px-4 py-6 text-slate-400">

frontend/services/bovine-type.ts

@@ -12,41 +12,41 @@ export async function getBovineTypeList(): Promise<BovineTypeData[]> {
     })
 
     if (Array.isArray(response)) {
-        return response
+        return response.map(mapToBovineTypeData)
     }
 
     if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
-        return response['hydra:member']
+        return response['hydra:member'].map(mapToBovineTypeData)
     }
 
     return []
 }
 
-export async function getBovin(id: number): Promise<BovinData> {
+export async function getBovin(id: number): Promise<BovineTypeData> {
     const api = useApi()
     const response = await api.get<BovineTypeData>(`bovine_types/${id}`)
-    return mapToBovinData(response)
+    return mapToBovineTypeData(response)
 }
 
-export async function createBovin(payload: BovinPayload = {}): Promise<BovinData> {
+export async function createBovin(payload: BovinPayload = {}): Promise<BovineTypeData> {
     const api = useApi()
     const response = await api.post<BovineTypeData>('bovine_types', toBovineTypePayload(payload))
-    return mapToBovinData(response)
+    return mapToBovineTypeData(response)
 }
 
-export async function updateBovin(id: number, payload: BovinPayload = {}): Promise<BovinData> {
+export async function updateBovin(id: number, payload: BovinPayload = {}): Promise<BovineTypeData> {
     const api = useApi()
     const response = await api.patch<BovineTypeData>(`bovine_types/${id}`, toBovineTypePayload(payload))
-    return mapToBovinData(response)
+    return mapToBovineTypeData(response)
 }
 
-const mapToBovinData = (item: BovineTypeData): BovinData => ({
+const mapToBovineTypeData = (item: BovineTypeData): BovineTypeData => ({
     id: item.id,
-    name: item.label,
+    label: item.label,
     code: item.code
 })
 
 const toBovineTypePayload = (payload: BovinPayload): Partial<BovineTypeData> => ({
-    label: payload.name ?? undefined,
+    label: payload.label ?? undefined,
     code: payload.code ?? undefined
 })

frontend/services/dto/bovine-type-data.ts

@@ -5,11 +5,11 @@ export interface BovineTypeData{
 }
 
 export interface BovinFormData {
-    name: string
+    label: string
     code: string
 }
 
 export type BovinPayload = {
-    name?: string | null
+    label?: string | null
     code?: string | null
 }