Ferme/frontend/components/entry-exit/bovine-info-form.vue

<template>
    <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"
            />
            <UiNumberInput
                v-model="form.pricePerKg"
                label="Prix au kg"
                wrapperClass="flex-col"
                labelClass="font-bold uppercase text-xl text-primary-700"
                :min="0"
                :step="0.01"
            />
            <UiSelect
                v-model="form.buildingId"
                label="Bâtiment"
                :options="buildingOptions"
            />
            <UiSelect
                v-model="form.buildingCaseId"
                label="Case"
                :options="caseOptions"
                :disabled="form.buildingId === null"
            />
        </div>

        <div class="flex justify-center">
            <UiButton
                type="submit"
                class="text-md font-bold uppercase bg-primary-500 text-white h-[50px] px-8"
                :disabled="isSaving"
                :loading="isSaving"
            >
                Valider
            </UiButton>
        </div>
    </form>
</template>

<script setup lang="ts">
import type { BovineData } from '~/services/dto/bovine-data'
import type { BuildingData } from '~/services/dto/building-data'

const props = defineProps<{
    bovine: BovineData
    buildings: BuildingData[]
}>()

const emit = defineEmits<{
    saved: [bovine: BovineData]
}>()

const api = useApi()

interface FormState {
    receivedWeight: number | null
    pricePerKg: number | null
    buildingId: number | null
    buildingCaseId: number | null
}

const form = reactive<FormState>({
    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 isSaving = ref(false)

const buildingOptions = computed(() =>
    props.buildings.map(b => ({ value: b.id, label: b.label }))
)

const caseOptions = computed(() => {
    if (form.buildingId === null) return []
    const building = props.buildings.find(b => b.id === form.buildingId)
    if (!building?.buildingCases) return []
    return building.buildingCases.map(c => ({
        value: c.id,
        label: c.caseNumber !== null ? `Case ${c.caseNumber}` : (c.code ?? `#${c.id}`)
    }))
})

watch(() => form.buildingId, (newId) => {
    if (form.buildingCaseId === null) return
    const building = props.buildings.find(b => b.id === newId)
    const caseStillValid = building?.buildingCases?.some(c => c.id === form.buildingCaseId)
    if (!caseStillValid) {
        form.buildingCaseId = null
    }
})

const submit = async () => {
    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
    }

    isSaving.value = true
    try {
        const updated = await api.patch<BovineData>(
            `bovines/${props.bovine.id}`,
            payload,
            { toastSuccessMessage: `Bovin ${props.bovine.nationalNumber} enregistré.` }
        )
        emit('saved', updated)
    } finally {
        isSaving.value = false
    }
}
</script>