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/employee-benefits/employee-benefits.component.ts

@@ -3,17 +3,20 @@ 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, Observable, of as observableOf } from 'rxjs';
-import { EmployeeBenefitsDataSource } from './employee-benefits-datasource';
-import { VoucherService } from '../core/voucher.service';
-import { EmployeeBenefit, Voucher } from '../core/voucher';
 import * as moment from 'moment';
-import { AuthService } from '../auth/auth.service';
-import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { ToasterService } from '../core/toaster.service';
+import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+
+import { AuthService } from '../auth/auth.service';
+import { EmployeeBenefit } from '../core/employee-benefit';
+import { ToasterService } from '../core/toaster.service';
+import { Voucher } from '../core/voucher';
+import { VoucherService } from '../core/voucher.service';
 import { Employee } from '../employee/employee';
 import { EmployeeService } from '../employee/employee.service';
+import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+
+import { EmployeeBenefitsDataSource } from './employee-benefits-datasource';
 
 @Component({
   selector: 'app-employee-benefits',
@@ -49,7 +52,7 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     private fb: FormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
-    private auth: AuthService,
+    public auth: AuthService,
     private ser: VoucherService,
     private employeeSer: EmployeeService,
   ) {
@@ -57,6 +60,28 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     this.setupEmployeeAutocomplete();
   }
 
+  static getPf(grossSalary, daysWorked, daysInMonth) {
+    const limit = 15000;
+    const employeeRate = 0.12;
+    const employerRate = 0.12 + 0.011 + 0.005 + 0.0001;
+    const employee =
+      grossSalary > limit ? 0 : Math.ceil((employeeRate * grossSalary * daysWorked) / daysInMonth);
+    const employer =
+      grossSalary > limit ? 0 : Math.ceil((employerRate * grossSalary * daysWorked) / daysInMonth);
+    return { ee: employee, er: employer, both: employee + employer };
+  }
+
+  static getEsi(grossSalary, daysWorked, daysInMonth) {
+    const limit = 21000;
+    const employeeRate = 0.0175;
+    const employerRate = 0.0475;
+    const employee =
+      grossSalary > limit ? 0 : Math.ceil((employeeRate * grossSalary * daysWorked) / daysInMonth);
+    const employer =
+      grossSalary > limit ? 0 : Math.ceil((employerRate * grossSalary * daysWorked) / daysInMonth);
+    return { ee: employee, er: employer, both: employee + employer };
+  }
+
   ngOnInit() {
     this.route.data.subscribe((data: { voucher: Voucher }) => {
       this.loadVoucher(data.voucher);
@@ -105,7 +130,7 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     );
   }
 
-  displayEmployeeName(employee?: Employee): string | undefined {
+  displayFn(employee?: Employee): string | undefined {
     return employee ? employee.name : undefined;
   }
 
@@ -127,13 +152,13 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     const daysWorked = +formValue.daysWorked;
     const date = this.form.get('date').value;
     const daysInMonth = moment(date).daysInMonth();
-    const esi = this.getEsi(grossSalary, daysWorked, daysInMonth);
-    const pf = this.getPf(grossSalary, daysWorked, daysInMonth);
+    const esi = EmployeeBenefitsComponent.getEsi(grossSalary, daysWorked, daysInMonth);
+    const pf = EmployeeBenefitsComponent.getPf(grossSalary, daysWorked, daysInMonth);
 
     this.voucher.employeeBenefits.push({
       employee: this.employee,
-      grossSalary: grossSalary,
-      daysWorked: daysWorked,
+      grossSalary,
+      daysWorked,
       esiEmployee: esi.ee,
       pfEmployee: pf.ee,
       esiEmployer: esi.er,
@@ -160,47 +185,17 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     this.benefitsObservable.next(this.voucher.employeeBenefits);
   }
 
-  getEsi(grossSalary, daysWorked, daysInMonth) {
-    const limit = 21000,
-      employeeRate = 0.0175,
-      employerRate = 0.0475,
-      employee =
-        grossSalary > limit
-          ? 0
-          : Math.ceil((employeeRate * grossSalary * daysWorked) / daysInMonth),
-      employer =
-        grossSalary > limit
-          ? 0
-          : Math.ceil((employerRate * grossSalary * daysWorked) / daysInMonth);
-    return { ee: employee, er: employer, both: employee + employer };
-  }
-
-  getPf(grossSalary, daysWorked, daysInMonth) {
-    const limit = 15000,
-      employeeRate = 0.12,
-      employerRate = 0.12 + 0.011 + 0.005 + 0.0001,
-      employee =
-        grossSalary > limit
-          ? 0
-          : Math.ceil((employeeRate * grossSalary * daysWorked) / daysInMonth),
-      employer =
-        grossSalary > limit
-          ? 0
-          : Math.ceil((employerRate * grossSalary * daysWorked) / daysInMonth);
-    return { ee: employee, er: employer, both: employee + employer };
-  }
-
   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() {
@@ -240,7 +235,7 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
 
   delete() {
     this.ser.delete(this.voucher.id).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
         this.router.navigate(['/employee-benefits'], { replaceUrl: true });
       },