feat(planner): implement cancellation for planning calculations

- Refactor leave-planner.worker.ts to support cancellation of ongoing calculations.
- Introduce `calculatePlanningAsyncInternal` for asynchronous planning calculations.
- Add cancellation handling in the worker message event.
- Update planning-date.ts with new utility functions for date manipulation.
- Extend translation-service.ts and translation files (en.json, de.json, es.json, fr.json) to include new strings related to planning horizon and cancellation.
- Create documentation for the cancellation feature in planner-cancellation.md.
- Add unit tests for cancellation functionality in leave-planner-cancellation.spec.ts and leave-planner.worker.spec.ts.

#57 #58

src/app/components/user-settings/user-settings.html

@@ -2,6 +2,53 @@
 <mat-dialog-content>
 	<p>{{ tr().settings.description }}</p>
 	<div class="settings-controls">
+		<fieldset class="planning-dates">
+			<legend>{{ tr().settings.planningHorizon }}</legend>
+			<p id="planning-dates-help">{{ tr().settings.planningDatesHelp }}</p>
+			<mat-form-field appearance="outline">
+				<mat-label>{{ tr().settings.planningStart }}</mat-label>
+				<input
+					matInput
+					type="date"
+					name="planningStart"
+					required
+					#planningStart
+					[value]="calendarSettings.planningDates().start"
+					[attr.aria-invalid]="!!calendarSettings.planningHorizonError()"
+					aria-describedby="planning-dates-help planning-dates-error"
+					(input)="
+						calendarSettings.setPlanningDates(
+							planningStart.value,
+							lastPlanningDate.value
+						)
+					"
+				/>
+			</mat-form-field>
+			<mat-form-field appearance="outline">
+				<mat-label>{{ tr().settings.lastPlanningDate }}</mat-label>
+				<input
+					matInput
+					type="date"
+					name="lastPlanningDate"
+					required
+					#lastPlanningDate
+					[value]="calendarSettings.planningDates().lastPlanningDate"
+					[attr.aria-invalid]="!!calendarSettings.planningHorizonError()"
+					aria-describedby="planning-dates-help planning-dates-error"
+					(input)="
+						calendarSettings.setPlanningDates(
+							planningStart.value,
+							lastPlanningDate.value
+						)
+					"
+				/>
+			</mat-form-field>
+			@if (calendarSettings.planningHorizonError(); as error) {
+				<p id="planning-dates-error" class="validation-error" role="alert">
+					{{ tr().settings[error] }}
+				</p>
+			}
+		</fieldset>
 		<mat-form-field appearance="outline">
 			<mat-label>{{ tr().settings.selectTheme }}</mat-label>
 			<mat-select

src/app/components/user-settings/user-settings.scss

@@ -20,3 +20,26 @@ mat-dialog-content > p {
 mat-form-field {
 	width: 100%;
 }
+
+.planning-dates {
+	min-width: 0;
+	margin: 0 0 1rem;
+	padding: 0;
+	border: 0;
+
+	legend {
+		font-weight: 600;
+	}
+
+	p {
+		margin: 0.5rem 0 1rem;
+		color: var(--ui-text-secondary);
+	}
+
+	.validation-error {
+		color: var(--ui-error-text);
+		background: var(--ui-error-bg);
+		padding: 0.75rem;
+		border-radius: 0.5rem;
+	}
+}

src/app/components/user-settings/user-settings.spec.ts

@@ -1,22 +1,71 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideZonelessChangeDetection } from '@angular/core';
 import { UserSettings } from './user-settings';
+import { CalendarSettingsService } from '../../services/calendar-settings-service';
+import { TranslationService } from '../../services/translation-service';
 
 describe('UserSettings', () => {
 	let component: UserSettings;
 	let fixture: ComponentFixture<UserSettings>;
 
 	beforeEach(async () => {
+		localStorage.clear();
 		await TestBed.configureTestingModule({
 			imports: [UserSettings],
 			providers: [provideZonelessChangeDetection()],
 		}).compileComponents();
 
+		TestBed.inject(TranslationService).setLanguage('en');
+		TestBed.inject(CalendarSettingsService).setPlanningDates('2024-02-29', '2027-02-28');
 		fixture = TestBed.createComponent(UserSettings);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});
 
+	afterEach(() => localStorage.clear());
+
+	it.each(['', '2024-02-30', 'not-a-date'])(
+		'reports an invalid date entry without saving it: %s',
+		(value) => {
+			const root = fixture.nativeElement as HTMLElement;
+			const start = root.querySelector<HTMLInputElement>('input[name="planningStart"]')!;
+			start.value = value;
+			start.dispatchEvent(new Event('input'));
+			fixture.detectChanges();
+			expect(root.querySelector('[role="alert"]')?.textContent).toContain(
+				'two valid calendar dates',
+			);
+			expect(TestBed.inject(CalendarSettingsService).planningHorizon()).toBeNull();
+			expect(JSON.parse(localStorage.getItem('calendarSettings.planningDates')!)).toEqual({
+				start: '2024-02-29',
+				lastPlanningDate: '2027-02-28',
+			});
+		},
+	);
+
+	it('edits inclusive dates with an inline validation indication while preserving the saved horizon', () => {
+		const root = fixture.nativeElement as HTMLElement;
+		const start = root.querySelector<HTMLInputElement>('input[name="planningStart"]')!;
+		const last = root.querySelector<HTMLInputElement>('input[name="lastPlanningDate"]')!;
+		expect(start.value).toBe('2024-02-29');
+		expect(last.value).toBe('2027-02-28');
+		expect(root.textContent).toContain('Last planning date (inclusive)');
+		last.value = '2024-02-28';
+		last.dispatchEvent(new Event('input'));
+		fixture.detectChanges();
+		expect(root.querySelector('[role="alert"]')?.textContent).toContain('on or after');
+		expect(last.getAttribute('aria-invalid')).toBe('true');
+		expect(TestBed.inject(CalendarSettingsService).planningHorizon()).toBeNull();
+		last.value = '2024-02-29';
+		last.dispatchEvent(new Event('input'));
+		fixture.detectChanges();
+		expect(root.querySelector('[role="alert"]')).toBeNull();
+		expect(TestBed.inject(CalendarSettingsService).planningHorizon()).toEqual({
+			start: '2024-02-29',
+			end: '2024-03-01',
+		});
+	});
+
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});

src/app/components/user-settings/user-settings.ts

@@ -9,6 +9,7 @@ import {
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatInputModule } from '@angular/material/input';
 import { CalendarSettingsService } from '../../services/calendar-settings-service';
 import { ThemeService } from '../../services/theme-service';
 import { TranslationService } from '../../services/translation-service';
@@ -24,6 +25,7 @@ import { TranslationService } from '../../services/translation-service';
 		MatFormFieldModule,
 		MatSelectModule,
 		MatSlideToggle,
+		MatInputModule,
 	],
 	templateUrl: './user-settings.html',
 	styleUrl: './user-settings.scss',
@@ -32,7 +34,8 @@ import { TranslationService } from '../../services/translation-service';
 export class UserSettings {
 	protected readonly themeService = inject(ThemeService);
 	protected readonly translationService = inject(TranslationService);
-	protected readonly showWeekNumbers = inject(CalendarSettingsService).get('showWeekNumbers');
+	protected readonly calendarSettings = inject(CalendarSettingsService);
+	protected readonly showWeekNumbers = this.calendarSettings.get('showWeekNumbers');
 	protected readonly tr = this.translationService.tr;
 	protected readonly themePreferences = ['system', 'light', 'dark'] as const;
 }