From 6395ffbe1c35fdf1d734297c1baa9d9de3dc4208 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 2 Mar 2026 10:50:02 +0100
Subject: [PATCH] =?UTF-8?q?feat=20:=20modification=20des=20s=C3=A9lecteurs?=
 =?UTF-8?q?=20de=20date=20sur=20le=20calendrier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/PeriodStepperPicker.vue | 77 +++++++++++++++++++++
 frontend/components/hours/HoursToolbar.vue  | 62 ++++-------------
 frontend/pages/calendar.vue                 | 48 ++++++++-----
 3 files changed, 120 insertions(+), 67 deletions(-)
 create mode 100644 frontend/components/PeriodStepperPicker.vue

diff --git a/frontend/components/PeriodStepperPicker.vue b/frontend/components/PeriodStepperPicker.vue
new file mode 100644
index 0000000..c88b66d
--- /dev/null
+++ b/frontend/components/PeriodStepperPicker.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="relative inline-flex h-10 items-center overflow-hidden rounded-md border border-primary-500 bg-white" :class="widthClass">
+    <input
+      ref="nativeInput"
+      :value="pickerValue"
+      :type="pickerType"
+      class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
+      tabindex="-1"
+      aria-hidden="true"
+      @input="onPickerInput"
+      @change="onPickerInput"
+    />
+    <button
+      type="button"
+      class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96]"
+      :aria-label="prevAriaLabel"
+      @click="emit('prev')"
+    >
+      ‹
+    </button>
+    <button
+      type="button"
+      class="h-10 flex-1 border-x border-primary-500 px-4 text-sm font-semibold text-primary-500 text-center hover:bg-tertiary-500 active:bg-tertiary-500"
+      @click="openPicker"
+    >
+      {{ label }}
+    </button>
+    <button
+      type="button"
+      class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96]"
+      :aria-label="nextAriaLabel"
+      @click="emit('next')"
+    >
+      ›
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  label: string
+  pickerType: 'date' | 'week' | 'month'
+  pickerValue: string
+  widthClass?: string
+  prevAriaLabel?: string
+  nextAriaLabel?: string
+}>(), {
+  widthClass: 'w-[320px]',
+  prevAriaLabel: 'Précédent',
+  nextAriaLabel: 'Suivant'
+})
+
+const emit = defineEmits<{
+  (e: 'prev'): void
+  (e: 'next'): void
+  (e: 'pick', value: string): void
+}>()
+
+const nativeInput = ref<HTMLInputElement | null>(null)
+
+const openPicker = () => {
+  const input = nativeInput.value
+  if (!input) return
+  if (typeof input.showPicker === 'function') {
+    input.showPicker()
+    return
+  }
+  input.focus()
+  input.click()
+}
+
+const onPickerInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  if (!value) return
+  emit('pick', value)
+}
+</script>
diff --git a/frontend/components/hours/HoursToolbar.vue b/frontend/components/hours/HoursToolbar.vue
index 991ccfa..f833eb6 100644
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -64,41 +64,17 @@
         </button>
       </div>
 
-      <div class="relative inline-flex h-10 w-[320px] items-center overflow-hidden rounded-md border border-primary-500 bg-white">
-        <input
-          ref="nativeDateInput"
-          :value="pickerValue"
-          :type="viewMode === 'week' ? 'week' : 'date'"
-          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
-          tabindex="-1"
-          aria-hidden="true"
-          @input="onPickerInput"
-          @change="onPickerInput"
-        />
-        <button
-          type="button"
-          class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
-          aria-label="Période précédente"
-          @click="emit('shift-date', -1)"
-        >
-          ‹
-        </button>
-        <button
-          type="button"
-          class="h-10 flex-1 border-x border-primary-500 px-4 text-sm font-semibold text-primary-500 text-center hover:bg-tertiary-500 active:bg-tertiary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
-          @click="openDatePicker"
-        >
-          {{ formattedSelectedDate }}
-        </button>
-        <button
-          type="button"
-          class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
-          aria-label="Période suivante"
-          @click="emit('shift-date', 1)"
-        >
-          ›
-        </button>
-      </div>
+      <PeriodStepperPicker
+        width-class="w-[320px]"
+        :label="formattedSelectedDate"
+        :picker-type="viewMode === 'week' ? 'week' : 'date'"
+        :picker-value="pickerValue"
+        prev-aria-label="Période précédente"
+        next-aria-label="Période suivante"
+        @prev="emit('shift-date', -1)"
+        @next="emit('shift-date', 1)"
+        @pick="onPickerValue"
+      />
       </div>
 
       <div v-if="isAdmin" class="inline-flex h-10 overflow-hidden rounded-md border border-primary-500 bg-white">
