feat : page case sur UiDataTable server-side

- SearchFilter et DateFilter ajoutés sur l'entité Bovine
- Filtres serveur sur numéro national, poids exact et date d'arrivée
- Scope automatique via buildingCase IRI sur l'endpoint /bovines

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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>

src/Entity/Bovine.php

@@ -4,6 +4,9 @@ declare(strict_types=1);
 
 namespace App\Entity;
 
+use ApiPlatform\Doctrine\Orm\Filter\DateFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
+use ApiPlatform\Metadata\ApiFilter;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
@@ -19,6 +22,12 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
 #[ORM\Entity]
 #[ORM\Table(name: 'bovine')]
 #[ORM\UniqueConstraint(name: 'uniq_bovine_national_number', columns: ['national_number'])]
+#[ApiFilter(SearchFilter::class, properties: [
+    'nationalNumber' => 'ipartial',
+    'buildingCase'   => 'exact',
+    'receivedWeight' => 'exact',
+])]
+#[ApiFilter(DateFilter::class, properties: ['arrivalDate'])]
 #[ApiResource(
     operations: [
         new Get(