Add logging service and refactor console.warn to use it

Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

.github/workflows/codeql.yml

@@ -24,7 +24,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v6
+              uses: actions/checkout@v4
 
             - name: Initialize CodeQL
               uses: github/codeql-action/init@v4

.github/workflows/dependabot-auto-merge.yml

@@ -1,28 +0,0 @@
-name: Dependabot Auto-merge
-
-on:
-    pull_request:
-        branches: [main]
-
-permissions:
-    contents: write
-    pull-requests: write
-
-jobs:
-    auto-merge:
-        name: Auto-merge Dependabot minor and patch updates
-        runs-on: ubuntu-latest
-        if: github.actor == 'dependabot[bot]'
-        steps:
-            - name: Fetch Dependabot metadata
-              id: metadata
-              uses: dependabot/fetch-metadata@v2.5.0
-
-            - name: Auto-merge minor and patch updates
-              if: |
-                  steps.metadata.outputs.update-type == 'version-update:semver-minor' ||
-                  steps.metadata.outputs.update-type == 'version-update:semver-patch'
-              run: gh pr merge --auto --squash "$PR_URL"
-              env:
-                  PR_URL: ${{ github.event.pull_request.html_url }}
-                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/docker-build-push.yml

@@ -16,7 +16,7 @@ jobs:
             security-events: write
 
         steps:
-            - uses: actions/checkout@v6
+            - uses: actions/checkout@v4
 
             - name: Set up Docker Buildx
               uses: docker/setup-buildx-action@v3
@@ -52,7 +52,7 @@ jobs:
                   cache-to: type=gha,mode=max
 
             - name: Run Trivy vulnerability scanner
-              uses: aquasecurity/trivy-action@0.34.1
+              uses: aquasecurity/trivy-action@0.33.1
               with:
                   image-ref: ghcr.io/thoguet/vac-optimizer@${{ steps.build.outputs.digest }}
                   format: 'sarif'

.github/workflows/pr-validation.yml

@@ -11,7 +11,7 @@ jobs:
         name: Lint Check
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v6
+            - uses: actions/checkout@v4
 
             - name: Setup Node.js
               uses: actions/setup-node@v6
@@ -20,7 +20,7 @@ jobs:
                   cache: 'npm'
 
             - name: Install dependencies
-              run: npm ci --legacy-peer-deps
+              run: npm ci
 
             - name: Check code formatting with Prettier
               run: npx prettier --check "src/**/*.{ts,html,scss,css,json}"
@@ -32,7 +32,7 @@ jobs:
         name: TypeScript Type Check
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v6
+            - uses: actions/checkout@v4
 
             - name: Setup Node.js
               uses: actions/setup-node@v6
@@ -41,7 +41,7 @@ jobs:
                   cache: 'npm'
 
             - name: Install dependencies
-              run: npm ci --legacy-peer-deps
+              run: npm ci
 
             - name: Run TypeScript compiler
               run: npx tsc --noEmit
@@ -50,7 +50,7 @@ jobs:
         name: Unit Tests
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v6
+            - uses: actions/checkout@v4
 
             - name: Setup Node.js
               uses: actions/setup-node@v6
@@ -59,7 +59,7 @@ jobs:
                   cache: 'npm'
 
             - name: Install dependencies
-              run: npm ci --legacy-peer-deps
+              run: npm ci
 
             - name: Run unit tests
               run: npm test -- --watch=false --browsers=ChromeHeadless --code-coverage
@@ -76,7 +76,7 @@ jobs:
         name: Build Application
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v6
+            - uses: actions/checkout@v4
 
             - name: Setup Node.js
               uses: actions/setup-node@v6
@@ -85,7 +85,7 @@ jobs:
                   cache: 'npm'
 
             - name: Install dependencies
-              run: npm ci --legacy-peer-deps
+              run: npm ci
 
             - name: Build production bundle
               run: npm run build -- --configuration production
@@ -98,7 +98,7 @@ jobs:
                   echo "Build completed successfully"
 
             - name: Upload build artifacts
-              uses: actions/upload-artifact@v7
+              uses: actions/upload-artifact@v5
               with:
                   name: build-artifacts
                   path: dist/

eslint.config.mjs

