MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 80 Wiki Activity

feat : filtres tableau (texte, date, select) et largeurs de colonnes

Browse Source 
- 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>
This commit is contained in:
Autin
2026-04-22 11:17:10 +02:00
parent ac3be7c94b
commit a6be7fb6a4
6 changed files with 135 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/components/ui/UiDataTable.vue
View File

@@ -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
})

10
frontend/components/ui/UiDateInput.vue
View File

@@ -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

12
frontend/components/ui/UiSelect.vue
View File

@@ -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

10
frontend/components/ui/UiTextInput.vue
View File

@@ -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

100
frontend/pages/reception/finish-reception.vue
View File

@@ -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>

8
src/Entity/Reception.php
View File

@@ -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: [