toSignal via Gemini

bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts

@@ -1,6 +1,6 @@
 import { DecimalPipe } 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,7 +13,12 @@ import moment from 'moment';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { ToCsvService } from '../shared/to-csv.service';
 import { BillSettlementReport } from './bill-settlement-report';
-import { BillSettlementReportDataSource } from './bill-settlement-report-datasource';
+import { BillSettlementReportService } from './bill-settlement-report.service';
+
+export interface BillSettlementReportFormData {
+  startDate: Date;
+  finishDate: Date;
+}
 
 @Component({
   selector: 'app-bill-settlement-report',
@@ -23,51 +28,47 @@ import { BillSettlementReportDataSource } from './bill-settlement-report-datasou
     DecimalPipe,
     LocalTimePipe,
     MatButtonModule,
-
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
-export class BillSettlementReportComponent implements OnInit {
+export class BillSettlementReportComponent {
+  private billSettlementReportService = inject(BillSettlementReportService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  info: BillSettlementReport = new BillSettlementReport();
-  dataSource: BillSettlementReportDataSource = new BillSettlementReportDataSource(this.info.amounts);
+  infoResource = this.billSettlementReportService.get(this.startDate, this.finishDate);
 
-  form: FormGroup<{
-    startDate: FormControl<Date>;
-    finishDate: FormControl<Date>;
-  }>;
+  info = computed(() => this.infoResource.value() ?? new BillSettlementReport());
+  dataSource = computed(() => this.info().amounts);
+  formModel = linkedSignal({
+    source: this.info,
+    computation: (infoVal): BillSettlementReportFormData => {
+      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 = ['date', 'billId', 'amount', 'settlement'];
 
-  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: BillSettlementReport };
-      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 BillSettlementReportDataSource(this.info.amounts);
-    });
-  }
-
   show() {
     const info = this.getInfo();
     this.router.navigate(['bill-settlement-report'], {
@@ -79,7 +80,7 @@ export class BillSettlementReportComponent implements OnInit {
   }
 
   getInfo(): BillSettlementReport {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return new BillSettlementReport({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -94,7 +95,7 @@ export class BillSettlementReportComponent implements OnInit {
       Amount: 'amount',
       Settlement: 'settlement',
     };
-    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');