feat(front) : retouches UX saisie bovin (filtre, toast, partial save, fix isSaisi)

- 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>
This commit is contained in:
2026-05-04 14:07:34 +02:00
parent 209b14eb56
commit 7d69860edc
3 changed files with 84 additions and 55 deletions

View File

@@ -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 {

View File

@@ -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)
}

View File

@@ -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
}