Feature: Exit guard if bill is dirty is sales to prevent accidentally backing out of a bill with data.

bookie/src/app/sales/bill.service.ts

@@ -396,4 +396,9 @@ export class BillService {
     }
     return false;
   }
+
+  public isDirty(): boolean {
+    const newKot = this.bill.kots.find((k) => k.id === undefined) as Kot;
+    return newKot.inventories.length !== 0;
+  }
 }

bookie/src/app/sales/can-deactivate-bill.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CanDeactivateBillGuard } from './can-deactivate-bill.guard';
+
+describe('CanDeactivateBillGuard', () => {
+  let guard: CanDeactivateBillGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(CanDeactivateBillGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

bookie/src/app/sales/can-deactivate-bill.guard.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { CanDeactivate } from '@angular/router';
+import { Observable, of as observableOf } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+
+import { BillsComponent } from './bills/bills.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CanDeactivateBillGuard implements CanDeactivate<BillsComponent> {
+  constructor(private dialog: MatDialog) {}
+  canDeactivate(component: BillsComponent): Observable<boolean> | boolean {
+    if (!component.bs.isDirty()) {
+      return observableOf(true);
+    }
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '250px',
+      data: { title: 'Abandon Bill?', content: 'Current items will be lost.' },
+    });
+
+    return dialogRef.afterClosed().pipe(map((result: boolean) => result));
+  }
+}

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

@@ -28,7 +28,7 @@ export class PaxComponent implements OnInit {
   }
 
   accept(): void {
-    const { pax } = this.form.value;
+    const pax = +this.form.value.pax;
     this.dialogRef.close(pax);
   }
 }

bookie/src/app/sales/sales-routing.module.ts

@@ -6,6 +6,7 @@ import { AuthGuard } from '../auth/auth-guard.service';
 import { BillResolver } from './bills/bill-resolver.service';
 import { BillsComponent } from './bills/bills.component';
 import { UpdateTableResolver } from './bills/update-table-resolver.service';
+import { CanDeactivateBillGuard } from './can-deactivate-bill.guard';
 import { SalesHomeComponent } from './home/sales-home.component';
 import { MenuCategoriesResolver } from './menu-categories/menu-categories-resolver.service';
 import { MenuCategoriesComponent } from './menu-categories/menu-categories.component';
@@ -41,7 +42,7 @@ const routes: Routes = [
     path: 'bill',
     component: BillsComponent,
     canActivate: [AuthGuard],
-    // canDeactivate: [CanDeactivateGuard],
+    canDeactivate: [CanDeactivateBillGuard],
     data: {
       permission: 'Sales',
     },

bookie/src/app/sales/sales.module.ts

@@ -24,6 +24,7 @@ import { BillNumberComponent } from './bill-number/bill-number.component';
 import { BillTypeComponent } from './bill-type/bill-type.component';
 import { BillService } from './bill.service';
 import { BillsComponent } from './bills/bills.component';
+import { CanDeactivateBillGuard } from './can-deactivate-bill.guard';
 import { DiscountComponent } from './discount/discount.component';
 import { SalesHomeComponent } from './home/sales-home.component';
 import { MenuCategoriesComponent } from './menu-categories/menu-categories.component';
@@ -39,7 +40,7 @@ import { SplitBillComponent } from './split-bill/split-bill.component';
 import { TablesDialogComponent } from './tables-dialog/tables-dialog.component';
 
 @NgModule({
-  providers: [BillService],
+  providers: [BillService, CanDeactivateBillGuard],
   declarations: [
     BillsComponent,
     BillNumberComponent,