@@ -145,6 +121,7 @@ import type { Site } from '~/services/dto/site'
 import type { AbsenceType } from '~/services/dto/absence-type'
 import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
 import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
 
 const selectedDate = defineModel<string>('selectedDate', { required: true })
@@ -172,7 +149,6 @@ const emit = defineEmits<{
   (e: 'shift-date', value: number): void
 }>()
 
-const nativeDateInput = ref<HTMLInputElement | null>(null)
 const pickerValue = computed(() => {
   if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
   return selectedDate.value
@@ -186,19 +162,7 @@ const viewModeButtonClass = (mode: 'day' | 'week') => {
   return 'bg-white text-primary-500 hover:bg-tertiary-500'
 }
 
-const openDatePicker = () => {
-  const input = nativeDateInput.value
-  if (!input) return
-  if (typeof input.showPicker === 'function') {
-    input.showPicker()
-    return
-  }
-  input.focus()
-  input.click()
-}
-
-const onPickerInput = (event: Event) => {
-  const value = (event.target as HTMLInputElement).value
+const onPickerValue = (value: string) => {
   if (!value) return
 
   if (viewMode.value === 'week') {
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 88c183a..77d17f6 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -30,22 +30,17 @@
                     <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>
+                    <PeriodStepperPicker
+                        width-class="w-[260px]"
+                        :label="selectedMonthLabel"
+                        picker-type="month"
+                        :picker-value="monthPickerValue"
+                        prev-aria-label="Mois précédent"
+                        next-aria-label="Mois suivant"
+                        @prev="shiftMonth(-1)"
+                        @next="shiftMonth(1)"
+                        @pick="onMonthPickerValue"
+                    />
                 </div>
             </div>
             <div class="flex flex-wrap items-center gap-6 py-2">
@@ -111,6 +106,7 @@ 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 PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 
 useHead({
@@ -195,8 +191,8 @@ const months = [
     {value: 11, label: 'Décembre'}
 ]
 
-const years = Array.from({length: 5}, (unusedValue, index) => now.getFullYear() - 2 + index)
-
+const selectedMonthLabel = computed(() => `${months[selectedMonth.value]?.label ?? ''}`)
+const monthPickerValue = computed(() => `${selectedYear.value}-${String(selectedMonth.value + 1).padStart(2, '0')}`)
 
 // Infos de calendrier calculées.
 const daysInMonth = computed(() => getDaysInMonth(selectedYear.value, selectedMonth.value))
@@ -316,6 +312,22 @@ const addMonths = (date: Date, months: number) => {
     return next
 }
 
+const shiftMonth = (delta: number) => {
+    const next = new Date(selectedYear.value, selectedMonth.value + delta, 1)
+    selectedYear.value = next.getFullYear()
+    selectedMonth.value = next.getMonth()
+}
+
+const onMonthPickerValue = (value: string) => {
+    if (!value) return
+    const [yearStr, monthStr] = value.split('-')
+    const year = Number(yearStr)
+    const month = Number(monthStr)
+    if (!Number.isInteger(year) || !Number.isInteger(month) || month < 1 || month > 12) return
+    selectedYear.value = year
+    selectedMonth.value = month - 1
+}
+
 // Limite l'intervalle d'impression à 2 mois max.
 const enforcePrintRange = () => {
     if (!printForm.from) return