Save Bill Works

bookie/src/app/app.module.ts

@@ -1,5 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import enIN from '@angular/common/locales/en-IN';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -18,9 +20,11 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { LogoutComponent } from './auth/logout/logout.component';
 import { LoginComponent } from './auth/login/login.component';
 import { HomeComponent } from './home/home.component';
-import {CoreModule} from './core/core.module';
-import {ReactiveFormsModule} from '@angular/forms';
-import {SharedModule} from './shared/shared.module';
+import { CoreModule } from './core/core.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from './shared/shared.module';
+
+registerLocaleData(enIN);
 
 @NgModule({
   declarations: [
@@ -48,7 +52,9 @@ import {SharedModule} from './shared/shared.module';
     CoreModule,
     SharedModule
   ],
-  providers: [],
+  providers: [
+    {provide: LOCALE_ID, useValue: 'en-IN'},
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -25,7 +25,9 @@ export class HttpAuthInterceptor implements HttpInterceptor {
                 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.'
+                  content: 'You have been logged out.\n' +
+                    'You 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) => {

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts

@@ -77,7 +77,7 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
     this.item.company = formModel.company;
     this.item.name = formModel.name;
     this.item.phone = formModel.phone;
-    this.item.pax = parseInt(formModel.pax);
+    this.item.pax = parseInt(formModel.pax, 10);
     this.item.address = formModel.address;
     return this.item;
   }

bookie/src/app/menu-category/menu-categories.module.ts

@@ -1,7 +1,7 @@
 import { NgModule} from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { MenuCategoryListComponent}  from './menu-category-list/menu-category-list.component';
+import { MenuCategoryListComponent } from './menu-category-list/menu-category-list.component';
 import { MenuCategoryDetailComponent } from './menu-category-detail/menu-category-detail.component';
 import { MenuCategoriesRoutingModule } from './menu-categories-routing.module';
 import { MatButtonModule } from '@angular/material/button';

bookie/src/app/sale-category/sale-categories.module.ts

@@ -1,7 +1,7 @@
 import { NgModule} from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { SaleCategoryListComponent}  from './sale-category-list/sale-category-list.component';
+import { SaleCategoryListComponent } from './sale-category-list/sale-category-list.component';
 import { SaleCategoryDetailComponent } from './sale-category-detail/sale-category-detail.component';
 import { SaleCategoriesRoutingModule } from './sale-categories-routing.module';
 import { MatButtonModule } from '@angular/material/button';

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

@@ -1,49 +1,78 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material';
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject } from 'rxjs';
 import { Product } from '../core/product';
 import { ModifiersComponent } from './modifiers/modifiers.component';
 import { ModifierCategoryService } from '../modifier-categories/modifier-category.service';
-import { ModifierCategory } from "../core/modifier-category";
+import { ModifierCategory } from '../core/modifier-category';
+import { Bill, Inventory, Kot, PrintType } from './bills/bill';
+import {VoucherService} from './bills/voucher.service';
 
 @Injectable()
 export class BillService {
   public dataObs;
   public data;
+  private bill;
 
   constructor(
     private dialog: MatDialog,
+    private ser: VoucherService,
     private modifierCategoryService: ModifierCategoryService
   ) {
     this.data = [];
     this.dataObs = new BehaviorSubject<any[]>(this.data);
   }
 
-  loadData(d: any): void {
-    console.log("data loaded");
-    this.data = d;
-    this.data.push({isKot: true, newKot: true, info: "== New Kot =="})
+  loadData(bill: Bill): void {
+    this.bill = bill;
+    const view = this.bill.kots.map(k => {
+      return [{
+        isKot: true,
+        info: `Kot: ${k.code} / ${k.date} (${k.user.name}) `
+      }, ...k.inventories.map(i => {
+        return {
+          id: i.id,
+          isKot: false,
+          product: i.product,
+          productId: i.product.id,
+          isHappyHour: i.isHappyHour,
+          isPrinted: true,
+          info: `${i.product.name} (${i.product.units}) @ ${i.price}`,
+          quantity: i.quantity,
+          discount: i.discount,
+          taxRate: i.taxRate,
+          tax: i.tax,
+          modifiers: i.modifiers
+        };
+      })];
+    });
+    this.data = view.reduce((a, c) => a.concat(c) , []);
+    this.data.push({isKot: true, newKot: true, info: '== New Kot =='});
     this.dataObs.next(this.data);
 
   }
   addProduct(product: Product): void {
-    let old = this.data.find(x=> !x.isKot && x.productId == product.id && x.isHappyHour == product.hasHappyHour);
+    const old = this.data.find(x => !x.isKot && x.productId === product.id && x.isHappyHour === product.hasHappyHour);
     if (old !== undefined) {
       old.quantity += 1;
     } else {
-      let item = {
+      const item = {
         isKot: false,
         product: product,
         productId: product.id,
         isHappyHour: product.hasHappyHour,
         info: `${product.name} (${product.units}) @ ${product.price}`,
+        price: product.price,
         quantity: 1,
+        discount: 0,
+        taxRate: product.saleCategory.tax.rate,
+        tax: product.saleCategory.tax,
         modifiers: []
       };
       this.data.push(item);
       this.modifierCategoryService.listIsActiveOfProduct(product.id).subscribe(result => {
         if (result.reduce((a: any, c: ModifierCategory) => {
-          return a + c.minimum
+          return a + c.minimum;
         }, 0)) {
           this.showModifier(item);
         }
@@ -76,8 +105,9 @@ export class BillService {
     this.dataObs.next(this.data);
   }
 
-  quantity(item: any): void {
-
+  quantity(item: any, quantity: number): void {
+    item.quantity = quantity;
+    this.dataObs.next(this.data);
   }
 
   subtractOne(item: any): void {
@@ -98,4 +128,28 @@ export class BillService {
     this.showModifier(item);
   }
 
+  printKot(guest_book_id: string): void {
+    const nk = new Kot({
+      inventories: this.data.filter(x => !x.isKot && !x.isPrinted).map(y => new Inventory({
+        product: y.product,
+        quantity: y.quantity,
+        price: y.price,
+        isHappyHour: y.isHappyHour,
+        discount: y.discount,
+        modifiers: y.modifiers,
+        taxRate: y.taxRate,
+        tax: y.tax
+      }))
+    });
+    let item = JSON.parse(JSON.stringify(this.bill))
+    item.kots.push(nk);
+    this.ser.saveOrUpdate(item, PrintType.Kot, guest_book_id, true).subscribe(x =>
+      console.log(x)
+    );
+  }
+
+  printBill(): boolean {
+    return false;
+  }
+
 }

bookie/src/app/sales/bills/bill-resolver.service.ts

@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
-import { VoucherService } from "./voucher.service";
-import { Bill } from "./bill";
+import { VoucherService } from './voucher.service';
+import { Bill } from './bill';
 
 @Injectable({
   providedIn: 'root'
 })
 export class BillResolver implements Resolve<Bill> {
 
-  constructor(private ser: VoucherService, private router: Router) {
+  constructor(private ser: VoucherService) {
   }
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Bill> {

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

@@ -7,7 +7,6 @@ import {Modifier} from '../../core/modifier';
 
 export class Inventory {
   id: string;
-  sortOrder: number;
   product: Product;
   quantity: number;
   price: number;
@@ -16,14 +15,23 @@ export class Inventory {
   tax: Tax;
   discount: number;
   modifiers: Modifier[];
+  sortOrder: number;
+
+  public constructor(init?: Partial<Inventory>) {
+    Object.assign(this, init);
+  }
 }
 
 export class Kot {
   id: string;
-  serial: number;
+  code: number;
   date: string;
   user: User;
   inventories: Inventory[];
+
+  public constructor(init?: Partial<Kot>) {
+    Object.assign(this, init);
+  }
 }
 
 export class Bill {
@@ -43,4 +51,16 @@ export class Bill {
   serial: number;
   kots: Kot[];
   reprints: any[];
+
+  public constructor(init?: Partial<Bill>) {
+    Object.assign(this, init);
+  }
 }
+
+export enum PrintType {
+  Kot = 'KOT',
+  Bill = 'BILL',
+  NoCharge = 'NO_CHARGE',
+  Staff = 'STAFF'
+}
+

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

@@ -1,12 +1,10 @@
 .kot {
-  background-color: hotpink;
+  background-color: lightblue;
 }
+
 .printed {
   background-color: lightpink;
 }
-.new-kot {
-  background-color: lightblue;
-}
 
 .square-button {
   min-width: 150px;

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

@@ -6,7 +6,7 @@
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">
       <!-- Info Column -->
       <ng-container matColumnDef="info">
-        <mat-cell *matCellDef="let row" fxLayout="column" fxLayoutAlign="start space-between end">
+        <mat-cell *matCellDef="let row" fxLayout="column" fxLayoutAlign="start">
           <span>
             {{row.info}}
           </span>
@@ -18,7 +18,7 @@
       <!-- Quantity Column -->
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row">
+        <mat-cell *matCellDef="let row" fxLayoutAlign="end">
           <button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
             <mat-icon class="del">indeterminate_check_box</mat-icon>
           </button>
@@ -38,8 +38,7 @@
       </ng-container>
 
 
-      <mat-row *matRowDef="let row; columns: displayedColumns;" [class.kot]="row.isKot" [class.new-kot]="row.newKot"
-               [class.printed]="row.isPrinted"></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns;" [class.kot]="row.isKot"[class.printed]="row.isPrinted"></mat-row>
     </mat-table>
   </mat-card-content>
 </mat-card>

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

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import {Bill, Inventory, Kot} from './bill';
-import {BillsDataSource} from './bills-datasource';
-import {BillService} from "../bill.service";
+import { Bill } from './bill';
+import { BillsDataSource } from './bills-datasource';
+import { BillService } from '../bill.service';
+import { QuantityComponent } from '../quantity/quantity.component';
+import { MatDialog } from '@angular/material';
 
 @Component({
   selector: 'app-bills',
@@ -17,40 +19,18 @@ export class BillsComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
+    private dialog: MatDialog,
     private bs: BillService
   ) {
   }
 
   ngOnInit() {
-    console.log("ds set")
-    this.dataSource = new BillsDataSource(this.bs.dataObs);
     this.route.data
       .subscribe((data: { item: Bill }) => {
-        this.updateView(data.item);
+        this.item = data.item;
+        this.bs.loadData(data.item);
       });
-  }
-
-  updateView(item) {
-    this.item = item;
-    let view = item.kots.map(k => {
-      return [{
-        isKot: true,
-      }, ...k.inventories.map(i => {
-        return {
-          id: i.id,
-          isKot: false,
-          product: i.product,
-          productId: i.product.id,
-          isHappyHour: i.isHappyHour,
-          isPrinted: true,
-          info: `${i.product.name} (${i.product.units}) @ ${i.price}`,
-          quantity: 1,
-          modifiers: i.modifiers
-        }
-      })]
-    });
-    view = view.reduce((a, c) => {return a.concat(c)} , []);
-    this.bs.loadData(view);
+    this.dataSource = new BillsDataSource(this.bs.dataObs);
   }
 
   addOne(item: any): void {
@@ -58,7 +38,17 @@ export class BillsComponent implements OnInit {
   }
 
   quantity(item: any): void {
-    this.bs.quantity(item);
+    const dialogRef = this.dialog.open(QuantityComponent, {
+      // width: '750px',
+      data: item.quantity
+    });
+
+    dialogRef.afterClosed().subscribe((result: boolean | number) => {
+      if (!result) {
+        return;
+      }
+      this.bs.quantity(item, result as number);
+    });
   }
 
   subtractOne(item: any): void {

bookie/src/app/sales/bills/voucher.service.ts

@@ -3,7 +3,7 @@ import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { ErrorLoggerService } from '../../core/error-logger.service';
-import {Bill} from "./bill";
+import { Bill, PrintType } from './bill';
 
 const httpOptions = {
   headers: new HttpHeaders({'Content-Type': 'application/json'})
@@ -46,25 +46,33 @@ export class VoucherService {
       );
   }
 
-  save(voucher: Bill): Observable<Bill> {
-    return <Observable<Bill>>this.http.post<Bill>(`${url}/new`, voucher, httpOptions)
+  save(voucher: Bill, printType: PrintType, guest_book_id: string, updateTable: boolean): Observable<Bill> {
+  const options = {params: new HttpParams().set('p', printType).set('u', updateTable.toString())};
+  if (guest_book_id !== null) {
+    options.params = options.params.set('g', guest_book_id)
+  }
+  return <Observable<Bill>>this.http.post<Bill>(`${url}/new`, voucher, options)
       .pipe(
         catchError(this.log.handleError(serviceName, 'save'))
       );
   }
 
-  update(voucher: Bill): Observable<Bill> {
-    return <Observable<Bill>>this.http.put<Bill>(`${url}/${voucher.id}`, voucher, httpOptions)
+  update(voucher: Bill, printType: PrintType, guest_book_id: string, updateTable: boolean): Observable<Bill> {
+  const options = {params: new HttpParams().set('p', printType).set('u', updateTable.toString())};
+  if (guest_book_id !== null) {
+    options.params = options.params.set('g', guest_book_id)
+  }
+    return <Observable<Bill>>this.http.put<Bill>(`${url}/${voucher.id}`, voucher, options)
       .pipe(
         catchError(this.log.handleError(serviceName, 'update'))
       );
   }
 
-  saveOrUpdate(voucher: Bill): Observable<Bill> {
+  saveOrUpdate(voucher: Bill, printType: PrintType, guest_book_id: string, updateTable: boolean): Observable<Bill> {
     if (!voucher.id) {
-      return this.save(voucher);
+      return this.save(voucher, printType, guest_book_id, updateTable);
     } else {
-      return this.update(voucher);
+      return this.update(voucher, printType, guest_book_id, updateTable);
     }
   }
 }

bookie/src/app/sales/home/sales-home.component.css

@@ -2,4 +2,19 @@
   min-width: 150px;
   max-width: 150px;
   min-height: 150px;
+  max-height: 150px;
+  cursor: pointer;
+  margin: 20px;
+}
+.item-name {
+  text-align: center;
+  padding: 0.5rem;
+}
+
+.center {
+  text-align: center;
+}
+
+.warn {
+  background-color: red;
 }

bookie/src/app/sales/home/sales-home.component.html

@@ -1,5 +1,18 @@
-<button mat-raised-button class="square-button" [routerLink]="['menu-categories']">Add Product</button>
-<button mat-raised-button class="square-button" [routerLink]="['menu-categories']">Print KOT</button>
-<button mat-raised-button class="square-button" [routerLink]="['menu-categories']">Print Bill</button>
-<button mat-raised-button class="square-button" [routerLink]="['menu-categories']">Back to Tables</button>
-<button mat-raised-button class="square-button" [routerLink]="['menu-categories']">Receive Payment</button>
+<div fxLayout="row wrap" fxLayoutGap="grid 20px">
+  <mat-card fxLayout="column" class="square-button" matRipple [routerLink]="['menu-categories']"
+            queryParamsHandling="preserve">
+    <h3 class="item-name">Add Product</h3>
+  </mat-card>
+  <mat-card fxLayout="column" class="square-button" matRipple (click)="printKot()">
+    <h3 class="item-name">Print KOT</h3>
+  </mat-card>
+  <mat-card fxLayout="column" class="square-button" matRipple (click)="printBill()">
+    <h3 class="item-name">Print Bill</h3>
+  </mat-card>
+  <mat-card fxLayout="column" class="square-button warn" matRipple [routerLink]="['../../tables']">
+    <h3 class="item-name">Back to Tables</h3>
+  </mat-card>
+  <mat-card fxLayout="column" class="square-button" matRipple [routerLink]="['../../tables']">
+    <h3 class="item-name">Receive Payment</h3>
+  </mat-card>
+</div>

bookie/src/app/sales/home/sales-home.component.ts

@@ -1,6 +1,8 @@
-import {Component, OnInit} from '@angular/core';
-import {Subject} from 'rxjs';
-import {AuthService} from '../../auth/auth.service';
+import { Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AuthService } from '../../auth/auth.service';
+import { BillService } from '../bill.service';
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
   selector: 'app-sales-home',
@@ -10,7 +12,7 @@ import {AuthService} from '../../auth/auth.service';
 export class SalesHomeComponent implements OnInit {
   public nameObject = new Subject<string>();
 
-  constructor(private auth: AuthService) {
+  constructor(private route: ActivatedRoute, private auth: AuthService, private bs: BillService) {
   }
 
   ngOnInit() {
@@ -22,4 +24,16 @@ export class SalesHomeComponent implements OnInit {
       }
     });
   }
+
+  printKot() {
+    let guestBookId = null;
+    if (this.route.snapshot.queryParamMap.has("guest")) {
+      guestBookId = this.route.snapshot.queryParamMap.get("guest");
+    }
+    this.bs.printKot(guestBookId);
+  }
+
+  printBill() {
+    this.bs.printBill();
+  }
 }

bookie/src/app/sales/menu-categories/menu-categories.component.css

@@ -2,4 +2,19 @@
   min-width: 150px;
   max-width: 150px;
   min-height: 150px;
+  max-height: 150px;
+  cursor: pointer;
+  margin: 20px;
+}
+.item-name {
+  text-align: center;
+  padding: 0.5rem;
+}
+
+.center {
+  text-align: center;
+}
+
+.warn {
+  background-color: red;
 }

bookie/src/app/sales/menu-categories/menu-categories.component.html

@@ -1,7 +1,12 @@
 <mat-card>
   <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
-    <button mat-raised-button class="square-button"
-       *ngFor="let item of list" [routerLink]="['../products', item.id]">{{item.name}}</button>
-    <button mat-raised-button class="square-button" color="warn" (click)="goBack()">Back</button>
+    <mat-card fxLayout="column" class="square-button" matRipple *ngFor="let item of list"
+              [routerLink]="['../products', item.id]" queryParamsHandling="preserve">
+      <h3 class="item-name">{{item.name}}</h3>
+    </mat-card>
+    <mat-card fxLayout="column" class="square-button warn" matRipple [routerLink]="['../']"
+              queryParamsHandling="preserve">
+      <h3 class="item-name">Back</h3>
+    </mat-card>
   </mat-card-content>
 </mat-card>

bookie/src/app/sales/menu-categories/menu-categories.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { MenuCategory } from '../../core/menu-category';
 
@@ -11,10 +10,7 @@ import { MenuCategory } from '../../core/menu-category';
 export class MenuCategoriesComponent implements OnInit {
   list: MenuCategory[];
 
-  constructor(
-    private route: ActivatedRoute,
-    private location: Location,
-  ) {
+  constructor(private route: ActivatedRoute) {
   }
 
   ngOnInit() {
@@ -24,8 +20,4 @@ export class MenuCategoriesComponent implements OnInit {
       });
   }
 
-  goBack(): void {
-    this.location.back();
-  }
-
 }

bookie/src/app/sales/modifiers/modifiers.component.css

@@ -2,4 +2,6 @@
   min-width: 150px;
   max-width: 150px;
   min-height: 150px;
+  cursor: pointer;
+  margin: 20px;
 }

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

@@ -23,7 +23,7 @@ export class ModifiersComponent {
   }
 
   select(m: Modifier) {
-    let index = this.selectedIds.indexOf(m.id);
+    const index = this.selectedIds.indexOf(m.id);
     if (index === -1) {
       this.selected.push(m);
     } else {

bookie/src/app/sales/products/products.component.css

@@ -2,4 +2,19 @@
   min-width: 150px;
   max-width: 150px;
   min-height: 150px;
+  max-height: 150px;
+  cursor: pointer;
+  margin: 20px;
+}
+.item-name {
+  text-align: center;
+  padding: 0.5rem;
+}
+
+.center {
+  text-align: center;
+}
+
+.warn {
+  background-color: red;
 }

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

@@ -1,7 +1,11 @@
 <mat-card>
   <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
-    <button mat-raised-button class="square-button"
-       *ngFor="let item of list" (click)="addProduct(item)">{{item.name}}</button>
-    <button mat-raised-button class="square-button" color="warn" (click)="goBack()">Back</button>
+    <mat-card fxLayout="column" class="square-button" matRipple *ngFor="let item of list" (click)="addProduct(item)">
+      <h3 class="item-name">{{item.name}}</h3>
+    </mat-card>
+    <mat-card fxLayout="column" class="square-button warn" matRipple [routerLink]="['../../menu-categories']"
+              queryParamsHandling="preserve">
+      <h3 class="item-name">Back</h3>
+    </mat-card>
   </mat-card-content>
 </mat-card>

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

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { Product } from '../../core/product';
 import { BillService } from '../bill.service';
@@ -12,11 +11,7 @@ import { BillService } from '../bill.service';
 export class ProductsComponent implements OnInit {
   list: Product[];
 
-  constructor(
-    private route: ActivatedRoute,
-    private location: Location,
-    private bs: BillService
-  ) {
+  constructor(private route: ActivatedRoute, private bs: BillService) {
   }
 
   ngOnInit() {
@@ -30,8 +25,4 @@ export class ProductsComponent implements OnInit {
     this.bs.addProduct(product);
   }
 
-  goBack(): void {
-    this.location.back();
-  }
-
 }

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

@@ -0,0 +1,17 @@
+<div mat-dialog-content>
+  <form [formGroup]="form">
+    <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
+         fxLayoutGap.lt-md="0px">
+      <mat-form-field fxFlex>
+        <mat-label>Quantity</mat-label>
+        <input type="text" matInput #quantity placeholder="Quantity" formControlName="quantity" autocomplete="off"
+               (focus)="quantity.select()" cdkFocusInitial>
+      </mat-form-field>
+    </div>
+  </form>
+</div>
+<div mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button (click)="accept()" color="primary">Ok</button>
+</div>
+

bookie/src/app/sales/quantity/quantity.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuantityComponent } from './quantity.component';
+
+describe('QuantityComponent', () => {
+  let component: QuantityComponent;
+  let fixture: ComponentFixture<QuantityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QuantityComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuantityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,37 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-quantity',
+  templateUrl: './quantity.component.html',
+  styleUrls: ['./quantity.component.css']
+})
+export class QuantityComponent implements OnInit {
+  form: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<QuantityComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: number,
+    private fb: FormBuilder,
+  ) {
+    this.createForm();
+  }
+
+  ngOnInit() {
+    this.form.setValue({
+      quantity: this.data
+    });
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      quantity: ''
+    });
+  }
+
+  accept(): void {
+    const quantity = this.form.value.quantity;
+    this.dialogRef.close(quantity);
+  }
+}

bookie/src/app/sales/running-tables/running-tables.component.css

@@ -11,6 +11,7 @@
   max-width: 150px;
   min-height: 150px;
   max-height: 150px;
+  cursor: pointer;
   margin: 20px;
 }
 .item-name {

bookie/src/app/sales/running-tables/running-tables.component.html

@@ -3,13 +3,15 @@
     <mat-card-title>Running Tables</mat-card-title>
   </mat-card-title-group>
   <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
-    <mat-card fxLayout="column" class="square-button"
-            *ngFor="let table of list" (click)="navigateToBill(table)"
-            [class.running]="table.status === 'running'" [class.printed]="table.status === 'printed'">
-          <h3 class="item-name">{{table.name}}</h3>
+    <mat-divider></mat-divider>
+    <mat-card fxLayout="column" class="square-button" matRipple
+              *ngFor="let table of list" (click)="navigateToBill(table)"
+              [class.running]="table.status === 'running'" [class.printed]="table.status === 'printed'">
+      <h3 class="item-name">{{table.name}}</h3>
+      <mat-card-subtitle class="center">{{table.guest}}</mat-card-subtitle>
       <span class="center">{{table.pax || 0}} / {{table.seats}} Seats</span>
       <span class="center" *ngIf="table.date">{{table.date}}</span>
-      <span class="center" *ngIf="table.amount">{{table.amount}}</span>
+      <span class="center" *ngIf="table.amount">{{table.amount | currency:'INR'}}</span>
     </mat-card>
   </mat-card-content>
 </mat-card>

bookie/src/app/sales/running-tables/running-tables.component.ts

@@ -21,11 +21,11 @@ export class RunningTablesComponent implements OnInit {
   }
 
   navigateToBill(table: Table): void {
-    let qp = {table: table.id};
+    const qp = {table: table.id};
     if (table.voucherId) {
-      qp["voucher"] = table.voucherId;
+      qp['voucher'] = table.voucherId;
     }
-    let navigationExtras: NavigationExtras = {
+    const navigationExtras: NavigationExtras = {
       queryParams: qp,
       queryParamsHandling: 'merge',
       preserveFragment: true

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

@@ -1,16 +1,21 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatRippleModule } from '@angular/material';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { SharedModule } from "../shared/shared.module";
 import { SalesRoutingModule } from './sales-routing.module';
 import { RunningTablesComponent } from './running-tables/running-tables.component';
 import { MenuCategoriesComponent } from './menu-categories/menu-categories.component';
@@ -19,6 +24,7 @@ import { ModifiersComponent } from './modifiers/modifiers.component';
 import { BillsComponent } from './bills/bills.component';
 import { SalesHomeComponent } from './home/sales-home.component';
 import { BillService } from './bill.service';
+import { QuantityComponent } from './quantity/quantity.component';
 
 @NgModule({
   providers: [
@@ -30,24 +36,31 @@ import { BillService } from './bill.service';
     ProductsComponent,
     ModifiersComponent,
     BillsComponent,
-    SalesHomeComponent
+    SalesHomeComponent,
+    QuantityComponent
   ],
   imports: [
     CommonModule,
     FlexLayoutModule,
+    ReactiveFormsModule,
     MatBadgeModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,
     MatChipsModule,
     MatDialogModule,
+    MatDividerModule,
     MatIconModule,
+    MatInputModule,
+    MatRippleModule,
     MatTableModule,
     MatTabsModule,
+    SharedModule,
     SalesRoutingModule
   ],
   entryComponents: [
-    ModifiersComponent
+    ModifiersComponent,
+    QuantityComponent
   ]
 })
 export class SalesModule { }

bookie/src/app/shared/accounting.pipe.ts

@@ -1,4 +1,4 @@
-import {Pipe, PipeTransform} from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
   name: 'accounting'

bookie/src/app/tables/table.service.ts

@@ -35,7 +35,7 @@ export class TableService {
   }
 
   running(): Observable<Table[]> {
-    const options = {params: new HttpParams().set('a', 'true')};
+    const options = {params: new HttpParams().set('r', '')};
     return <Observable<Table[]>>this.http.get<Table[]>(url, options)
       .pipe(
         catchError(this.log.handleError(serviceName, 'running'))

bookie/src/app/tables/tables.module.ts

@@ -13,7 +13,7 @@ import { MatTableModule } from '@angular/material/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { TableListComponent }  from './table-list/table-list.component';
+import { TableListComponent } from './table-list/table-list.component';
 import { TableDetailComponent } from './table-detail/table-detail.component';
 import { TableRoutingModule } from './tables-routing.module';