Ferme/frontend/pages/infrastructure/case.vue

<template>
    <div class="px-[86px]">
        <div class="flex items-center justify-between relative">
            <div class="flex flex-row absolute -left-[60px]">
                <Icon
                    @click="router.push('/infrastructure/building')"
                    name="gg:arrow-left-o"
                    size="44"
                    class="cursor-pointer text-primary-500"
                />
            </div>
            <div class="flex items-center gap-4">
                <h1 class="font-bold text-4xl text-primary-500 uppercase">
                    {{ title }}
                </h1>
                <div
                    v-if="hasCaseId"
                    class="bg-primary-500 p-1 rounded-md flex items-center cursor-pointer"
                    title="Imprimer"
                    @click="printCaseReport"
                >
                    <Icon name="mdi:printer-outline" size="32" class="text-white" />
                </div>
            </div>
            <NuxtLink
                v-if="hasCaseId"
                :to="addBovineRoute"
                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
                :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60 pointer-events-none'"
            >
                <Icon name="mdi:plus" size="28" />
                Ajouter
            </NuxtLink>
        </div>

        <div class="mt-8 border border-slate-200 mb-16">
            <div
                class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
            >
                <div>Numéro national</div>
                <div>Poids à l'arrivée (kg)</div>
                <div>Date d'arrivée</div>
            </div>
            <template v-if="bovines.length > 0">
                <div
                    v-for="bovine in bovines"
                    :key="bovine.id"
                    class="grid grid-cols-3 gap-4 px-4 py-3 text-sm border-t border-slate-200"
                    :class="auth.isAdmin ? 'cursor-pointer hover:bg-slate-50' : ''"
                    :role="auth.isAdmin ? 'button' : undefined"
                    :tabindex="auth.isAdmin ? 0 : undefined"
                    @click="goToBovine(bovine.id)"
                    @keydown.enter="goToBovine(bovine.id)"
                >
                    <div>{{ bovine.nationalNumber }}</div>
                    <div>{{ bovine.receivedWeight ?? '—' }}</div>
                    <div>{{ formatDate(bovine.arrivalDate) }}</div>
                </div>
            </template>
            <div
                v-else
                class="px-4 py-3 text-sm border-t border-slate-200 text-slate-500"
            >
                Aucun bovin dans cette case.
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import type { BuildingCaseData } from '~/services/dto/building-case-data'
import { useAuthStore } from '~/stores/auth'

const route = useRoute()
const router = useRouter()
const { printPdf } = usePdfPrinter()
const api = useApi()
const auth = useAuthStore()

const caseId = computed(() => Number(route.query.id))
const hasCaseId = computed(() => Number.isFinite(caseId.value) && caseId.value > 0)

const buildingCase = ref<BuildingCaseData | null>(null)
const bovines = computed(() => buildingCase.value?.bovines ?? [])

const title = computed(() => {
    if (!buildingCase.value) return ''
    const buildingLabel = buildingCase.value.building?.label ?? ''
    const caseNumber = buildingCase.value.caseNumber ?? ''
    return `${buildingLabel} case ${caseNumber}`.trim()
})

const addBovineRoute = computed(() => ({
    path: '/infrastructure/bovine',
    query: { caseId: String(caseId.value) }
}))

const formatDate = (date: string | null) => {
    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 loadCase = async () => {
    if (!hasCaseId.value) {
        buildingCase.value = null
        return
    }
    buildingCase.value = await api.get<BuildingCaseData>(`/building_cases/${caseId.value}`)
}

const printCaseReport = async () => {
    if (!hasCaseId.value) {
        return
    }

    const filename = `tableau_poids_case_${caseId.value}.pdf`
    await printPdf(`/building_cases/${caseId.value}/weights-report`, filename)
}

const goToBovine = (id: number) => {
    if (!auth.isAdmin) return
    router.push({
        path: '/infrastructure/bovine',
        query: { id: String(id), caseId: String(caseId.value) }
    })
}

watch(caseId, loadCase, { immediate: true })
</script>