Prettied, Linted and updated angular.json according to the latest schematic of Angular CLI.

Now all that is needed is to make it ready for strict compiling.
Removed eslint-plugin-prettier as it is not recommended and causes errors for both eslint and prettier

Bumped to v8.0.0

overlord/src/app/receipt/receipt-accounts-resolver.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Resolve } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
+
 import { Account } from '../core/account';
 import { AccountService } from '../core/account.service';
 
@@ -10,7 +11,7 @@ import { AccountService } from '../core/account.service';
 export class ReceiptAccountsResolver implements Resolve<Account[]> {
   constructor(private ser: AccountService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Account[]> {
+  resolve(): Observable<Account[]> {
     return this.ser.receiptAutocomplete('');
   }
 }

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

@@ -1,6 +1,7 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
-import { Journal } from '../core/voucher';
+
+import { Journal } from '../core/journal';
 
 export class ReceiptDataSource extends DataSource<Journal> {
   constructor(private data: Observable<Journal[]>) {

overlord/src/app/receipt/receipt-dialog.component.html

@@ -27,7 +27,7 @@
       <mat-autocomplete
         #auto="matAutocomplete"
         autoActiveFirstOption
-        [displayWith]="displayAccount"
+        [displayWith]="displayFn"
         (optionSelected)="accountSelected($event)"
       >
         <mat-option *ngFor="let account of accounts | async" [value]="account">{{

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

@@ -1,12 +1,13 @@
 import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
 import { Observable, of as observableOf } from 'rxjs';
-import { MathService } from '../shared/math.service';
+import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+
 import { Account } from '../core/account';
 import { AccountService } from '../core/account.service';
+import { MathService } from '../shared/math.service';
 
 @Component({
   selector: 'app-receipt-dialog',
@@ -57,7 +58,7 @@ export class ReceiptDialogComponent implements OnInit {
     );
   }
 
-  displayAccount(account?: Account): string | undefined {
+  displayFn(account?: Account): string | undefined {
     return account ? account.name : undefined;
   }
 

overlord/src/app/receipt/receipt-resolver.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
+
 import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
 
@@ -10,15 +11,15 @@ import { VoucherService } from '../core/voucher.service';
 export class ReceiptResolver implements Resolve<Voucher> {
   constructor(private ser: VoucherService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Voucher> {
+  resolve(route: ActivatedRouteSnapshot): Observable<Voucher> {
     const id = route.paramMap.get('id');
     const account = route.queryParamMap.get('a') || null;
     if (id !== null) {
       return this.ser.get(id, 'Receipt');
-    } else if (account !== null) {
-      return this.ser.getOfType('Receipt', account);
-    } else {
-      return this.ser.getOfType('Receipt');
     }
+    if (account !== null) {
+      return this.ser.getOfType('Receipt', account);
+    }
+    return this.ser.getOfType('Receipt');
   }
 }

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

@@ -1,10 +1,12 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ReceiptResolver } from './receipt-resolver.service';
+
 import { AuthGuard } from '../auth/auth-guard.service';
-import { ReceiptComponent } from './receipt.component';
+
 import { ReceiptAccountsResolver } from './receipt-accounts-resolver.service';
+import { ReceiptResolver } from './receipt-resolver.service';
+import { ReceiptComponent } from './receipt.component';
 
 const receiptRoutes: Routes = [
   {

overlord/src/app/receipt/receipt.component.html

@@ -72,7 +72,7 @@
         <mat-autocomplete
           #auto="matAutocomplete"
           autoActiveFirstOption
-          [displayWith]="displayAccount"
+          [displayWith]="displayFn"
           (optionSelected)="accountSelected($event)"
         >
           <mat-option *ngFor="let account of accounts | async" [value]="account">{{
@@ -128,7 +128,6 @@
         <mat-label>Narration</mat-label>
         <textarea
           matInput
-          matTextareaAutosize
           matAutosizeMinRows="5"
           placeholder="Narration"
           formControlName="narration"
@@ -153,7 +152,7 @@
             multiple
             accept="image/*"
             style="display: none"
-            (change)="detectFiles($event)"
+            (change)="image.detectFiles($event, voucher)"
           />
         </div>
       </div>

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

@@ -3,22 +3,27 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, fromEvent, Observable, of, of as observableOf, zip } from 'rxjs';
-import { ReceiptDataSource } from './receipt-datasource';
-import { Account } from '../core/account';
-import { VoucherService } from '../core/voucher.service';
-import { AccountService } from '../core/account.service';
-import { DbFile, Journal, Voucher } from '../core/voucher';
-import * as moment from 'moment';
-import { round } from 'mathjs';
-import { MathService } from '../shared/math.service';
-import { AuthService } from '../auth/auth.service';
-import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { ToasterService } from '../core/toaster.service';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
-import { ReceiptDialogComponent } from './receipt-dialog.component';
-import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
+import { round } from 'mathjs';
+import * as moment from 'moment';
+import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+
+import { AuthService } from '../auth/auth.service';
+import { Account } from '../core/account';
+import { AccountService } from '../core/account.service';
+import { DbFile } from '../core/db-file';
+import { Journal } from '../core/journal';
+import { ToasterService } from '../core/toaster.service';
+import { Voucher } from '../core/voucher';
+import { VoucherService } from '../core/voucher.service';
+import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
+import { ImageService } from '../shared/image.service';
+import { MathService } from '../shared/math.service';
+
+import { ReceiptDataSource } from './receipt-datasource';
+import { ReceiptDialogComponent } from './receipt-dialog.component';
 
 @Component({
   selector: 'app-receipt',
@@ -48,8 +53,9 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     private dialog: MatDialog,
     private hotkeys: HotkeysService,
     private toaster: ToasterService,
-    private auth: AuthService,
+    public auth: AuthService,
     private math: MathService,
+    public image: ImageService,
     private ser: VoucherService,
     private accountSer: AccountService,
   ) {
@@ -67,7 +73,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'f2',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           setTimeout(() => {
             this.dateElement.nativeElement.focus();
           }, 0);
@@ -79,7 +85,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'ctrl+s',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           if (this.canSave()) {
             this.save();
           }
@@ -91,7 +97,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'ctrl+p',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           if (
             this.voucher.id &&
             !this.voucher.posted &&
@@ -116,7 +122,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
 
   loadVoucher(voucher: Voucher) {
     this.voucher = voucher;
-    this.receiptJournal = this.voucher.journals.filter((x) => x.debit === 1)[0];
+    [this.receiptJournal] = this.voucher.journals.filter((x) => x.debit === 1);
     this.form.setValue({
       date: moment(this.voucher.date, 'DD-MMM-YYYY').toDate(),
       receiptAccount: this.receiptJournal.account.id,
@@ -153,8 +159,8 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     } else {
       this.voucher.journals.push({
         id: null,
-        debit: debit,
-        amount: amount,
+        debit,
+        amount,
         account: this.account,
         costCentre: null,
       });
@@ -198,7 +204,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     const dialogRef = this.dialog.open(ReceiptDialogComponent, {
       width: '750px',
       data: {
-        journal: Object.assign({}, row),
+        journal: { ...row },
         date: moment(this.form.get('date').value).format('DD-MMM-YYYY'),
       },
     });
@@ -241,14 +247,14 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
   canSave() {
     if (!this.voucher.id) {
       return true;
-    } else if (this.voucher.posted && this.auth.user.perms.indexOf('edit-posted-vouchers') !== -1) {
-      return true;
-    } else {
-      return (
-        this.voucher.user.id === this.auth.user.id ||
-        this.auth.user.perms.indexOf("edit-other-user's-vouchers") !== -1
-      );
     }
+    if (this.voucher.posted && this.auth.user.perms.indexOf('edit-posted-vouchers') !== -1) {
+      return true;
+    }
+    return (
+      this.voucher.user.id === this.auth.user.id ||
+      this.auth.user.perms.indexOf("edit-other-user's-vouchers") !== -1
+    );
   }
 
   post() {
@@ -290,7 +296,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
 
   delete() {
     this.ser.delete(this.voucher.id).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
         this.router.navigate(['/receipt'], { replaceUrl: true });
       },
@@ -334,7 +340,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
-  displayAccount(account?: Account): string | undefined {
+  displayFn(account?: Account): string | undefined {
     return account ? account.name : undefined;
   }
 
@@ -357,50 +363,4 @@ export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
     const index = this.voucher.files.indexOf(file);
     this.voucher.files.splice(index, 1);
   }
-
-  detectFiles(event) {
-    const files = event.target.files;
-    if (files) {
-      for (const file of files) {
-        const reader = new FileReader();
-        reader.onload = (e: any) => {
-          zip(
-            of(e.target.result),
-            this.resizeImage(e.target.result, 100, 150),
-            this.resizeImage(e.target.result, 825, 1170),
-          ).subscribe((val) =>
-            this.voucher.files.push({ id: null, thumbnail: val[1], resized: val[2] }),
-          );
-        };
-        reader.readAsDataURL(file);
-      }
-    }
-  }
-
-  resizeImage(image, MAX_WIDTH, MAX_HEIGHT) {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-    const ex = fromEvent(img, 'load').pipe(
-      map((e) => {
-        let width = img.naturalWidth,
-          height = img.naturalHeight;
-        const ratio = Math.min(1, MAX_WIDTH / width, MAX_HEIGHT / height);
-
-        if (ratio === 1) {
-          return image;
-        }
-
-        width *= ratio;
-        height *= ratio;
-
-        canvas.width = width;
-        canvas.height = height;
-        ctx.drawImage(img, 0, 0, width, height);
-        return canvas.toDataURL('image/jpeg', 0.95);
-      }),
-    );
-    img.src = image;
-    return ex;
-  }
 }

overlord/src/app/receipt/receipt.module.ts

@@ -1,5 +1,10 @@
-import { NgModule } from '@angular/core';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -20,16 +25,13 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
+import { HotkeyModule } from 'angular2-hotkeys';
+
 import { SharedModule } from '../shared/shared.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { CdkTableModule } from '@angular/cdk/table';
+
+import { ReceiptDialogComponent } from './receipt-dialog.component';
 import { ReceiptRoutingModule } from './receipt-routing.module';
 import { ReceiptComponent } from './receipt.component';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { A11yModule } from '@angular/cdk/a11y';
-import { ReceiptDialogComponent } from './receipt-dialog.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { HotkeyModule } from 'angular2-hotkeys';
 
 export const MY_FORMATS = {
   parse: {