Consolidated commit message to v22 signals

overlord/src/app/net-transactions/net-transactions-datasource.ts

@@ -1,75 +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 { NetTransactionsItem } from './net-transactions-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 NetTransactionsDataSource extends DataSource<NetTransactionsItem> {
-  constructor(
-    public data: NetTransactionsItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<NetTransactionsItem[]> {
-    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: NetTransactionsItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: NetTransactionsItem[]) {
-    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':
-          return compare(a.name, b.name, isAsc);
-        case 'type':
-          return compare(a.type, b.type, isAsc);
-        case 'debit':
-          return compare(+a.debit, +b.debit, isAsc);
-        case 'credit':
-          return compare(+a.credit, +b.credit, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}

overlord/src/app/net-transactions/net-transactions.component.html

@@ -1,56 +1,62 @@
 <h2>Net Transactions</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-      <mat-datepicker #startDate></mat-datepicker>
+      <input matInput [matDatepicker]="startDatePicker" [formField]="form.startDate" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #startDatePicker></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-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)">
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-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>
-  </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>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
+    </ng-container>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="credit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="credit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}

overlord/src/app/net-transactions/net-transactions.component.ts

@@ -1,26 +1,33 @@
 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, linkedSignal, computed, afterNextRender, signal } from '@angular/core';
+export interface NetTransactionsFormData {
+  startDate: Date;
+  finishDate: Date;
+}
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 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 { AccountingPipe } from '../shared/accounting.pipe';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { NetTransactions } from './net-transactions';
-import { NetTransactionsDataSource } from './net-transactions-datasource';
+import { NetTransactionsService } from './net-transactions.service';
 
 @Component({
   selector: 'app-net-transactions',
   templateUrl: './net-transactions.component.html',
   styleUrls: ['./net-transactions.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -30,21 +37,67 @@ import { NetTransactionsDataSource } from './net-transactions-datasource';
     MatPaginatorModule,
     CurrencyPipe,
     AccountingPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class NetTransactionsComponent implements OnInit {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
+export class NetTransactionsComponent {
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: NetTransactions = new NetTransactions();
-  dataSource: NetTransactionsDataSource = new NetTransactionsDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  private router = inject(Router);
+  private ser = inject(NetTransactionsService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  infoResource = this.ser.list(this.startDate, this.finishDate);
+
+  info = computed(() => this.infoResource.value() ?? new NetTransactions());
+  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 'type':
+          return compare(a.type, b.type, isAsc);
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'debit':
+          return compare(a.debit, b.debit, isAsc);
+        case 'credit':
+          return compare(a.credit, b.credit, 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);
+  });
+
+  model = linkedSignal<import('./net-transactions').NetTransactions, NetTransactionsFormData>({
+    source: this.info,
+    computation: (info: NetTransactions): NetTransactionsFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
+    }),
+  });
+
+  form = createForm(this.model);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -53,27 +106,13 @@ export class NetTransactionsComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    // TODO: Also select the text
+    this.form.startDate().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: NetTransactions };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new NetTransactionsDataSource(this.info.body, this.paginator, this.sort);
+    afterNextRender(() => {
+      this.form.startDate().focusBoundControl();
     });
   }
 
@@ -88,11 +127,23 @@ export class NetTransactionsComponent implements OnInit {
   }
 
   prepareSubmit(): NetTransactions {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new NetTransactions({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).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/net-transactions/net-transactions.resolver.spec.ts

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

overlord/src/app/net-transactions/net-transactions.resolver.ts

@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { NetTransactions } from './net-transactions';
-import { NetTransactionsService } from './net-transactions.service';
-
-export const netTransactionsResolver: ResolveFn<NetTransactions> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(NetTransactionsService).list(startDate, finishDate);
-};

overlord/src/app/net-transactions/net-transactions.routes.ts

@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { NetTransactionsComponent } from './net-transactions.component';
-import { netTransactionsResolver } from './net-transactions.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Net Transactions',
     },
-    resolve: {
-      info: netTransactionsResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];

overlord/src/app/net-transactions/net-transactions.service.ts

@@ -1,31 +1,21 @@
-import { HttpClient, HttpParams } 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 { NetTransactions } from './net-transactions';
 
 const url = '/api/net-transactions';
-const serviceName = 'NetTransactionsService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class NetTransactionsService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(startDate: string | null, finishDate: string | null): Observable<NetTransactions> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<NetTransactions>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<NetTransactions>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<NetTransactions>(() => {
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      return { url, params };
+    });
   }
 }