From 78d7e4af13c512b396ba34f7abfa7cd24eb75d1b Mon Sep 17 00:00:00 2001
From: Richard Russell <2265225+rars@users.noreply.github.com>
Date: Tue, 30 Jun 2026 10:03:00 +0100
Subject: [PATCH] refactor: migrate gas consumption to signal forms

---
 ...ectricity-consumption-chart.component.html | 10 ++-
 ...electricity-consumption-chart.component.ts | 15 ++--
 .../gas-consumption-chart.component.html      |  6 +-
 .../gas-consumption-chart.component.ts        | 87 +++++++++----------
 4 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.html b/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.html
index 9540485..3212f37 100644
--- a/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.html
+++ b/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.html
@@ -10,9 +10,13 @@ <h2>Electricity consumption</h2>
         <input
           matStartDate
           placeholder="Start date"
-          [formField]="form.startDate"
+          [formField]="inputParamsForm.startDate"
+        />
+        <input
+          matEndDate
+          placeholder="End date"
+          [formField]="inputParamsForm.endDate"
         />
-        <input matEndDate placeholder="End date" [formField]="form.endDate" />
       </mat-date-range-input>
       <mat-hint>DD/MM/YYYY - DD/MM/YYYY</mat-hint>
       <mat-datepicker-toggle
@@ -24,7 +28,7 @@ <h2>Electricity consumption</h2>
 
     <mat-form-field>
       <mat-label>Aggregation</mat-label>
-      <mat-select [formField]="form.aggregation">
+      <mat-select [formField]="inputParamsForm.aggregation">
         <mat-option value="raw">Raw</mat-option>
         <mat-option value="daily">Daily</mat-option>
         <mat-option value="monthly">Monthly</mat-option>
diff --git a/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.ts b/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.ts
index 4aca7b8..0782ca2 100644
--- a/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.ts
+++ b/src/app/components/electricity-consumption-chart/electricity-consumption-chart.component.ts
@@ -70,7 +70,7 @@ export class ElectricityConsumptionChartComponent implements OnInit, OnDestroy {
     aggregation: 'raw',
   });
 
-  protected readonly form = form(this.inputParams);
+  protected readonly inputParamsForm = form(this.inputParams);
 
   public values = signal<any[] | undefined>(undefined);
   public chartConfiguration = signal<any>(undefined);
