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/payment/payment.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 { PaymentDataSource } from './payment-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 { PaymentDialogComponent } from './payment-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 { PaymentDataSource } from './payment-datasource';
+import { PaymentDialogComponent } from './payment-dialog.component';
 
 @Component({
   selector: 'app-payment',
@@ -48,8 +53,9 @@ export class PaymentComponent 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 PaymentComponent 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 PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'ctrl+s',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           if (this.canSave()) this.save();
           return false; // Prevent bubbling
         },
@@ -89,7 +95,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'ctrl+p',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           if (
             this.voucher.id &&
             !this.voucher.posted &&
@@ -113,7 +119,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
 
   loadVoucher(voucher: Voucher) {
     this.voucher = voucher;
-    this.paymentJournal = this.voucher.journals.filter((x) => x.debit === -1)[0];
+    [this.paymentJournal] = this.voucher.journals.filter((x) => x.debit === -1);
     this.form.setValue({
       date: moment(this.voucher.date, 'DD-MMM-YYYY').toDate(),
       paymentAccount: this.paymentJournal.account.id,
@@ -150,8 +156,8 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     } else {
       this.voucher.journals.push({
         id: null,
-        debit: debit,
-        amount: amount,
+        debit,
+        amount,
         account: this.account,
         costCentre: null,
       });
@@ -195,7 +201,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     const dialogRef = this.dialog.open(PaymentDialogComponent, {
       width: '750px',
       data: {
-        journal: Object.assign({}, row),
+        journal: { ...row },
         date: moment(this.form.get('date').value).format('DD-MMM-YYYY'),
       },
     });
@@ -238,14 +244,14 @@ export class PaymentComponent 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() {
@@ -287,7 +293,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
 
   delete() {
     this.ser.delete(this.voucher.id).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
         this.router.navigate(['/payment'], { replaceUrl: true });
       },
@@ -331,7 +337,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
-  displayAccount(account?: Account): string | undefined {
+  displayFn(account?: Account): string | undefined {
     return account ? account.name : undefined;
   }
 
@@ -354,50 +360,4 @@ export class PaymentComponent 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;
-  }
 }