feat : étape 3/5 - page /inventory (lecture seule)

- UiDataTable server-side sur /api/bovines - 6 colonnes : N° National, N° Travail, Sex, Né le, Race, Entrée le - Filtres texte + select sex (Mâle/Femelle) + deux date pickers single input - Filtre implicite exists[exitedAt]=false pour n'afficher que les bovins actifs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 17:57:42 +02:00
parent 2cde091813
commit 72a3a98bfa
1 changed files with 134 additions and 0 deletions
--- a/frontend/pages/inventory.vue
+++ b/frontend/pages/inventory.vue
@@ -0,0 +1,134 @@
+<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>