From ea379ce5e43c59e62f6a7dacfb29c1ad3478b9b6 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 22 Jun 2026 10:04:07 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20pagination=20des=20ann=C3=A9es=20+?=
 =?UTF-8?q?=20selectYear=20+=20recentrage=20(#date-year-picker)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../date/composables/useCalendarView.test.ts  | 25 ++++++++++++++++++-
 .../malio/date/composables/useCalendarView.ts | 23 ++++++++++++++---
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/app/components/malio/date/composables/useCalendarView.test.ts b/app/components/malio/date/composables/useCalendarView.test.ts
index 1aa0d99..36267a1 100644
--- a/app/components/malio/date/composables/useCalendarView.test.ts
+++ b/app/components/malio/date/composables/useCalendarView.test.ts
@@ -1,5 +1,5 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
-import {ref} from 'vue'
+import {nextTick, ref} from 'vue'
 import {useCalendarView} from './useCalendarView'
 
 describe('useCalendarView', () => {
@@ -65,4 +65,27 @@ describe('useCalendarView', () => {
     expect(currentMonth.value).toBe(4)
     expect(currentYear.value).toBe(2026)
   })
+
+  it('paginates years by 12 in years view', () => {
+    const {yearPageStart, goToNext, goToPrev} = useCalendarView(ref('years'))
+    const start = yearPageStart.value
+    goToNext()
+    expect(yearPageStart.value).toBe(start + 12)
+    goToPrev()
+    expect(yearPageStart.value).toBe(start)
+  })
+
+  it('selectYear sets the current year', () => {
+    const {currentYear, selectYear} = useCalendarView(ref('days'))
+    selectYear(2030)
+    expect(currentYear.value).toBe(2030)
+  })
+
+  it('recenters the year page on entering years view (current - 5)', async () => {
+    const mode = ref<'days' | 'months' | 'years'>('days')
+    const {yearPageStart} = useCalendarView(mode)
+    mode.value = 'years'
+    await nextTick()
+    expect(yearPageStart.value).toBe(2021) // 2026 - 5
+  })
 })
diff --git a/app/components/malio/date/composables/useCalendarView.ts b/app/components/malio/date/composables/useCalendarView.ts
index f0097b4..3bc0794 100644
--- a/app/components/malio/date/composables/useCalendarView.ts
+++ b/app/components/malio/date/composables/useCalendarView.ts
@@ -1,12 +1,21 @@
-import {ref, type Ref} from 'vue'
+import {ref, watch, type Ref} from 'vue'
 import {isValidIso} from './dateFormat'
 
-export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
+export function useCalendarView(viewMode: Ref<'days' | 'months' | 'years'>) {
   const today = new Date()
   const currentMonth = ref(today.getMonth())
   const currentYear = ref(today.getFullYear())
+  const yearPageStart = ref(today.getFullYear() - 5)
+
+  watch(viewMode, (mode) => {
+    if (mode === 'years') yearPageStart.value = currentYear.value - 5
+  })
 
   const goToPrev = () => {
+    if (viewMode.value === 'years') {
+      yearPageStart.value -= 12
+      return
+    }
     if (viewMode.value === 'months') {
       currentYear.value -= 1
       return
@@ -20,6 +29,10 @@ export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
   }
 
   const goToNext = () => {
+    if (viewMode.value === 'years') {
+      yearPageStart.value += 12
+      return
+    }
     if (viewMode.value === 'months') {
       currentYear.value += 1
       return
@@ -36,6 +49,10 @@ export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
     currentMonth.value = m
   }
 
+  const selectYear = (y: number) => {
+    currentYear.value = y
+  }
+
   const syncToIso = (iso: string | null) => {
     if (iso && isValidIso(iso)) {
       currentMonth.value = Number(iso.slice(5, 7)) - 1
@@ -47,5 +64,5 @@ export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
     }
   }
 
-  return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
+  return {currentMonth, currentYear, yearPageStart, goToPrev, goToNext, selectMonth, selectYear, syncToIso}
 }