From 7d69860edc2315973759c01c8878bca8a182795d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 4 May 2026 14:07:34 +0200
Subject: [PATCH] feat(front) : retouches UX saisie bovin (filtre, toast,
 partial save, fix isSaisi)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- isSaisi : != null couvre les champs absents du JSON (API Platform strip null)
- UiNumberInput : ne réécrit target.value que si réellement clampé (fix saisie décimaux)
- Form : champs optionnels, payload partiel, toast de confirmation
- Page : filtre N° national au-dessus de la liste

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../entry-exit/bovine-info-form.vue           | 42 ++++-----
 frontend/components/ui/UiNumberInput.vue      |  4 +-
 .../pages/entry-exit/bovine-info/[id].vue     | 93 ++++++++++++-------
 3 files changed, 84 insertions(+), 55 deletions(-)

diff --git a/frontend/components/entry-exit/bovine-info-form.vue b/frontend/components/entry-exit/bovine-info-form.vue
index 068b3c3..8003f95 100644
--- a/frontend/components/entry-exit/bovine-info-form.vue
+++ b/frontend/components/entry-exit/bovine-info-form.vue
@@ -1,32 +1,32 @@
 <template>
-    <form class="space-y-6" :class="{ submitted }" @submit.prevent="submit">
-        <div class="grid grid-cols-2 gap-x-12 gap-y-6">
+    <form class="space-y-6" @submit.prevent="submit">
+        <div class="grid grid-cols-4 gap-x-12 gap-y-6">
             <UiNumberInput
                 v-model="form.receivedWeight"
                 label="Poids d'arrivée (kg)"
+                wrapperClass="flex-col"
+                labelClass="font-bold uppercase text-xl text-primary-700"
                 :min="0"
                 :step="1"
-                required
             />
             <UiNumberInput
                 v-model="form.pricePerKg"
-                label="Prix d'achat (kg)"
+                label="Prix au kg"
+                wrapperClass="flex-col"
+                labelClass="font-bold uppercase text-xl text-primary-700"
                 :min="0"
                 :step="0.01"
-                required
             />
             <UiSelect
                 v-model="form.buildingId"
                 label="Bâtiment"
                 :options="buildingOptions"
-                required
             />
             <UiSelect
                 v-model="form.buildingCaseId"
                 label="Case"
                 :options="caseOptions"
                 :disabled="form.buildingId === null"
-                required
             />
         </div>
 
@@ -66,15 +66,14 @@ interface FormState {
 }
 
 const form = reactive<FormState>({
-    receivedWeight: props.bovine.receivedWeight,
-    pricePerKg: props.bovine.pricePerKg,
+    receivedWeight: props.bovine.receivedWeight ?? null,
+    pricePerKg: props.bovine.pricePerKg ?? null,
     buildingId: props.bovine.buildingCase?.building?.id
         ?? props.bovine.effectiveBuilding?.id
         ?? null,
     buildingCaseId: props.bovine.buildingCase?.id ?? null
 })
 
