Ferme/frontend/pages/bovine/[id].vue

<template>
    <div class="px-[86px]">
        <div class="flex items-center justify-between relative mb-10">
            <div class="flex flex-row absolute -left-[60px]">
                <Icon
                    @click="goBack"
                    name="gg:arrow-left-o"
                    size="44"
                    class="cursor-pointer text-primary-500"
                />
            </div>
            <h1 class="font-bold text-3xl uppercase text-primary-500">Vie du bovin</h1>
        </div>

        <UiTabs
            v-model="activeTab"
            :tabs="tabs"
        />

        <div v-if="auth.isBureau" v-show="activeTab === 'mouvement'">
            <form :class="{ submitted: movementSubmitted }" @submit.prevent="submitMovement">
                <div class="flex flex-cols-3 justify-between mb-10">
                    <UiSelect
                        id="movement-building"
                        v-model="newMovementBuildingId"
                        label="Bâtiment"
                        :options="buildingOptions"
                        wrapper-class="w-[280px]"
                        required
                    />
                    <UiSelect
                        id="movement-case"
                        v-model="newMovementCaseId"
                        label="Case"
                        :options="caseOptions"
                        :disabled="!newMovementBuildingId"
                        wrapper-class="w-[280px]"
                        required
                    />
                    <UiDateInput
                        id="movement-date"
                        v-model="newMovementDate"
                        label="Date mouvement"
                        wrapper-class="w-[280px]"
                        required
                    />
                </div>

                <div class="flex items-center justify-center mb-11">
                    <UiButton
                        type="submit"
                        class="inline-flex items-center justify-center gap-2 text-xl text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80"
                        :disabled="isSubmittingMovement"
                        :loading="isSubmittingMovement"
                        @click="movementSubmitted = true"
                    >
                        <Icon name="mdi:plus" size="28" />
                        Ajouter
                    </UiButton>
                </div>
            </form>

            <UiDataTable
                :columns="movementColumns"
                :items="filteredMovementRows"
                :per-page="10"
            >
                <template #header-building>
                    <UiTextInput
                        v-model="movementFilters.building"
                        placeholder="Bâtiment"
                        size="compact"
                    />
                </template>
                <template #header-case>
                    <UiTextInput
                        v-model="movementFilters.case"
                        placeholder="Case"
                        size="compact"
                    />
                </template>
                <template #header-enteredAt>
                    <UiTextInput :model-value="''" placeholder="Du" size="compact" disabled />
                </template>
                <template #header-leftAt>
                    <UiTextInput :model-value="''" placeholder="Au" size="compact" disabled />
                </template>
                <template #header-duration>
                    <UiTextInput :model-value="''" placeholder="Durée" size="compact" disabled />
                </template>
                <template #cell-leftAt="{ item }">
                    <span v-if="item.leftAt">{{ item.leftAt }}</span>
                    <span v-else class="italic text-slate-500">En cours</span>
                </template>
            </UiDataTable>
        </div>

        <div v-show="activeTab === 'passeport'">
            <div class="mt-6">
                <div class="grid grid-cols-[3rem_repeat(6,minmax(0,1fr))] grid-rows-2 border-2 border-black">
                    <div class="row-span-2 flex items-center justify-center border-r-2 border-black">
                        <span class="uppercase font-bold -rotate-90 whitespace-nowrap transform-gpu">Veau</span>
                    </div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Numéro national</div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">N° de travail</div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Sexe</div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Code race</div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Type de race</div>
                    <div class="border-b border-black px-2 py-1 text-center font-semibold text-sm">Date de naissance</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.nationalNumber) }}</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.workNumber) }}</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.sex) }}</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.bovineType?.code) }}</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.bovineType?.label) }}</div>
                    <div class="px-2 py-1 text-center">{{ formatDate(bovine?.birthDate) }}</div>
                </div>
            </div>

            <div class="mt-9">
                <div class="grid grid-cols-[3rem_repeat(6,minmax(0,1fr))] grid-rows-2 border-2 border-black">
                    <div class="row-span-2 flex items-center justify-center border-r-2 border-black">
                        <span class="uppercase font-bold -rotate-90 whitespace-nowrap transform-gpu">Père</span>
                    </div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Numéro national</div>
                    <div class="col-span-2 border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">N° de travail</div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Code race</div>
                    <div class="col-span-2 border-b border-black px-2 py-1 text-center font-semibold text-sm">Type de race</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.fatherNationalNumber) }}</div>
                    <div class="col-span-2 border-r border-black px-2 py-1 text-center">{{ display(workNumberFromNational(bovine?.fatherNationalNumber)) }}</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.fatherBovineType?.code) }}</div>
                    <div class="col-span-2 px-2 py-1 text-center">{{ display(bovine?.fatherBovineType?.label) }}</div>
                </div>
            </div>

            <div class="mt-9">
                <div class="grid grid-cols-[3rem_repeat(6,minmax(0,1fr))] grid-rows-2 border-2 border-black">
                    <div class="row-span-2 flex items-center justify-center border-r-2 border-black">
                        <span class="uppercase font-bold -rotate-90 whitespace-nowrap transform-gpu">Mère</span>
                    </div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Numéro national</div>
                    <div class="col-span-2 border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">N° de travail</div>
                    <div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Code race</div>
                    <div class="col-span-2 border-b border-black px-2 py-1 text-center font-semibold text-sm">Type de race</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.motherNationalNumber) }}</div>
                    <div class="col-span-2 border-r border-black px-2 py-1 text-center">{{ display(workNumberFromNational(bovine?.motherNationalNumber)) }}</div>
                    <div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.motherBovineType?.code) }}</div>
                    <div class="col-span-2 px-2 py-1 text-center">{{ display(bovine?.motherBovineType?.label) }}</div>
                </div>
            </div>
        </div>

        <div v-show="activeTab === 'sante'">
            <div class="border-2 border-dashed border-primary-500 rounded-md py-16 text-center text-primary-500 font-bold uppercase text-2xl">
                À venir
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getBuildingList } from '~/services/building'
import type { BuildingData } from '~/services/dto/building-data'
import { useAuthStore } from '~/stores/auth'

