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-attendance/employee-attendance-datasource.ts

@@ -1,6 +1,7 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
-import { EmployeeAttendanceItem } from './employee-attendance';
+
+import { EmployeeAttendanceItem } from './employee-attendance-item';
 
 export class EmployeeAttendanceDataSource extends DataSource<EmployeeAttendanceItem> {
   constructor(private data: Observable<EmployeeAttendanceItem[]>) {

overlord/src/app/employee-attendance/employee-attendance-item.ts

@@ -0,0 +1,13 @@
+import { AttendanceType } from '../attendance/attendance-type';
+
+export class EmployeeAttendanceItem {
+  date: string;
+  attendanceType: AttendanceType;
+  prints: string;
+  hoursWorked: string;
+  fullDay?: boolean;
+
+  public constructor(init?: Partial<EmployeeAttendanceItem>) {
+    Object.assign(this, init);
+  }
+}

overlord/src/app/employee-attendance/employee-attendance-resolver.service.ts

@@ -1,8 +1,9 @@
 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 { EmployeeAttendanceService } from './employee-attendance.service';
+
 import { EmployeeAttendance } from './employee-attendance';
+import { EmployeeAttendanceService } from './employee-attendance.service';
 
 @Injectable({
   providedIn: 'root',
@@ -10,10 +11,7 @@ import { EmployeeAttendance } from './employee-attendance';
 export class EmployeeAttendanceResolver implements Resolve<EmployeeAttendance> {
   constructor(private ser: EmployeeAttendanceService) {}
 
-  resolve(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot,
-  ): Observable<EmployeeAttendance> {
+  resolve(route: ActivatedRouteSnapshot): Observable<EmployeeAttendance> {
     const id = route.paramMap.get('id');
     const startDate = route.queryParamMap.get('startDate') || null;
     const finishDate = route.queryParamMap.get('finishDate') || null;

overlord/src/app/employee-attendance/employee-attendance-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 { EmployeeAttendanceResolver } from './employee-attendance-resolver.service';
-import { AuthGuard } from '../auth/auth-guard.service';
-import { EmployeeAttendanceComponent } from './employee-attendance.component';
+
 import { AttendanceTypeResolver } from '../attendance/attendance-type-resolver.service';
+import { AuthGuard } from '../auth/auth-guard.service';
+
+import { EmployeeAttendanceResolver } from './employee-attendance-resolver.service';
+import { EmployeeAttendanceComponent } from './employee-attendance.component';
 
 const employeeEmployeeAttendanceRoutes: Routes = [
   {

overlord/src/app/employee-attendance/employee-attendance.component.html

@@ -90,7 +90,7 @@
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{ row.prints }}
-            <mat-icon *ngIf="!form.controls.attendances.controls[i].pristine"
+            <mat-icon *ngIf="!$any(form.controls.attendances).controls[i].pristine"
               >new_releases</mat-icon
             >
             <mat-chip-list class="no-bg">

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -3,17 +3,20 @@ import { FormArray, 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 { EmployeeAttendanceDataSource } from './employee-attendance-datasource';
 import * as moment from 'moment';
+import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+
+import { AttendanceType } from '../attendance/attendance-type';
 import { AuthService } from '../auth/auth.service';
 import { ToasterService } from '../core/toaster.service';
-import { EmployeeAttendanceService } from './employee-attendance.service';
-import { EmployeeAttendance, EmployeeAttendanceItem } from './employee-attendance';
-import { EmployeeService } from '../employee/employee.service';
 import { Employee } from '../employee/employee';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
-import { AttendanceType } from '../attendance/attendance-type';
+import { EmployeeService } from '../employee/employee.service';
+
+import { EmployeeAttendance } from './employee-attendance';
+import { EmployeeAttendanceDataSource } from './employee-attendance-datasource';
+import { EmployeeAttendanceItem } from './employee-attendance-item';
+import { EmployeeAttendanceService } from './employee-attendance.service';
 
 @Component({
   selector: 'app-employee-attendance',
@@ -107,7 +110,7 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
   getClass(index: number) {
     const array = this.form.get('attendances') as FormArray;
     const id = array.controls[index].value.attendanceType;
-    const name: string = this.attendanceTypes.filter((x) => x.id === id)[0].name;
+    const { name } = this.attendanceTypes.filter((x) => x.id === id)[0];
     return name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
   }
 
@@ -125,7 +128,7 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
 
   save() {
     this.ser.save(this.getEmployeeAttendance()).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
       },
       (error) => {

overlord/src/app/employee-attendance/employee-attendance.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';
@@ -21,14 +26,11 @@ 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 { SharedModule } from '../shared/shared.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { CdkTableModule } from '@angular/cdk/table';
+
 import { EmployeeAttendanceRoutingModule } from './employee-attendance-routing.module';
 import { EmployeeAttendanceComponent } from './employee-attendance.component';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { A11yModule } from '@angular/cdk/a11y';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 export const MY_FORMATS = {
   parse: {

overlord/src/app/employee-attendance/employee-attendance.service.ts

@@ -1,10 +1,12 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { EmployeeAttendance } from './employee-attendance';
+
 import { ErrorLoggerService } from '../core/error-logger.service';
 
+import { EmployeeAttendance } from './employee-attendance';
+
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
 };
@@ -33,7 +35,7 @@ export class EmployeeAttendanceService {
   }
 
   save(employeeAttendance: EmployeeAttendance): Observable<EmployeeAttendance> {
-    const id = employeeAttendance.employee.id;
+    const { id } = employeeAttendance.employee;
     return <Observable<EmployeeAttendance>>(
       this.http
         .post<EmployeeAttendance>(`${url}/${id}`, employeeAttendance, httpOptions)

overlord/src/app/employee-attendance/employee-attendance.ts

@@ -1,5 +1,6 @@
 import { Employee } from '../employee/employee';
-import { AttendanceType } from '../attendance/attendance-type';
+
+import { EmployeeAttendanceItem } from './employee-attendance-item';
 
 export class EmployeeAttendance {
   startDate: string;
@@ -11,15 +12,3 @@ export class EmployeeAttendance {
     Object.assign(this, init);
   }
 }
-
-export class EmployeeAttendanceItem {
-  date: string;
-  attendanceType: AttendanceType;
-  prints: string;
-  hoursWorked: string;
-  fullDay?: boolean;
-
-  public constructor(init?: Partial<EmployeeAttendanceItem>) {
-    Object.assign(this, init);
-  }
-}