-const submitted = ref(false)
 const isSaving = ref(false)
 
 const buildingOptions = computed(() =>
@@ -101,13 +100,15 @@ watch(() => form.buildingId, (newId) => {
 })
 
 const submit = async () => {
-    submitted.value = true
-    if (
-        form.receivedWeight === null
-        || form.pricePerKg === null
-        || form.buildingId === null
-        || form.buildingCaseId === null
-    ) {
+    const payload: Record<string, unknown> = {}
+    if (form.receivedWeight != null) payload.receivedWeight = form.receivedWeight
+    if (form.pricePerKg != null) payload.pricePerKg = form.pricePerKg
+    if (form.buildingCaseId != null) {
+        payload.buildingCase = `/api/building_cases/${form.buildingCaseId}`
+    }
+
+    if (Object.keys(payload).length === 0) {
+        emit('saved', props.bovine)
         return
     }
 
@@ -115,11 +116,8 @@ const submit = async () => {
     try {
         const updated = await api.patch<BovineData>(
             `bovines/${props.bovine.id}`,
-            {
-                receivedWeight: form.receivedWeight,
-                pricePerKg: form.pricePerKg,
-                buildingCase: `/api/building_cases/${form.buildingCaseId}`
-            }
+            payload,
+            { toastSuccessMessage: `Bovin ${props.bovine.nationalNumber} enregistré.` }
         )
         emit('saved', updated)
     } finally {
diff --git a/frontend/components/ui/UiNumberInput.vue b/frontend/components/ui/UiNumberInput.vue
index eaca5c5..542519b 100644
--- a/frontend/components/ui/UiNumberInput.vue
+++ b/frontend/components/ui/UiNumberInput.vue
@@ -108,7 +108,9 @@ const onInput = (event: Event) => {
         numeric = Math.min(max, numeric)
     }
 
-    target.value = String(numeric)
+    if (numeric !== parsed) {
+        target.value = String(numeric)
+    }
     emit('update:modelValue', numeric)
 }
 
diff --git a/frontend/pages/entry-exit/bovine-info/[id].vue b/frontend/pages/entry-exit/bovine-info/[id].vue
index 7a583f3..b876091 100644
--- a/frontend/pages/entry-exit/bovine-info/[id].vue
+++ b/frontend/pages/entry-exit/bovine-info/[id].vue
@@ -14,36 +14,49 @@
 
         <div v-if="loading" class="text-center text-slate-500">Chargement…</div>
 
-        <div v-else class="space-y-3">
-            <UiAccordion
-                v-for="bovine in sortedBovines"
-                :key="bovine.id"
-                :model-value="openId === bovine.id"
-                @update:model-value="onToggle(bovine.id, $event)"
-            >
-                <template #header>
-                    <span class="flex items-center gap-3 normal-case">
-                        <span class="font-bold text-base">{{ bovine.nationalNumber }}</span>
-                        <span
-                            v-if="isSaisi(bovine)"
-                            class="inline-block rounded px-2 py-0.5 text-xs font-semibold bg-green-100 text-green-700"
-                        >
-                            Saisie
-                        </span>
-                        <span
-                            v-else
-                            class="inline-block rounded px-2 py-0.5 text-xs font-semibold bg-yellow-100 text-yellow-700"
-                        >
-                            Attente saisie
-                        </span>
-                    </span>
-                </template>
-                <BovineInfoForm
-                    :bovine="bovine"
-                    :buildings="buildings"
-                    @saved="onSaved"
+        <div v-else>
+            <div class="mb-4 max-w-[200px]">
+                <UiTextInput
+                    v-model="searchQuery"
+                    placeholder="N° national"
+                    size="compact"
+                    inputmode="numeric"
+                    pattern="[0-9]*"
+                    inputClass="text-xl"
                 />
-            </UiAccordion>
+            </div>
+
+            <div class="space-y-3">
+                <UiAccordion
+                    v-for="bovine in filteredBovines"
+                    :key="bovine.id"
+                    :model-value="openId === bovine.id"
+                    @update:model-value="onToggle(bovine.id, $event)"
+                >
+                    <template #header>
+                        <span class="flex items-center gap-3 normal-case">
+                            <span class="font-bold text-base">{{ bovine.nationalNumber }}</span>
+                            <span
+                                v-if="isSaisi(bovine)"
+                                class="inline-block rounded px-2 py-0.5 text-xs font-semibold bg-green-100 text-green-700"
+                            >
+                                Saisie
+                            </span>
+                            <span
+                                v-else
+                                class="inline-block rounded px-2 py-0.5 text-xs font-semibold bg-yellow-100 text-yellow-700"
+                            >
+                                Attente saisie
+                            </span>
+                        </span>
+                    </template>
+                    <BovineInfoForm
+                        :bovine="bovine"
+                        :buildings="buildings"
+                        @saved="onSaved"
+                    />
+                </UiAccordion>
+            </div>
         </div>
     </div>
 </template>
@@ -53,6 +66,7 @@ import type { BovineData } from '~/services/dto/bovine-data'
 import type { BuildingData } from '~/services/dto/building-data'
 import type { ReceptionData } from '~/services/dto/reception-data'
 import { getBuildingList } from '~/services/building'
+import BovineInfoForm from '~/components/entry-exit/bovine-info-form.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -65,15 +79,22 @@ const bovines = ref<BovineData[]>([])
 const buildings = ref<BuildingData[]>([])
 const loading = ref(true)
 const openId = ref<number | null>(null)
+const searchQueryRaw = ref('')
+const searchQuery = computed<string>({
+    get: () => searchQueryRaw.value,
+    set: (value) => {
+        searchQueryRaw.value = value.replace(/\D/g, '')
+    }
+})
 
 useHead({
     title: () => `Saisie information bovin ${reception.value?.identificationNumber ?? ''}`.trim()
 })
 
 const isSaisi = (bovine: BovineData) =>
-    bovine.receivedWeight !== null
-    && bovine.pricePerKg !== null
-    && bovine.buildingCase !== null
+    bovine.receivedWeight != null
+    && bovine.pricePerKg != null
+    && bovine.buildingCase != null
 
 const sortedBovines = computed(() => {
     const pending = bovines.value.filter(b => !isSaisi(b))
@@ -81,6 +102,14 @@ const sortedBovines = computed(() => {
     return [...pending, ...done]
 })
 
+const filteredBovines = computed(() => {
+    const query = searchQuery.value.trim().toLowerCase()
+    if (!query) return sortedBovines.value
+    return sortedBovines.value.filter(b =>
+        b.nationalNumber.toLowerCase().includes(query)
+    )
+})
+
 const onToggle = (bovineId: number, value: boolean) => {
     openId.value = value ? bovineId : null
 }