Consolidated commit message to v22 signals

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);