@@ -237,16 +237,13 @@ export class ElectricityConsumptionChartComponent implements OnInit, OnDestroy {
   public ngOnInit(): void {}
 
   public ngOnDestroy(): void {
-    const inputParams = this.inputParams();
-    if (inputParams.startDate && inputParams.endDate) {
-      this.formControlService.setDateRange(
-        inputParams.startDate,
-        inputParams.endDate,
-      );
+    const { startDate, endDate, aggregation } = this.inputParams();
+    if (startDate && endDate) {
+      this.formControlService.setDateRange(startDate, endDate);
     }
 
-    if (inputParams.aggregation) {
-      this.formControlService.setAggregationLevel(inputParams.aggregation);
+    if (aggregation) {
+      this.formControlService.setAggregationLevel(aggregation);
     }
   }
 
diff --git a/src/app/components/gas-consumption-chart/gas-consumption-chart.component.html b/src/app/components/gas-consumption-chart/gas-consumption-chart.component.html
index 37a851c..c88135f 100644
--- a/src/app/components/gas-consumption-chart/gas-consumption-chart.component.html
+++ b/src/app/components/gas-consumption-chart/gas-consumption-chart.component.html
@@ -8,12 +8,12 @@ <h2>Gas consumption</h2>
         <input
           matStartDate
           placeholder="Start date"
-          [formControl]="startDateControl"
+          [formField]="inputParamsForm.startDate"
         />
         <input
           matEndDate
           placeholder="End date"
-          [formControl]="endDateControl"
+          [formField]="inputParamsForm.endDate"
         />
       </mat-date-range-input>
       <mat-hint>DD/MM/YYYY - DD/MM/YYYY</mat-hint>
@@ -26,7 +26,7 @@ <h2>Gas consumption</h2>
 
     <mat-form-field>
       <mat-label>Aggregation</mat-label>
-      <mat-select [formControl]="aggregationControl">
+      <mat-select [formField]="inputParamsForm.aggregation">
         <mat-option value="raw">Raw</mat-option>
         <mat-option value="daily">Daily</mat-option>
         <mat-option value="monthly">Monthly</mat-option>
diff --git a/src/app/components/gas-consumption-chart/gas-consumption-chart.component.ts b/src/app/components/gas-consumption-chart/gas-consumption-chart.component.ts
index 33fc10e..fcb5f6d 100644
--- a/src/app/components/gas-consumption-chart/gas-consumption-chart.component.ts
+++ b/src/app/components/gas-consumption-chart/gas-consumption-chart.component.ts
@@ -3,10 +3,11 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
   signal,
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { FormField, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -22,7 +23,6 @@ import {
   from,
   map,
   of,
-  startWith,
   switchMap,
   take,
 } from 'rxjs';
@@ -37,68 +37,64 @@ import { ChartComponent } from '../chart/chart.component';
 
 const nonNullOrUndefined = <T>(x: T | null | undefined): x is T => !!x;
 
-const getValueStream = <T>(x: FormControl<T | null>) =>
-  x.valueChanges.pipe(startWith(x.value), filter(nonNullOrUndefined));
+interface InputParams {
+  startDate: Date;
+  endDate: Date;
+  aggregation: Aggregation;
+}
 
 @Component({
   selector: 'app-gas-consumption-chart',
   imports: [
     ChartComponent,
+    FormField,
     MatButtonModule,
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
     MatProgressBarModule,
     MatSelectModule,
-    ReactiveFormsModule,
   ],
   templateUrl: './gas-consumption-chart.component.html',
   styleUrl: './gas-consumption-chart.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GasConsumptionChartComponent implements OnInit, OnDestroy {
-  public readonly startDateControl: FormControl<Date | null>;
-  public readonly endDateControl: FormControl<Date | null>;
-  public readonly aggregationControl = new FormControl<Aggregation>('raw');
+  private readonly dateService = inject(DateService);
+
+  protected inputParams = signal<InputParams>({
+    startDate: this.dateService.addDays(this.dateService.startOfToday(), -7),
+    endDate: this.dateService.startOfToday(),
+    aggregation: 'raw',
+  });
+  protected inputParamsForm = form(this.inputParams);
 
   public values = signal<any[] | undefined>(undefined);
   public chartConfiguration = signal<any>(undefined);
   public loading = signal(false);
 
   public constructor(
-    private readonly dateService: DateService,
     private readonly formControlService: FormControlService,
     private readonly csvExportService: CsvExportService,
   ) {
-    this.startDateControl = new FormControl<Date>(
-      this.dateService.addDays(this.dateService.startOfToday(), -7),
-    );
-    this.endDateControl = new FormControl<Date>(
-      this.dateService.startOfToday(),
-    );
-
-    this.formControlService
-      .getDateRange()
-      .pipe(take(1))
-      .subscribe(([startDate, endDate]) => {
-        this.startDateControl.setValue(startDate);
-        this.endDateControl.setValue(endDate);
-      });
-
-    this.formControlService
-      .getAggregationLevel()
+    combineLatest([
+      this.formControlService.getDateRange(),
+      this.formControlService.getAggregationLevel(),
+    ])
       .pipe(take(1))
-      .subscribe((aggregation) => {
-        this.aggregationControl.setValue(aggregation);
+      .subscribe(([[startDate, endDate], aggregation]) => {
+        this.inputParams.set({ startDate, endDate, aggregation });
       });
 
-    combineLatest([
-      getValueStream(this.startDateControl),
-      getValueStream(this.endDateControl),
-      getValueStream(this.aggregationControl),
-    ])
+    toObservable(this.inputParams)
       .pipe(
-        map(([startDate, endDate, aggregation]) => [
+        filter(
+          ({ startDate, endDate, aggregation }) =>
+            nonNullOrUndefined(startDate) &&
+            nonNullOrUndefined(endDate) &&
+            nonNullOrUndefined(aggregation),
+        ),
+        map(({ startDate, endDate, aggregation }) => [
           this.dateService.formatISODate(startDate),
           this.dateService.formatISODate(this.dateService.addDays(endDate, 1)),
           aggregation,
@@ -226,17 +222,13 @@ export class GasConsumptionChartComponent implements OnInit, OnDestroy {
   public ngOnInit() {}
 
   public ngOnDestroy(): void {
-    if (this.startDateControl.value && this.endDateControl.value) {
-      this.formControlService.setDateRange(
-        this.startDateControl.value,
-        this.endDateControl.value,
-      );
+    const { startDate, endDate, aggregation } = this.inputParams();
+    if (startDate && endDate) {
+      this.formControlService.setDateRange(startDate, endDate);
     }
 
-    if (this.aggregationControl.value) {
-      this.formControlService.setAggregationLevel(
-        this.aggregationControl.value,
-      );
+    if (aggregation) {
+      this.formControlService.setAggregationLevel(aggregation);
     }
   }
 
@@ -273,7 +265,10 @@ export class GasConsumptionChartComponent implements OnInit, OnDestroy {
   }
 
   private setDateRange(startDate: Date, endDate: Date): void {
-    this.startDateControl.setValue(startDate);
-    this.endDateControl.setValue(endDate);
+    this.inputParams.update((currentValue) => ({
+      ...currentValue,
+      startDate,
+      endDate,
+    }));
   }
 }