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.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();
 	});