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 && auth.isAdmin"
                :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"
            >
                <Icon name="mdi:plus" size="28" />
                Ajouter
            </NuxtLink>
        </div>

        <div class="mt-8 mb-16">
            <UiDataTable
                v-model:page="page"
                v-model:per-page="perPage"
                :columns="columns"
                :items="items"
                :total-items="totalItems"
                :loading="loading"
                :row-clickable="auth.isAdmin"
                empty-message="Aucun bovin dans cette case."
                @row-click="goToBovine"
            >
                <template #header-nationalNumber>
                    <UiTextInput
                        v-model="filters.nationalNumber"
                        placeholder="Numéro national"
                        size="compact"
                    />
                </template>
                <template #header-receivedWeight>
                    <UiTextInput
                        v-model="filters.receivedWeight"
                        placeholder="Poids (kg)"
                        size="compact"
                    />
                </template>
                <template #header-arrivalDate>
                    <UiDateMaskedInput v-model="arrivalDateFilter" placeholder="Date d'arrivée" size="compact" />
                </template>
                <template #cell-arrivalDate="{ item }">
                    {{ formatDate(item.arrivalDate) }}
                </template>
                <template #cell-receivedWeight="{ item }">
                    {{ item.receivedWeight ?? '—' }}
                </template>
            </UiDataTable>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { BuildingCaseData } from '~/services/dto/building-case-data'
import type { BovineData } from '~/services/dto/bovine-data'
import { useAuthStore } from '~/stores/auth'
import { useDataTableServerState } from '~/composables/useDataTableServerState'

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 { items, totalItems, page, perPage, filters, loading, reload } =
    useDataTableServerState<BovineData>(
        'bovines',
        {
            buildingCase: '',
            nationalNumber: '',
            receivedWeight: '',
            'arrivalDate[after]': '',
            'arrivalDate[strictly_before]': ''
        },
        { initialPerPage: 10 }
    )

const addOneDay = (dateString: string): string => {
    const [year, month, day] = dateString.split('-').map(Number)
    const next = new Date(Date.UTC(year, month - 1, day + 1))
    return next.toISOString().slice(0, 10)
}

const arrivalDateFilter = computed<string>({
    get: () => (filters.value['arrivalDate[after]'] as string) ?? '',
    set: (value: string) => {
        if (!value) {
            filters.value['arrivalDate[after]'] = ''
            filters.value['arrivalDate[strictly_before]'] = ''
            return
        }
        filters.value['arrivalDate[after]'] = value
        filters.value['arrivalDate[strictly_before]'] = addOneDay(value)
    }
})

const columns = [
    { key: 'nationalNumber', label: 'Numéro national' },
    { key: 'receivedWeight', label: "Poids à l'arrivée (kg)" },
    { key: 'arrivalDate', label: "Date d'arrivée" }
]

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 = (bovine: BovineData) => {
    if (!auth.isAdmin) return
    router.push({
        path: '/infrastructure/bovine',
        query: { id: String(bovine.id), caseId: String(caseId.value) }
    })
}

watch(caseId, (id) => {
    if (!hasCaseId.value) {
        filters.value.buildingCase = ''
        buildingCase.value = null
        return
    }
    filters.value.buildingCase = `/api/building_cases/${id}`
    loadCase()
    reload()
}, { immediate: true })
</script>