feat : admin bovin

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>

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>