Updated to angular 10

Moved to eslint for linting
Added prettier for formatting
Fixed minor errors

bookie/src/app/auth/login/login.component.html

@@ -19,7 +19,7 @@
         </mat-form-field>
       </div>
       <mat-divider></mat-divider>
-      <h2 *ngIf="showOtp">Client ID: {{clientID}}</h2>
+      <h2 *ngIf="showOtp">Client ID: {{clientId}}</h2>
       <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" *ngIf="showOtp">
         <mat-form-field fxFlex>
           <mat-label>Otp</mat-label>

bookie/src/app/core/http-auth-interceptor.ts

@@ -1,51 +1,61 @@
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
 import { Observable, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Injectable } from '@angular/core';
-import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
-import { Router } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
+
 import { AuthService } from '../auth/auth.service';
-import { ToasterService } from './toaster.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
 
+import { ToasterService } from './toaster.service';
+
 @Injectable()
 export class ErrorInterceptor implements HttpInterceptor {
-  constructor(private authService: AuthService, private router: Router, private dialog: MatDialog, private toaster: ToasterService) {
-  }
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private dialog: MatDialog,
+    private toaster: ToasterService,
+  ) {}
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    return next.handle(request).pipe(catchError(err => {
-      // We don't want to refresh token for some requests like login or refresh token itself
-      // So we verify url and we throw an error if it's the case
-      if (request.url.includes('/refresh') || request.url.includes('/token')) {
-        // We do another check to see if refresh token failed
-        // In this case we want to logout user and to redirect it to login page
-        if (request.url.includes('/refresh')) {
-          this.authService.logout();
+    return next.handle(request).pipe(
+      catchError((err) => {
+        // We don't want to refresh token for some requests like login or refresh token itself
+        // So we verify url and we throw an error if it's the case
+        if (request.url.includes('/refresh') || request.url.includes('/token')) {
+          // We do another check to see if refresh token failed
+          // In this case we want to logout user and to redirect it to login page
+          if (request.url.includes('/refresh')) {
+            this.authService.logout();
+          }
+          return throwError(err);
         }
+        // If error status is different than 401 we want to skip refresh token
+        // So we check that and throw the error if it's the case
+        if (err.status !== 401) {
+          const error = err.error.message || err.error.detail || err.statusText;
+          return throwError(error);
+        }
+        // auto logout if 401 response returned from api
+        this.authService.logout();
+        this.toaster.show('Danger', 'User has been logged out');
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+          width: '250px',
+          data: {
+            title: 'Logged out!',
+            content:
+              'You have been logged out.\nYou can press Cancel to stay on page and login in another tab to resume here, or you can press Ok to navigate to the login page.',
+          },
+        });
+        dialogRef.afterClosed().subscribe((result: boolean) => {
+          if (result) {
+            this.router.navigate(['login']);
+          }
+        });
         return throwError(err);
-      }
-      // If error status is different than 401 we want to skip refresh token
-      // So we check that and throw the error if it's the case
-      if (err.status !== 401) {
-        const error = err.error.message || err.error.detail || err.statusText;
-        return throwError(error);
-      }
-      // auto logout if 401 response returned from api
-      this.authService.logout();
-      this.toaster.show('Danger', 'User has been logged out');
-      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-        width: '250px',
-        data: {
-          title: 'Logged out!',
-          content: 'You have been logged out.\nYou can press Cancel to stay on page and login in another tab to resume here, or you can press Ok to navigate to the login page.'
-        }
-      });
-      dialogRef.afterClosed().subscribe((result: boolean) => {
-        if (result) {
-          this.router.navigate(['login']);
-        }
-      });
-    }));
+      }),
+    );
   }
 }

bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts

@@ -54,7 +54,7 @@ export class MenuCategoryListComponent implements OnInit {
       );
   }
 
-  dropTable(event: CdkDragDrop<MenuCategory[]>) {
+  dropTable(event: CdkDragDrop<MenuCategoryListDatasource>) {
     const prevIndex = this.list.indexOf(event.item.data);
     moveItemInArray(this.list, prevIndex, event.currentIndex);
     this.data.next(this.list);

bookie/src/app/product/product-list/product-list.component.ts

@@ -72,7 +72,7 @@ export class ProductListComponent implements OnInit {
       );
   }
 
-  dropTable(event: CdkDragDrop<Product[]>) {
+  dropTable(event: CdkDragDrop<ProductListDataSource>) {
     const prevIndex = this.list.indexOf(event.item.data);
     moveItemInArray(this.list, prevIndex, event.currentIndex);
     this.data.next(this.list);

bookie/src/app/sales/bills/bills.component.ts

@@ -31,7 +31,7 @@ export class BillsComponent implements OnInit {
     private dialog: MatDialog,
     private toaster: ToasterService,
     private auth: AuthService,
-    private bs: BillService,
+    public bs: BillService,
     private tSer: TableService
   ) {
   }

bookie/src/app/sales/reason/reason.component.html

@@ -9,7 +9,7 @@
           <mat-form-field fxFlex>
             <mat-label>Reason</mat-label>
             <input type="text" matInput #son placeholder="Reason" formControlName="son" autocomplete="off"
-                   (focus)="select($event.target.value) && son.select()" (input)="select($event.target.value)">
+                   (focus)="select(son.value) && son.select()" (input)="select(son.value)">
           </mat-form-field>
         </mat-footer-cell>
       </ng-container>

bookie/src/app/section-printers/section-printer.component.html

@@ -45,7 +45,7 @@
         <ng-container matColumnDef="copies">
           <mat-header-cell *matHeaderCellDef>Copies</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" fxFlex>
-          <mat-form-field *ngIf="!!form.get('menuCategories').at(i).value.printer">
+          <mat-form-field *ngIf="!!$any(form.get('menuCategories')).at(i).value.printer">
             <mat-label>Copies</mat-label>
             <input matInput type="number" placeholder="Copies" formControlName="copies">
           </mat-form-field>

bookie/src/app/tables/table-list/table-list.component.ts

@@ -54,7 +54,7 @@ export class TableListComponent implements OnInit {
       );
   }
 
-  dropTable(event: CdkDragDrop<MenuCategory[]>) {
+  dropTable(event: CdkDragDrop<TableListDataSource>) {
     const prevIndex = this.list.indexOf(event.item.data);
     moveItemInArray(this.list, prevIndex, event.currentIndex);
     this.data.next(this.list);