Consolidated commit message to v22 signals

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