From 7fc7653e6fd1f676a0e646baebe74311d51f3e84 Mon Sep 17 00:00:00 2001 From: TO Date: Thu, 30 Oct 2025 01:18:26 +0100 Subject: [PATCH] Enhance calendar functionality: display year in month header, highlight past dates, and update date selection logic --- .../calendar-month/calendar-month.html | 4 +- .../calendar-month/calendar-month.scss | 4 ++ .../calendar-month/calendar-month.ts | 6 +++ .../calendar-year/calendar-year.html | 4 +- .../components/calendar-year/calendar-year.ts | 14 +++-- src/app/services/calendar-service.ts | 53 ++++++++++++++++--- 6 files changed, 71 insertions(+), 14 deletions(-) diff --git a/src/app/components/calendar-month/calendar-month.html b/src/app/components/calendar-month/calendar-month.html index 32b3eae..50f8eb0 100644 --- a/src/app/components/calendar-month/calendar-month.html +++ b/src/app/components/calendar-month/calendar-month.html @@ -1,5 +1,5 @@
-

{{ getMonthName() }}

+

{{ getMonthName() }} {{ year }}

L

M

@@ -16,7 +16,7 @@ @if (day === null) {

} @else { -

{{ day.getDate() }}

} } diff --git a/src/app/components/calendar-month/calendar-month.scss b/src/app/components/calendar-month/calendar-month.scss index a51dec0..2afd015 100644 --- a/src/app/components/calendar-month/calendar-month.scss +++ b/src/app/components/calendar-month/calendar-month.scss @@ -101,3 +101,7 @@ .other { background-color: #ff9b9b; } + +.past { + color: #b0b0b0; +} diff --git a/src/app/components/calendar-month/calendar-month.ts b/src/app/components/calendar-month/calendar-month.ts index 9ccaffa..0a1bfa3 100644 --- a/src/app/components/calendar-month/calendar-month.ts +++ b/src/app/components/calendar-month/calendar-month.ts @@ -16,6 +16,12 @@ export class CalendarMonth implements OnInit { @Input({ required: true }) year!: number; + getNow(): Date { + const now = new Date(); + now.setHours(0, 0, 0, 0); + return now; + } + currentMonth: Date = new Date(); weeksInAMonth: Month = []; diff --git a/src/app/components/calendar-year/calendar-year.html b/src/app/components/calendar-year/calendar-year.html index 53fa006..c72423b 100644 --- a/src/app/components/calendar-year/calendar-year.html +++ b/src/app/components/calendar-year/calendar-year.html @@ -7,10 +7,10 @@
} - @for (month of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track $index) { + @for (month of months; track $index) { - + } diff --git a/src/app/components/calendar-year/calendar-year.ts b/src/app/components/calendar-year/calendar-year.ts index b7b7b38..7c622b9 100644 --- a/src/app/components/calendar-year/calendar-year.ts +++ b/src/app/components/calendar-year/calendar-year.ts @@ -2,7 +2,7 @@ import { Component, OnInit, effect, signal } from '@angular/core'; import { UserInputService } from '../../services/user-input-service'; import { MatCard, MatCardContent } from '@angular/material/card'; import { CalendarMonth } from "../calendar-month/calendar-month"; -import { CalendarService, SelectedDates, VacationsNumber } from '../../services/calendar-service'; +import { CalendarService, SelectedDates } from '../../services/calendar-service'; import { CommonModule } from '@angular/common'; @Component({ @@ -16,7 +16,7 @@ export class CalendarYear implements OnInit { constructor(private userInput: UserInputService, private calendarService: CalendarService) { effect(() => { - this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year); + this.selectedDates = this.calendarService.getSelectedDatesForYear(); const vacationData = this.userInput.vacationNumberSignal(); this.isLoading.set(true); // Simulate server-side calculation with a small delay @@ -31,9 +31,15 @@ export class CalendarYear implements OnInit { protected selectedDates: SelectedDates = new SelectedDates(); - protected year: number = 2026; + getYear(monthIndex: number): number { + const offset = new Date().getMonth() <= monthIndex ? 0 : 1; + return new Date().getFullYear() + offset; + } + + // months starting from actual date + protected months: number[] = Array.from({ length: 12 }, (_, i) => (new Date().getMonth() + i) % 12); ngOnInit(): void { - this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year); + this.selectedDates = this.calendarService.getSelectedDatesForYear(); } } diff --git a/src/app/services/calendar-service.ts b/src/app/services/calendar-service.ts index dd72ab5..e884c53 100644 --- a/src/app/services/calendar-service.ts +++ b/src/app/services/calendar-service.ts @@ -13,9 +13,17 @@ const allTypesOptions: HolidaysTypes.Options = { }) export class CalendarService { - getSelectedDatesForYear(year: number): SelectedDates { - const holidays = this.getHolidays(year); - const monthInAYear = CalendarService.monthsInYear(year); + // Get selected dates from current date to the next year + getSelectedDatesFromNow(): SelectedDates { + const holidays = this.getHolidays(); + let selectedDates: SelectedDates = new SelectedDates(); + // Logic to populate selectedDates from now until the next year + return selectedDates; + } + + getSelectedDatesForYear(): SelectedDates { + const holidays = this.getHolidays(); + const monthInAYear = CalendarService.monthsInAYearFromNow(); let selectedDates: SelectedDates = new SelectedDates(); for (const weeksInAMonth of monthInAYear) { for (const daysInAWeek of weeksInAMonth) { @@ -45,10 +53,12 @@ export class CalendarService { } - getHolidays(year: number): Date[] { + getHolidays(): Date[] { // Logic to return holidays for the given year const hd = new Holidays('FR', allTypesOptions); - const holidays = hd.getHolidays(year, lang); + const holidays = hd.getHolidays(new Date().getFullYear(), lang); + const holidaysPlusOne = hd.getHolidays(new Date().getFullYear() + 1, lang); + holidays.push(...holidaysPlusOne); let holidaysDate: Date[] = holidays.map(holiday => new Date(holiday.date)); return holidaysDate; } @@ -97,6 +107,19 @@ export class CalendarService { } return months; } + + + static monthsInAYearFromNow(): Year { + const months: Year = []; + const currentMonthIndex = new Date().getMonth(); + const currentYear = new Date().getFullYear(); + for (let i = 0; i < 12; i++) { + const monthIndex = (currentMonthIndex + i) % 12; + const year = currentYear + Math.floor((currentMonthIndex + i) / 12); + months.push(this.weeksInMonth(monthIndex, year)); + } + return months; + } } export type VacationsNumber = { @@ -548,7 +571,22 @@ export class SelectedDates implements SelectedDateInterface { } lookForVacationRec(vacType: DayType): { apply: () => void; heuristic: number } { - const daysOfYear = CalendarService.monthsInYear(2026); + const daysOfYear = CalendarService.monthsInAYearFromNow(); + const now = new Date(); + now.setHours(0, 0, 0, 0); + daysOfYear.forEach(month => { + month.forEach(week => { + week.forEach(day => { + if (day) { + if (day) + day.setHours(0, 0, 0, 0); + if (day && day < now) { + week[week.indexOf(day)] = null; + } + } + }); + }); + }); const tempDatesBackup = [...this._datesSelected]; let strategies: { apply: () => void; heuristic: number; value: Date }[] = []; for (const month of daysOfYear) { @@ -582,6 +620,9 @@ export class SelectedDates implements SelectedDateInterface { const bestStrategy = strategies.reduce((best, current) => current.heuristic > best.heuristic ? current : best ); + strategies.forEach(strategy => { + console.log(`Strategy for ${strategy.value.toDateString()} has heuristic ${strategy.heuristic}`); + }); bestStrategy.apply(); return bestStrategy; }