Consolidated commit message to v22 signals

overlord/src/app/closing-stock/closing-stock.component.ts

@@ -1,6 +1,6 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, computed, input, linkedSignal, signal, afterNextRender } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -8,31 +8,40 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+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 { AuthService } from '../auth/auth.service';
 import { CostCentre } from '../core/cost-centre';
 import { User } from '../core/user';
+import { CostCentreService } from '../cost-centre/cost-centre.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../shared/to-csv.service';
 import { ClosingStock } from './closing-stock';
-import { ClosingStockDataSource } from './closing-stock-datasource';
 import { ClosingStockItem } from './closing-stock-item';
 import { ClosingStockService } from './closing-stock.service';
 
+export interface ClosingStockFormData {
+  date: moment.Moment;
+  costCentre: CostCentre | null;
+  stocks: { physical: number; costCentre: string | undefined }[];
+}
+
 @Component({
   selector: 'app-closing-stock',
   templateUrl: './closing-stock.component.html',
   styleUrls: ['./closing-stock.component.css'],
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatSelectModule,
     MatOptionModule,
@@ -44,75 +53,92 @@ import { ClosingStockService } from './closing-stock.service';
     MatPaginatorModule,
     DecimalPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ClosingStockComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class ClosingStockComponent {
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
-  auth = inject(AuthService);
+  protected auth = inject(AuthService);
   private ser = inject(ClosingStockService);
+  private costCentreSer = inject(CostCentreService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.id, this.d);
+  info = computed(() => this.infoResource.value() ?? new ClosingStock());
+  costCentresResource = this.costCentreSer.list();
+
+  costCentres = computed(() => this.costCentresResource.value() ?? []);
+
+  model = linkedSignal({
+    source: computed(() => ({ info: this.info(), costCentres: this.costCentres() })),
+    computation: ({ info, costCentres }): ClosingStockFormData => ({
+      date: moment(info.date, 'DD-MMM-YYYY'),
+      costCentre: costCentres.find((c) => c.id === info.costCentre?.id) || null,
+      stocks: info.items.map((x) => ({
+        physical: x.physical,
+        costCentre: x.costCentre?.id,
+      })),
+    }),
+  });
+
+  form = createForm(this.model);
+
+  sortedList = computed(() => {
+    const data = this.info().items ?? [];
+    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.product?.name ?? '', b.product?.name ?? '', isAsc);
+        case 'group':
+          return compare(a.group ?? '', b.group ?? '', isAsc);
+        case 'quantity':
+          return compare(a.quantity ?? 0, b.quantity ?? 0, isAsc);
+        case 'amount':
+          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);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  info: ClosingStock = new ClosingStock();
-  dataSource: ClosingStockDataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    costCentre: FormControl<string | null>;
-    stocks: FormArray<
-      FormGroup<{
-        physical: FormControl<number>;
-        costCentre: FormControl<string | undefined>;
-      }>
-    >;
-  }>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-
   displayedColumns = ['product', 'group', 'quantity', 'physical', 'variance', 'department', 'amount'];
 
-  costCentres: CostCentre[];
-
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.costCentres = [];
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      costCentre: new FormControl<string | null>(null),
-      stocks: new FormArray<FormGroup<{ physical: FormControl<number>; costCentre: FormControl<string | undefined> }>>(
-        [],
-      ),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: ClosingStock; costCentres: CostCentre[] };
-      this.info = data.info;
-      this.costCentres = data.costCentres;
-      this.form.patchValue({
-        date: moment(this.info.date, 'DD-MMM-YYYY'),
-        costCentre: this.info.costCentre.id,
-      });
-      this.form.controls.stocks.clear();
-      this.info.items.forEach((x) =>
-        this.form.controls.stocks.push(
-          new FormGroup({
-            physical: new FormControl(x.physical, { nonNullable: true }),
-            costCentre: new FormControl(x.costCentre?.id, { nonNullable: true }),
-          }),
-        ),
-      );
-      this.dataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
@@ -137,25 +163,23 @@ export class ClosingStockComponent implements OnInit {
   }
 
   getClosingStock(): ClosingStock {
-    const formModel = this.form.value;
-    this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.controls.stocks;
-    this.info.items.forEach((item, index) => {
-      item.physical = +(array.controls[index].value.physical ?? '');
-      item.costCentre =
-        array.controls[index].value.costCentre == null
-          ? undefined
-          : new CostCentre({ id: array.controls[index].value.costCentre });
+    const formModel = this.model();
+    const currentInfo = this.info();
+    currentInfo.date = formModel.date.format('DD-MMM-YYYY');
+    const array = formModel.stocks;
+    currentInfo.items.forEach((item, index) => {
+      item.physical = array[index].physical ?? 0;
+      item.costCentre = array[index].costCentre == null ? undefined : new CostCentre({ id: array[index].costCentre });
     });
-    return this.info;
+    return currentInfo;
   }
 
   getInfo(): ClosingStock {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new ClosingStock({
-      date: moment(formModel.date).format('DD-MMM-YYYY'),
-      costCentre: new CostCentre({ id: formModel.costCentre ?? '' }),
+      date: formModel.date.format('DD-MMM-YYYY'),
+      costCentre: new CostCentre({ id: formModel.costCentre?.id ?? '' }),
     });
   }
 
@@ -167,7 +191,7 @@ export class ClosingStockComponent implements OnInit {
       Amount: 'amount',
     };
 
-    const d = JSON.parse(JSON.stringify(this.dataSource.data)).map((x: ClosingStockItem) => ({
+    const d = JSON.parse(JSON.stringify(this.dataSource())).map((x: ClosingStockItem) => ({
       product: x.product.name,
       group: x.group,
       quantity: x.quantity,
@@ -193,21 +217,21 @@ export class ClosingStockComponent implements OnInit {
   }
 
   canDelete() {
-    return this.info.items.find((x) => !!x.id) !== undefined;
+    return this.info().items.find((x) => !!x.id) !== undefined;
   }
 
   canSave() {
-    if (this.info.items.find((x) => !!x.id) !== undefined) {
+    if (this.info().items.find((x) => !!x.id) !== undefined) {
       return true;
     }
-    if (this.info.posted && this.auth.allowed('edit-posted-vouchers')) {
+    if (this.info().posted && this.auth.allowed('edit-posted-vouchers')) {
       return true;
     }
-    return this.info.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
+    return this.info().user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   post() {
-    this.ser.post(this.info.date, this.info.costCentre.id as string).subscribe({
+    this.ser.post(this.info().date, this.info().costCentre.id as string).subscribe({
       next: () => {
         this.snackBar.open('Voucher Posted', 'Success');
       },
@@ -218,7 +242,7 @@ export class ClosingStockComponent implements OnInit {
   }
 
   delete() {
-    this.ser.delete(this.info.date, this.info.costCentre.id as string).subscribe({
+    this.ser.delete(this.info().date, this.info().costCentre.id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigate(['/closing-stock'], { replaceUrl: true });
@@ -244,4 +268,16 @@ export class ClosingStockComponent implements OnInit {
       }
     });
   }
+
+  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);