[#322] Page horaire (#4)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|        #322          |        Page horaire         |

## Description de la PR
[#322] Page horaire

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #4
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/calendar.vue

@@ -3,38 +3,10 @@
         <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="py-6">
+        <div class="flex flex-col gap-3 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>
+                    <SiteFilterSelector v-model="selectedSiteIds" :sites="sites"/>
                 </div>
                 <div class="flex gap-4">
                     <button
@@ -53,24 +25,36 @@
                     </button>
                 </div>
             </div>
-            <div class="flex justify-between mt-3">
-                <div class="flex items-center gap-4 w-80">
-                    <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 class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
-                    <p class="font-bold">Légende :</p>
-                    <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
-                        <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
-                        <p>{{ type.label }}</p>
+            <div class="flex justify-between">
+                <div class="flex items-center gap-4">
+                    <div class="w-80">
+                        <EmployeeNameFilterInput v-model="employeeFilter"/>
                     </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>
+            <div class="flex flex-wrap items-center gap-6 py-2">
+                <p class="font-bold">Légende :</p>
+                <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
+                    <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
+                    <p>{{ type.label }}</p>
                 </div>
             </div>
-
         </div>
 
         <div class="flex-1 min-h-0">
@@ -119,10 +103,13 @@ import {listEmployees, updateEmployeeOrder} from '~/services/employees'
 import {listAbsenceTypes} from '~/services/absence-types'
 import {createAbsence, deleteAbsence, listAbsences, updateAbsence} from '~/services/absences'
 import {listPublicHolidays} from '~/services/public-holidays'
-import {getDaysInMonth, normalizeDate, toYmd} from '~/utils/date'
+import {getDaysInMonth, normalizeDate, parseYmd, toYmd} from '~/utils/date'
+import {compareEmployeesInSite, sortEmployeesBySiteAndOrder} from '~/utils/employee'
 import CalendarGrid from '~/components/CalendarGrid.vue'
 import AbsenceFormDrawer from '~/components/AbsenceFormDrawer.vue'
 import AbsencePrintDrawer from '~/components/AbsencePrintDrawer.vue'
+import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
+import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 
 // Données principales affichées dans la grille.
 const employees = ref<Employee[]>([])
@@ -149,27 +136,11 @@ watch(sites, (next) => {
     if (sitesInitialized.value || next.length === 0) return
     selectedSiteIds.value = next.map((site) => site.id)
     sitesInitialized.value = true
-}, { immediate: true })
+}, {immediate: true})
 
 // Tri stable: site -> nom -> prénom.
 const sortedEmployees = computed(() => {
-  return [...employees.value].sort((employeeA, employeeB) => {
-    const siteOrderA = employeeA.site?.displayOrder ?? 0
-    const siteOrderB = employeeB.site?.displayOrder ?? 0
-    if (siteOrderA !== siteOrderB) return siteOrderA - siteOrderB
-    const siteNameA = employeeA.site?.name ?? ''
-    const siteNameB = employeeB.site?.name ?? ''
-    if (siteNameA !== siteNameB) return siteNameA.localeCompare(siteNameB, 'fr')
-    const orderA = employeeA.displayOrder ?? 0
-    const orderB = employeeB.displayOrder ?? 0
-    if (orderA !== orderB) return orderA - orderB
-    const lastNameA = employeeA.lastName ?? ''
-    const lastNameB = employeeB.lastName ?? ''
-    if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
-    const firstNameA = employeeA.firstName ?? ''
-    const firstNameB = employeeB.firstName ?? ''
-    return firstNameA.localeCompare(firstNameB, 'fr')
-  })
+    return sortEmployeesBySiteAndOrder(employees.value)
 })
 
 // Employés visibles selon le filtre de sites.
@@ -281,13 +252,6 @@ const closePrint = () => {
     isPrintOpen.value = false
 }
 
-// Parse "YYYY-MM-DD" en Date (ou null).
-const parseYmd = (value: string) => {
-    const [year, month, day] = value.split('-').map(Number)
-    if (!year || !month || !day) return null
-    return new Date(year, month - 1, day)
-}
-
 // Détermine si la journée est une demi-journée (AM/PM) ou complète.
 const getHalfForDate = (
     startDate: string,
@@ -681,7 +645,7 @@ const formatEmployeeName = (employee: Employee) => {
 }
 
 // Impression PDF de l'intervalle sélectionné.
-const { printPdf } = usePdfPrinter()
+const {printPdf} = usePdfPrinter()
 const handlePrint = async () => {
     const params = new URLSearchParams()
     params.set('from', printForm.from)
@@ -703,17 +667,7 @@ const handleReorder = async (payload: { dragId: number; dropId: number }) => {
 
     const siteEmployees = [...employees.value]
         .filter((employee) => employee.site?.id === dragSiteId)
-        .sort((employeeA, employeeB) => {
-            const orderA = employeeA.displayOrder ?? 0
-            const orderB = employeeB.displayOrder ?? 0
-            if (orderA !== orderB) return orderA - orderB
-            const lastNameA = employeeA.lastName ?? ''
-            const lastNameB = employeeB.lastName ?? ''
-            if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
-            const firstNameA = employeeA.firstName ?? ''
-            const firstNameB = employeeB.firstName ?? ''
-            return firstNameA.localeCompare(firstNameB, 'fr')
-        })
+        .sort(compareEmployeesInSite)
 
     const fromIndex = siteEmployees.findIndex((employee) => employee.id === dragEmployee.id)
     const toIndex = siteEmployees.findIndex((employee) => employee.id === dropEmployee.id)
@@ -726,7 +680,7 @@ const handleReorder = async (payload: { dragId: number; dropId: number }) => {
     siteEmployees.forEach((employee, index) => {
         const nextOrder = index + 1
         if ((employee.displayOrder ?? 0) !== nextOrder) {
-            updates.push({ id: employee.id, displayOrder: nextOrder })
+            updates.push({id: employee.id, displayOrder: nextOrder})
         }
         employee.displayOrder = nextOrder
     })