useHead({ title: 'Vie du bovin' })

const auth = useAuthStore()

type BovineTab = 'mouvement' | 'passeport' | 'sante'
const tabs = computed(() => [
    ...(auth.isBureau ? [{ key: 'mouvement' as const, label: 'Mouvement' }] : []),
    { key: 'passeport' as const, label: 'Passeport bovin' },
    { key: 'sante' as const, label: 'Santé' }
])
const activeTab = ref<BovineTab>(auth.isBureau ? 'mouvement' : 'passeport')

interface BovineTypeRef {
    id: number
    label: string | null
    code: string | null
}

interface BuildingRef {
    label: string | null
}

interface BuildingCaseRef {
    caseNumber: number | null
    building: BuildingRef | null
}

interface BovineMovementData {
    id: number
    enteredAt: string
    leftAt: string | null
    buildingCase: BuildingCaseRef | null
    building: BuildingRef | null
}

interface BovinePassportData {
    id: number
    nationalNumber: string
    workNumber: string | null
    sex: string | null
    birthDate: string | null
    exitedAt: string | null
    exitDate: string | null
    bovineType: BovineTypeRef | null
    motherNationalNumber: string | null
    motherBovineType: BovineTypeRef | null
    fatherNationalNumber: string | null
    fatherBovineType: BovineTypeRef | null
    movements: BovineMovementData[]
}

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

const goBack = () => {
    if (window.history.state?.back) {
        router.back()
    } else {
        router.push('/inventory')
    }
}

const todayIso = () => new Date().toISOString().slice(0, 10)

const bovine = ref<BovinePassportData | null>(null)
const buildings = ref<BuildingData[]>([])
const newMovementBuildingId = ref<string | number | null>(null)
const newMovementCaseId = ref<string | number | null>(null)
const newMovementDate = ref<string>(todayIso())
const isSubmittingMovement = ref(false)
const movementSubmitted = ref(false)
const movementFilters = ref({ building: '', case: '' })

