All datasources done. Now to wire them up in the components.

Plus ElementRefs are now optional as they cannot be initialized

brewman/brewman/routers/account.py

@@ -130,7 +130,10 @@ async def show_list(db: Session = Depends(get_db), user: UserToken = Depends(get
             "isActive": item.is_active,
             "isReconcilable": item.is_reconcilable,
             "isStarred": item.is_starred,
-            "costCentre": item.cost_centre.name,
+            "costCentre": {
+                "id": item.cost_centre_id,
+                "name": item.cost_centre.name,
+            },
             "isFixture": item.is_fixture,
         }
         for item in db.query(Account).order_by(Account.type).order_by(Account.name).order_by(Account.code).all()

brewman/brewman/routers/employee.py

@@ -132,7 +132,10 @@ async def show_list(db: Session = Depends(get_db), user: UserToken = Depends(get
             "salary": item.salary,
             "points": item.points,
             "isActive": item.is_active,
-            "costCentre": item.cost_centre.name,
+            "costCentre": {
+                "id": item.cost_centre_id,
+                "name": item.cost_centre.name,
+            },
             "joiningDate": item.joining_date.strftime("%d-%b-%Y"),
             "leavingDate": "" if item.is_active else item.leaving_date.strftime("%d-%b-%Y"),
             "isStarred": item.is_starred,

overlord/angular.json

@@ -44,7 +44,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -52,8 +51,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1mb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -89,15 +88,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "scripts": []
           }
         },
         "lint": {

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

@@ -16,7 +16,7 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
   styleUrls: ['./account-detail.component.css'],
 })
 export class AccountDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   accountTypes: AccountType[];
   costCentres: CostCentre[];

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

