Moved from tslint to eslint as tslint was depreciated.

Added prettier and also prettied all the typescript files using prettier

ESLint is using the AirBnB rules which are the most strict to lint the files.

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

@@ -5,15 +5,17 @@ import { map, tap } from 'rxjs/operators';
 import { merge, Observable, of as observableOf } from 'rxjs';
 import { Account } from '../../core/account';
 
-
 export class AccountListDataSource extends DataSource<Account> {
   private filterValue: string;
 
-  constructor(private paginator: MatPaginator, private sort: MatSort, private filter: Observable<string>, public data: Account[]) {
+  constructor(
+    private paginator: MatPaginator,
+    private sort: MatSort,
+    private filter: Observable<string>,
+    public data: Account[],
+  ) {
     super();
-    this.filter = filter.pipe(
-      tap(x => this.filterValue = x)
-    );
+    this.filter = filter.pipe(tap((x) => (this.filterValue = x)));
   }
 
   connect(): Observable<Account[]> {
@@ -21,34 +23,39 @@ export class AccountListDataSource extends DataSource<Account> {
       observableOf(this.data),
       this.filter,
       this.paginator.page,
-      this.sort.sortChange
+      this.sort.sortChange,
     ];
 
-    return merge(...dataMutations).pipe(
-      map((x: any) => {
-        return this.getFilteredData([...this.data]);
-      }),
-      tap((x: Account[]) => this.paginator.length = x.length)
-    ).pipe(
-      map((x: any) => {
-        return this.getPagedData(this.getSortedData(x));
-      })
-    );
+    return merge(...dataMutations)
+      .pipe(
+        map((x: any) => {
+          return this.getFilteredData([...this.data]);
+        }),
+        tap((x: Account[]) => (this.paginator.length = x.length)),
+      )
+      .pipe(
+        map((x: any) => {
+          return this.getPagedData(this.getSortedData(x));
+        }),
+      );
   }
 
-  disconnect() {
-  }
+  disconnect() {}
 
   private getFilteredData(data: Account[]): Account[] {
-    const filter = (this.filterValue === undefined) ? '' : this.filterValue;
+    const filter = this.filterValue === undefined ? '' : this.filterValue;
     return filter.split(' ').reduce((p: Account[], c: string) => {
-      return p.filter(x => {
-          const accountString = (
-            x.name + ' ' + x.type + ' ' + x.costCentre + (x.isActive ? ' active' : ' inactive')
-          ).toLowerCase();
-          return accountString.indexOf(c) !== -1;
-        }
-      );
+      return p.filter((x) => {
+        const accountString = (
+          x.name +
+          ' ' +
+          x.type +
+          ' ' +
+          x.costCentre +
+          (x.isActive ? ' active' : ' inactive')
+        ).toLowerCase();
+        return accountString.indexOf(c) !== -1;
+      });
     }, Object.assign([], data));
   }
 

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

@@ -8,23 +8,33 @@
   </mat-card-title-group>
   <mat-card-content>
     <form [formGroup]="form" fxLayout="column">
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px"
-           fxLayoutAlign="space-around start">
+      <div
+        fxLayout="row"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+        fxLayoutAlign="space-around start"
+      >
         <mat-form-field fxFlex>
-          <input type="text" matInput #filterElement placeholder="Filter" formControlName="filter" autocomplete="off">
+          <input
+            type="text"
+            matInput
+            #filterElement
+            placeholder="Filter"
+            formControlName="filter"
+            autocomplete="off"
+          />
         </mat-form-field>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <a [routerLink]="['/accounts', row.id]">
-            <mat-icon matSuffix *ngIf="row.isStarred" class="gold">star
-            </mat-icon>
-            {{row.name}}
+            <mat-icon matSuffix *ngIf="row.isStarred" class="gold">star </mat-icon>
+            {{ row.name }}
           </a>
         </mat-cell>
       </ng-container>
@@ -32,36 +42,38 @@
       <!-- 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 }}</mat-cell>
       </ng-container>
 
       <!-- Is Active? Column -->
       <ng-container matColumnDef="isActive">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Is Active?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.isActive}}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
       </ng-container>
 
       <!-- Is Reconcilable? Column -->
       <ng-container matColumnDef="isReconcilable">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Is Reconcilable?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.isReconcilable}}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.isReconcilable }}</mat-cell>
       </ng-container>
 
       <!-- Cost Centre Column -->
       <ng-container matColumnDef="costCentre">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Centre</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.costCentre}}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.costCentre }}</mat-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
     </mat-table>
 
-    <mat-paginator #paginator
-                   [length]="dataSource.data.length"
-                   [pageIndex]="0"
-                   [pageSize]="50"
-                   [pageSizeOptions]="[25, 50, 100, 250]">
+    <mat-paginator
+      #paginator
+      [length]="dataSource.data.length"
+      [pageIndex]="0"
+      [pageSize]="50"
+      [pageSizeOptions]="[25, 50, 100, 250]"
+    >
     </mat-paginator>
   </mat-card-content>
 </mat-card>

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

@@ -1,6 +1,6 @@
-import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 
-import {AccountListComponent} from './account-list.component';
+import { AccountListComponent } from './account-list.component';
 
 describe('AccountListComponent', () => {
   let component: AccountListComponent;
@@ -8,9 +8,8 @@ describe('AccountListComponent', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [AccountListComponent]
-    })
-      .compileComponents();
+      declarations: [AccountListComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AccountListComponent);
     component = fixture.componentInstance;

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

@@ -1,17 +1,17 @@
-import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {AccountListDataSource} from './account-list-datasource';
-import {Account} from '../../core/account';
-import {ActivatedRoute} from '@angular/router';
-import {Observable} from 'rxjs';
-import {FormBuilder, FormGroup} from '@angular/forms';
-import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
+import { AccountListDataSource } from './account-list-datasource';
+import { Account } from '../../core/account';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
 
 @Component({
   selector: 'app-account-list',
   templateUrl: './account-list.component.html',
-  styleUrls: ['./account-list.component.css']
+  styleUrls: ['./account-list.component.css'],
 })
 export class AccountListComponent implements OnInit, AfterViewInit {
   @ViewChild('filterElement', { static: true }) filterElement: ElementRef;
@@ -32,24 +32,20 @@ export class AccountListComponent implements OnInit, AfterViewInit {
 
   createForm() {
     this.form = this.fb.group({
-      filter: ''
+      filter: '',
     });
   }
 
   listenToFilterChange() {
-    return this.form.get('filter').valueChanges
-      .pipe(
-        startWith(''),
-        debounceTime(150),
-        distinctUntilChanged()
-      );
+    return this.form
+      .get('filter')
+      .valueChanges.pipe(startWith(''), debounceTime(150), distinctUntilChanged());
   }
 
   ngOnInit() {
-    this.route.data
-      .subscribe((data: { list: Account[] }) => {
-        this.list = data.list;
-      });
+    this.route.data.subscribe((data: { list: Account[] }) => {
+      this.list = data.list;
+    });
     this.dataSource = new AccountListDataSource(this.paginator, this.sort, this.filter, this.list);
   }