feat: ajout du composant datatable sur tous les écrans (!48)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #48
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/infrastructure/case.vue

@@ -33,42 +33,51 @@
             </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 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"
             >
-                <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>
+                <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>
+                    <UiDateInput v-model="arrivalDateFilter" 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()
@@ -80,7 +89,44 @@ 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 { 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 ''
@@ -114,21 +160,27 @@ const loadCase = async () => {
 }
 
 const printCaseReport = async () => {
-    if (!hasCaseId.value) {
-        return
-    }
-
+    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) => {
+const goToBovine = (bovine: BovineData) => {
     if (!auth.isAdmin) return
     router.push({
         path: '/infrastructure/bovine',
-        query: { id: String(id), caseId: String(caseId.value) }
+        query: { id: String(bovine.id), caseId: String(caseId.value) }
     })
 }
 
-watch(caseId, loadCase, { immediate: true })
+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>