@@ -1,24 +1,24 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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, tap } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number | boolean, b: string | number | boolean, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class AccountListDataSource extends DataSource<Account> {
-  private filterValue: string;
+  private filterValue: string = "";
 
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
-    private filter: Observable<string>,
     public data: Account[],
+    private filter: Observable<string>,
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
     this.filter = filter.pipe(
@@ -29,18 +29,20 @@ export class AccountListDataSource extends DataSource<Account> {
   }
 
   connect(): Observable<Account[]> {
-    const dataMutations = [
-      observableOf(this.data),
-      this.filter,
-      this.paginator.page,
-      this.sort.sortChange,
-    ];
+    const dataMutations: (
+      | Observable<Account[]>
+      | Observable<string>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data), this.filter];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     return merge(...dataMutations)
       .pipe(
         map(() => this.getFilteredData([...this.data])),
         tap((x: Account[]) => {
-          this.paginator.length = x.length;
+          if (this.paginator) this.paginator.length = x.length;
         }),
       )
       .pipe(map((x: any) => this.getPagedData(this.getSortedData(x))));
@@ -49,8 +51,7 @@ export class AccountListDataSource extends DataSource<Account> {
   disconnect() {}
 
   private getFilteredData(data: Account[]): Account[] {
-    const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return filter.split(' ').reduce(
+    return this.filterValue.split(' ').reduce(
       (p: Account[], c: string) =>
         p.filter((x) => {
           const accountString = `${x.name} ${x.type} ${x.costCentre}${
@@ -63,30 +64,31 @@ export class AccountListDataSource extends DataSource<Account> {
   }
 
   private getPagedData(data: Account[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Account[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'type':
-          return compare(a.type, b.type, isAsc);
+          return compare(a.type.name, b.type.name, isAsc);
         case 'isActive':
           return compare(a.isActive, b.isActive, isAsc);
         case 'isReconcilable':
           return compare(a.isReconcilable, b.isReconcilable, isAsc);
         case 'costCentre':
-          return compare(a.costCentre, b.costCentre, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
+          return compare(a.costCentre.name, b.costCentre.name, isAsc);
         default:
           return 0;
       }

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

@@ -16,9 +16,9 @@ import { AccountListDataSource } from './account-list-datasource';
   styleUrls: ['./account-list.component.css'],
 })
 export class AccountListComponent implements OnInit, AfterViewInit {
-  @ViewChild('filterElement', { static: true }) filterElement: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('filterElement', { static: true }) filterElement?: ElementRef;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: AccountListDataSource;
   filter: Observable<string>;
   form: FormGroup;

overlord/src/app/auth/login/login.component.ts

@@ -12,7 +12,7 @@ import { AuthService } from '../auth.service';
   styleUrls: ['./login.component.css'],
 })
 export class LoginComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   hide: boolean;
   showOtp: boolean;

overlord/src/app/balance-sheet/balance-sheet-datasource.ts

@@ -1,24 +1,28 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class BalanceSheetDataSource extends DataSource<any> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: any[]) {
+  constructor(public data: any[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<any[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (Observable<any[]> | EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [
+      observableOf(this.data),
+    ];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -28,18 +32,21 @@ export class BalanceSheetDataSource extends DataSource<any> {
   disconnect() {}
 
   private getPagedData(data: any[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: any[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'id':

overlord/src/app/balance-sheet/balance-sheet.component.ts

@@ -14,8 +14,8 @@ import { BalanceSheetDataSource } from './balance-sheet-datasource';
   styleUrls: ['./balance-sheet.component.css'],
 })
 export class BalanceSheetComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: BalanceSheetDataSource;
   form: FormGroup;
   info: BalanceSheet;

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

@@ -14,7 +14,7 @@ import { ClientService } from '../client.service';
   styleUrls: ['./client-detail.component.css'],
 })
 export class ClientDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   item: Client;
 

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

@@ -1,26 +1,30 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { Client } from '../client';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ClientListDataSource extends DataSource<Client> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: Client[]) {
+  constructor(public data: Client[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<Client[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (Observable<Client[]> | EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [
+      observableOf(this.data),
+    ];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,18 +34,21 @@ export class ClientListDataSource extends DataSource<Client> {
   disconnect() {}
 
   private getPagedData(data: Client[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Client[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'id':

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

@@ -13,8 +13,8 @@ import { ClientListDataSource } from './client-list-datasource';
   styleUrls: ['./client-list.component.css'],
 })
 export class ClientListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ClientListDataSource;
   list: Client[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

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

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { ClosingStockItem } from './closing-stock-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ClosingStockDataSource extends DataSource<ClosingStockItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: ClosingStockItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<ClosingStockItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<ClosingStockItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class ClosingStockDataSource extends DataSource<ClosingStockItem> {
   disconnect() {}
 
   private getPagedData(data: ClosingStockItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: ClosingStockItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'product':
           return compare(a.product, b.product, isAsc);
         case 'group':

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

@@ -16,8 +16,8 @@ import { ClosingStockDataSource } from './closing-stock-datasource';
   styleUrls: ['./closing-stock.component.css'],
 })
 export class ClosingStockComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ClosingStockDataSource;
   form: FormGroup;
   info: ClosingStock;

overlord/src/app/core/account-type.ts

@@ -6,4 +6,15 @@ export class AccountType {
   cashFlowClassification: string;
   order: number;
   showInList: boolean;
+
+  public constructor(init?: Partial<AccountType>) {
+    this.id = 0;
+    this.name = "";
+    this.balanceSheet = false;
+    this.debit = false;
+    this.cashFlowClassification = "";
+    this.order = 0;
+    this.showInList = true;
+    Object.assign(this, init);
+  }
 }

overlord/src/app/core/account.ts

@@ -2,7 +2,7 @@ import { AccountType } from './account-type';
 import { CostCentre } from './cost-centre';
 
 export class Account {
-  id: string;
+  id: string | undefined;
   code: number;
   name: string;
   type: AccountType;
@@ -13,6 +13,14 @@ export class Account {
   costCentre: CostCentre;
 
   public constructor(init?: Partial<Account>) {
+    this.code = 0;
+    this.name = "";
+    this.type = new AccountType();
+    this.isActive  = true;
+    this.isReconcilable = false;
+    this.isStarred = false;
+    this.isFixture= false;
+    this.costCentre = new CostCentre();
     Object.assign(this, init);
   }
 }

overlord/src/app/core/cost-centre.ts

@@ -1,5 +1,11 @@
 export class CostCentre {
-  id: string;
+  id: string | undefined;
   name: string;
   isFixture: boolean;
+
+  public constructor(init?: Partial<CostCentre>) {
+    this.name = "";
+    this.isFixture = false;
+    Object.assign(this, init);
+  }
 }

overlord/src/app/core/user.ts

@@ -1,11 +1,11 @@
 import { UserGroup } from './user-group';
 
 export class User {
-  id: string;
+  id: string | undefined;
   name: string;
   password: string;
   lockedOut: boolean;
-  roles?: UserGroup[];
+  roles: UserGroup[];
   perms: string[];
   isAuthenticated: boolean;
   access_token?: string;
@@ -13,6 +13,13 @@ export class User {
   ver: string;
 
   public constructor(init?: Partial<User>) {
+    this.name = '';
+    this.password = '';
+    this.lockedOut = false;
+    this.roles = [];
+    this.perms = [];
+    this.isAuthenticated = false;
+    this.ver = '';
     Object.assign(this, init);
   }
 }

overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts

@@ -12,7 +12,7 @@ import { CostCentreService } from '../cost-centre.service';
   styleUrls: ['./cost-centre-detail.component.css'],
 })
 export class CostCentreDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   item: CostCentre;
 

overlord/src/app/cost-centre/cost-centre-list/cost-centre-list-datasource.ts

@@ -1,26 +1,32 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { CostCentre } from '../../core/cost-centre';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class CostCentreListDataSource extends DataSource<CostCentre> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: CostCentre[]) {
+  constructor(public data: CostCentre[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<CostCentre[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<CostCentre[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,22 +36,23 @@ export class CostCentreListDataSource extends DataSource<CostCentre> {
   disconnect() {}
 
   private getPagedData(data: CostCentre[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: CostCentre[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
         default:
           return 0;
       }

overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.ts

@@ -13,8 +13,8 @@ import { CostCentreListDataSource } from './cost-centre-list-datasource';
   styleUrls: ['./cost-centre-list.component.css'],
 })
 export class CostCentreListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: CostCentreListDataSource;
   list: CostCentre[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

overlord/src/app/daybook/daybook-datasource.ts

@@ -1,26 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { DaybookItem } from './daybook-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class DaybookDataSource extends DataSource<DaybookItem> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: DaybookItem[]) {
+  constructor(
+    public data: DaybookItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
+  ) {
     super();
   }
 
   connect(): Observable<DaybookItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<DaybookItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,18 +40,21 @@ export class DaybookDataSource extends DataSource<DaybookItem> {
   disconnect() {}
 
   private getPagedData(data: DaybookItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: DaybookItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'date':
           return compare(a.date, b.date, isAsc);
         case 'debitAmount':

overlord/src/app/daybook/daybook.component.ts

@@ -15,8 +15,8 @@ import { DaybookService } from './daybook.service';
   styleUrls: ['./daybook.component.css'],
 })
 export class DaybookComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: DaybookDataSource;
   form: FormGroup;
   info: Daybook;

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -24,7 +24,7 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
   styleUrls: ['./employee-attendance.component.css'],
 })
 export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
-  @ViewChild('employeeElement', { static: true }) employeeElement: ElementRef;
+  @ViewChild('employeeElement', { static: true }) employeeElement?: ElementRef;
   public employeeAttendanceObservable = new BehaviorSubject<EmployeeAttendanceItem[]>([]);
   dataSource: EmployeeAttendanceDataSource;
   form: FormGroup;

overlord/src/app/employee-benefits/employee-benefits.component.ts

@@ -24,7 +24,7 @@ import { EmployeeBenefitsDataSource } from './employee-benefits-datasource';
   styleUrls: ['./employee-benefits.component.css'],
 })
 export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
-  @ViewChild('employeeElement', { static: true }) employeeElement: ElementRef;
+  @ViewChild('employeeElement', { static: true }) employeeElement?: ElementRef;
   public benefitsObservable = new BehaviorSubject<EmployeeBenefit[]>([]);
   dataSource: EmployeeBenefitsDataSource;
   form: FormGroup;

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

@@ -16,7 +16,7 @@ import { EmployeeService } from '../employee.service';
   styleUrls: ['./employee-detail.component.css'],
 })
 export class EmployeeDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   costCentres: CostCentre[];
   item: Employee;

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

@@ -1,24 +1,24 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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, tap } from 'rxjs/operators';
 
 import { Employee } from '../employee';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class EmployeeListDataSource extends DataSource<Employee> {
-  private filterValue: string;
+  private filterValue: string = "";
 
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
-    private filter: Observable<string>,
     public data: Employee[],
+    private filter: Observable<string>,
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
     this.filter = filter.pipe(
@@ -29,18 +29,20 @@ export class EmployeeListDataSource extends DataSource<Employee> {
   }
 
   connect(): Observable<Employee[]> {
-    const dataMutations = [
-      observableOf(this.data),
-      this.filter,
-      this.paginator.page,
-      this.sort.sortChange,
-    ];
+    const dataMutations: (
+      | Observable<Employee[]>
+      | Observable<string>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data), this.filter];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     return merge(...dataMutations)
       .pipe(
         map(() => this.getFilteredData([...this.data])),
         tap((x: Employee[]) => {
-          this.paginator.length = x.length;
+          if (this.paginator) this.paginator.length = x.length;
         }),
       )
       .pipe(map((x: any) => this.getPagedData(this.getSortedData(x))));
@@ -49,8 +51,7 @@ export class EmployeeListDataSource extends DataSource<Employee> {
   disconnect() {}
 
   private getFilteredData(data: Employee[]): Employee[] {
-    const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return filter.split(' ').reduce(
+    return this.filterValue.split(' ').reduce(
       (p: Employee[], c: string) =>
         p.filter((x) => {
           const employeeString = `${x.code} ${x.name} ${x.designation} ${x.costCentre}${
@@ -63,18 +64,21 @@ export class EmployeeListDataSource extends DataSource<Employee> {
   }
 
   private getPagedData(data: Employee[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Employee[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'code':
           return compare(+a.code, +b.code, isAsc);
         case 'name':
@@ -86,11 +90,11 @@ export class EmployeeListDataSource extends DataSource<Employee> {
         case 'points':
           return compare(a.points, b.points, isAsc);
         case 'department':
-          return compare(a.costCentre, b.costCentre, isAsc);
+          return compare(a.costCentre.name, b.costCentre.name, isAsc);
         case 'joiningDate':
           return compare(a.joiningDate, b.joiningDate, isAsc);
         case 'leavingDate':
-          return compare(a.leavingDate, b.leavingDate, isAsc);
+          return compare(a.leavingDate || "", b.leavingDate || "", isAsc);
         default:
           return 0;
       }

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

@@ -17,9 +17,9 @@ import { EmployeeListDataSource } from './employee-list-datasource';
   styleUrls: ['./employee-list.component.css'],
 })
 export class EmployeeListComponent implements OnInit, AfterViewInit {
-  @ViewChild('filterElement', { static: true }) filterElement: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('filterElement', { static: true }) filterElement?: ElementRef;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: EmployeeListDataSource;
   filter: Observable<string>;
   form: FormGroup;

overlord/src/app/employee/employee.ts

@@ -1,7 +1,7 @@
 import { CostCentre } from '../core/cost-centre';
 
 export class Employee {
-  id: string;
+  id: string | undefined;
   code: number;
   name: string;
   isStarred: boolean;
@@ -12,4 +12,18 @@ export class Employee {
   joiningDate: string;
   leavingDate?: string;
   costCentre: CostCentre;
+
+
+  public constructor(init?: Partial<Employee>) {
+    this.code = 0;
+    this.name = "";
+    this.isStarred = false;
+    this.isActive = true;
+    this.designation = "";
+    this.salary = 0;
+    this.points = 0;
+    this.joiningDate = "";
+    this.costCentre = new CostCentre();
+    Object.assign(this, init);
+  }
 }

overlord/src/app/issue/issue.component.ts

@@ -31,8 +31,8 @@ import { IssueGridService } from './issue-grid.service';
   styleUrls: ['./issue.component.css'],
 })
 export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('batchElement', { static: true }) batchElement: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement: ElementRef;
+  @ViewChild('batchElement', { static: true }) batchElement?: ElementRef;
+  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
   public gridObservable = new BehaviorSubject<any[]>([]);
   dataSource: IssueDataSource;

overlord/src/app/journal/journal.component.ts

@@ -31,8 +31,8 @@ import { JournalDialogComponent } from './journal-dialog.component';
   styleUrls: ['./journal.component.css'],
 })
 export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement: ElementRef;
+  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
+  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: JournalDataSource;
   form: FormGroup;

overlord/src/app/ledger/ledger-datasource.ts

@@ -1,26 +1,32 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { LedgerItem } from './ledger-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class LedgerDataSource extends DataSource<LedgerItem> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: LedgerItem[]) {
+  constructor(public data: LedgerItem[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<LedgerItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<LedgerItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,18 +36,21 @@ export class LedgerDataSource extends DataSource<LedgerItem> {
   disconnect() {}
 
   private getPagedData(data: LedgerItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: LedgerItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'date':
           return compare(a.date, b.date, isAsc);
         case 'debit':

overlord/src/app/ledger/ledger.component.ts

@@ -22,9 +22,9 @@ import { LedgerService } from './ledger.service';
   styleUrls: ['./ledger.component.css'],
 })
 export class LedgerComponent implements OnInit, AfterViewInit {
-  @ViewChild('accountElement', { static: true }) accountElement: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: LedgerDataSource;
   form: FormGroup;
   info: Ledger;

overlord/src/app/net-transactions/net-transactions-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { NetTransactionsItem } from './net-transactions-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class NetTransactionsDataSource extends DataSource<NetTransactionsItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: NetTransactionsItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<NetTransactionsItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<NetTransactionsItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class NetTransactionsDataSource extends DataSource<NetTransactionsItem> {
   disconnect() {}
 
   private getPagedData(data: NetTransactionsItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: NetTransactionsItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'type':

overlord/src/app/net-transactions/net-transactions.component.ts

@@ -14,8 +14,8 @@ import { NetTransactionsDataSource } from './net-transactions-datasource';
   styleUrls: ['./net-transactions.component.css'],
 })
 export class NetTransactionsComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: NetTransactionsDataSource;
   form: FormGroup;
   info: NetTransactions;

overlord/src/app/payment/payment.component.ts

@@ -31,8 +31,8 @@ import { PaymentDialogComponent } from './payment-dialog.component';
   styleUrls: ['./payment.component.css'],
 })
 export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement: ElementRef;
+  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
+  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: PaymentDataSource;
   form: FormGroup;

overlord/src/app/product-group/product-group-detail/product-group-detail.component.ts

@@ -12,7 +12,7 @@ import { ProductGroupService } from '../product-group.service';
   styleUrls: ['./product-group-detail.component.css'],
 })
 export class ProductGroupDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   item: ProductGroup;
 

overlord/src/app/product-group/product-group-list/product-group-list-datasource.ts

@@ -1,26 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { ProductGroup } from '../../core/product-group';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ProductGroupListDataSource extends DataSource<ProductGroup> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: ProductGroup[]) {
+  constructor(
+    public data: ProductGroup[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
+  ) {
     super();
   }
 
   connect(): Observable<ProductGroup[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<ProductGroup[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,18 +40,21 @@ export class ProductGroupListDataSource extends DataSource<ProductGroup> {
   disconnect() {}
 
   private getPagedData(data: ProductGroup[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: ProductGroup[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'id':

overlord/src/app/product-group/product-group-list/product-group-list.component.ts

@@ -13,8 +13,8 @@ import { ProductGroupListDataSource } from './product-group-list-datasource';
   styleUrls: ['./product-group-list.component.css'],
 })
 export class ProductGroupListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ProductGroupListDataSource;
   list: ProductGroup[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

overlord/src/app/product-ledger/product-ledger-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { ProductLedgerItem } from './product-ledger-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ProductLedgerDataSource extends DataSource<ProductLedgerItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: ProductLedgerItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<ProductLedgerItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<ProductLedgerItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class ProductLedgerDataSource extends DataSource<ProductLedgerItem> {
   disconnect() {}
 
   private getPagedData(data: ProductLedgerItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: ProductLedgerItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'date':
           return compare(a.date, b.date, isAsc);
         case 'debitQuantity':

overlord/src/app/product-ledger/product-ledger.component.ts

@@ -22,9 +22,9 @@ import { ProductLedgerService } from './product-ledger.service';
   styleUrls: ['./product-ledger.component.css'],
 })
 export class ProductLedgerComponent implements OnInit, AfterViewInit {
-  @ViewChild('productElement', { static: true }) productElement: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('productElement', { static: true }) productElement?: ElementRef;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ProductLedgerDataSource;
   form: FormGroup;
   info: ProductLedger;

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

@@ -15,7 +15,7 @@ import { ProductService } from '../product.service';
   styleUrls: ['./product-detail.component.css'],
 })
 export class ProductDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   productGroups: ProductGroup[];
   item: Product;

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

@@ -1,24 +1,24 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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, tap } from 'rxjs/operators';
 
 import { Product } from '../../core/product';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ProductListDataSource extends DataSource<Product> {
-  private filterValue: string;
+  private filterValue: string = "";
 
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
-    private filter: Observable<string>,
     public data: Product[],
+    private filter: Observable<string>,
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
     this.filter = filter.pipe(
@@ -29,18 +29,20 @@ export class ProductListDataSource extends DataSource<Product> {
   }
 
   connect(): Observable<Product[]> {
-    const dataMutations = [
-      observableOf(this.data),
-      this.filter,
-      this.paginator.page,
-      this.sort.sortChange,
-    ];
+    const dataMutations: (
+      | Observable<Product[]>
+      | Observable<string>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data), this.filter];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     return merge(...dataMutations)
       .pipe(
         map(() => this.getFilteredData([...this.data])),
         tap((x: Product[]) => {
-          this.paginator.length = x.length;
+          if (this.paginator) this.paginator.length = x.length;
         }),
       )
       .pipe(map((x: any) => this.getPagedData(this.getSortedData(x))));
@@ -49,8 +51,7 @@ export class ProductListDataSource extends DataSource<Product> {
   disconnect() {}
 
   private getFilteredData(data: Product[]): Product[] {
-    const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return filter.split(' ').reduce(
+    return this.filterValue.split(' ').reduce(
       (p: Product[], c: string) =>
         p.filter((x) => {
           const productString = `${x.code} ${x.name} ${x.units} ${x.productGroup}${
@@ -63,22 +64,25 @@ export class ProductListDataSource extends DataSource<Product> {
   }
 
   private getPagedData(data: Product[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Product[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'productGroup':
-          return compare(a.productGroup, b.productGroup, isAsc);
+          return compare(a.productGroup.name, b.productGroup.name, isAsc);
         case 'id':
           return compare(+a.id, +b.id, isAsc);
         default:

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

@@ -17,9 +17,9 @@ import { ProductListDataSource } from './product-list-datasource';
   styleUrls: ['./product-list.component.css'],
 })
 export class ProductListComponent implements OnInit, AfterViewInit {
-  @ViewChild('filterElement', { static: true }) filterElement: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('filterElement', { static: true }) filterElement?: ElementRef;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ProductListDataSource;
   filter: Observable<any>;
   form: FormGroup;

overlord/src/app/profit-loss/profit-loss-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { ProfitLossItem } from './profit-loss-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ProfitLossDataSource extends DataSource<ProfitLossItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: ProfitLossItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<ProfitLossItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<ProfitLossItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class ProfitLossDataSource extends DataSource<ProfitLossItem> {
   disconnect() {}
 
   private getPagedData(data: ProfitLossItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: ProfitLossItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'group':
           return compare(a.group, b.group, isAsc);
         case 'name':

overlord/src/app/profit-loss/profit-loss.component.ts

@@ -14,8 +14,8 @@ import { ProfitLossDataSource } from './profit-loss-datasource';
   styleUrls: ['./profit-loss.component.css'],
 })
 export class ProfitLossComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ProfitLossDataSource;
   form: FormGroup;
   info: ProfitLoss;

overlord/src/app/purchase-entries/purchase-entries-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { PurchaseEntriesItem } from './purchase-entries-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class PurchaseEntriesDataSource extends DataSource<PurchaseEntriesItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: PurchaseEntriesItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<PurchaseEntriesItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<PurchaseEntriesItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class PurchaseEntriesDataSource extends DataSource<PurchaseEntriesItem> {
   disconnect() {}
 
   private getPagedData(data: PurchaseEntriesItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: PurchaseEntriesItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'date':
           return compare(a.date, b.date, isAsc);
         case 'supplier':

overlord/src/app/purchase-entries/purchase-entries.component.ts

@@ -14,8 +14,8 @@ import { PurchaseEntriesDataSource } from './purchase-entries-datasource';
   styleUrls: ['./purchase-entries.component.css'],
 })
 export class PurchaseEntriesComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: PurchaseEntriesDataSource;
   form: FormGroup;
   info: PurchaseEntries;

overlord/src/app/purchase-return/purchase-return.component.ts

@@ -33,9 +33,9 @@ import { PurchaseReturnDialogComponent } from './purchase-return-dialog.componen
   styleUrls: ['./purchase-return.component.css'],
 })
 export class PurchaseReturnComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement: ElementRef;
-  @ViewChild('batchElement', { static: true }) batchElement: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement: ElementRef;
+  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
+  @ViewChild('batchElement', { static: true }) batchElement?: ElementRef;
+  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
   dataSource: PurchaseReturnDataSource;
   form: FormGroup;

overlord/src/app/purchase/purchase.component.ts

@@ -33,9 +33,9 @@ import { PurchaseDialogComponent } from './purchase-dialog.component';
   styleUrls: ['./purchase.component.css'],
 })
 export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement: ElementRef;
-  @ViewChild('productElement', { static: true }) productElement: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement: ElementRef;
+  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
+  @ViewChild('productElement', { static: true }) productElement?: ElementRef;
+  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
   dataSource: PurchaseDataSource;
   form: FormGroup;

overlord/src/app/purchases/purchases-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class PurchasesDataSource extends DataSource<PurchasesItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: PurchasesItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<PurchasesItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<PurchasesItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class PurchasesDataSource extends DataSource<PurchasesItem> {
   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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'product':
           return compare(a.name, b.name, isAsc);
         case 'quantity':

overlord/src/app/purchases/purchases.component.ts

@@ -15,8 +15,8 @@ import { PurchasesItem } from './purchases-item';
   styleUrls: ['./purchases.component.css'],
 })
 export class PurchasesComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: PurchasesDataSource;
   form: FormGroup;
   info: Purchases;

overlord/src/app/raw-material-cost/raw-material-cost-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { RawMaterialCostItem } from './raw-material-cost-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class RawMaterialCostDataSource extends DataSource<RawMaterialCostItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: RawMaterialCostItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<RawMaterialCostItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<RawMaterialCostItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class RawMaterialCostDataSource extends DataSource<RawMaterialCostItem> {
   disconnect() {}
 
   private getPagedData(data: RawMaterialCostItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: RawMaterialCostItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         default:

overlord/src/app/raw-material-cost/raw-material-cost.component.ts

@@ -18,8 +18,8 @@ import { RawMaterialCostDataSource } from './raw-material-cost-datasource';
   styleUrls: ['./raw-material-cost.component.css'],
 })
 export class RawMaterialCostComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: RawMaterialCostDataSource;
   form: FormGroup;
   info: RawMaterialCost;

overlord/src/app/receipt/receipt.component.ts

@@ -31,8 +31,8 @@ import { ReceiptDialogComponent } from './receipt-dialog.component';
   styleUrls: ['./receipt.component.css'],
 })
 export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement: ElementRef;
+  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
+  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: ReceiptDataSource;
   form: FormGroup;

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

@@ -14,7 +14,7 @@ import { RoleService } from '../role.service';
   styleUrls: ['./role-detail.component.css'],
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   item: Role;
 

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

@@ -1,26 +1,30 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { Role } from '../role';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class RoleListDatasource extends DataSource<Role> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: Role[]) {
+  constructor(public data: Role[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<Role[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (Observable<Role[]> | EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [
+      observableOf(this.data),
+    ];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,18 +34,21 @@ export class RoleListDatasource extends DataSource<Role> {
   disconnect() {}
 
   private getPagedData(data: Role[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Role[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'id':

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

@@ -13,8 +13,8 @@ import { RoleListDatasource } from './role-list-datasource';
   styleUrls: ['./role-list.component.css'],
 })
 export class RoleListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: RoleListDatasource;
   list: Role[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

overlord/src/app/stock-movement/stock-movement-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { StockMovementItem } from './stock-movement-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class StockMovementDataSource extends DataSource<StockMovementItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: StockMovementItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<StockMovementItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<StockMovementItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class StockMovementDataSource extends DataSource<StockMovementItem> {
   disconnect() {}
 
   private getPagedData(data: StockMovementItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: StockMovementItem[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'group':
           return compare(a.group, b.group, isAsc);
         case 'name':

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

@@ -14,8 +14,8 @@ import { StockMovementDataSource } from './stock-movement-datasource';
   styleUrls: ['./stock-movement.component.css'],
 })
 export class StockMovementComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: StockMovementDataSource;
   form: FormGroup;
   info: StockMovement;

overlord/src/app/trial-balance/trial-balance-datasource.ts

@@ -1,30 +1,36 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { TrialBalanceItem } from './trial-balance-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class TrialBalanceDataSource extends DataSource<TrialBalanceItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: TrialBalanceItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<TrialBalanceItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<TrialBalanceItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class TrialBalanceDataSource extends DataSource<TrialBalanceItem> {
   disconnect() {}
 
   private getPagedData(data: TrialBalanceItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: TrialBalanceItem[]) {
+    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: TrialBalanceItem, b: TrialBalanceItem) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'type':
           return compare(a.type, b.type, isAsc);
         case 'name':

overlord/src/app/trial-balance/trial-balance.component.ts

@@ -14,11 +14,11 @@ import { TrialBalanceDataSource } from './trial-balance-datasource';
   styleUrls: ['./trial-balance.component.css'],
 })
 export class TrialBalanceComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
-  dataSource: TrialBalanceDataSource;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
+  info: TrialBalance = new TrialBalance();
+  dataSource: TrialBalanceDataSource = new TrialBalanceDataSource(this.info.body);
   form: FormGroup;
-  info: TrialBalance;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['type', 'name', 'debit', 'credit'];
 
@@ -37,7 +37,7 @@ export class TrialBalanceComponent implements OnInit {
         date: moment(this.info.date, 'DD-MMM-YYYY').toDate(),
       });
     });
-    this.dataSource = new TrialBalanceDataSource(this.paginator, this.sort, this.info.body);
+    this.dataSource = new TrialBalanceDataSource(this.info.body, this.paginator, this.sort);
   }
 
   show() {
@@ -48,8 +48,8 @@ export class TrialBalanceComponent implements OnInit {
   getInfo(): TrialBalance {
     const formModel = this.form.value;
 
-    return {
+    return new TrialBalance({
       date: moment(formModel.date).format('DD-MMM-YYYY'),
-    };
+    });
   }
 }

overlord/src/app/trial-balance/trial-balance.ts

@@ -2,5 +2,11 @@ import { TrialBalanceItem } from './trial-balance-item';
 
 export class TrialBalance {
   date: string;
-  body?: TrialBalanceItem[];
+  body: TrialBalanceItem[];
+
+  public constructor(init?: Partial<TrialBalance>) {
+    this.date = "";
+    this.body = [];
+    Object.assign(this, init);
+  }
 }

overlord/src/app/unposted/unposted-datasource.ts

@@ -1,26 +1,33 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { Unposted } from './unposted';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
 
 export class UnpostedDataSource extends DataSource<Unposted> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: Unposted[]) {
+  constructor(public data: Unposted[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<Unposted[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<Unposted[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,18 +37,21 @@ export class UnpostedDataSource extends DataSource<Unposted> {
   disconnect() {}
 
   private getPagedData(data: Unposted[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Unposted[]) {
+    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: Unposted, b: Unposted) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'date':
           return compare(a.date, b.date, isAsc);
         case 'type':

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

@@ -1,26 +1,31 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+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 { User } from '../../core/user';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
 
 export class UserListDataSource extends DataSource<User> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: User[]) {
+  constructor(public data: User[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<User[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (Observable<User[]> | EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [
+      observableOf(this.data),
+    ];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -30,22 +35,23 @@ export class UserListDataSource extends DataSource<User> {
   disconnect() {}
 
   private getPagedData(data: User[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: User[]) {
+    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 = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
         default:
           return 0;
       }

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

@@ -13,8 +13,8 @@ import { UserListDataSource } from './user-list-datasource';
   styleUrls: ['./user-list.component.css'],
 })
 export class UserListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator = undefined;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort = undefined;
   dataSource: UserListDataSource;
   list: User[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -23,7 +23,8 @@ export class UserListComponent implements OnInit {
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.data.subscribe((data: { list: User[] }) => {
+    this.route.data.subscribe((value) => {
+      const data = value as { list: User[] };
       this.list = data.list;
     });
     this.dataSource = new UserListDataSource(this.paginator, this.sort, this.list);