From a6be7fb6a427c1a167a058be16c04af7de3b143d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 22 Apr 2026 11:17:10 +0200
Subject: [PATCH] feat : filtres tableau (texte, date, select) et largeurs de
 colonnes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DateFilter + SearchFilter sur Reception (identificationNumber, supplier.name, receptionType.id, receptionDate)
- Prop width sur les colonnes du UiDataTable
- Prop size compact sur UiTextInput/UiSelect/UiDateInput
- Option placeholder re-sélectionnable sur UiSelect (clear du filtre)
- Loader inline quand no items, overlay quand refetch

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/components/ui/UiDataTable.vue        |  17 +--
 frontend/components/ui/UiDateInput.vue        |  10 +-
 frontend/components/ui/UiSelect.vue           |  12 ++-
 frontend/components/ui/UiTextInput.vue        |  10 +-
 frontend/pages/reception/finish-reception.vue | 100 ++++++++++++++++--
 src/Entity/Reception.php                      |   8 ++
 6 files changed, 135 insertions(+), 22 deletions(-)

diff --git a/frontend/components/ui/UiDataTable.vue b/frontend/components/ui/UiDataTable.vue
index fa3572e..0e08d1d 100644
--- a/frontend/components/ui/UiDataTable.vue
+++ b/frontend/components/ui/UiDataTable.vue
@@ -2,10 +2,10 @@
     <div class="w-full">
         <div class="relative border border-slate-200">
             <div
-                class="grid gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+                class="grid items-center gap-6 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
                 :style="{ gridTemplateColumns: gridCols }"
             >
-                <div v-for="col in columns" :key="col.key">
+                <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>
@@ -16,7 +16,7 @@
                     <div
                         v-for="(item, index) in paginatedItems"
                         :key="item.id ?? index"
-                        class="grid gap-4 px-4 py-3 text-sm border-t border-slate-200"
+                        class="grid gap-6 px-4 py-3 text-sm border-t border-slate-200"
                         :class="rowClickable ? 'hover:bg-slate-50 cursor-pointer' : ''"
                         :style="{ gridTemplateColumns: gridCols }"
                         :role="rowClickable ? 'button' : undefined"
@@ -25,7 +25,7 @@
                         @keydown.enter="onRowClick(item)"
                         @keydown.space.prevent="onRowClick(item)"
                     >
-                        <div v-for="col in columns" :key="col.key">
+                        <div v-for="col in columns" :key="col.key" class="min-w-0 truncate">
                             <slot :name="`cell-${col.key}`" :item="item" :column="col">
                                 {{ getNestedValue(item, col.key) }}
                             </slot>
@@ -71,7 +71,7 @@
                 <select
                     :id="perPageId"
                     :value="currentPerPage"
-                    class="rounded border border-slate-300 bg-white px-2 py-1 text-sm text-primary-700"
+                    class="h-10 rounded border border-slate-300 bg-white px-2 text-sm text-primary-700"
                     @change="onPerPageChange(($event.target as HTMLSelectElement).value)"
                 >
                     <option v-for="n in perPageOptions" :key="n" :value="n">{{ n }}</option>
