From 729cc3f4cf5d265ec579913b9bfb0788bbbaea08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophyl=20Hoguet?=
 <61246905+THoguet@users.noreply.github.com>
Date: Thu, 6 Nov 2025 19:54:43 +0100
Subject: [PATCH] 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>
---
 .../calendar-settings-dialog.html             | 32 +++++++------------
 .../calendar-settings-dialog.ts               |  8 ++---
 src/app/services/calendar-settings-service.ts | 21 +++++++++++-
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html b/src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html
index ee13da6..24a0b00 100644
--- a/src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html
+++ b/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">
-		<div style="align-self: flex-start">
-			<mat-slide-toggle
-				id="showWeekNumbers"
-				name="showWeekNumbers"
-				[checked]="calendarSettingsService.showWeekNumbers()"
-				(change)="calendarSettingsService.showWeekNumbers.set($event.checked)"
-			>
-				Afficher les numéros de semaine
-			</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>
+		@for (signal of calendarSettingsService.settings; track signal.id) {
+			<div style="align-self: flex-start">
+				<mat-slide-toggle
+					[id]="signal.id"
+					[name]="signal.id"
+					[checked]="signal.signal()"
+					(change)="signal.signal.set($event.checked)"
+				>
+					{{ signal.description }}
+				</mat-slide-toggle>
+			</div>
+		}
 	</div>
 	<button mat-button (click)="closeDialog()">Fermer</button>
 </div>
diff --git a/src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.ts b/src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.ts
index b2657fd..a486ed3 100644
--- a/src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.ts
+++ b/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 dialogRef: MatDialogRef<CalendarSettingsDialog>,
-		protected calendarSettingsService: CalendarSettingsService,
-	) {}
+	public readonly dialogRef = inject<MatDialogRef<CalendarSettingsDialog>>(MatDialogRef);
+	protected readonly calendarSettingsService = inject(CalendarSettingsService);
 
 	closeDialog() {
 		this.dialogRef.close();
diff --git a/src/app/services/calendar-settings-service.ts b/src/app/services/calendar-settings-service.ts
index d80154a..f52affa 100644
--- a/src/app/services/calendar-settings-service.ts
+++ b/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',
+		},
+	];
 }