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:
@@ -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 {
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user