Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/account/account-detail/account-detail.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -17,7 +17,15 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
 })
 export class AccountDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    code: FormControl<number | string>;
+    name: FormControl<string | null>;
+    type: FormControl<any>;
+    isActive: FormControl<boolean>;
+    isReconcilable: FormControl<boolean>;
+    costCentre: FormControl<string | null>;
+  }>;
+
   accountTypes: AccountType[] = [];
   costCentres: CostCentre[] = [];
   item: Account = new Account();
@@ -26,17 +34,16 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: AccountService,
   ) {
-    this.form = this.fb.group({
-      code: { value: '', disabled: true },
-      name: '',
-      type: '',
-      isActive: '',
-      isReconcilable: '',
-      costCentre: '',
+    this.form = new FormGroup({
+      code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
+      name: new FormControl<string | null>(null),
+      type: new FormControl<any>(''),
+      isActive: new FormControl<boolean>(true, { nonNullable: true }),
+      isReconcilable: new FormControl<boolean>(false, { nonNullable: true }),
+      costCentre: new FormControl<string | null>(null),
     });
   }
 
@@ -62,7 +69,7 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
       type: this.item.type,
       isActive: this.item.isActive,
       isReconcilable: this.item.isReconcilable,
-      costCentre: this.item.costCentre.id,
+      costCentre: this.item.costCentre.id!,
     });
   }
 
@@ -113,11 +120,11 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Account {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
+    this.item.name = formModel.name!;
     this.item.type = formModel.type;
-    this.item.isActive = formModel.isActive;
-    this.item.isReconcilable = formModel.isReconcilable;
-    this.item.costCentre.id = formModel.costCentre;
+    this.item.isActive = formModel.isActive!;
+    this.item.isReconcilable = formModel.isReconcilable!;
+    this.item.costCentre.id = formModel.costCentre!;
     return this.item;
   }
 }

overlord/src/app/account/account-list/account-list-datasource.ts

@@ -6,6 +6,7 @@ import { merge, Observable, of as observableOf } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
+import { AccountType } from '../../core/account-type';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
 const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
@@ -91,7 +92,7 @@ export class AccountListDataSource extends DataSource<Account> {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'type':
-          return compare(a.type.name, b.type.name, isAsc);
+          return compare((a.type as AccountType).name, (b.type as AccountType).name, isAsc);
         case 'isActive':
           return compare(a.isActive, b.isActive, isAsc);
         case 'isReconcilable':

overlord/src/app/account/account-list/account-list.component.html

@@ -42,7 +42,7 @@
       <!-- 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>
+        <mat-cell *matCellDef="let row">{{ row.type.name }}</mat-cell>
       </ng-container>
 
       <!-- Is Active? Column -->

overlord/src/app/account/account-list/account-list.component.ts

@@ -1,12 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
+import { AccountType } from '../../core/account-type';
 
 import { AccountListDataSource } from './account-list-datasource';
 
@@ -21,29 +22,39 @@ export class AccountListComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: AccountListDataSource;
   filter: Observable<string>;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    filter: FormControl<string>;
+  }>;
+
   list: Account[] = [];
+  accountTypes: AccountType[] = [];
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'type', 'isActive', 'isReconcilable', 'costCentre'];
 
-  constructor(private route: ActivatedRoute, private fb: UntypedFormBuilder) {
-    this.form = this.fb.group({
-      filter: '',
+  constructor(private route: ActivatedRoute) {
+    this.form = new FormGroup({
+      filter: new FormControl<string>('', { nonNullable: true }),
     });
     // Listen to Filter Change
-    this.filter = (this.form.get('filter') as UntypedFormControl).valueChanges.pipe(
-      startWith(''),
+    this.filter = this.form.controls.filter.valueChanges.pipe(
       debounceTime(150),
       distinctUntilChanged(),
     );
+
     this.dataSource = new AccountListDataSource(this.list, this.filter);
   }
 
   ngOnInit() {
     this.route.data.subscribe((value) => {
-      const data = value as { list: Account[] };
-
+      const data = value as { list: Account[]; accountTypes: AccountType[] };
+      this.accountTypes = data.accountTypes;
+      data.list.forEach(
+        (x) =>
+          (x.type = new AccountType({
+            name: this.accountTypes.find((y) => y.id === x.type)?.name,
+          })),
+      );
       this.list = data.list;
     });
     this.dataSource = new AccountListDataSource(this.list, this.filter, this.paginator, this.sort);

overlord/src/app/account/account-routing.module.ts

@@ -21,6 +21,7 @@ const accountRoutes: Routes = [
     },
     resolve: {
       list: AccountListResolver,
+      accountTypes: AccountTypeResolver,
     },
   },
   {