@@ -4,31 +4,31 @@ import prettier from 'eslint-config-prettier';
 import prettierPlugin from 'eslint-plugin-prettier';
 
 export default [
-	eslintJs.configs.recommended,
+    eslintJs.configs.recommended,
-	...tseslint.configs.recommended,
+    ...tseslint.configs.recommended,
-	prettier,
+    prettier,
-	{
+    {
-		files: ['**/*.ts'],
+        files: ['**/*.ts'],
-		plugins: {
+        plugins: {
-			prettier: prettierPlugin,
+            prettier: prettierPlugin,
-		},
+        },
-		languageOptions: {
+        languageOptions: {
-			parserOptions: {
+            parserOptions: {
-				projectService: true,
+                projectService: true,
-				tsconfigRootDir: import.meta.dirname,
+                tsconfigRootDir: import.meta.dirname,
-			},
+            },
-		},
+        },
-		rules: {
+        rules: {
-			'prettier/prettier': 'error',
+            'prettier/prettier': 'error',
-			'@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-explicit-any': 'warn',
-			'@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/explicit-function-return-type': 'off',
-			'@typescript-eslint/no-unused-vars': [
+            '@typescript-eslint/no-unused-vars': [
-				'error',
+                'error',
-				{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+                { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
-			],
+            ],
-		},
+        },
-	},
+    },
-	{
+    {
-		ignores: ['dist/**', 'node_modules/**', '.angular/**', 'coverage/**'],
+        ignores: ['dist/**', 'node_modules/**', '.angular/**', 'coverage/**'],
-	},
+    },
 ];

package.json

@@ -27,45 +27,44 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "21.2.0",
+		"@angular/cdk": "^20.2.12",
-		"@angular/cdk": "^21.2.0",
+		"@angular/common": "^20.3.10",
-		"@angular/common": "21.2.0",
+		"@angular/compiler": "^20.3.10",
-		"@angular/compiler": "21.2.0",
+		"@angular/core": "^20.3.10",
-		"@angular/core": "21.2.0",
+		"@angular/forms": "^20.3.10",
-		"@angular/forms": "21.2.0",
+		"@angular/material": "^20.2.12",
-		"@angular/material": "^21.2.0",
+		"@angular/platform-browser": "^20.3.10",
-		"@angular/platform-browser": "21.2.0",
+		"@angular/platform-server": "^20.3.10",
-		"@angular/platform-server": "21.2.0",
+		"@angular/router": "^20.3.10",
-		"@angular/router": "21.2.0",
+		"@angular/ssr": "^20.3.10",
-		"@angular/ssr": "21.2.0",
+		"date-holidays": "^3.26.2",
-		"date-holidays": "^3.26.8",
 		"dayjs": "^1.11.19",
-		"express": "^5.2.1",
+		"express": "^5.1.0",
-		"rxjs": "~7.8.2",
+		"rxjs": "~7.8.0",
-		"tslib": "^2.8.1"
+		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
-		"@angular/build": "21.1.5",
+		"@angular/build": "^20.3.10",
-		"@angular/cli": "21.1.5",
+		"@angular/cli": "^20.3.10",
-		"@angular/compiler-cli": "21.1.5",
+		"@angular/compiler-cli": "^20.3.10",
-		"@eslint/js": "^10.0.1",
+		"@eslint/js": "^9.39.1",
-		"@types/express": "^5.0.6",
+		"@types/express": "^5.0.1",
-		"@types/jasmine": "~6.0.0",
+		"@types/jasmine": "~5.1.0",
 		"@types/jest": "^30.0.0",
-		"@types/node": "^25.3.0",
+		"@types/node": "^24.10.0",
-		"eslint": "^10.0.1",
+		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-prettier": "^5.5.5",
+		"eslint-plugin-prettier": "^5.5.4",
-		"jasmine-core": "~6.1.0",
+		"jasmine-core": "~5.12.1",
 		"jest": "^30.2.0",
-		"jest-preset-angular": "^16.0.0",
+		"jest-preset-angular": "^15.0.3",
-		"karma": "~6.4.4",
+		"karma": "~6.4.0",
 		"karma-chrome-launcher": "~3.2.0",
-		"karma-coverage": "~2.2.1",
+		"karma-coverage": "~2.2.0",
 		"karma-jasmine": "~5.1.0",
-		"karma-jasmine-html-reporter": "~2.2.0",
+		"karma-jasmine-html-reporter": "~2.1.0",
-		"prettier": "^3.8.1",
+		"prettier": "^3.6.2",
-		"typescript": "~5.9.3",
+		"typescript": "~5.9.2",
-		"typescript-eslint": "^8.56.1"
+		"typescript-eslint": "^8.46.4"
 	}
 }

src/app/app.config.ts

@@ -11,7 +11,6 @@ import {
 	withEventReplay,
 	withIncrementalHydration,
 } from '@angular/platform-browser';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
 	providers: [
@@ -19,6 +18,5 @@ export const appConfig: ApplicationConfig = {
 		provideZonelessChangeDetection(),
 		provideRouter(routes),
 		provideClientHydration(withEventReplay(), withIncrementalHydration()),
-		provideAnimationsAsync(),
 	],
 };

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

@@ -1,16 +1,17 @@
-import { Component, effect, signal, inject, untracked } from '@angular/core';
+import { Component, effect, signal, inject } 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 } from '../../services/calendar-service';
-
+import { CommonModule } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { CalendarSettingsService } from '../../services/calendar-settings-service';
 import { DateCacheService } from '../../services/date-cache.service';
+import { LoggerService } from '../../services/logger.service';
 
 @Component({
 	selector: 'app-calendar-year',
-	imports: [MatCard, CalendarMonth, MatCardContent, MatProgressSpinner],
+	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule, MatProgressSpinner],
 	templateUrl: './calendar-year.html',
 	styleUrl: './calendar-year.scss',
 })