@@ -129,6 +129,7 @@ import { computed, useId } from 'vue'
 interface Column {
     key: string
     label: string
+    width?: string
 }
 
 const props = withDefaults(defineProps<{
@@ -145,8 +146,8 @@ const props = withDefaults(defineProps<{
 }>(), {
     totalItems: undefined,
     page: 1,
-    perPage: 5,
-    perPageOptions: () => [5, 10, 25],
+    perPage: 10,
+    perPageOptions: () => [10, 25, 50],
     rowClickable: false,
     showActions: false,
     emptyMessage: 'Aucune donnée',
@@ -178,7 +179,7 @@ const paginatedItems = computed(() => {
 })
 
 const gridCols = computed(() => {
-    const dataCols = props.columns.map(() => '1fr').join(' ')
+    const dataCols = props.columns.map(c => c.width ?? '1fr').join(' ')
     return props.showActions ? `${dataCols} 60px` : dataCols
 })
 
diff --git a/frontend/components/ui/UiDateInput.vue b/frontend/components/ui/UiDateInput.vue
index b756cb8..e4f54f7 100644
--- a/frontend/components/ui/UiDateInput.vue
+++ b/frontend/components/ui/UiDateInput.vue
@@ -14,8 +14,9 @@
             :value="modelValue ?? ''"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
+            class="w-full min-w-0 border-b border-primary-700 justify-self-start text-primary-700 bg-transparent appearance-none"
             :class="[
+                sizeClass,
                 isEmpty ? 'text-neutral-400' : 'text-primary-700',
                 disabled ? 'cursor-not-allowed' : 'cursor-pointer',
                 inputClass
@@ -36,12 +37,14 @@ const props = withDefaults(
         label?: string
         modelValue: string | null | undefined
         disabled?: boolean
+        size?: 'default' | 'compact'
         wrapperClass?: string
         labelClass?: string
         inputClass?: string
     }>(),
     {
         disabled: false,
+        size: 'default',
         wrapperClass: '',
         labelClass: '',
         inputClass: ''
@@ -54,6 +57,11 @@ const emit = defineEmits<{
 
 const attrs = useAttrs()
 const isEmpty = computed(() => !props.modelValue)
+const sizeClass = computed(() =>
+    props.size === 'compact'
+        ? 'text-sm h-8 font-normal normal-case tracking-normal'
+        : 'text-xl py-[6px] uppercase h-[34px]'
+)
 
 const onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
diff --git a/frontend/components/ui/UiSelect.vue b/frontend/components/ui/UiSelect.vue
index ecc2c71..2ab9730 100644
--- a/frontend/components/ui/UiSelect.vue
+++ b/frontend/components/ui/UiSelect.vue
@@ -13,15 +13,16 @@
             :value="modelValue ?? ''"
             :disabled="disabled || loading"
             v-bind="attrs"
-            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] bg-transparent"
+            class="w-full min-w-0 border-b border-primary-700 justify-self-start text-primary-700 bg-transparent"
             :class="[
+                sizeClass,
                 isEmpty ? 'text-neutral-400' : 'text-primary-700',
                 disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
                 selectClass
             ]"
             @change="onChange"
         >
-            <option value="" disabled class="text-neutral-400">
+            <option value="" class="text-neutral-400">
                 {{ placeholderText }}
             </option>
             <option
@@ -55,6 +56,7 @@ const props = withDefaults(
         options: SelectOption[]
         disabled?: boolean
         loading?: boolean
+        size?: 'default' | 'compact'
         wrapperClass?: string
         labelClass?: string
         selectClass?: string
@@ -63,6 +65,7 @@ const props = withDefaults(
         placeholder: 'Sélectionner',
         disabled: false,
         loading: false,
+        size: 'default',
         wrapperClass: '',
         labelClass: '',
         selectClass: ''
@@ -77,6 +80,11 @@ const attrs = useAttrs()
 
 const isEmpty = computed(() => props.modelValue === '' || props.modelValue === null || props.modelValue === undefined)
 const placeholderText = computed(() => props.placeholder || 'Sélectionner')
+const sizeClass = computed(() =>
+    props.size === 'compact'
+        ? 'text-sm h-8 font-normal normal-case tracking-normal'
+        : 'text-xl py-[6px]'
+)
 
 const onChange = (event: Event) => {
     const target = event.target as HTMLSelectElement
diff --git a/frontend/components/ui/UiTextInput.vue b/frontend/components/ui/UiTextInput.vue
index d00503b..aca4cd6 100644
--- a/frontend/components/ui/UiTextInput.vue
+++ b/frontend/components/ui/UiTextInput.vue
@@ -16,8 +16,9 @@
             :maxlength="maxlength"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-b border-black text-xl py-[6px] bg-transparent text-primary-700"
+            class="w-full min-w-0 border-b border-black bg-transparent text-primary-700"
             :class="[
+                sizeClass,
                 isEmpty ? 'text-neutral-400' : 'text-black',
                 disabled ? 'cursor-not-allowed' : 'cursor-text',
                 inputClass
@@ -40,6 +41,7 @@ const props = withDefaults(
         placeholder?: string
         maxlength?: number | string
         disabled?: boolean
+        size?: 'default' | 'compact'
         wrapperClass?: string
         labelClass?: string
         inputClass?: string
@@ -48,6 +50,7 @@ const props = withDefaults(
         placeholder: '',
         maxlength: undefined,
         disabled: false,
+        size: 'default',
         wrapperClass: '',
         labelClass: '',
         inputClass: ''
@@ -60,6 +63,11 @@ const emit = defineEmits<{
 
 const attrs = useAttrs()
 const isEmpty = computed(() => !props.modelValue)
+const sizeClass = computed(() =>
+    props.size === 'compact'
+        ? 'text-sm h-8 font-normal normal-case tracking-normal'
+        : 'text-xl py-[6px]'
+)
 
 const onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
diff --git a/frontend/pages/reception/finish-reception.vue b/frontend/pages/reception/finish-reception.vue
index 999dead..df50eb6 100644
--- a/frontend/pages/reception/finish-reception.vue
+++ b/frontend/pages/reception/finish-reception.vue
@@ -16,6 +16,50 @@
                 row-clickable
                 @row-click="goToReception"
             >
+                <template #header-identificationNumber>
+                    <UiTextInput
+                        v-model="filters.identificationNumber"
+                        placeholder="Numéro"
+                        size="compact"
+                    />
+                </template>
+                <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-weighing>
+                    <UiTextInput
+                        :model-value="''"
+                        placeholder="Poids"
+                        size="compact"
+                        disabled
+                    />
+                </template>
                 <template #cell-receptionDate="{ item }">
                     {{ formatDate(item.receptionDate) }}
                 </template>
@@ -29,24 +73,57 @@
 
 <script setup lang="ts">
 import type { ReceptionData } from '~/services/dto/reception-data'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import { getReceptionTypeList } from '~/services/reception-type'
 import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
 const router = useRouter()
+const receptionTypes = ref<ReceptionTypeData[]>([])
 
-const { items, totalItems, page, perPage, loading, reload } =
+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: true },
-        { initialPerPage: 5 }
+        {
+            isValid: true,
+            'identificationNumber': '',
+            'supplier.name': '',
+            '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: 'identificationNumber', label: 'Numéro' },
-    { key: 'receptionDate', label: 'Date et heure' },
-    { key: 'supplier.name', label: 'Fournisseur' },
-    { key: 'address.fullAddress', label: 'Adresse' },
-    { key: 'receptionType.label', label: 'Type réception' },
-    { key: 'weighing', label: 'Poids' }
+    { key: 'identificationNumber', label: 'Numéro', width: '75px' },
+    { 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: '0.9fr' },
+    { key: 'weighing', label: 'Poids', width: '82px' }
 ]
 
 const formatDate = (date: string | null) => {
@@ -77,5 +154,8 @@ const goToReception = (reception: ReceptionData) => {
     router.push(`/reception/update/${reception.id}`)
 }
 
-onMounted(reload)
+onMounted(async () => {
+    receptionTypes.value = await getReceptionTypeList()
+    reload()
+})
 </script>
diff --git a/src/Entity/Reception.php b/src/Entity/Reception.php
index 6dc3f7e..35c2242 100644
--- a/src/Entity/Reception.php
+++ b/src/Entity/Reception.php
@@ -5,6 +5,8 @@ declare(strict_types=1);
 namespace App\Entity;
 
 use ApiPlatform\Doctrine\Orm\Filter\BooleanFilter;
+use ApiPlatform\Doctrine\Orm\Filter\DateFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
 use ApiPlatform\Metadata\ApiFilter;
 use ApiPlatform\Metadata\ApiProperty;
 use ApiPlatform\Metadata\ApiResource;
@@ -30,6 +32,12 @@ use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
 #[ORM\HasLifecycleCallbacks]
 #[ORM\Table(name: 'reception')]
 #[ApiFilter(BooleanFilter::class, properties: ['isValid'])]
+#[ApiFilter(SearchFilter::class, properties: [
+    'identificationNumber' => 'partial',
+    'supplier.name'        => 'partial',
+    'receptionType.id'     => 'exact',
+])]
+#[ApiFilter(DateFilter::class, properties: ['receptionDate'])]
 #[ApiResource(
     order: ['id' => 'DESC'],
     operations: [