Refactor calendar settings dialog to use dynamic settings from service (#30)

* Refactor calendar settings dialog to use dynamic settings from service

* Update src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Add type definition for calendar settings array (#35)

* Initial plan

* Add type definition for calendar settings array

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

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

* use inject

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html

@@ -4,26 +4,18 @@
 		<p>Configure your calendar settings here.</p>
 	</div>
 	<div style="display: flex; flex-direction: column; gap: 1rem">
+		@for (signal of calendarSettingsService.settings; track signal.id) {
 			<div style="align-self: flex-start">
 				<mat-slide-toggle
-				id="showWeekNumbers"
+					[id]="signal.id"
-				name="showWeekNumbers"
+					[name]="signal.id"
-				[checked]="calendarSettingsService.showWeekNumbers()"
+					[checked]="signal.signal()"
-				(change)="calendarSettingsService.showWeekNumbers.set($event.checked)"
+					(change)="signal.signal.set($event.checked)"
 				>
-				Afficher les numéros de semaine
+					{{ signal.description }}
-			</mat-slide-toggle>
-		</div>
-		<div style="align-self: flex-start">
-			<mat-slide-toggle
-				id="samediMalin"
-				name="samediMalin"
-				[checked]="calendarSettingsService.samediMalin()"
-				(change)="calendarSettingsService.samediMalin.set($event.checked)"
-			>
-				Activer le Samedi Malin
 				</mat-slide-toggle>
 			</div>
+		}
 	</div>
 	<button mat-button (click)="closeDialog()">Fermer</button>
 </div>

src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatDialogRef } from '@angular/material/dialog';
 import { CalendarSettingsService } from '../../../services/calendar-settings-service';
@@ -11,10 +11,8 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
 	styleUrl: './calendar-settings-dialog.scss',
 })
 export class CalendarSettingsDialog {
-	constructor(
+	public readonly dialogRef = inject<MatDialogRef<CalendarSettingsDialog>>(MatDialogRef);
-		public dialogRef: MatDialogRef<CalendarSettingsDialog>,
+	protected readonly calendarSettingsService = inject(CalendarSettingsService);
-		protected calendarSettingsService: CalendarSettingsService,
-	) {}
 
 	closeDialog() {
 		this.dialogRef.close();

src/app/services/calendar-settings-service.ts

@@ -1,4 +1,10 @@
-import { Injectable, signal } from '@angular/core';
+import { Injectable, signal, WritableSignal } from '@angular/core';
+
+interface CalendarSetting {
+	signal: WritableSignal<boolean>;
+	id: string;
+	description: string;
+}
 
 @Injectable({
 	providedIn: 'root',
@@ -6,4 +12,17 @@ import { Injectable, signal } from '@angular/core';
 export class CalendarSettingsService {
 	readonly showWeekNumbers = signal(false);
 	readonly samediMalin = signal(true);
+
+	readonly settings: readonly CalendarSetting[] = [
+		{
+			signal: this.showWeekNumbers,
+			id: 'showWeekNumbers',
+			description: 'Afficher les numéros de semaine',
+		},
+		{
+			signal: this.samediMalin,
+			id: 'samediMalin',
+			description: 'Activer le Samedi Malin',
+		},
+	];
 }