const bovineId = computed(() => {
    const raw = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
    const n = Number(raw)
    return Number.isFinite(n) ? n : null
})

const display = (value: string | null | undefined) => (value && value !== '' ? value : '—')

const workNumberFromNational = (nationalNumber: string | null | undefined) => {
    if (!nationalNumber) return null
    return nationalNumber.slice(-4)
}

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

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(newMovementBuildingId.value))
    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(newMovementBuildingId, () => {
    newMovementCaseId.value = null
})

const movementColumns = [
    { key: 'building', label: 'Bâtiment' },
    { key: 'case', label: 'Case' },
    { key: 'enteredAt', label: 'Du' },
    { key: 'leftAt', label: 'Au' },
    { key: 'duration', label: 'Durée' }
]

const movementEndDate = (movement: BovineMovementData): string | null => {
    return movement.leftAt ?? bovine.value?.exitedAt ?? bovine.value?.exitDate ?? null
}

const formatDuration = (movement: BovineMovementData): string => {
    const start = new Date(movement.enteredAt)
    if (isNaN(start.getTime())) return '—'
    const endRaw = movementEndDate(movement)
    const end = endRaw ? new Date(endRaw) : new Date()
    if (isNaN(end.getTime())) return '—'
    const days = Math.max(0, Math.floor((end.getTime() - start.getTime()) / 86_400_000))
    return `${days} j`
}

const movementRows = computed(() => {
    const list = bovine.value?.movements ?? []
    return list.map(m => ({
        id: m.id,
        building: m.buildingCase?.building?.label ?? m.building?.label ?? '—',
        case: m.buildingCase?.caseNumber != null ? `Case ${m.buildingCase.caseNumber}` : '—',
        enteredAt: formatDate(m.enteredAt),
        leftAt: m.leftAt ? formatDate(m.leftAt) : null,
        duration: formatDuration(m)
    }))
})

const filteredMovementRows = computed(() => {
    const buildingFilter = movementFilters.value.building.trim().toLowerCase()
    const caseFilter = movementFilters.value.case.trim().toLowerCase()
    return movementRows.value.filter(row => {
        if (buildingFilter && !row.building.toLowerCase().includes(buildingFilter)) return false
        if (caseFilter && !row.case.toLowerCase().includes(caseFilter)) return false
        return true
    })
})

const submitMovement = async () => {
    if (!newMovementCaseId.value || !newMovementDate.value || bovineId.value === null) return

    const buildingLabel = buildingOptions.value.find(o => o.value === Number(newMovementBuildingId.value))?.label ?? '—'
    const caseLabel = caseOptions.value.find(o => o.value === Number(newMovementCaseId.value))?.label ?? '—'
    const dateLabel = formatDate(newMovementDate.value)
    const confirmed = window.confirm(
        `Confirmer la création du mouvement ?\n\nBâtiment : ${buildingLabel}\nCase : ${caseLabel}\nDate : ${dateLabel}`
    )
    if (!confirmed) return

    isSubmittingMovement.value = true
    try {
        await api.post('bovine_movements', {
            bovine: `/api/bovines/${bovineId.value}`,
            buildingCase: `/api/building_cases/${newMovementCaseId.value}`,
            enteredAt: newMovementDate.value
        }, { toastSuccessMessage: 'Mouvement enregistré' })
        bovine.value = await api.get<BovinePassportData>(`bovines/${bovineId.value}`)
        newMovementBuildingId.value = null
        newMovementCaseId.value = null
        newMovementDate.value = todayIso()
        movementSubmitted.value = false
    } finally {
        isSubmittingMovement.value = false
    }
}

onMounted(async () => {
    if (bovineId.value === null) return
    const [bovineData, buildingList] = await Promise.all([
        api.get<BovinePassportData>(`bovines/${bovineId.value}`),
        getBuildingList()
    ])
    bovine.value = bovineData
    buildings.value = buildingList
})
</script>