V1 done still need to work on SSR

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

@@ -32,8 +32,10 @@
 		align-items: center;
 		justify-content: center;
 		width: 30px;
-		height: 30px;
+		height: 26px;
 		margin: 0;
+		margin-top: 2px;
+		margin-bottom: 2px;
 		border-radius: 40%;
 
 		&.empty {
@@ -70,7 +72,7 @@
 	border-color: #1976d2;
 	border-width: 2px;
 	width: 26px !important;
-	height: 26px !important;
+	height: 22px !important;
 	border-style: dashed !important;
 }
 
@@ -85,7 +87,7 @@
 .closed-day {
 	border: 2px solid #0ee3ff;
 	width: 26px !important;
-	height: 26px !important;
+	height: 22px !important;
 }
 
 .rtt {

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

@@ -1,4 +1,12 @@
 <div class="calendar-year">
+	@if (isLoading()) {
+	<div class="loading-overlay">
+		<div class="loading-spinner">
+			<div class="spinner"></div>
+			<p>Calcul en cours...</p>
+		</div>
+	</div>
+	}
 	@for (month of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track $index) {
 	<mat-card>
 		<mat-card-content>

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

@@ -5,4 +5,52 @@
 	justify-content: center;
 	gap: 16px;
 	max-width: 60vw;
+	position: relative;
+}
+
+.loading-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(255, 255, 255, 0.9);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 4px;
+	z-index: 1000;
+}
+
+.loading-spinner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+
+	p {
+		font-size: 16px;
+		font-weight: 500;
+		color: #333;
+		margin: 0;
+	}
+}
+
+.spinner {
+	width: 40px;
+	height: 40px;
+	border: 4px solid #f3f3f3;
+	border-top: 4px solid #3498db;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
 }

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

@@ -1,18 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, effect, signal } from '@angular/core';
 import { UserInputService } from '../../services/user-input-service';
-import { DateRange } from '@angular/material/datepicker';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { CalendarMonth } from "../calendar-month/calendar-month";
 import { CalendarService, SelectedDates, VacationsNumber } from '../../services/calendar-service';
+import { CommonModule } from '@angular/common';
 
 @Component({
 	selector: 'app-calendar-year',
-	imports: [MatCard, CalendarMonth, MatCardContent],
+	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule],
 	templateUrl: './calendar-year.html',
 	styleUrl: './calendar-year.scss',
 })
 export class CalendarYear implements OnInit {
+	protected isLoading = signal(true);
+
 	constructor(private userInput: UserInputService, private calendarService: CalendarService) {
+		effect(() => {
+			this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year);
+			const vacationData = this.userInput.vacationNumberSignal();
+			this.isLoading.set(true);
+			// Simulate server-side calculation with a small delay
+			setTimeout(() => {
+				if (this.selectedDates) {
+					this.selectedDates.optimizeVacations(vacationData);
+				}
+				this.isLoading.set(false);
+			}, 500);
+		});
 	}
 
 	protected selectedDates: SelectedDates = new SelectedDates();
@@ -21,9 +35,6 @@ export class CalendarYear implements OnInit {
 
 	ngOnInit(): void {
 		this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year);
-		const vacationsNumber: VacationsNumber = {
-			cp: 10, rtt: 5, other: 0
-		};
-		this.selectedDates.optimizeVacations(vacationsNumber);
+		this.isLoading.set(false);
 	}
 }

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

@@ -1,6 +1,6 @@
 <div class="user-input">
 	<p>Optimisez vos jours de vacances en fonction des jours fériés et des week-ends !</p>
-	<form [formGroup]="userInputForm" (ngSubmit)="submitForm()" class="form">
+	<form [formGroup]="userInputForm">
 		<mat-form-field appearance="fill">
 			<mat-label>Combien de CP par an ?</mat-label>
 			<input matInput type="number" max="365" min="0" formControlName="CP" />
@@ -13,6 +13,5 @@
 			<mat-label>Autres jours</mat-label>
 			<input matInput type="number" max="365" min="0" formControlName="Others" />
 		</mat-form-field>
-		<button matButton="elevated" type="submit" [disabled]="userInputForm.invalid">Valider</button>
 	</form>
 </div>

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

@@ -15,7 +15,7 @@
 	}
 }
 
-.form {
+form {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;

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

@@ -1,27 +1,60 @@
-import { Component, Input, input, signal, WritableSignal } from '@angular/core';
+import { Component, OnInit, OnDestroy, effect } from '@angular/core';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatCalendar } from "@angular/material/datepicker";
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { UserInputService } from '../../services/user-input-service';
-import { MatAnchor, MatButton } from "@angular/material/button";
+import { VacationsNumber } from '../../services/calendar-service';
+import { debounceTime, takeUntil, Subject } from 'rxjs';
 
 @Component({
 	selector: 'app-user-input',
-	imports: [MatFormField, MatLabel, MatInputModule, ReactiveFormsModule, MatAnchor, MatButton],
+	imports: [MatFormField, MatLabel, MatInputModule, ReactiveFormsModule],
 	templateUrl: './user-input.html',
 	styleUrl: './user-input.scss',
 })
-export class UserInput {
-	constructor(private userInput: UserInputService) { }
+export class UserInput implements OnInit, OnDestroy {
+	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, Validators.required),
-		RTT: new FormControl<number | null>(null, Validators.required),
-		Others: new FormControl<number | null>(null, Validators.required),
+		CP: new FormControl<number | null>(null),
+		RTT: new FormControl<number | null>(null),
+		Others: new FormControl<number | null>(null),
 	});
 
-	submitForm() {
-		console.log("prout");
+	ngOnInit() {
+		this.userInputForm.valueChanges
+			.pipe(
+				debounceTime(2500),
+				takeUntil(this.destroy$)
+			)
+			.subscribe(() => this.submitForm());
+	}
+
+	ngOnDestroy() {
+		this.destroy$.next();
+		this.destroy$.complete();
+	}
+
+	private submitForm() {
+		if (this.userInputForm.valid) {
+			const vacationData: VacationsNumber = {
+				cp: this.userInputForm.get('CP')?.value || 0,
+				rtt: this.userInputForm.get('RTT')?.value || 0,
+				other: this.userInputForm.get('Others')?.value || 0,
+			};
+			this.userInputService.setVacationNumber(vacationData);
+		}
 	}
 }