toSignal via Gemini

bookie/src/app/discount-report/discount-report.component.ts

@@ -1,6 +1,6 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, computed, linkedSignal, input } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -13,9 +13,13 @@ import moment from 'moment';
 
 import { ToCsvService } from '../shared/to-csv.service';
 import { DiscountReport } from './discount-report';
-import { DiscountReportDataSource } from './discount-report-datasource';
 import { DiscountReportService } from './discount-report.service';
 
+export interface DiscountReportFormData {
+  startDate: Date;
+  finishDate: Date;
+}
+
 @Component({
   selector: 'app-discount-report',
   templateUrl: './discount-report.component.html',
@@ -23,52 +27,48 @@ import { DiscountReportService } from './discount-report.service';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
-export class DiscountReportComponent implements OnInit {
+export class DiscountReportComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private snackBar = inject(MatSnackBar);
   private ser = inject(DiscountReportService);
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  info: DiscountReport = new DiscountReport();
-  dataSource: DiscountReportDataSource = new DiscountReportDataSource(this.info.amounts);
-  form: FormGroup<{
-    startDate: FormControl<Date>;
-    finishDate: FormControl<Date>;
-  }>;
+  infoResource = this.ser.get(this.startDate, this.finishDate);
+
+  info = computed(() => this.infoResource.value() ?? new DiscountReport());
+  dataSource = computed(() => this.info().amounts);
+  formModel = linkedSignal({
+    source: this.info,
+    computation: (infoVal): DiscountReportFormData => {
+      if (infoVal) {
+        return {
+          startDate: moment(this.info().startDate, 'DD-MMM-YYYY').toDate(),
+          finishDate: moment(this.info().finishDate, 'DD-MMM-YYYY').toDate(),
+        };
+      }
+      return {
+        startDate: new Date(),
+        finishDate: new Date(),
+      };
+    },
+  });
+
+  form = form(this.formModel);
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'amount'];
 
-  constructor() {
-    // Create form
-    this.form = new FormGroup({
-      startDate: new FormControl(new Date(), { nonNullable: true }),
-      finishDate: new FormControl(new Date(), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: DiscountReport };
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(),
-      });
-      this.dataSource = new DiscountReportDataSource(this.info.amounts);
-    });
-  }
-
   show() {
     const info = this.getInfo();
     this.router.navigate(['discount-report'], {
@@ -80,7 +80,7 @@ export class DiscountReportComponent implements OnInit {
   }
 
   getInfo(): DiscountReport {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return new DiscountReport({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -89,12 +89,12 @@ export class DiscountReportComponent implements OnInit {
   }
 
   print() {
-    this.ser.print(this.info.startDate, this.info.finishDate).subscribe({
+    this.ser.print(this.info().startDate, this.info().finishDate).subscribe({
       next: () => {
         this.snackBar.open('Successfully Printed', '');
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
@@ -104,7 +104,7 @@ export class DiscountReportComponent implements OnInit {
       Name: 'name',
       Amount: 'amount',
     };
-    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
+    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource())], {
       type: 'text/csv;charset=utf-8;',
     });
     const link = document.createElement('a');