Ferme/frontend/pages/inventory.vue

<template>
    <div class="flex items-center justify-start gap-10">
        <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
        <h1 class="text-3xl font-bold uppercase text-primary-500">Inventaire bovins</h1>
    </div>

    <div class="px-[86px]">
        <div class="mt-6 mb-16">
            <UiDataTable
                v-model:page="page"
                v-model:per-page="perPage"
                :columns="columns"
                :items="items"
                :total-items="totalItems"
                :loading="loading"
            >
                <template #header-nationalNumber>
                    <UiTextInput
                        v-model="filters.nationalNumber"
                        placeholder="N° National"
                        size="compact"
                    />
                </template>
                <template #header-workNumber>
                    <UiTextInput
                        v-model="filters.workNumber"
                        placeholder="N° Travail"
                        size="compact"
                    />
                </template>
                <template #header-sex>
                    <UiSelect
                        v-model="filters.sex"
                        placeholder="Sex"
                        :options="sexOptions"
                        size="compact"
                    />
                </template>
                <template #header-birthDate>
                    <UiDateInput v-model="birthDateFilter" size="compact" />
                </template>
                <template #header-breedCode>
                    <UiTextInput
                        v-model="filters.breedCode"
                        placeholder="Race"
                        size="compact"
                    />
                </template>
                <template #header-arrivalDate>
                    <UiDateInput v-model="arrivalDateFilter" size="compact" />
                </template>
                <template #cell-birthDate="{ item }">
                    {{ formatDate(item.birthDate) }}
                </template>
                <template #cell-arrivalDate="{ item }">
                    {{ formatDate(item.arrivalDate) }}
                </template>
            </UiDataTable>
        </div>
    </div>
</template>

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

const router = useRouter()

const { items, totalItems, page, perPage, filters, loading, reload } =
    useDataTableServerState<BovineData>(
        'bovines',
        {
            'exists[exitedAt]': 'false',
            nationalNumber: '',
            workNumber: '',
            breedCode: '',
            sex: '',
            'arrivalDate[after]': '',
            'arrivalDate[strictly_before]': '',
            'birthDate[after]': '',
            'birthDate[strictly_before]': ''
        }
    )

const sexOptions = [
    { value: 'M', label: 'Mâle' },
    { value: 'F', label: 'Femelle' }
]

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 singleDateFilter = (afterKey: string, beforeKey: string) =>
    computed<string>({
        get: () => (filters.value[afterKey] as string) ?? '',
        set: (value: string) => {
            if (!value) {
                filters.value[afterKey] = ''
                filters.value[beforeKey] = ''
                return
            }
            filters.value[afterKey] = value
            filters.value[beforeKey] = addOneDay(value)
        }
    })

const arrivalDateFilter = singleDateFilter('arrivalDate[after]', 'arrivalDate[strictly_before]')
const birthDateFilter = singleDateFilter('birthDate[after]', 'birthDate[strictly_before]')

const columns = [
    { key: 'nationalNumber', label: 'N° National', width: '160px' },
    { key: 'workNumber', label: 'N° Travail', width: '110px' },
    { key: 'sex', label: 'Sex', width: '90px' },
    { key: 'birthDate', label: 'Né le', width: '120px' },
    { key: 'breedCode', label: 'Race' },
    { key: 'arrivalDate', label: 'Entrée le', width: '120px' }
]

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'
    })
}

onMounted(reload)
</script>