Ferme/frontend/pages/entry-exit/entry/[id].vue

<template>
    <div class="px-[86px]">
        <div class="flex items-center justify-start gap-6 relative">
            <Icon
                @click="router.push('/entry-exit')"
                name="gg:arrow-left-o"
                size="44"
                class="cursor-pointer text-primary-500 absolute -left-[60px]"
            />
            <div>
                <h1 class="font-bold text-3xl uppercase text-primary-500">
                    Entrée bovins {{ reception?.identificationNumber ?? '' }}
                </h1>
            </div>
        </div>
        <p class="text-sm text-slate-600 mt-1 mb-8">
            {{ reception?.supplier?.name ?? '—' }} · Bovins déclarés : {{ declaredCount }} · Bovins saisis : {{ savedBovinesTotal }}
        </p>

        <form
            class="grid grid-cols-4 gap-x-16 gap-y-8 mb-12 items-end"
            :class="{ submitted }"
            @submit.prevent="addBovine"
        >
            <UiTextInput
                v-model="form.nationalNumber"
                label="Numéro national"
                required
            />
            <UiSelect
                v-model="form.entryCause"
                label="Cause d'entrée"
                :options="entryCauseOptions"
                required
            />
            <UiDateMaskedInput
                v-model="form.arrivalDate"
                label="Date d'entrée"
            />
            <UiSelect
                v-model="form.supplierId"
                label="Vendeur"
                :options="supplierOptions"
            />
            <UiSelect
                v-model="form.buildingId"
                label="Bâtiment"
                :options="buildingOptions"
            />
            <UiSelect
                v-model="form.caseId"
                label="Case"
                :options="caseOptions"
                :disabled="!form.buildingId"
            />
            <UiNumberInput
                v-model="form.receivedWeight"
                label="Poids (kg)"
                wrapperClass="flex-col"
                labelClass="font-bold uppercase text-xl text-primary-700"
                :min="1"
            />
            <UiNumberInput
                v-model="form.pricePerKg"
                label="Prix au kilo (€)"
                wrapperClass="flex-col"
                labelClass="font-bold uppercase text-xl text-primary-700"
                :min="0"
                :step="0.01"
            />
        </form>

        <div class="flex justify-center mb-12">
            <UiButton
                type="button"
                class="text-md font-bold uppercase bg-primary-500 text-white h-[50px] px-8"
                :disabled="isAdding"
                :loading="isAdding"
                @click="addBovine"
            >
                Ajouter
            </UiButton>
        </div>

        <UiDataTable
            v-model:page="recapPage"
            v-model:per-page="recapPerPage"
            :columns="recapColumns"
            :items="savedBovines"
            :total-items="savedBovinesTotal"
            :loading="savedBovinesLoading"
            :show-actions="true"
        >
            <template #cell-birthDate="{ item }">
                {{ formatDate(item.birthDate) }}
            </template>
            <template #cell-arrivalDate="{ item }">
                {{ formatDate(item.arrivalDate) }}
            </template>
            <template #cell-finalPrice="{ item }">
                {{ formatPrice(item.finalPrice) }}
            </template>
            <template #cell-pricePerKg="{ item }">
                {{ formatPrice(item.pricePerKg) }}
            </template>
            <template #cell-buildingCase.building.label="{ item }">
                {{ item.effectiveBuilding?.label ?? '—' }}
            </template>
            <template #cell-buildingCase.caseNumber="{ item }">
                {{ item.buildingCase?.caseNumber ?? '—' }}
            </template>
            <template #cell-bovineType.label="{ item }">
                {{ item.bovineType?.label ?? '—' }}
            </template>
            <template #actions="{ item }">
                <Icon
                    name="mdi:delete-outline"
                    size="24"
                    class="cursor-pointer text-red-500 hover:text-red-700"
                    @click="confirmDeleteBovine(item)"
                />
            </template>
        </UiDataTable>

        <div class="flex justify-center mt-8">
            <UiButton
                type="button"
                class="text-md font-bold uppercase bg-primary-500 text-white h-[50px] px-8"
                :disabled="savedBovinesTotal === 0 || isValidating"
                :loading="isValidating"
                @click="validateEntry"
            >
                Valider l'entrée
            </UiButton>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { ReceptionData } from '~/services/dto/reception-data'
import type { BovineData } from '~/services/dto/bovine-data'
import type { SupplierData } from '~/services/dto/supplier-data'
import type { BuildingData } from '~/services/dto/building-data'
import { getSupplierList } from '~/services/supplier'
import { getBuildingList } from '~/services/building'
import { useDataTableServerState } from '~/composables/useDataTableServerState'

const route = useRoute()
const router = useRouter()
const api = useApi()

const receptionId = computed(() => Number(route.params.id))

const reception = ref<ReceptionData | null>(null)
const suppliers = ref<SupplierData[]>([])
const buildings = ref<BuildingData[]>([])

const {
    items: savedBovines,
    totalItems: savedBovinesTotal,
    page: recapPage,
    perPage: recapPerPage,
    loading: savedBovinesLoading,
    reload: reloadSavedBovines
} = useDataTableServerState<BovineData>(
    'bovines',
    { reception: receptionId.value },
    { initialPerPage: 50 }
)

