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/journal/journal.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 as observableOf, zip } from 'rxjs';
-import { JournalDataSource } from './journal-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 { JournalDialogComponent } from './journal-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 { JournalDataSource } from './journal-datasource';
+import { JournalDialogComponent } from './journal-dialog.component';
 
 @Component({
   selector: 'app-journal',
@@ -46,8 +51,9 @@ export class JournalComponent 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,
   ) {
@@ -63,7 +69,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'f2',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           setTimeout(() => {
             this.dateElement.nativeElement.focus();
           }, 0);
@@ -75,7 +81,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'ctrl+s',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           if (this.canSave()) {
             this.save();
           }
@@ -87,7 +93,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hotkeys.add(
       new Hotkey(
         'ctrl+p',
-        (event: KeyboardEvent): boolean => {
+        (): boolean => {
           if (
             this.voucher.id &&
             !this.voucher.posted &&
@@ -161,11 +167,11 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
       Math.abs(this.voucher.journals.map((x) => x.debit * x.amount).reduce((p, c) => p + c)),
       2,
     );
-    const debit = this.form.get('addRow').value.debit;
+    const { debit } = this.form.get('addRow').value;
     this.form.get('addRow').reset({
-      debit: debit,
+      debit,
       account: null,
-      amount: '' + amount,
+      amount: `${amount}`,
     });
     this.account = null;
     this.accBal = null;
@@ -178,7 +184,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
     const dialogRef = this.dialog.open(JournalDialogComponent, {
       width: '750px',
       data: {
-        journal: Object.assign({}, row),
+        journal: { ...row },
         date: moment(this.form.get('date').value).format('DD-MMM-YYYY'),
       },
     });
@@ -207,7 +213,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
       this.voucher.journals.map((x) => x.debit * x.amount).reduce((p, c) => p + c, 0),
     );
     this.form.get('addRow').patchValue({
-      amount: amount,
+      amount,
     });
   }
 
@@ -227,14 +233,14 @@ export class JournalComponent 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() {
@@ -275,7 +281,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
 
   delete() {
     this.ser.delete(this.voucher.id).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
         this.router.navigate(['/journal'], { replaceUrl: true });
       },
@@ -309,7 +315,7 @@ export class JournalComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
-  displayAccount(account?: Account): string | undefined {
+  displayFn(account?: Account): string | undefined {
     return account ? account.name : undefined;
   }
 
@@ -332,50 +338,4 @@ export class JournalComponent 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(
-            observableOf(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;
-  }
 }