#61

src/app/components/calendar-month/calendar-month.ts

@@ -12,6 +12,8 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { CalendarSettingsService } from '../../services/calendar-settings-service';
 import { DateCacheService } from '../../services/date-cache.service';
 import { TranslationService } from '../../services/translation-service';
+import { isWorkingPlanningDate } from '../../services/declared-non-working-days';
+import type { LeaveType } from '../../services/leave-planner.service';
 
 export interface CalendarDayStatus {
 	kind: 'eligible' | 'ineligible' | 'chosen' | 'evaluated-rejected' | 'pruned' | 'not-examined';
@@ -23,6 +25,11 @@ export interface CalendarDayStatus {
 	changeLabel?: string;
 }
 
+export interface DeclarationPreview {
+	dates: ReadonlySet<string>;
+	type: LeaveType | null;
+}
+
 @Component({
 	selector: 'app-calendar-month',
 	imports: [MatTooltip],
@@ -65,6 +72,40 @@ export class CalendarMonth implements OnInit {
 	@Input()
 	horizonEnd?: string;
 
+	@Input()
+	declarationEntry = false;
+
+	@Input()
+	declaredDays: Readonly<Record<string, LeaveType>> = {};
+
+	@Input()
+	declarationPreview: DeclarationPreview | null = null;
+
+	getDeclaredType(date: string): LeaveType | undefined {
+		const current = this.declaredDays[date];
+		if (!this.declarationPreview?.dates.has(date)) return current;
+		const selected = this.declarationPreview.type;
+		return current === selected ? undefined : (selected ?? undefined);
+	}
+
+	getDayClasses(day: Date): string {
+		const classes = this.selectedDates.getClasses(day);
+		return this.declarationPreview?.dates.has(this.getDateKey(day))
+			? `${classes.replace(/\b(cp|rtt|other)\b/g, '')} ${this.getDeclaredType(this.getDateKey(day)) ?? ''}`
+			: classes;
+	}
+
+	isDateDisabled(day: Date): boolean {
+		return (
+			!this.isInHorizon(day) ||
+			(this.declarationEntry && !isWorkingPlanningDate(this.getDateKey(day)))
+		);
+	}
+
+	declaredTypeLabel(type: LeaveType): string {
+		return type === 'cp' ? 'CP' : this.translationService.getDayTypeLabel(type);
+	}
+
 	@Input()
 	currentDate: string | null = null;
 
@@ -197,9 +238,20 @@ export class CalendarMonth implements OnInit {
 	}
 
 	getDayTooltip(day: Date): string | null {
+		const previewed = this.declarationPreview?.dates.has(this.getDateKey(day));
 		const tooltips: string[] = this.selectedDates.datesSelected
-			.filter((dateSelected) => dateSelected.isSelected(day) && dateSelected.type)
+			.filter(
+				(dateSelected) =>
+					dateSelected.isSelected(day) &&
+					dateSelected.type &&
+					(!previewed || !['cp', 'rtt', 'other'].includes(dateSelected.type)),
+			)
 			.map((dateSelected) => this.translationService.getDayTypeLabel(dateSelected.type!));
+		const declaredType = this.getDeclaredType(this.getDateKey(day));
+		if (declaredType)
+			tooltips.push(
+				`${this.tr().bookedDays.booked} (${this.declaredTypeLabel(declaredType)}). ${this.tr().bookedDays.fixed}`,
+			);
 		const status = this.getStatus(day);
 		if (status) {
 			tooltips.push(status.label);