feat : migration de la page réceptions en attente sur UiDataTable

- Filtres recherche case-insensitive (ipartial)
- Ajout carrier.name et licensePlate aux SearchFilter
- Slot header-actions pour customiser la colonne actions

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

frontend/components/ui/UiDataTable.vue

@@ -8,7 +8,9 @@
                 <div v-for="col in columns" :key="col.key" class="min-w-0">
                     <slot :name="`header-${col.key}`" :column="col">{{ col.label }}</slot>
                 </div>
-                <div v-if="showActions">Actions</div>
+                <div v-if="showActions" class="min-w-0">
+                    <slot name="header-actions">Actions</slot>
+                </div>
             </div>
 
             <div :class="dimRows ? 'opacity-50 transition-opacity' : ''" :aria-busy="loading || undefined">

frontend/pages/reception/waiting-reception.vue

@@ -1,43 +1,135 @@
 <template>
-    <WorkflowWaitingList
-        title="listes des réceptions en attente"
-        :columns="columns"
-        :items="receptionList ?? []"
-        route-prefix="/reception"
-        :show-actions="auth.isAdmin"
-    >
-        <template #cell-receptionDate="{ item }">
-            {{ formatDate(item.receptionDate) }}
-        </template>
-        <template #actions="{ item }">
-            <Icon
-                name="mdi:delete-outline"
-                size="24"
-                class="cursor-pointer text-red-500 hover:text-red-700"
-                @click="confirmDelete(item)"
-            />
-        </template>
-    </WorkflowWaitingList>
+    <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">listes des réceptions en attente</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"
+                :show-actions="auth.isAdmin"
+                row-clickable
+                @row-click="goToReception"
+            >
+                <template #header-receptionDate>
+                    <UiDateInput v-model="receptionDateFilter" size="compact" />
+                </template>
+                <template #header-supplier.name>
+                    <UiTextInput
+                        v-model="filters['supplier.name']"
+                        placeholder="Fournisseur"
+                        size="compact"
+                    />
+                </template>
+                <template #header-address.fullAddress>
+                    <UiTextInput :model-value="''" placeholder="Adresse" size="compact" disabled />
+                </template>
+                <template #header-receptionType.label>
+                    <UiSelect
+                        v-model="filters['receptionType.id']"
+                        placeholder="Type réception"
+                        :options="receptionTypeOptions"
+                        size="compact"
+                    />
+                </template>
+                <template #header-carrier.name>
+                    <UiTextInput
+                        v-model="filters['carrier.name']"
+                        placeholder="Transporteur"
+                        size="compact"
+                    />
+                </template>
+                <template #header-licensePlate>
+                    <UiTextInput
+                        v-model="filters['licensePlate']"
+                        placeholder="Immatriculation"
+                        size="compact"
+                    />
+                </template>
+                <template #header-actions>
+                    <UiTextInput :model-value="''" placeholder="Actions" size="compact" disabled />
+                </template>
+                <template #cell-receptionDate="{ item }">
+                    {{ formatDate(item.receptionDate) }}
+                </template>
+                <template #actions="{ item }">
+                    <Icon
+                        name="mdi:delete-outline"
+                        size="24"
+                        class="cursor-pointer text-red-500 hover:text-red-700"
+                        @click="confirmDelete(item)"
+                    />
+                </template>
+            </UiDataTable>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
 import type { ReceptionData } from '~/services/dto/reception-data'
-import { getReceptionList, deleteReception } from '~/services/reception'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import { deleteReception } from '~/services/reception'
+import { getReceptionTypeList } from '~/services/reception-type'
 import { useAuthStore } from '~/stores/auth'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
+const router = useRouter()
 const auth = useAuthStore()
+const receptionTypes = ref<ReceptionTypeData[]>([])
+
+const receptionTypeOptions = computed(() =>
+    receptionTypes.value.map(rt => ({ value: rt.id, label: rt.label }))
+)
+
+const { items, totalItems, page, perPage, filters, loading, reload } =
+    useDataTableServerState<ReceptionData>(
+        'receptions',
+        {
+            isValid: false,
+            'supplier.name': '',
+            'carrier.name': '',
+            'licensePlate': '',
+            'receptionType.id': '',
+            'receptionDate[after]': '',
+            'receptionDate[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 receptionDateFilter = computed<string>({
+    get: () => (filters.value['receptionDate[after]'] as string) ?? '',
+    set: (value: string) => {
+        if (!value) {
+            filters.value['receptionDate[after]'] = ''
+            filters.value['receptionDate[strictly_before]'] = ''
+            return
+        }
+        filters.value['receptionDate[after]'] = value
+        filters.value['receptionDate[strictly_before]'] = addOneDay(value)
+    }
+})
 
 const columns = [
-    { key: 'receptionDate', label: 'Date et heure' },
-    { key: 'supplier.name', label: 'Fournisseur' },
-    { key: 'address.fullAddress', label: 'Adresse' },
-    { key: 'receptionType.label', label: 'Type réception' },
+    { key: 'receptionDate', label: 'Date et heure', width: '120px' },
+    { key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
+    { key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
+    { key: 'receptionType.label', label: 'Type réception', width: '1.1fr' },
     { key: 'carrier.name', label: 'Transporteur' },
-    { key: 'licensePlate', label: 'Immatriculation' }
+    { key: 'licensePlate', label: 'Immatriculation', width: '110px' }
 ]
 
-const receptionList = ref<ReceptionData[]>()
-
 const formatDate = (date: string | null) => {
     if (!date) return '—'
     const d = new Date(date.replace(' ', 'T'))
@@ -51,6 +143,10 @@ const formatDate = (date: string | null) => {
     })
 }
 
+const goToReception = (reception: ReceptionData) => {
+    router.push(`/reception/${reception.id}`)
+}
+
 const confirmDelete = async (reception: ReceptionData) => {
     const confirmed = window.confirm(
         `Êtes-vous sûr de vouloir supprimer la réception ${reception.identificationNumber ?? `#${reception.id}`} ? Toutes les données liées seront supprimées.`
@@ -58,10 +154,11 @@ const confirmDelete = async (reception: ReceptionData) => {
     if (!confirmed) return
 
     await deleteReception(reception.id)
-    receptionList.value = receptionList.value?.filter(r => r.id !== reception.id)
+    reload()
 }
 
 onMounted(async () => {
-    receptionList.value = await getReceptionList(false)
+    receptionTypes.value = await getReceptionTypeList()
+    reload()
 })
 </script>

src/Entity/Reception.php

@@ -33,8 +33,10 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
 #[ORM\Table(name: 'reception')]
 #[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
 #[ApiFilter(SearchFilter::class, properties: [
-    'identificationNumber' => 'partial',
-    'supplier.name'        => 'partial',
+    'identificationNumber' => 'ipartial',
+    'supplier.name'        => 'ipartial',
+    'carrier.name'         => 'ipartial',
+    'licensePlate'         => 'ipartial',
     'receptionType.id'     => 'exact',
 ])]
 #[ApiFilter(DateFilter::class, properties: ['receptionDate'])]