feat: implement internationalization with multi-language support and runtime language selection

src/app/components/rules-panel/rules-panel.ts

@@ -1,4 +1,11 @@
-import { Component, ChangeDetectionStrategy, inject, signal, Injectable } from '@angular/core';
+import {
+	Component,
+	ChangeDetectionStrategy,
+	inject,
+	signal,
+	Injectable,
+	effect,
+} from '@angular/core';
 import {
 	RuleService,
 	RuleType,
@@ -7,7 +14,8 @@ import {
 	VacationRule,
 	PlacementStrategy,
 } from '../../services/rule-service';
-import { SelectableDayType, tooltipTypeMapping, DayType } from '../../services/calendar-service';
+import { SelectableDayType } from '../../services/calendar-service';
+import { TranslationService } from '../../services/translation-service';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -17,7 +25,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { FormsModule } from '@angular/forms';
-import { DatePipe, LowerCasePipe } from '@angular/common';
+
 import {
 	DateAdapter,
 	MAT_DATE_FORMATS,
@@ -61,8 +69,6 @@ const MY_DATE_FORMATS = {
 		MatSelectModule,
 		MatDatepickerModule,
 		FormsModule,
-		DatePipe,
-		LowerCasePipe,
 		CdkDropList,
 		CdkDrag,
 	],
@@ -77,30 +83,47 @@ const MY_DATE_FORMATS = {
 })
 export class RulesPanel {
 	public ruleService = inject(RuleService);
+	protected readonly translationService = inject(TranslationService);
+	private readonly dateAdapter = inject(DateAdapter);
+
+	get tr() {
+		return this.translationService.tr;
+	}
+
+	constructor() {
+		effect(() => {
+			this.dateAdapter.setLocale(this.translationService.locale());
+		});
+	}
 
 	protected readonly RuleType = RuleType;
 	protected readonly placeDayTypes = Object.values(SelectableDayType);
 	protected readonly rewardDayTypes = Object.values(SelectableDayType).filter(
 		(t) => t !== SelectableDayType.ANY,
 	);
-	protected readonly tooltipTypeMapping = tooltipTypeMapping;
 
-	protected readonly daysOfWeek = [
-		{ value: 1, label: 'Lundi' },
-		{ value: 2, label: 'Mardi' },
-		{ value: 3, label: 'Mercredi' },
-		{ value: 4, label: 'Jeudi' },
-		{ value: 5, label: 'Vendredi' },
-		{ value: 6, label: 'Samedi' },
-		{ value: 0, label: 'Dimanche' },
-	];
+	protected get daysOfWeek() {
+		const tr = this.tr();
+		return [
+			{ value: 1, label: tr.rules.daysOfWeek[1] },
+			{ value: 2, label: tr.rules.daysOfWeek[2] },
+			{ value: 3, label: tr.rules.daysOfWeek[3] },
+			{ value: 4, label: tr.rules.daysOfWeek[4] },
+			{ value: 5, label: tr.rules.daysOfWeek[5] },
+			{ value: 6, label: tr.rules.daysOfWeek[6] },
+			{ value: 0, label: tr.rules.daysOfWeek[0] },
+		];
+	}
 
-	protected readonly placementOptions: { value: PlacementStrategy; label: string }[] = [
-		{ value: 'before', label: ' Avant' },
-		{ value: 'after', label: ' Après' },
-		{ value: 'around', label: ' Autour' },
-		{ value: 'auto', label: ' Auto (Meilleur choix)' },
-	];
+	protected get placementOptions(): { value: PlacementStrategy; label: string }[] {
+		const tr = this.tr();
+		return [
+			{ value: 'before', label: tr.rules.placement.before },
+			{ value: 'after', label: tr.rules.placement.after },
+			{ value: 'around', label: tr.rules.placement.around },
+			{ value: 'auto', label: tr.rules.placement.auto },
+		];
+	}
 
 	protected editingRuleId = signal<string | null>(null);
 	protected isAddingNew = signal(false);
@@ -161,7 +184,7 @@ export class RulesPanel {
 
 		if (type === RuleType.IF_THEN) {
 			this.editBuffer = {
-				name: 'Nouvelle Règle',
+				name: this.tr().rules.defaultNewRuleName,
 				type: RuleType.IF_THEN,
 				dayOfWeek: 6,
 				placeDays: 2,
@@ -172,7 +195,7 @@ export class RulesPanel {
 			} as Partial<IfThenRule>;
 		} else {
 			this.editBuffer = {
-				name: 'Nouvelle Période',
+				name: this.tr().rules.defaultNewPeriodName,
 				type: RuleType.TIME_WINDOW,
 				startDate: new Date(),
 				endDate: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),
@@ -184,6 +207,44 @@ export class RulesPanel {
 
 	protected getDayTypeLabel(type: string | undefined | null): string {
 		if (!type) return '';
-		return tooltipTypeMapping[type as unknown as DayType] || String(type);
+		return this.translationService.getDayTypeLabel(type);
+	}
+
+	public getRuleSummary(rule: VacationRule): string {
+		const tr = this.tr();
+		if (rule.type === RuleType.IF_THEN) {
+			const ifThen = rule as IfThenRule;
+			const dayLabel = this.daysOfWeek.find((d) => d.value === ifThen.dayOfWeek)?.label ?? '';
+			const placeTypeLabel = this.getDayTypeLabel(ifThen.placeType);
+			const placementLabel = (
+				this.placementOptions.find((p) => p.value === ifThen.placement)?.label ?? ''
+			)
+				.trim()
+				.toLowerCase();
+			const rewardTypeLabel = this.getDayTypeLabel(ifThen.rewardType);
+
+			return tr.rules.ifThenTemplate
+				.replace('{day}', dayLabel)
+				.replace('{placeDays}', String(ifThen.placeDays))
+				.replace('{placeType}', placeTypeLabel)
+				.replace('{placement}', placementLabel)
+				.replace('{rewardDays}', String(ifThen.rewardDays))
+				.replace('{rewardType}', rewardTypeLabel);
+		} else {
+			const timeWindow = rule as TimeWindowRule;
+			const placeTypeLabel = this.getDayTypeLabel(timeWindow.placeType);
+			const startDateStr = new Date(timeWindow.startDate).toLocaleDateString(
+				this.translationService.locale(),
+			);
+			const endDateStr = new Date(timeWindow.endDate).toLocaleDateString(
+				this.translationService.locale(),
+			);
+
+			return tr.rules.timeWindowTemplate
+				.replace('{placeDays}', String(timeWindow.placeDays))
+				.replace('{placeType}', placeTypeLabel)
+				.replace('{startDate}', startDateStr)
+				.replace('{endDate}', endDateStr);
+		}
 	}
 }