From 4b847eb1a273624172057881cb169482ac46e89d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 10 Feb 2026 16:19:02 +0100
Subject: [PATCH] =?UTF-8?q?feat=20:=20ajout=20d'un=20filtre=20sur=20le=20n?=
 =?UTF-8?q?om=20des=20employ=C3=A9s=20et=20ajout=20du=20header=20sticky?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/CalendarGrid.vue |   6 +-
 frontend/pages/calendar.vue          | 132 +++++++++++++++------------
 2 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/frontend/components/CalendarGrid.vue b/frontend/components/CalendarGrid.vue
index 37d7497..64b6064 100644
--- a/frontend/components/CalendarGrid.vue
+++ b/frontend/components/CalendarGrid.vue
@@ -1,16 +1,16 @@
 <template>
-    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+    <div class="h-full min-h-0 overflow-auto rounded-lg border border-neutral-200 bg-white">
         <div class="min-w-[900px]">
             <div class="grid" :style="gridStyle">
                 <div
-                    class="sticky left-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
+                    class="sticky left-0 top-0 z-30 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
                 >
                     Employés
                 </div>
                 <div
                     v-for="day in daysInMonth"
                     :key="day.date"
-                    class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+                    class="sticky top-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
                 >
                     <div>{{ day.label }}</div>
                     <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 99ba26f..aa119d0 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -1,68 +1,80 @@
 <template>
-    <div>
+    <div class="h-full flex flex-col overflow-hidden">
         <div class="flex flex-wrap items-center justify-between gap-4">
             <h1 class="text-4xl font-bold text-primary-500">Calendrier des absences</h1>
         </div>
-        <div class="flex items-center justify-between py-6">
-            <div class="flex items-center gap-4">
-                <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
-                    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
-                        <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
-                        <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
-                        <input
-                            :id="`site-${site.id}`"
-                            v-model="selectedSiteIds"
-                            :value="site.id"
-                            type="checkbox"
-                            class="h-4 w-4"
-                        />
+        <div class="py-6">
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-4">
+                    <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                        <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
+                            <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
+                            <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
+                            <input
+                                :id="`site-${site.id}`"
+                                v-model="selectedSiteIds"
+                                :value="site.id"
+                                type="checkbox"
+                                class="h-4 w-4"
+                            />
+                        </div>
                     </div>
+                    <select
+                        v-model="selectedMonth"
+                        class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                    >
+                        <option v-for="month in months" :key="month.value" :value="month.value">
+                            {{ month.label }}
+                        </option>
+                    </select>
+                    <select
+                        v-model="selectedYear"
+                        class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                    >
+                        <option v-for="year in years" :key="year" :value="year">
+                            {{ year }}
+                        </option>
+                    </select>
+                </div>
+                <div class="flex gap-4">
+                    <button
+                        type="button"
+                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openCreateFromToday"
+                    >
+                        Ajouter une absence
+                    </button>
+                    <button
+                        type="button"
+                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openPrint"
+                    >
+                        Imprimer
+                    </button>
                 </div>
-                <select
-                    v-model="selectedMonth"
-                    class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                >
-                    <option v-for="month in months" :key="month.value" :value="month.value">
-                        {{ month.label }}
-                    </option>
-                </select>
-                <select
-                    v-model="selectedYear"
-                    class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                >
-                    <option v-for="year in years" :key="year" :value="year">
-                        {{ year }}
-                    </option>
-                </select>
             </div>
-            <div class="flex gap-4">
-                <button
-                    type="button"
-                    class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openCreateFromToday"
-                >
-                    Ajouter une absence
-                </button>
-                <button
-                    type="button"
-                    class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openPrint"
-                >
-                    Imprimer
-                </button>
+            <div class="mt-3 flex items-center gap-4">
+                <input
+                    v-model="employeeFilter"
+                    type="text"
+                    placeholder="Chercher un employé (nom ou prénom)"
+                    class="h-10 w-full max-w-md rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                />
             </div>
         </div>
 
-        <CalendarGrid
-            :days-in-month="daysInMonth"
-            :visible-employees="visibleEmployees"
-            :grid-style="gridStyle"
-            :get-cell-style="getCellStyle"
-            :get-cell-info="getCellInfo"
-            :format-employee-name="formatEmployeeName"
-            :is-holiday-date="isHolidayDate"
-            @cell-click="openCreate"
-        />
+        <div class="flex-1 min-h-0">
+            <CalendarGrid
+                :days-in-month="daysInMonth"
+                :visible-employees="visibleEmployees"
+                :grid-style="gridStyle"
+                :get-cell-style="getCellStyle"
+                :get-cell-info="getCellInfo"
+                :format-employee-name="formatEmployeeName"
+                :is-holiday-date="isHolidayDate"
+                @cell-click="openCreate"
+            />
+        </div>
 
         <AbsenceFormDrawer
             v-model="isDrawerOpen"
@@ -139,10 +151,18 @@ const sortedEmployees = computed(() => {
 })
 
 // Employés visibles selon le filtre de sites.
+const employeeFilter = ref('')
+
 const visibleEmployees = computed(() => {
     if (selectedSiteIds.value.length === 0) return []
+    const filter = employeeFilter.value.trim().toLowerCase()
     return sortedEmployees.value.filter((employee) => {
-        return employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+        const siteOk = employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+        if (!siteOk) return false
+        if (!filter) return true
+        const first = employee.firstName?.toLowerCase() ?? ''
+        const last = employee.lastName?.toLowerCase() ?? ''
+        return first.includes(filter) || last.includes(filter)
     })
 })
 // Données de référence et absences du mois affiché.