Consolidated commit message to v22 signals

overlord/src/app/purchases/purchases-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 { PurchasesItem } from './purchases-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 PurchasesDataSource extends DataSource<PurchasesItem> {
-  constructor(
-    public data: PurchasesItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<PurchasesItem[]> {
-    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: PurchasesItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: PurchasesItem[]) {
-    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 'product':
-          return compare(a.name, b.name, isAsc);
-        case 'quantity':
-          return compare(+a.quantity, +b.quantity, isAsc);
-        case 'rate':
-          return compare(+a.rate, +b.rate, isAsc);
-        case 'amount':
-          return compare(+a.amount, +b.amount, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}

overlord/src/app/purchases/purchases.component.html

@@ -1,73 +1,77 @@
 <h2>Purchases</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" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></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">
-  <!-- Product Column -->
-  <ng-container matColumnDef="product">
-    <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }">{{
-        row.name
-      }}</a></mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef>
-      {{ info.footer.name }}
-    </mat-footer-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Product Column -->
+    <ng-container matColumnDef="product">
+      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url" [queryParams]="{ startDate: info().startDate, finishDate: info().finishDate }">{{
+          row.name
+        }}</a></mat-cell
+      >
+      <mat-footer-cell *matFooterCellDef>{{ info().footer.name }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Quantity Column -->
-  <ng-container matColumnDef="quantity">
-    <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.quantity | number: '1.2-2' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity">
+      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.quantity | number: '1.2-2' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Rate Column -->
-  <ng-container matColumnDef="rate">
-    <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.rate | currency: 'INR' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Rate Column -->
+    <ng-container matColumnDef="rate">
+      <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.rate | currency: 'INR' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Amount Column -->
-  <ng-container matColumnDef="amount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.amount | currency: 'INR' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Amount Column -->
+    <ng-container matColumnDef="amount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.amount | currency: 'INR' }}
+      </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]"
->
-</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/purchases/purchases.component.ts

@@ -1,26 +1,35 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, computed, signal, input } from '@angular/core';
+import { form, 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, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Purchases } from './purchases';
-import { PurchasesDataSource } from './purchases-datasource';
 import { PurchasesItem } from './purchases-item';
+import { PurchasesService } from './purchases.service';
+
+export interface PurchasesFormData {
+  startDate: moment.Moment | null | string;
+  finishDate: moment.Moment | null | string;
+}
 
 @Component({
   selector: 'app-purchases',
   templateUrl: './purchases.component.html',
   styleUrls: ['./purchases.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -31,21 +40,67 @@ import { PurchasesItem } from './purchases-item';
     MatPaginatorModule,
     DecimalPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class PurchasesComponent implements OnInit {
+export class PurchasesComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(PurchasesService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: Purchases = new Purchases();
-  dataSource: PurchasesDataSource = new PurchasesDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  resource = this.ser.list(this.startDate, this.finishDate);
+
+  info = computed(() => this.resource.value() ?? new Purchases());
+  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 'product':
+          return compare(a.name, b.name, isAsc);
+        case 'quantity':
+          return compare(a.quantity, b.quantity, isAsc);
+        case 'rate':
+          return compare(a.rate, b.rate, isAsc);
+        case 'amount':
+          return compare(a.amount, b.amount, 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);
+  });
+
+  formModel = linkedSignal({
+    source: () => null,
+    computation: (): PurchasesFormData => ({
+      startDate: moment(new Date()),
+      finishDate: moment(new Date()),
+    }),
+  });
+
+  form = form(this.formModel);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -54,28 +109,7 @@ export class PurchasesComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
-  }
-
-  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: Purchases };
-
-      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 PurchasesDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -89,7 +123,7 @@ export class PurchasesComponent implements OnInit {
   }
 
   prepareSubmit(): Purchases {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return {
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -98,4 +132,16 @@ export class PurchasesComponent implements OnInit {
       footer: new PurchasesItem(),
     };
   }
+
+  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/purchases/purchases.resolver.spec.ts

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

overlord/src/app/purchases/purchases.resolver.ts

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

overlord/src/app/purchases/purchases.routes.ts

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

overlord/src/app/purchases/purchases.service.ts

@@ -1,14 +1,10 @@
-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 { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { Purchases } from './purchases';
 
 const url = '/api/purchases';
-const serviceName = 'PurchasesService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,16 +12,14 @@ export class PurchasesService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(startDate: string | null, finishDate: string | null): Observable<Purchases> {
-    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<Purchases>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Purchases>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<Purchases>(() => {
+      let params = new HttpParams();
+      const s = startDate();
+      if (s !== null) params = params.set('s', s);
+      const f = finishDate();
+      if (f !== null) params = params.set('f', f);
+      return { url, params };
+    });
   }
 }