@@ -19,6 +20,7 @@ export class CalendarYear {
 	private userInput = inject(UserInputService);
 	private calendarService = inject(CalendarService);
 	private calendarSettingsService = inject(CalendarSettingsService);
+	private logger = inject(LoggerService);
 
 	protected isLoading = signal(true);
 	protected loadingProgress = signal(0);
@@ -34,11 +36,9 @@ export class CalendarYear {
 
 	constructor() {
 		effect(() => {
-			this.userInput.computeTriggerSignal();
-
 			this.selectedDates = this.calendarService.getSelectedDatesForYear();
-			const vacationData = untracked(() => this.userInput.vacationNumberSignal());
+			const vacationData = this.userInput.vacationNumberSignal();
-			const c = untracked(() => this.calendarSettingsService.get('samediMalin')());
+			const c = this.calendarSettingsService.get('samediMalin')();
 			console.log('Samedi Malin setting:', c);
 			console.log('Optimizing vacations with data:', vacationData);
 			this.isLoading.set(true);
@@ -47,15 +47,15 @@ export class CalendarYear {
 			queueMicrotask(() => {
 				void (async () => {
 					if (this.selectedDates) {
-						// Create a deep copy to avoid mutating the original signal data
+						// Create a copy to avoid mutating the original signal data
-						const vacationDaysCopy = vacationData.map((vd) => ({ ...vd }));
 						const remainingDays = await this.selectedDates.optimizeVacations(
-							vacationDaysCopy,
+							{ ...vacationData },
 							this.calendarSettingsService,
 							this.calendarService,
 							(progress: number) => {
 								this.loadingProgress.set(progress);
 							},
+							this.logger,
 						);
 						// Update the remaining vacation days signal
 						this.userInput.remainingVacationDaysSignal.set(remainingDays);

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

@@ -1,44 +1,29 @@
 <div class="user-input">
 	<p>Optimisez vos jours de vacances en fonction des jours fériés et des week-ends !</p>
-	<div class="listOfDays">
+	<form [formGroup]="userInputForm">
-		@for (day of daysOff; track day.id) {
+		<mat-form-field appearance="fill">
-			<div class="day-input-wrapper" animate.enter="day-enter" animate.leave="day-leave">
+			<mat-label>Combien de CP par an ?</mat-label>
-				<app-day-input
+			<input matInput type="number" max="365" min="0" formControlName="CP" />
-					[day]="day"
+		</mat-form-field>
-					(dayChange)="updateDay($index, $event)"
+		<mat-form-field appearance="fill">
-					(deleteEntry)="removeFromList($index)"
+			<mat-label>Combien de jours de RTT par an ?</mat-label>
-				></app-day-input>
+			<input matInput type="number" max="365" min="0" formControlName="RTT" />
-			</div>
+		</mat-form-field>
-		}
+		<mat-form-field appearance="fill">
-		<mat-card class="add-day-card mat-elevation-z2" (click)="addDay()">
+			<mat-label>Autres jours</mat-label>
-			<button matFab aria-label="Add entry">
+			<input matInput type="number" max="365" min="0" formControlName="Others" />
-				<mat-icon>add</mat-icon>
+		</mat-form-field>
-			</button>
+	</form>
-			<h3>Ajouter un jour de vacances</h3>
-		</mat-card>
-	</div>
-	<div class="action-buttons">
-		<button matFab extended (click)="triggerComputation()">
-			<mat-icon>calculate</mat-icon>
-			Calculer
-		</button>
-		<app-calendar-settings></app-calendar-settings>
-	</div>
 	@if (hasRemainingDays()) {
 		<mat-card class="mat-elevation-z2 warning-card">
 			<mat-card-content class="warning-content">
-				<mat-icon color="warn">warning</mat-icon>
+				<mat-icon color="warn" aria-hidden="true">warning</mat-icon>
-				<div class="warning">
+				<span>
-					<span>
+					{{ remainingDays() }} jour{{ remainingDays() > 1 ? 's' : '' }} de vacances non
-						{{ remainingDays() }} jour{{ remainingDays() > 1 ? 's' : '' }} de vacances
+					placé{{ remainingDays() > 1 ? 's' : '' }}. Veuillez les placer manuellement.
-						non placé{{ remainingDays() > 1 ? 's' : '' }}:
+				</span>
-					</span>
-					@for (day of remainingDaysDetails(); track $index) {
-						<span class="remaining-day-detail">- {{ day }}</span>
-					}
-					<span> Veuillez les placer manuellement. </span>
-				</div>
 			</mat-card-content>
 		</mat-card>
 	}
+	<app-calendar-settings></app-calendar-settings>
 </div>

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

@@ -25,79 +25,7 @@
 	}
 }
 
-.listOfDays {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.day-input-wrapper {
-	animation: slide-fade-in 200ms ease-out;
-
-	@starting-style {
-		opacity: 0;
-		transform: translateX(-20px);
-	}
-}
-
-.day-enter {
-	animation: slide-fade-in 200ms ease-out;
-}
-
-.day-leave {
-	opacity: 0;
-	transform: translateX(20px);
-	transition:
-		opacity 200ms ease-in,
-		transform 200ms ease-in;
-}
-
-@keyframes slide-fade-in {
-	from {
-		opacity: 0;
-		transform: translateX(-20px);
-	}
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-
 form {
 	display: flex;
 	flex-direction: column;
 }
-
-.add-day-card {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	padding: 16px;
-	gap: 1rem;
-	margin-bottom: 1rem;
-	cursor: pointer;
-}
-
-.add-day-card h3 {
-	flex-grow: 1;
-	margin: 0;
-	font-weight: normal;
-}
-
-.action-buttons {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 1rem;
-	gap: 1rem;
-}
-
-.warning {
-	display: flex;
-	flex-direction: column;
-}
-
-:host {
-	max-width: 100%;
-}

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

@@ -1,23 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideZonelessChangeDetection } from '@angular/core';
 import { UserInput } from './user-input';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { UserInputService } from '../../services/user-input-service';
 
 describe('UserInput', () => {
 	let component: UserInput;
 	let fixture: ComponentFixture<UserInput>;
-	let userInputService: UserInputService;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			imports: [UserInput],
-			providers: [provideZonelessChangeDetection(), provideAnimationsAsync()],
+			providers: [provideZonelessChangeDetection()],
 		}).compileComponents();
 
 		fixture = TestBed.createComponent(UserInput);
 		component = fixture.componentInstance;
-		userInputService = TestBed.inject(UserInputService);
 		fixture.detectChanges();
 	});
 
@@ -25,22 +21,20 @@ describe('UserInput', () => {
 		expect(component).toBeTruthy();
 	});
 
-	it('should initialize with vacation days from service', () => {
+	it('should initialize form with values from service', () => {
-		const vacationDays = userInputService.vacationNumberSignal();
+		expect(component.userInputForm).toBeDefined();
-		expect(vacationDays).toBeDefined();
+		expect(component.userInputForm.get('CP')).toBeDefined();
-		expect(Array.isArray(vacationDays)).toBe(true);
+		expect(component.userInputForm.get('RTT')).toBeDefined();
-		expect(vacationDays.length).toBeGreaterThan(0);
+		expect(component.userInputForm.get('Others')).toBeDefined();
 	});
 
-	it('should add a new vacation day', () => {
+	it('should have valid form controls', () => {
-		const initialLength = userInputService.vacationNumberSignal().length;
+		const cpControl = component.userInputForm.get('CP');
-		component.addDay();
+		const rttControl = component.userInputForm.get('RTT');
-		expect(userInputService.vacationNumberSignal().length).toBe(initialLength + 1);
+		const othersControl = component.userInputForm.get('Others');
-	});
 
-	it('should remove a vacation day', () => {
+		expect(cpControl).toBeTruthy();
-		const initialLength = userInputService.vacationNumberSignal().length;
+		expect(rttControl).toBeTruthy();
-		component.removeFromList(0);
+		expect(othersControl).toBeTruthy();
-		expect(userInputService.vacationNumberSignal().length).toBe(initialLength - 1);
 	});
 });

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

@@ -1,77 +1,79 @@
-import { Component, computed, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, OnDestroy, effect, computed } from '@angular/core';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { UserInputService } from '../../services/user-input-service';
+import { VacationsNumber } from '../../services/calendar-service';
+import { debounceTime, takeUntil, Subject } from 'rxjs';
 import { CalendarSettings } from '../calendar-settings/calendar-settings';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
-import { DayInput } from '../userInput/day-input/day-input';
-import { MatButtonModule } from '@angular/material/button';
-import { tooltipTypeMapping, DayType, VacDay } from '../../services/calendar-service';
 
 @Component({
 	selector: 'app-user-input',
 	imports: [
+		MatFormField,
+		MatLabel,
 		MatInputModule,
+		ReactiveFormsModule,
 		CalendarSettings,
 		MatCard,
 		MatCardContent,
 		MatIcon,
-		MatButtonModule,
-		DayInput,
 	],
 	templateUrl: './user-input.html',
 	styleUrl: './user-input.scss',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UserInput {
+export class UserInput implements OnInit, OnDestroy {
-	private userInputService: UserInputService = inject(UserInputService);
+	constructor(private userInputService: UserInputService) {
+		// Watch for signal changes and update form
+		effect(() => {
+			const vacationData = this.userInputService.vacationNumberSignal();
+			this.userInputForm.patchValue(
+				{
+					CP: vacationData.cp,
+					RTT: vacationData.rtt,
+					Others: vacationData.other,
+				},
+				{ emitEvent: false },
+			);
+		});
+	}
+
+	private destroy$ = new Subject<void>();
+
+	userInputForm: FormGroup = new FormGroup({
+		CP: new FormControl<number | null>(null),
+		RTT: new FormControl<number | null>(null),
+		Others: new FormControl<number | null>(null),
+	});
 
 	protected remainingDays = computed(() => {
 		const remaining = this.userInputService.remainingVacationDaysSignal();
-		return remaining.reduce((acc, day) => acc + day.numberOfDays, 0);
+		return remaining.cp + remaining.rtt + remaining.other;
-	});
-
-	protected remainingDaysDetails = computed(() => {
-		const remaining = this.userInputService.remainingVacationDaysSignal();
-		return remaining
-			.filter((day) => day.numberOfDays > 0)
-			.map((day) => {
-				const typeName = tooltipTypeMapping[day.type as unknown as DayType];
-				const expiryDate = day.expiryDate.toLocaleDateString('fr-FR', {
-					day: 'numeric',
-					month: 'short',
-					year: 'numeric',
-				});
-				return `${day.numberOfDays} ${typeName} (exp. ${expiryDate})`;
-			});
 	});
 
 	protected hasRemainingDays = computed(() => this.remainingDays() > 0);
 
-	protected get daysOff() {
+	ngOnInit() {
-		return this.userInputService.vacationNumberSignal();
+		this.userInputForm.valueChanges
+			.pipe(debounceTime(1500), takeUntil(this.destroy$))
+			.subscribe(() => this.submitForm());
 	}
 
-	public addDay() {
+	ngOnDestroy() {
-		this.userInputService.vacationNumberSignal.update((days) => [
+		this.destroy$.next();
-			...days,
+		this.destroy$.complete();
-			this.userInputService.createVacationDay(),
-		]);
 	}
 
-	public removeFromList(index: number) {
+	private submitForm() {
-		this.userInputService.vacationNumberSignal.update((days) =>
+		if (this.userInputForm.valid) {
-			days.filter((_, i) => i !== index),
+			const vacationData: VacationsNumber = {
-		);
+				cp: this.userInputForm.get('CP')?.value || 0,
-	}
+				rtt: this.userInputForm.get('RTT')?.value || 0,
-
+				other: this.userInputForm.get('Others')?.value || 0,
-	public updateDay(index: number, updatedDay: VacDay) {
+			};
-		this.userInputService.vacationNumberSignal.update((days) =>
+			this.userInputService.vacationNumberSignal.set(vacationData);
-			days.map((day, i) => (i === index ? updatedDay : day)),
+		}
-		);
-	}
-
-	public triggerComputation() {
-		this.userInputService.requestComputation();
 	}
 }

src/app/components/userInput/day-input/day-input.html

@@ -1,36 +0,0 @@
-<!-- <mat-list-item role="listitem"> -->
-<mat-card class="card">
-	<mat-form-field class="numberInput">
-		<input
-			matInput
-			type="number"
-			min="0"
-			[value]="day().numberOfDays"
-			(input)="onInput($event)"
-		/>
-	</mat-form-field>
-	<mat-form-field class="dayTypeInput">
-		<mat-select (valueChange)="onTypeChange($event)" [value]="day().type">
-			<mat-option></mat-option>
-			@for (dayType of selectableDayTypes; track $index) {
-				<mat-option [value]="dayType">{{ tooltipTypeMapping[dayType] }}</mat-option>
-			}
-		</mat-select>
-	</mat-form-field>
-	<mat-form-field class="dateInput">
-		<mat-label>Choose a date</mat-label>
-		<input
-			matInput
-			type="datetime"
-			[matDatepicker]="picker"
-			[value]="day().expiryDate"
-			(dateChange)="addEvent($event)"
-		/>
-		<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-		<mat-datepicker #picker></mat-datepicker>
-	</mat-form-field>
-	<button matFab aria-label="Delete entry" (click)="deleteEntry.emit()">
-		<mat-icon>close</mat-icon>
-	</button>
-</mat-card>
-<!-- </mat-list-item> -->

src/app/components/userInput/day-input/day-input.scss

@@ -1,20 +0,0 @@
-.card {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	padding: 16px;
-	gap: 16px;
-}
-
-.dateInput {
-	flex-grow: 1;
-}
-
-.numberInput {
-	width: 80px;
-}
-
-::ng-deep .mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

src/app/components/userInput/day-input/day-input.spec.ts

@@ -1,33 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
-import { DayInput } from './day-input';
-import { SelectableDayType, VacDay } from '../../../services/calendar-service';
-
-describe('DayInput', () => {
-	let component: DayInput;
-	let fixture: ComponentFixture<DayInput>;
-
-	const mockVacDay: VacDay = {
-		id: 'test-id',
-		type: SelectableDayType.CP,
-		numberOfDays: 5,
-		expiryDate: new Date('2025-12-31'),
-	};
-
-	beforeEach(async () => {
-		await TestBed.configureTestingModule({
-			imports: [DayInput],
-			providers: [provideAnimationsAsync()],
-		}).compileComponents();
-
-		fixture = TestBed.createComponent(DayInput);
-		component = fixture.componentInstance;
-		fixture.componentRef.setInput('day', mockVacDay);
-		fixture.detectChanges();
-	});
-
-	it('should create', () => {
-		expect(component).toBeTruthy();
-	});
-});

src/app/components/userInput/day-input/day-input.ts

@@ -1,103 +0,0 @@
-import { Component, input, output, ChangeDetectionStrategy } from '@angular/core';
-import { SelectableDayType, tooltipTypeMapping, VacDay } from '../../../services/calendar-service';
-import { MatCard } from '@angular/material/card';
-import { MatOption, MatSelect } from '@angular/material/select';
-import { MatInput, MatInputModule, MatLabel } from '@angular/material/input';
-import {
-	MatDatepicker,
-	MatDatepickerInput,
-	MatDatepickerInputEvent,
-	MatDatepickerToggle,
-} from '@angular/material/datepicker';
-import {
-	DateAdapter,
-	MAT_DATE_FORMATS,
-	MAT_DATE_LOCALE,
-	NativeDateAdapter,
-} from '@angular/material/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-
-class CustomDateAdapter extends NativeDateAdapter {
-	override format(date: Date, displayFormat: unknown): string {
-		if (displayFormat === 'input') {
-			const day = date.getDate().toString().padStart(2, '0');
-			const month = (date.getMonth() + 1).toString().padStart(2, '0');
-			const year = date.getFullYear();
-			return `${day}/${month}/${year}`;
-		}
-		return super.format(date, displayFormat as object);
-	}
-
-	override parse(value: string): Date | null {
-		if (!value) return null;
-		const parts = value.split('/');
-		if (parts.length === 3) {
-			const day = parseInt(parts[0], 10);
-			const month = parseInt(parts[1], 10) - 1;
-			const year = parseInt(parts[2], 10);
-			if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
-				return new Date(year, month, day);
-			}
-		}
-		return null;
-	}
-}
-
-const MY_DATE_FORMATS = {
-	parse: {
-		dateInput: 'input',
-	},
-	display: {
-		dateInput: 'input',
-		monthYearLabel: { year: 'numeric', month: 'short' },
-		dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
-		monthYearA11yLabel: { year: 'numeric', month: 'long' },
-	},
-};
-
-@Component({
-	selector: 'app-day-input',
-	imports: [
-		MatIconModule,
-		MatCard,
-		MatSelect,
-		MatOption,
-		MatInput,
-		MatDatepicker,
-		MatLabel,
-		MatDatepickerToggle,
-		MatDatepickerInput,
-		MatInputModule,
-		MatButtonModule,
-	],
-	templateUrl: './day-input.html',
-	styleUrl: './day-input.scss',
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [
-		{ provide: DateAdapter, useClass: CustomDateAdapter },
-		{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
-		{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
-	],
-})
-export class DayInput {
-	public day = input.required<VacDay>();
-	public dayChange = output<VacDay>();
-	public deleteEntry = output<void>();
-
-	protected readonly selectableDayTypes = Object.values(SelectableDayType);
-	protected readonly tooltipTypeMapping = tooltipTypeMapping;
-
-	onInput(event: Event) {
-		const value = Number((event.target as HTMLInputElement).value);
-		this.dayChange.emit({ ...this.day(), numberOfDays: value });
-	}
-
-	onTypeChange(type: SelectableDayType) {
-		this.dayChange.emit({ ...this.day(), type });
-	}
-
-	addEvent(event: MatDatepickerInputEvent<Date>) {
-		this.dayChange.emit({ ...this.day(), expiryDate: event.value! });
-	}
-}

src/app/services/calendar-service.ts

@@ -6,6 +6,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { CalendarSettingsService } from './calendar-settings-service';
 import { DateCacheService } from './date-cache.service';
+import { LoggerService } from './logger.service';
 
 dayjs.extend(weekOfYear);
 dayjs.extend(isoWeek);
@@ -21,6 +22,7 @@ const allTypesOptions: HolidaysTypes.Options = {
 })
 export class CalendarService {
 	private dateCache = inject(DateCacheService);
+	private logger = inject(LoggerService);
 
 	// Cache for holiday timestamps
 	private holidayTimestampsCache: Set<number> | null = null;
@@ -184,11 +186,10 @@ export class CalendarService {
 	}
 }
 
-export type VacDay = {
+export type VacationsNumber = {
-	id: string;
+	rtt: number;
-	type: SelectableDayType;
+	cp: number;
-	numberOfDays: number;
+	other: number;
-	expiryDate: Date;
 };
 
 export type Week = (Date | null)[];
@@ -204,12 +205,6 @@ export enum DayType {
 	TODAY = 'today',
 }
 
-export enum SelectableDayType {
-	CP = DayType.CP,
-	RTT = DayType.RTT,
-	OTHER = DayType.OTHER,
-}
-
 export const tooltipTypeMapping: { [key in DayType]: string } = {
 	[DayType.WEEKEND]: 'Weekend',
 	[DayType.CLOSED_DAY]: 'Jour Férié',
@@ -273,7 +268,7 @@ export class SelectedDate implements SelectedDateInterface {
 	getClasses(date: Date): string {
 		let returnType: DayType | string = '';
 		if (this.type && date >= this.range.start! && date <= this.range.end!) {
-			returnType += this.type + ' ';
+			returnType = returnType += this.type + ' ';
 		}
 		return returnType;
 	}
@@ -544,15 +539,16 @@ export class SelectedDates implements SelectedDateInterface {
 	}
 
 	async optimizeVacations(
-		vacationDays: VacDay[],
+		vacationsNumber: VacationsNumber,
 		calendarSettingsService: CalendarSettingsService,
 		calendarService: CalendarService,
 		progressCallback?: (progress: number) => void,
-	): Promise<VacDay[]> {
+		logger?: LoggerService,
-		if (calendarSettingsService.get('samediMalin')()) this.samediMalin(vacationDays);
+	): Promise<VacationsNumber> {
+		if (calendarSettingsService.get('samediMalin')()) this.samediMalin(vacationsNumber);
 
-		// Calculate total days to process
+		const initialVacations = { ...vacationsNumber };
-		const totalDays = vacationDays.reduce((sum, vd) => sum + vd.numberOfDays, 0);
+		const totalDays = initialVacations.cp + initialVacations.rtt + initialVacations.other;
 		let processedDays = 0;
 
 		// Helper function to update progress, throttled to every 5%
@@ -572,30 +568,30 @@ export class SelectedDates implements SelectedDateInterface {
 
 		await updateProgress();
 
-		// Track VacDays that can't find valid placements
+		while (vacationsNumber.cp > 0) {
-		const exhaustedVacDayIds = new Set<string>();
+			const result = this.lookForVacation(DayType.CP, calendarService);
-
+			if (result.heuristic === SelectedDates.NO_VALID_STRATEGY_HEURISTIC) {
-		// Process vacation days ordered by expiration date (earliest first)
-		while (vacationDays.some((vd) => vd.numberOfDays > 0 && !exhaustedVacDayIds.has(vd.id))) {
-			// Sort by expiration date to use days that expire first, excluding exhausted ones
-			const sortedVacDays = [...vacationDays]
-				.filter((vd) => vd.numberOfDays > 0 && !exhaustedVacDayIds.has(vd.id))
-				.sort((a, b) => a.expiryDate.getTime() - b.expiryDate.getTime());
-
-			if (sortedVacDays.length === 0) {
 				break;
 			}
-
+			vacationsNumber.cp -= 1;
-			const vacDayToUse = sortedVacDays[0];
+			processedDays++;
-			const result = this.lookForVacation(vacDayToUse, calendarService);
+			await updateProgress();
-
+		}
+		while (vacationsNumber.rtt > 0) {
+			const result = this.lookForVacation(DayType.RTT, calendarService);
 			if (result.heuristic === SelectedDates.NO_VALID_STRATEGY_HEURISTIC) {
-				// Mark this VacDay as exhausted and try other vacation days
+				break;
-				exhaustedVacDayIds.add(vacDayToUse.id);
-				continue;
 			}
-
+			vacationsNumber.rtt -= 1;
-			vacDayToUse.numberOfDays -= 1;
+			processedDays++;
+			await updateProgress();
+		}
+		while (vacationsNumber.other > 0) {
+			const result = this.lookForVacation(DayType.OTHER, calendarService);
+			if (result.heuristic === SelectedDates.NO_VALID_STRATEGY_HEURISTIC) {
+				break;
+			}
+			vacationsNumber.other -= 1;
 			processedDays++;
 			await updateProgress();
 		}
@@ -606,18 +602,18 @@ export class SelectedDates implements SelectedDateInterface {
 		}
 
 		// Inform user if not all days were placed
-		const remainingDays = vacationDays.reduce((sum, vd) => sum + vd.numberOfDays, 0);
+		const remainingDays = vacationsNumber.cp + vacationsNumber.rtt + vacationsNumber.other;
-		if (remainingDays > 0) {
+		if (remainingDays > 0 && logger) {
-			console.warn(
+			logger.warn(
 				`Optimization stopped: ${remainingDays} of ${totalDays} vacation days remain unplaced. ` +
 					`Too many days have equivalent placement quality - please place remaining days manually.`,
 			);
 		}
 
-		return vacationDays;
+		return vacationsNumber;
 	}
 
-	samediMalin(vacationDays: VacDay[]): void {
+	samediMalin(vacationsNumber: VacationsNumber): void {
 		const now = new Date();
 		now.setHours(0, 0, 0, 0);
 		const nowTime = now.getTime();
@@ -626,63 +622,14 @@ export class SelectedDates implements SelectedDateInterface {
 			(date) => date.type === DayType.CLOSED_DAY && date.range.start?.getDay() === 6,
 		);
 
-		// Helper function to get available CP days that don't expire before a given date (ordered by expiry date)
-		const getAvailableCpDaysForDate = (useByDate: Date): VacDay[] => {
-			const useByTime = useByDate.getTime();
-			return vacationDays
-				.filter(
-					(vd) =>
-						vd.type === SelectableDayType.CP &&
-						vd.numberOfDays > 0 &&
-						vd.expiryDate.getTime() >= useByTime,
-				)
-				.sort((a, b) => a.expiryDate.getTime() - b.expiryDate.getTime());
-		};
-
-		// Helper function to get total available CP days that don't expire before a given date
-		const getTotalCpDaysForDate = (useByDate: Date): number => {
-			const useByTime = useByDate.getTime();
-			return vacationDays
-				.filter(
-					(vd) =>
-						vd.type === SelectableDayType.CP && vd.expiryDate.getTime() >= useByTime,
-				)
-				.reduce((sum, vd) => sum + vd.numberOfDays, 0);
-		};
-
-		// Helper function to consume 2 CP days from the available pool for a specific date
-		const consume2CpDaysForDate = (useByDate: Date): boolean => {
-			let daysToConsume = 2;
-			const cpDays = getAvailableCpDaysForDate(useByDate);
-			for (const cpDay of cpDays) {
-				if (daysToConsume === 0) break;
-				const toConsume = Math.min(cpDay.numberOfDays, daysToConsume);
-				cpDay.numberOfDays -= toConsume;
-				daysToConsume -= toConsume;
-			}
-			return daysToConsume === 0;
-		};
-
-		// Helper function to add 1 OTHER day as reward
-		const addOtherDayReward = (): void => {
-			// Find an existing OTHER VacDay or create a new one
-			const otherDay = vacationDays.find((vd) => vd.type === SelectableDayType.OTHER);
-			if (otherDay) {
-				otherDay.numberOfDays += 1;
-			} else {
-				// Create a new OTHER VacDay with a far future expiry date
-				vacationDays.push({
-					id: crypto.randomUUID(),
-					type: SelectableDayType.OTHER,
-					numberOfDays: 1,
-					expiryDate: new Date(now.getFullYear() + 10, 11, 31),
-				});
-			}
-		};
-
 		for (const holiday of samedi_ferie) {
 			if (!holiday.range.start) continue;
 
+			// Skip if no CP days available
+			if (vacationsNumber.cp < 2) {
+				continue;
+			}
+
 			// Get the Saturday date (holiday) and the following Sunday
 			const saturdayDate = new Date(holiday.range.start);
 			const sundayDate = new Date(saturdayDate);
@@ -707,24 +654,21 @@ export class SelectedDates implements SelectedDateInterface {
 			const oneDayAfter = new Date(sundayDate);
 			oneDayAfter.setDate(sundayDate.getDate() + 1);
 
-			// Check if we can apply each strategy (not in the past, not already selected, and have non-expired CP days)
+			// Check if we can apply each strategy (and not in the past)
 			const canApplyTwoBeforeStrategy =
 				twoDaysBefore1.getTime() >= nowTime &&
 				!this.isSelected(twoDaysBefore1) &&
-				!this.isSelected(twoDaysBefore2) &&
+				!this.isSelected(twoDaysBefore2);
-				getTotalCpDaysForDate(twoDaysBefore2) >= 2; // Check expiry against the latest date used
 
 			const canApplyTwoAfterStrategy =
 				twoDaysAfter1.getTime() >= nowTime &&
 				!this.isSelected(twoDaysAfter1) &&
-				!this.isSelected(twoDaysAfter2) &&
+				!this.isSelected(twoDaysAfter2);
-				getTotalCpDaysForDate(twoDaysAfter2) >= 2; // Check expiry against the latest date used
 
 			const canApplyMixedStrategy =
 				oneDayBefore.getTime() >= nowTime &&
 				!this.isSelected(oneDayBefore) &&
-				!this.isSelected(oneDayAfter) &&
+				!this.isSelected(oneDayAfter);
-				getTotalCpDaysForDate(oneDayAfter) >= 2; // Check expiry against the latest date used
 
 			// Test all applicable strategies and choose the one with the best heuristic score
 			const strategies: { apply: () => void; heuristic: number }[] = [];
@@ -747,8 +691,8 @@ export class SelectedDates implements SelectedDateInterface {
 								new DateRange<Date>(twoDaysBefore1, twoDaysBefore2),
 							),
 						);
-						consume2CpDaysForDate(twoDaysBefore2);
+						vacationsNumber.cp -= 2;
-						addOtherDayReward();
+						vacationsNumber.other += 1; // Reward: gain 1 other day
 					},
 					heuristic: heuristic,
 				});
@@ -771,8 +715,8 @@ export class SelectedDates implements SelectedDateInterface {
 								new DateRange<Date>(twoDaysAfter1, twoDaysAfter2),
 							),
 						);
-						consume2CpDaysForDate(twoDaysAfter2);
+						vacationsNumber.cp -= 2;
-						addOtherDayReward();
+						vacationsNumber.other += 1; // Reward: gain 1 other day
 					},
 					heuristic: heuristic,
 				});
@@ -804,8 +748,8 @@ export class SelectedDates implements SelectedDateInterface {
 								new DateRange<Date>(oneDayAfter, oneDayAfter),
 							),
 						);
-						consume2CpDaysForDate(oneDayAfter);
+						vacationsNumber.cp -= 2;
-						addOtherDayReward();
+						vacationsNumber.other += 1; // Reward: gain 1 other day
 					},
 					heuristic: heuristic,
 				});
@@ -825,24 +769,22 @@ export class SelectedDates implements SelectedDateInterface {
 	}
 
 	lookForVacation(
-		vacDay: VacDay,
+		vacType: DayType,
 		calendarService: CalendarService,
 	): { apply: () => void; heuristic: number } {
 		const daysOfYear = calendarService.monthsInAYearFromNow();
 		const now = new Date();
 		now.setHours(0, 0, 0, 0);
 		const nowTime = now.getTime();
-		const expiryTime = vacDay.expiryDate.getTime();
 
-		// Preprocess: filter out past days, already selected days, and days after expiry date
+		// Preprocess: filter out past days and already selected days in one pass
 		const candidateDays: Date[] = [];
 		for (const month of daysOfYear) {
 			for (const week of month) {
 				for (const day of week) {
 					if (day) {
 						day.setHours(0, 0, 0, 0);
-						const dayTime = day.getTime();
+						if (day.getTime() >= nowTime && !this.isSelected(day)) {
-						if (dayTime >= nowTime && dayTime <= expiryTime && !this.isSelected(day)) {
 							candidateDays.push(day);
 						}
 					}
@@ -855,7 +797,6 @@ export class SelectedDates implements SelectedDateInterface {
 			return { apply: () => {}, heuristic: SelectedDates.NO_VALID_STRATEGY_HEURISTIC };
 		}
 
-		const vacType = vacDay.type as unknown as DayType;
 		const tempDatesBackup = [...this._datesSelected];
 		let bestStrategy: { apply: () => void; heuristic: number; value: Date } | null = null;
 		let bestHeuristic = -Infinity;

src/app/services/logger.service.spec.ts

@@ -0,0 +1,52 @@
+import { TestBed } from '@angular/core/testing';
+import { LoggerService } from './logger.service';
+
+describe('LoggerService', () => {
+	let service: LoggerService;
+	let consoleLogSpy: jasmine.Spy;
+	let consoleWarnSpy: jasmine.Spy;
+	let consoleErrorSpy: jasmine.Spy;
+	let consoleDebugSpy: jasmine.Spy;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({});
+		service = TestBed.inject(LoggerService);
+
+		// Spy on console methods
+		consoleLogSpy = spyOn(console, 'log');
+		consoleWarnSpy = spyOn(console, 'warn');
+		consoleErrorSpy = spyOn(console, 'error');
+		consoleDebugSpy = spyOn(console, 'debug');
+	});
+
+	it('should be created', () => {
+		expect(service).toBeTruthy();
+	});
+
+	it('should log messages', () => {
+		service.log('test message');
+		expect(consoleLogSpy).toHaveBeenCalledWith('test message');
+	});
+
+	it('should log warnings', () => {
+		service.warn('test warning');
+		expect(consoleWarnSpy).toHaveBeenCalledWith('test warning');
+	});
+
+	it('should log errors', () => {
+		service.error('test error');
+		expect(consoleErrorSpy).toHaveBeenCalledWith('test error');
+	});
+
+	it('should log debug messages', () => {
+		service.debug('test debug');
+		expect(consoleDebugSpy).toHaveBeenCalledWith('test debug');
+	});
+
+	it('should pass additional arguments to console methods', () => {
+		const arg1 = { key: 'value' };
+		const arg2 = [1, 2, 3];
+		service.log('test', arg1, arg2);
+		expect(consoleLogSpy).toHaveBeenCalledWith('test', arg1, arg2);
+	});
+});

src/app/services/logger.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Logger service that wraps console methods.
+ * Can be configured to disable logging in production environments.
+ */
+@Injectable({
+	providedIn: 'root',
+})
+export class LoggerService {
+	private isProduction = false; // Can be configured based on environment
+
+	/**
+	 * Log an informational message
+	 */
+	log(message: string, ...args: unknown[]): void {
+		if (!this.isProduction) {
+			console.log(message, ...args);
+		}
+	}
+
+	/**
+	 * Log a warning message
+	 */
+	warn(message: string, ...args: unknown[]): void {
+		if (!this.isProduction) {
+			console.warn(message, ...args);
+		}
+	}
+
+	/**
+	 * Log an error message
+	 */
+	error(message: string, ...args: unknown[]): void {
+		// Always log errors, even in production
+		console.error(message, ...args);
+	}
+
+	/**
+	 * Log a debug message
+	 */
+	debug(message: string, ...args: unknown[]): void {
+		if (!this.isProduction) {
+			console.debug(message, ...args);
+		}
+	}
+}

src/app/services/user-input-service.spec.ts

@@ -1,9 +1,8 @@
 import { TestBed } from '@angular/core/testing';
 import { provideZonelessChangeDetection } from '@angular/core';
 import { UserInputService } from './user-input-service';
-import { SelectableDayType, VacDay } from './calendar-service';
 
-describe('UserInputService', () => {
+describe('UserInput', () => {
 	let service: UserInputService;
 
 	beforeEach(() => {
@@ -17,41 +16,19 @@ describe('UserInputService', () => {
 		expect(service).toBeTruthy();
 	});
 
-	it('should initialize with vacation days array', () => {
+	it('should initialize with random vacation numbers', () => {
 		const vacations = service.vacationNumberSignal();
-		expect(Array.isArray(vacations)).toBe(true);
+		expect(vacations.cp).toBeGreaterThanOrEqual(1);
-		expect(vacations.length).toBeGreaterThan(0);
+		expect(vacations.cp).toBeLessThanOrEqual(9);
-	});
+		expect(vacations.rtt).toBeGreaterThanOrEqual(1);
-
+		expect(vacations.rtt).toBeLessThanOrEqual(9);
-	it('should have vacation days with valid properties', () => {
+		expect(vacations.other).toBeGreaterThanOrEqual(1);
-		const vacations = service.vacationNumberSignal();
+		expect(vacations.other).toBeLessThanOrEqual(9);
-		vacations.forEach((day) => {
-			expect(day.id).toBeDefined();
-			expect(day.type).toBeDefined();
-			expect(day.numberOfDays).toBeGreaterThanOrEqual(1);
-			expect(day.numberOfDays).toBeLessThanOrEqual(9);
-			expect(day.expiryDate).toBeInstanceOf(Date);
-		});
 	});
 
 	it('should update vacation number signal', () => {
-		const newVacations: VacDay[] = [
+		const newVacations = { cp: 5, rtt: 3, other: 2 };
-			{
-				id: 'test-id',
-				type: SelectableDayType.CP,
-				numberOfDays: 5,
-				expiryDate: new Date(),
-			},
-		];
 		service.vacationNumberSignal.set(newVacations);
 		expect(service.vacationNumberSignal()).toEqual(newVacations);
 	});
-
-	it('should create a new vacation day', () => {
-		const newDay = service.createVacationDay();
-		expect(newDay.id).toBeDefined();
-		expect(newDay.type).toBe(SelectableDayType.CP);
-		expect(newDay.numberOfDays).toBe(1);
-		expect(newDay.expiryDate).toBeInstanceOf(Date);
-	});
 });

src/app/services/user-input-service.ts

@@ -1,5 +1,5 @@
 import { Injectable, signal } from '@angular/core';
-import { SelectableDayType, VacDay } from './calendar-service';
+import { VacationsNumber } from './calendar-service';
 
 @Injectable({
 	providedIn: 'root',
@@ -9,44 +9,18 @@ export class UserInputService {
 		return Math.floor(Math.random() * 9) + 1;
 	}
 
-	private getInitialValues(): VacDay[] {
+	private getInitialValues(): VacationsNumber {
-		return [
-			{
-				id: crypto.randomUUID(),
-				type: SelectableDayType.CP,
-				numberOfDays: this.getRandomNumber(),
-				// today + 365 days
-				expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
-			},
-			{
-				id: crypto.randomUUID(),
-				type: SelectableDayType.RTT,
-				numberOfDays: this.getRandomNumber(),
-				expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
-			},
-			{
-				id: crypto.randomUUID(),
-				type: SelectableDayType.OTHER,
-				numberOfDays: this.getRandomNumber(),
-				expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
-			},
-		];
-	}
-
-	public createVacationDay(): VacDay {
 		return {
-			id: crypto.randomUUID(),
+			cp: this.getRandomNumber(),
-			type: SelectableDayType.CP,
+			rtt: this.getRandomNumber(),
-			numberOfDays: 1,
+			other: this.getRandomNumber(),
-			expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
 		};
 	}
 
-	readonly vacationNumberSignal = signal<VacDay[]>(this.getInitialValues());
+	readonly vacationNumberSignal = signal<VacationsNumber>(this.getInitialValues());
-	readonly remainingVacationDaysSignal = signal<VacDay[]>([]);
+	readonly remainingVacationDaysSignal = signal<VacationsNumber>({
-	readonly computeTriggerSignal = signal(0);
+		cp: 0,
-
+		rtt: 0,
-	public requestComputation(): void {
+		other: 0,
-		this.computeTriggerSignal.update((count) => count + 1);
+	});
-	}
 }

tsconfig.app.json

@@ -4,8 +4,14 @@
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"outDir": "./out-tsc/app",
-		"types": ["node"]
+		"types": [
+			"node"
+		]
 	},
-	"include": ["src/**/*.ts"],
+	"include": [
-	"exclude": ["src/**/*.spec.ts"]
+		"src/**/*.ts"
+	],
+	"exclude": [
+		"src/**/*.spec.ts"
+	]
 }

tsconfig.spec.json

@@ -4,7 +4,11 @@
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"outDir": "./out-tsc/spec",
-		"types": ["jasmine"]
+		"types": [
+			"jasmine"
+		]
 	},
-	"include": ["src/**/*.ts"]
+	"include": [
+		"src/**/*.ts"
+	]
 }