const isAdding = ref(false)
const isValidating = ref(false)
const submitted = ref(false)

const recapColumns = [
    { key: 'nationalNumber', label: 'N° National', width: '110px' },
    { key: 'workNumber', label: 'N° Travail', width: '90px' },
    { key: 'bovineType.label', label: 'Race', width: '110px' },
    { key: 'sex', label: 'Sexe', width: '60px' },
    { key: 'birthDate', label: 'Né le', width: '90px' },
    { key: 'receivedWeight', label: 'Poids', width: '70px' },
    { key: 'arrivalDate', label: 'Entrée le', width: '90px' },
    { key: 'pricePerKg', label: 'Prix/kg', width: '80px' },
    { key: 'finalPrice', label: 'Prix total', width: '90px' },
    { key: 'buildingCase.building.label', label: 'Bâtiment', width: '1fr' },
    { key: 'buildingCase.caseNumber', label: 'Case', width: '60px' }
]

const formatDate = (date: string | null | undefined) => {
    if (!date) return '—'
    const d = new Date(date.replace(' ', 'T'))
    if (isNaN(d.getTime())) return date
    return d.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' })
}

const formatPrice = (price: number | null | undefined) => {
    if (price === null || price === undefined) return '—'
    return `${price.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`
}

const confirmDeleteBovine = async (bovine: BovineData) => {
    const confirmed = window.confirm(`Supprimer le bovin ${bovine.nationalNumber} ?`)
    if (!confirmed) return

    await api.delete(`bovines/${bovine.id}`)
    reloadSavedBovines()
}

const validateEntry = async () => {
    if (savedBovinesTotal.value === 0 || isValidating.value) return

    const message = savedBovinesTotal.value !== declaredCount.value
        ? `Attention : ${savedBovinesTotal.value} bovins saisis sur ${declaredCount.value} déclarés. Êtes-vous sûr de vouloir valider l'entrée ?`
        : `Êtes-vous sûr de vouloir valider l'entrée ?`

    if (!window.confirm(message)) return

    isValidating.value = true
    try {
        await api.patch(`receptions/${receptionId.value}`, { entryCompleted: true })
        router.push('/entry-exit')
    } finally {
        isValidating.value = false
    }
}

type EntryCause = 'A' | 'N' | 'P'

interface FormState {
    nationalNumber: string
    entryCause: EntryCause
    arrivalDate: string
    supplierId: string | number | null
    buildingId: string | number | null
    caseId: string | number | null
    receivedWeight: number | null
    pricePerKg: number | null
}

const entryCauseOptions = [
    { value: 'A', label: 'Achat' },
    { value: 'N', label: 'Naissance' },
    { value: 'P', label: 'Prêt ou pension' }
]

const initialForm = (): FormState => ({
    nationalNumber: '',
    entryCause: 'A',
    arrivalDate: reception.value?.receptionDate?.slice(0, 10) ?? '',
    supplierId: reception.value?.supplier?.id ?? null,
    buildingId: reception.value?.buildings?.[0]?.id ?? null,
    caseId: null,
    receivedWeight: null,
    pricePerKg: null
})

const form = reactive<FormState>(initialForm())

const supplierOptions = computed(() =>
    suppliers.value.map(s => ({ value: s.id, label: s.name }))
)

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

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

watch(() => form.buildingId, (newVal, oldVal) => {
    if (newVal !== oldVal) form.caseId = null
})

const declaredCount = computed(() => reception.value?.declaredBovineCount ?? 0)

const isFormValid = computed(() =>
    form.nationalNumber.trim() !== ''
    && !!form.entryCause
)

const resetForm = () => {
    Object.assign(form, initialForm())
}

const loadReception = async () => {
    reception.value = await api.get<ReceptionData>(`receptions/${receptionId.value}`)
    resetForm()
}

const focusFirstField = () => {
    const el = document.querySelector<HTMLInputElement>('form input[type="text"]')
    el?.focus()
}

const addBovine = async () => {
    submitted.value = true
    if (!isFormValid.value || isAdding.value) return

    isAdding.value = true
    try {
        const payload: Record<string, unknown> = {
            nationalNumber: form.nationalNumber.trim(),
            entryCause: form.entryCause,
            reception: `/api/receptions/${receptionId.value}`
        }
        if (form.receivedWeight !== null) payload.receivedWeight = form.receivedWeight
        if (form.pricePerKg !== null) payload.pricePerKg = form.pricePerKg
        if (form.arrivalDate) payload.arrivalDate = form.arrivalDate
        if (form.supplierId !== null) payload.supplier = `/api/suppliers/${form.supplierId}`
        if (form.caseId !== null) payload.buildingCase = `/api/building_cases/${form.caseId}`

        await api.post<BovineData>('bovines', payload, {
            headers: { 'Content-Type': 'application/ld+json' }
        })

        reloadSavedBovines()
        resetForm()
        submitted.value = false
        await nextTick()
        focusFirstField()
    } finally {
        isAdding.value = false
    }
}

onMounted(async () => {
    [suppliers.value, buildings.value] = await Promise.all([
        getSupplierList(),
        getBuildingList()
    ])
    await loadReception()
    reloadSavedBovines()
})
</script>