Consolidated commit message to v22 signals

overlord/src/app/balance-sheet/balance-sheet-datasource.ts

@@ -1,72 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { BalanceSheetItem } from './balance-sheet-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class BalanceSheetDataSource extends DataSource<BalanceSheetItem> {
-  constructor(
-    public data: BalanceSheetItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<BalanceSheetItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: BalanceSheetItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: BalanceSheetItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          if (a.name === undefined || b.name === undefined) {
-            return 0;
-          }
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}

overlord/src/app/balance-sheet/balance-sheet.component.html

@@ -1,59 +1,65 @@
 <h2>Balance Sheet</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
-      <input matInput #dateElement [matDatepicker]="dateInput" formControlName="date" autocomplete="off" />
+      <input matInput #dateElement [matDatepicker]="dateInput" [formField]="form.date" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
       <mat-datepicker #dateInput></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Group Column -->
-  <ng-container matColumnDef="group">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer?.group }}</mat-footer-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Group Column -->
+    <ng-container matColumnDef="group">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer?.group }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer?.name }}</mat-footer-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer?.name }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- SubAmount Column -->
-  <ng-container matColumnDef="subAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.subAmount | currency: 'INR' | clear }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right"
-      >{{ info.footer?.subAmount | currency: 'INR' | clear }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- SubAmount Column -->
+    <ng-container matColumnDef="subAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.subAmount | currency: 'INR' | clear }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right"
+        >{{ $safeNavigationMigration(info().footer?.subAmount) | currency: 'INR' | clear }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Total Column -->
-  <ng-container matColumnDef="total">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right"
-      >{{ info.footer?.amount | currency: 'INR' | clear }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Total Column -->
+    <ng-container matColumnDef="total">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right"
+        >{{ $safeNavigationMigration(info().footer?.amount) | currency: 'INR' | clear }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
+  >
+  </mat-paginator>
+}

overlord/src/app/balance-sheet/balance-sheet.component.ts

@@ -1,26 +1,32 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, input, computed, linkedSignal, signal, afterNextRender } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
+export interface BalanceSheetFormData {
+  date: moment.Moment;
+}
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ClearPipe } from '../shared/clear.pipe';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { BalanceSheet } from './balance-sheet';
-import { BalanceSheetDataSource } from './balance-sheet-datasource';
+import { BalanceSheetService } from './balance-sheet.service';
 
 @Component({
   selector: 'app-balance-sheet',
   templateUrl: './balance-sheet.component.html',
   styleUrls: ['./balance-sheet.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -30,20 +36,69 @@ import { BalanceSheetDataSource } from './balance-sheet-datasource';
     MatPaginatorModule,
     CurrencyPipe,
     ClearPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class BalanceSheetComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class BalanceSheetComponent {
   private router = inject(Router);
+  private ser = inject(BalanceSheetService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  date = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.date);
+  info = computed(() => this.infoResource.value() ?? new BalanceSheet());
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  info: BalanceSheet = new BalanceSheet();
-  dataSource: BalanceSheetDataSource = new BalanceSheetDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  formModel = linkedSignal<import('./balance-sheet').BalanceSheet, BalanceSheetFormData>({
+    source: this.info,
+    computation: (info: BalanceSheet): BalanceSheetFormData => ({
+      date: info.date ? moment(info.date, 'DD-MMM-YYYY') : moment(new Date()),
+    }),
+  });
+
+  form = createForm(this.formModel);
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'group':
+          return compare(a.group ?? '', b.group ?? '', isAsc);
+        case 'name':
+          return compare(a.name ?? '', b.name ?? '', isAsc);
+        case 'subAmount':
+          return compare(a.subAmount ?? 0, b.subAmount ?? 0, isAsc);
+        case 'total':
+          return compare(a.amount ?? 0, b.amount ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  constructor() {
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+    });
+  }
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['group', 'name', 'subAmount', 'total'];
@@ -51,26 +106,7 @@ export class BalanceSheetComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: BalanceSheet };
-
-      this.info = data.info;
-      this.form.setValue({
-        date: moment(this.info.date, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new BalanceSheetDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -79,7 +115,19 @@ export class BalanceSheetComponent implements OnInit {
   }
 
   getDate(): string {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
     return moment(formModel.date).format('DD-MMM-YYYY');
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);

overlord/src/app/balance-sheet/balance-sheet.resolver.spec.ts

@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { BalanceSheet } from './balance-sheet';
-import { balanceSheetResolver } from './balance-sheet.resolver';
-
-describe('balanceSheetResolver', () => {
-  const executeResolver: ResolveFn<BalanceSheet> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => balanceSheetResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});

overlord/src/app/balance-sheet/balance-sheet.resolver.ts

@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { BalanceSheet } from './balance-sheet';
-import { BalanceSheetService } from './balance-sheet.service';
-
-export const balanceSheetResolver: ResolveFn<BalanceSheet> = (route) => {
-  const date = route.paramMap.get('date');
-  return inject(BalanceSheetService).list(date);
-};

overlord/src/app/balance-sheet/balance-sheet.routes.ts

@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { BalanceSheetComponent } from './balance-sheet.component';
-import { balanceSheetResolver } from './balance-sheet.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Balance Sheet',
     },
-    resolve: {
-      info: balanceSheetResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Balance Sheet',
     },
-    resolve: {
-      info: balanceSheetResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];

overlord/src/app/balance-sheet/balance-sheet.service.ts

@@ -1,25 +1,17 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { BalanceSheet } from './balance-sheet';
 
 const url = '/api/balance-sheet';
-const serviceName = 'BalanceSheetService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class BalanceSheetService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(date: string | null): Observable<BalanceSheet> {
-    const listUrl = date === null ? url : `${url}/${date}`;
-    return this.http
-      .get<BalanceSheet>(listUrl)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<BalanceSheet>;
+  list(date: Signal<string | null>) {
+    return httpResource<BalanceSheet>(() => {
+      const listUrl = date() === null ? url : `${url}/${date()}`;
+      return listUrl;
+    });
   }
 }