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/settings/lock-information-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 { SettingsService } from './settings.service';
 
 @Injectable({
@@ -9,7 +10,7 @@ import { SettingsService } from './settings.service';
 export class LockInformationResolver implements Resolve<any> {
   constructor(private ser: SettingsService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
+  resolve(): Observable<any> {
     return this.ser.getLockInformation();
   }
 }

overlord/src/app/settings/maintenance-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 { SettingsService } from './settings.service';
 
 @Injectable({
@@ -9,7 +10,7 @@ import { SettingsService } from './settings.service';
 export class MaintenanceResolver implements Resolve<any> {
   constructor(private ser: SettingsService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
+  resolve(): Observable<any> {
     return this.ser.getMaintenance();
   }
 }

overlord/src/app/settings/settings-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 { AuthGuard } from '../auth/auth-guard.service';
-import { SettingsComponent } from './settings.component';
-import { MaintenanceResolver } from './maintenance-resolver.service';
+
 import { LockInformationResolver } from './lock-information-resolver.service';
+import { MaintenanceResolver } from './maintenance-resolver.service';
+import { SettingsComponent } from './settings.component';
 
 const settingsRoutes: Routes = [
   {

overlord/src/app/settings/settings.component.html

@@ -165,7 +165,7 @@
             <mat-autocomplete
               #auto="matAutocomplete"
               autoActiveFirstOption
-              [displayWith]="displayProduct"
+              [displayWith]="displayFn"
               (optionSelected)="selectedProduct($event)"
             >
               <mat-option *ngFor="let product of products | async" [value]="product">{{
@@ -218,8 +218,6 @@
     </mat-card>
   </mat-tab>
 </mat-tab-group>
-   <footer class="footer">
-      <p>
-        Backend: v{{ auth.user.ver }} / Frontend: v{{ version }}
-      </p>
-    </footer>
+<footer class="footer">
+  <p>Backend: v{{ auth.user.ver }} / Frontend: v{{ version }}</p>
+</footer>

overlord/src/app/settings/settings.component.ts

@@ -4,15 +4,17 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
-import { AuthService } from '../auth/auth.service';
-import { ToasterService } from '../core/toaster.service';
-import { SettingsService } from './settings.service';
-import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { Product } from '../core/product';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
 import { Observable, of as observableOf } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+
+import { environment } from '../../environments/environment';
+import { AuthService } from '../auth/auth.service';
+import { Product } from '../core/product';
+import { ToasterService } from '../core/toaster.service';
 import { ProductService } from '../product/product.service';
-import {environment} from '../../environments/environment';
+import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+
+import { SettingsService } from './settings.service';
 
 @Component({
   selector: 'app-settings',
@@ -39,7 +41,7 @@ export class SettingsComponent implements OnInit {
     private fb: FormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
-    private auth: AuthService,
+    public auth: AuthService,
     private ser: SettingsService,
     private productSer: ProductService,
   ) {
@@ -101,22 +103,24 @@ export class SettingsComponent implements OnInit {
   }
 
   listenToLockForm() {
-    this.lockDatesForm
-      .get('lockOlder')
-      .valueChanges.subscribe((x) => (this.lockInformation.lockOlder = x));
-    this.lockDatesForm
-      .get('lockNewer')
-      .valueChanges.subscribe((x) => (this.lockInformation.lockNewer = x));
-    this.lockDatesForm
-      .get('olderRolling')
-      .valueChanges.subscribe((x) => (this.lockInformation.olderRolling = x));
-    this.lockDatesForm
-      .get('newerRolling')
-      .valueChanges.subscribe((x) => (this.lockInformation.newerRolling = x));
+    this.lockDatesForm.get('lockOlder').valueChanges.subscribe((x) => {
+      this.lockInformation.lockOlder = x;
+    });
+    this.lockDatesForm.get('lockNewer').valueChanges.subscribe((x) => {
+      this.lockInformation.lockNewer = x;
+    });
+    this.lockDatesForm.get('olderRolling').valueChanges.subscribe((x) => {
+      this.lockInformation.olderRolling = x;
+    });
+    this.lockDatesForm.get('newerRolling').valueChanges.subscribe((x) => {
+      this.lockInformation.newerRolling = x;
+    });
   }
 
   clearLockDates() {
-    this.ser.deleteLockInformation().subscribe((x) => (this.lockInformation = x));
+    this.ser.deleteLockInformation().subscribe((x) => {
+      this.lockInformation = x;
+    });
   }
 
   setLockDates() {
@@ -153,10 +157,7 @@ export class SettingsComponent implements OnInit {
       width: '250px',
       data: {
         title: 'Rebase the database?',
-        content:
-          'Are you sure you want to rebase the database as on ' +
-          rebaseDate +
-          '? This action is destructive and cannot be undone.',
+        content: `Are you sure you want to rebase the database as on ${rebaseDate}? This action is destructive and cannot be undone.`,
       },
     });
 
@@ -189,7 +190,7 @@ export class SettingsComponent implements OnInit {
     );
   }
 
-  displayProduct(product?: Product): string | undefined {
+  displayFn(product?: Product): string | undefined {
     return product ? product.name : undefined;
   }
 
@@ -205,10 +206,7 @@ export class SettingsComponent implements OnInit {
       width: '250px',
       data: {
         title: 'Reset the stock of?',
-        content:
-          'Are you sure you want to reset the stock of ' +
-          this.product.name +
-          '? This action is destructive and cannot be undone.',
+        content: `Are you sure you want to reset the stock of ${this.product.name}? This action is destructive and cannot be undone.`,
       },
     });
 
@@ -221,7 +219,7 @@ export class SettingsComponent implements OnInit {
 
   resetStock(resetDate: string, stockDate: string, product: Product, quantity: number) {
     this.ser.resetStock(resetDate, stockDate, product, quantity).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', 'Stock has been reset!');
       },
       (error) => {
@@ -243,6 +241,8 @@ export class SettingsComponent implements OnInit {
   }
 
   toggleMaintenance() {
-    this.ser.setMaintenance(!this.maintenance.enabled).subscribe((x) => (this.maintenance = x));
+    this.ser.setMaintenance(!this.maintenance.enabled).subscribe((x) => {
+      this.maintenance = x;
+    });
   }
 }

overlord/src/app/settings/settings.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 { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import { ReactiveFormsModule } from '@angular/forms';
-import { CdkTableModule } from '@angular/cdk/table';
-import { A11yModule } from '@angular/cdk/a11y';
-import { FlexLayoutModule } from '@angular/flex-layout';
+
 import { SharedModule } from '../shared/shared.module';
-import { SettingsComponent } from './settings.component';
+
 import { SettingsRoutingModule } from './settings-routing.module';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { SettingsComponent } from './settings.component';
 
 export const MY_FORMATS = {
   parse: {

overlord/src/app/settings/settings.service.ts

@@ -1,14 +1,11 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { Product } from '../core/product';
 
-const httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-};
-
 const serviceName = 'SettingsService';
 
 @Injectable({ providedIn: 'root' })
@@ -20,7 +17,7 @@ export class SettingsService {
     return <Observable<any>>(
       this.http
         .get<any>(url)
-        .pipe(catchError(this.log.handleError(serviceName, `getLockInformation`)))
+        .pipe(catchError(this.log.handleError(serviceName, 'getLockInformation')))
     );
   }
 
@@ -29,7 +26,7 @@ export class SettingsService {
     return <Observable<any>>(
       this.http
         .post<any>(url, lockInformation)
-        .pipe(catchError(this.log.handleError(serviceName, `setLockInformation`)))
+        .pipe(catchError(this.log.handleError(serviceName, 'setLockInformation')))
     );
   }
 
@@ -38,7 +35,7 @@ export class SettingsService {
     return <Observable<any>>(
       this.http
         .delete<any>(url)
-        .pipe(catchError(this.log.handleError(serviceName, `deleteLockInformation`)))
+        .pipe(catchError(this.log.handleError(serviceName, 'deleteLockInformation')))
     );
   }
 
@@ -49,13 +46,9 @@ export class SettingsService {
     quantity: number,
   ): Observable<boolean> {
     const url = '/api/reset-stock';
-    return <Observable<any>>this.http
-      .post<any>(`${url}/${product.id}`, {
-        stockDate: stockDate,
-        resetDate: resetDate,
-        quantity: quantity,
-      })
-      .pipe(catchError(this.log.handleError(serviceName, `resetStock`)));
+    return this.http
+      .post<any>(`${url}/${product.id}`, { stockDate, resetDate, quantity })
+      .pipe(catchError(this.log.handleError(serviceName, 'resetStock')));
   }
 
   rebaseDatabase(date: string): Observable<boolean> {
@@ -63,21 +56,21 @@ export class SettingsService {
     return <Observable<any>>(
       this.http
         .post<any>(`${url}/${date}`, {})
-        .pipe(catchError(this.log.handleError(serviceName, `rebaseDatabase`)))
+        .pipe(catchError(this.log.handleError(serviceName, 'rebaseDatabase')))
     );
   }
 
   setMaintenance(enable: boolean): Observable<any> {
     const url = '/api/maintenance';
-    return <Observable<any>>this.http
+    return this.http
       .post<any>(url, { enabled: enable })
-      .pipe(catchError(this.log.handleError(serviceName, `setMaintenance`)));
+      .pipe(catchError(this.log.handleError(serviceName, 'setMaintenance')));
   }
 
   getMaintenance(): Observable<any> {
     const url = '/api/maintenance';
     return <Observable<any>>(
-      this.http.get<any>(url).pipe(catchError(this.log.handleError(serviceName, `getMaintenance`)))
+      this.http.get<any>(url).pipe(catchError(this.log.handleError(serviceName, 'getMaintenance')))
     );
   }
 
@@ -86,7 +79,7 @@ export class SettingsService {
     return <Observable<any>>(
       this.http
         .post<any>(url, {})
-        .pipe(catchError(this.log.handleError(serviceName, `checkDatabaseIntegrity`)))
+        .pipe(catchError(this.log.handleError(serviceName, 'checkDatabaseIntegrity')))
     );
   }
 }