Bills initially working just as proof of concept

ng linted
modifier categories list is better at displaying data sanely now

barker/views/modifier_category.py

@@ -1,10 +1,11 @@
 import uuid
+from functools import reduce
 
 import transaction
 
 from pyramid.view import view_config
 
-from barker.models import ModifierCategory, Product
+from barker.models import ModifierCategory, Product, MenuCategory
 from barker.models.validation_exception import ValidationError
 
 
@@ -73,12 +74,12 @@ def update(request):
         item.maximum = json.get("maximum", None)
         if item.maximum is not None:
             item.maximum = int(item.maximum)
-        if item.maximum < 0:
-            raise ValidationError(
-                "Maximum must be an integer and cannot be less than zero"
-            )
-        elif item.maximum == 0:
-            item.maximum = None
+            if item.maximum < 0:
+                raise ValidationError(
+                    "Maximum must be an integer and cannot be less than zero"
+                )
+            elif item.maximum == 0:
+                item.maximum = None
     except ValueError:
         raise ValidationError("Maximum must be an integer and cannot be less than zero")
     item.is_active = json["isActive"]
@@ -139,18 +140,41 @@ def show_list(request):
         .order_by(ModifierCategory.name)
         .all()
     )
+    menu_categories = (
+        request.dbsession.query(MenuCategory)
+        .join(MenuCategory.products)
+        .filter(Product.is_active == True)
+        .order_by(MenuCategory.sort_order, Product.sort_order, Product.name)
+        .all()
+    )
     modifier_categories = []
     for item in list_:
-        modifier_categories.append(
-            {
-                "id": item.id,
-                "name": item.name,
-                "minimum": item.minimum,
-                "maximum": item.maximum,
-                "isActive": item.is_active,
-                "products": [p.name for p in item.products],
-            }
-        )
+        modifier_category = {
+            "id": item.id,
+            "name": item.name,
+            "minimum": item.minimum,
+            "maximum": item.maximum,
+            "isActive": item.is_active,
+            "menuCategories": [
+                {
+                    "id": mc.id,
+                    "name": mc.name,
+                    "enabled": reduce(
+                        lambda x, y: x and (y in item.products), mc.products, True
+                    ),
+                    "products": [
+                        {"id": p.id, "name": p.name}
+                        for p in mc.products
+                        if p in item.products
+                    ],
+                }
+                for mc in menu_categories
+            ],
+        }
+        modifier_category["menuCategories"] = [
+            i for i in modifier_category["menuCategories"] if len(i["products"]) > 0
+        ]
+        modifier_categories.append(modifier_category)
     return modifier_categories
 
 
@@ -173,21 +197,17 @@ def show_for_pg(request):
             "maximum": item.maximum,
             "isActive": item.is_active,
             "modifiers": [
-                {
-                    "id": m.id,
-                    "name": m.name,
-                    "prince": m.price
-                }
-                for m in item.modifiers if m.is_active == True
+                {"id": m.id, "name": m.name, "prince": m.price}
+                for m in item.modifiers
+                if m.is_active == True
             ],
         }
-        for item in product.modifier_categories if item.is_active == True
+        for item in product.modifier_categories
+        if item.is_active == True
     ]
 
 
 def modifier_category_info(item, dbsession):
-    from barker.models import MenuCategory
-
     menu_categories = (
         dbsession.query(MenuCategory)
         .join(MenuCategory.products)

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

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import {LoginComponent} from "./auth/login/login.component";
-import {LogoutComponent} from "./auth/logout/logout.component";
-import {HomeComponent} from "./home/home.component";
+import {LoginComponent} from './auth/login/login.component';
+import {LogoutComponent} from './auth/logout/logout.component';
+import {HomeComponent} from './home/home.component';
 
 const routes: Routes = [
   {

bookie/src/app/app.module.ts

@@ -15,12 +15,12 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 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 { 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';
 
 @NgModule({
   declarations: [

bookie/src/app/auth/auth.service.ts

@@ -33,7 +33,7 @@ export class AuthService {
 
   set user(user: User) {
     this._user = user;
-    this.log.handleError('AuthService','Set User', user);
+    this.log.handleError('AuthService', 'Set User', user);
     this.userObservable.next(user);
   }
 

bookie/src/app/core/device.ts

@@ -1,4 +1,4 @@
-import {Section} from "./section";
+import {Section} from './section';
 
 export class Device {
   id: string;

bookie/src/app/core/menu-category.ts

@@ -1,4 +1,4 @@
-import {Product} from "./product";
+import {Product} from './product';
 
 export class MenuCategory {
   id: string;

bookie/src/app/core/modifier-category.ts

@@ -1,5 +1,5 @@
-import {MenuCategory} from "./menu-category";
-import {Modifier} from "./modifier";
+import {MenuCategory} from './menu-category';
+import {Modifier} from './modifier';
 
 export class ModifierCategory {
   id: string;

bookie/src/app/core/modifier.ts

@@ -1,4 +1,4 @@
-import {ModifierCategory} from "./modifier-category";
+import {ModifierCategory} from './modifier-category';
 
 export class Modifier {
   id: string;
@@ -7,4 +7,5 @@ export class Modifier {
   price: number;
   modifierCategory: ModifierCategory;
   isActive: boolean;
+  billPrice?: number;
 }

bookie/src/app/core/product.ts

@@ -1,5 +1,5 @@
 import {MenuCategory} from './menu-category';
-import {SaleCategory} from "./sale-category";
+import {SaleCategory} from './sale-category';
 
 export class Product {
   id: string;

bookie/src/app/core/sale-category.ts

@@ -1,4 +1,4 @@
-import {Tax} from "./tax";
+import {Tax} from './tax';
 
 export class SaleCategory {
   id: string;

bookie/src/app/core/section-printer.ts

@@ -1,5 +1,5 @@
-import {MenuCategory} from "./menu-category";
-import {Printer} from "./printer";
+import {MenuCategory} from './menu-category';
+import {Printer} from './printer';
 
 export class SectionPrinter {
   id: string;

bookie/src/app/core/table.ts

@@ -1,4 +1,4 @@
-import {Section} from "./section";
+import {Section} from './section';
 
 export class Table {
   id: string;

bookie/src/app/devices/device-detail/device-detail.component.ts

@@ -1,13 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog} from "@angular/material/dialog";
+import { MatDialog} from '@angular/material/dialog';
 
 import { DeviceService } from '../device.service';
 import { Device } from '../../core/device';
 import { ToasterService } from '../../core/toaster.service';
-import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
-import { Section } from "../../core/section";
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { Section } from '../../core/section';
 
 @Component({
   selector: 'app-device-detail',

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

@@ -6,7 +6,7 @@ import {DeviceResolver} from './device-resolver.service';
 import {DeviceListComponent} from './device-list/device-list.component';
 import {DeviceDetailComponent} from './device-detail/device-detail.component';
 import {AuthGuard} from '../auth/auth-guard.service';
-import {SectionListResolver} from "../sections/section-list-resolver.service";
+import {SectionListResolver} from '../sections/section-list-resolver.service';
 
 const devicesRoutes: Routes = [
   {

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

@@ -1,9 +1,9 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { GuestBookService } from "../guest-book.service";
-import { ToasterService } from "../../core/toaster.service";
-import { GuestBook } from "../guest-book";
-import { ActivatedRoute, Router } from "@angular/router";
+import { GuestBookService } from '../guest-book.service';
+import { ToasterService } from '../../core/toaster.service';
+import { GuestBook } from '../guest-book';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-guest-book-detail',

bookie/src/app/guest-book/guest-book-list-resolver.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
-import { GuestBookList } from "./guest-book";
+import { GuestBookList } from './guest-book';
 import { GuestBookService } from './guest-book.service';
 
 @Injectable({

bookie/src/app/guest-book/guest-book-list/guest-book-list-datasource.ts

@@ -1,6 +1,6 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
-import { GuestBook } from "../guest-book";
+import { GuestBook } from '../guest-book';
 
 export class GuestBookListDataSource extends DataSource<GuestBook> {
 

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html

@@ -47,7 +47,7 @@
       <ng-container matColumnDef="action">
         <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
         <mat-cell *matCellDef="let row" class="center">
-          <button mat-icon-button [routerLink]="['/running-tables']" [queryParams]="{guest: row.id}">
+          <button mat-icon-button [routerLink]="['/sales']" [queryParams]="{guest: row.id}">
             Seat
           </button>
           <button mat-icon-button [routerLink]="['/guest-book/', row.id]">

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

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
-import { FormBuilder, FormGroup } from "@angular/forms";
-import { BehaviorSubject } from "rxjs";
-import { map } from "rxjs/operators";
+import { ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
 import * as moment from 'moment';
-import {GuestBook, GuestBookList} from "../guest-book";
-import { GuestBookService } from "../guest-book.service";
+import {GuestBook, GuestBookList} from '../guest-book';
+import { GuestBookService } from '../guest-book.service';
 import { GuestBookListDataSource } from './guest-book-list-datasource';
 
 @Component({
@@ -47,7 +47,7 @@ export class GuestBookListComponent implements OnInit {
     this.route.data
       .subscribe((data: { list: GuestBookList }) => {
         this.data.next(data.list.list);
-        this.form.setValue({"date": moment(data.list.date, 'DD-MMM-YYYY').toDate()});
+        this.form.setValue({'date': moment(data.list.date, 'DD-MMM-YYYY').toDate()});
       });
     this.dataSource = new GuestBookListDataSource(this.data);
   }

bookie/src/app/guest-book/guest-book-routing.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { GuestBookListComponent } from "./guest-book-list/guest-book-list.component";
-import { GuestBookDetailComponent } from "./guest-book-detail/guest-book-detail.component";
-import { AuthGuard } from "../auth/auth-guard.service";
-import { GuestBookListResolver } from "./guest-book-list-resolver.service";
-import { GuestBookDetailResolver } from "./guest-book-detail-resolver.service";
+import { GuestBookListComponent } from './guest-book-list/guest-book-list.component';
+import { GuestBookDetailComponent } from './guest-book-detail/guest-book-detail.component';
+import { AuthGuard } from '../auth/auth-guard.service';
+import { GuestBookListResolver } from './guest-book-list-resolver.service';
+import { GuestBookDetailResolver } from './guest-book-detail-resolver.service';
 
 const routes: Routes = [
   {

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
-import {Subject} from "rxjs";
-import {AuthService} from "../auth/auth.service";
+import {Subject} from 'rxjs';
+import {AuthService} from '../auth/auth.service';
 
 @Component({
   selector: 'app-home',

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

@@ -1,12 +1,12 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from "@angular/material";
+import { MatDialog } from '@angular/material';
 
 import { MenuCategoryService } from '../menu-category.service';
 import { MenuCategory } from '../../core/menu-category';
 import { ToasterService } from '../../core/toaster.service';
-import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-menu-category-detail',

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

@@ -1,7 +1,7 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
 import { MenuCategory } from '../../core/menu-category';
-import { tap } from "rxjs/operators";
+import { tap } from 'rxjs/operators';
 
 export class MenuCategoryListDatasource extends DataSource<MenuCategory> {
   private data: MenuCategory[];

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

@@ -2,11 +2,11 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MenuCategoryListDatasource } from './menu-category-list-datasource';
 import { MenuCategory } from '../../core/menu-category';
 import { ActivatedRoute, Router } from '@angular/router';
-import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
-import { MatTable } from "@angular/material";
-import { ToasterService } from "../../core/toaster.service";
-import { MenuCategoryService } from "../menu-category.service";
-import { BehaviorSubject } from "rxjs";
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { MatTable } from '@angular/material';
+import { ToasterService } from '../../core/toaster.service';
+import { MenuCategoryService } from '../menu-category.service';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-menu-category-list',
@@ -30,13 +30,13 @@ export class MenuCategoryListComponent implements OnInit {
     this.data = new BehaviorSubject([]);
     this.data.subscribe((data: MenuCategory[]) => {
       this.list = data;
-    })
+    });
   }
 
   ngOnInit() {
     this.route.data
       .subscribe((data: { list: MenuCategory[] }) => {
-        data.list.forEach(x=> x.discountLimit = x.discountLimit / 100);
+        data.list.forEach(x => x.discountLimit = x.discountLimit / 100);
         this.data.next(data.list);
       });
     this.dataSource = new MenuCategoryListDatasource(this.data);

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts

@@ -6,10 +6,10 @@ import {ToasterService} from '../../core/toaster.service';
 import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
 import {MatDialog} from '@angular/material/dialog';
 import {FormBuilder, FormGroup} from '@angular/forms';
-import {MenuCategory} from "../../core/menu-category";
-import {NestedTreeControl} from "@angular/cdk/tree";
-import {MatTreeNestedDataSource} from "@angular/material";
-import {Product} from "../../core/product";
+import {MenuCategory} from '../../core/menu-category';
+import {NestedTreeControl} from '@angular/cdk/tree';
+import {MatTreeNestedDataSource} from '@angular/material';
+import {Product} from '../../core/product';
 
 @Component({
   selector: 'app-role-detail',
@@ -68,10 +68,10 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
       mc.products.forEach((p: Product) => {
         this.products.set(p.id, p);
         if (!this.productsOfMenuCategory.has(mc.id)) {
-          this.productsOfMenuCategory.set(mc.id, [])
+          this.productsOfMenuCategory.set(mc.id, []);
         }
         this.productsOfMenuCategory.get(mc.id).push(p);
-      })
+      });
     });
     // this.setMenuCategories();
   }
@@ -141,15 +141,16 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   }
 
   isMenuCategorySelected(node: MenuCategory) {
-    return this.productsOfMenuCategory.get(node.id).reduce((acc, current) => { return acc && current.enabled}, true);
+    return this.productsOfMenuCategory.get(node.id).reduce((acc, current) => acc && current.enabled, true);
   }
 
   isMenuCategoryPartiallySelected(node: MenuCategory) {
-    let total = this.productsOfMenuCategory.get(node.id).length;
-    let ticked = this.productsOfMenuCategory.get(node.id).reduce((acc, current) => {
-      if (current.enabled)
+    const total = this.productsOfMenuCategory.get(node.id).length;
+    const ticked = this.productsOfMenuCategory.get(node.id).reduce((acc, current) => {
+      if (current.enabled) {
         acc += 1;
-      return acc
+      }
+      return acc;
     }, 0);
     return ticked > 0 && ticked < total;
   }
@@ -159,8 +160,8 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   }
 
   toggleMenuCategorySelection(node: MenuCategory) {
-    let sel = !this.isMenuCategorySelected(node);
-    this.productsOfMenuCategory.get(node.id).forEach((p) => {p.enabled = sel;});
-    return sel
+    const sel = !this.isMenuCategorySelected(node);
+    this.productsOfMenuCategory.get(node.id).forEach((p) => {p.enabled = sel; });
+    return sel;
   }
 }

bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.html

@@ -31,10 +31,10 @@
       <ng-container matColumnDef="isActive">
         <mat-header-cell *matHeaderCellDef>Is Active</mat-header-cell>
         <mat-cell *matCellDef="let row">
-              <mat-icon>
-                {{ row.isActive ? "visibility" : "visibility_off" }}
-              </mat-icon>
-              <b> {{ row.isActive ? "Active" : "Not Active" }}</b>
+          <mat-icon>
+            {{ row.isActive ? "visibility" : "visibility_off" }}
+          </mat-icon>
+          <b> {{ row.isActive ? "Active" : "Not Active" }}</b>
         </mat-cell>
       </ng-container>
 
@@ -43,7 +43,11 @@
         <mat-header-cell *matHeaderCellDef>Products</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let product of row.products">{{product}}</li>
+            <li *ngFor="let mc of row.menuCategories">{{mc.name}}
+              <ul *ngIf="!mc.enabled">
+                <li *ngFor="let p of mc.products">{{p.name}}</li>
+              </ul>
+            </li>
           </ul>
         </mat-cell>
       </ng-container>

bookie/src/app/modifier-categories/modifier-category.service.ts

@@ -42,25 +42,25 @@ export class ModifierCategoryService {
       );
   }
 
-  save(role: ModifierCategory): Observable<ModifierCategory> {
-    return <Observable<ModifierCategory>>this.http.post<ModifierCategory>(`${url}/new`, role, httpOptions)
+  save(modifierCategory: ModifierCategory): Observable<ModifierCategory> {
+    return <Observable<ModifierCategory>>this.http.post<ModifierCategory>(`${url}/new`, modifierCategory, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'save'))
       );
   }
 
-  update(role: ModifierCategory): Observable<ModifierCategory> {
-    return <Observable<ModifierCategory>>this.http.put<ModifierCategory>(`${url}/${role.id}`, role, httpOptions)
+  update(modifierCategory: ModifierCategory): Observable<ModifierCategory> {
+    return <Observable<ModifierCategory>>this.http.put<ModifierCategory>(`${url}/${modifierCategory.id}`, modifierCategory, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'update'))
       );
   }
 
-  saveOrUpdate(role: ModifierCategory): Observable<ModifierCategory> {
-    if (!role.id) {
-      return this.save(role);
+  saveOrUpdate(modifierCategory: ModifierCategory): Observable<ModifierCategory> {
+    if (!modifierCategory.id) {
+      return this.save(modifierCategory);
     } else {
-      return this.update(role);
+      return this.update(modifierCategory);
     }
   }
 

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts

@@ -6,7 +6,7 @@ import { Modifier } from '../../core/modifier';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { ModifierCategory } from "../../core/modifier-category";
+import { ModifierCategory } from '../../core/modifier-category';
 
 @Component({
   selector: 'app-modifier-detail',

bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts

@@ -39,9 +39,9 @@ export class ModifierListDataSource extends DataSource<Modifier> {
   }
 
   private getFilteredData(data: Modifier[]): Modifier[] {
-    const filter = (this.filterValue === undefined) ? "" : this.filterValue;
+    const filter = (this.filterValue === undefined) ? '' : this.filterValue;
       return data.filter(x => {
-        return x.modifierCategory.id === filter || filter === "";
+        return x.modifierCategory.id === filter || filter === '';
         }
       );
   }

bookie/src/app/modifiers/modifier-list/modifier-list.component.ts

@@ -2,10 +2,10 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ModifierListDataSource } from './modifier-list-datasource';
-import { MatTable } from "@angular/material";
+import { MatTable } from '@angular/material';
 import { Modifier } from '../../core/modifier';
-import { BehaviorSubject } from "rxjs";
-import {ModifierCategory} from "../../core/modifier-category";
+import { BehaviorSubject } from 'rxjs';
+import {ModifierCategory} from '../../core/modifier-category';
 
 @Component({
   selector: 'app-modifier-list',
@@ -31,11 +31,11 @@ export class ModifierListComponent implements OnInit {
     this.form = this.fb.group({
       modifierCategory: ''
     });
-    this.filter = new BehaviorSubject("");
+    this.filter = new BehaviorSubject('');
     this.data = new BehaviorSubject([]);
     this.data.subscribe((data: Modifier[]) => {
       this.list = data;
-    })
+    });
   }
 
   filterOn(val: any) {

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

@@ -8,7 +8,7 @@ import { ModifierDetailComponent } from './modifier-detail/modifier-detail.compo
 import { ModifierListComponent } from './modifier-list/modifier-list.component';
 
 import { AuthGuard } from '../auth/auth-guard.service';
-import { ModifierCategoryListResolver } from "../modifier-categories/modifier-category-list-resolver.service";
+import { ModifierCategoryListResolver } from '../modifier-categories/modifier-category-list-resolver.service';
 
 const modifierRoutes: Routes = [
   {

bookie/src/app/printers/printer-detail/printer-detail.component.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from "@angular/material/dialog";
+import { MatDialog } from '@angular/material/dialog';
 
 import { PrinterService } from '../printer.service';
 import { Printer } from '../../core/printer';
 import { ToasterService } from '../../core/toaster.service';
-import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-printer-detail',

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

@@ -7,7 +7,7 @@ import { MenuCategory } from '../../core/menu-category';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { SaleCategory } from "../../core/sale-category";
+import { SaleCategory } from '../../core/sale-category';
 
 @Component({
   selector: 'app-product-detail',

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

@@ -39,9 +39,9 @@ export class ProductListDataSource extends DataSource<Product> {
   }
 
   private getFilteredData(data: Product[]): Product[] {
-    const filter = (this.filterValue === undefined) ? "" : this.filterValue;
+    const filter = (this.filterValue === undefined) ? '' : this.filterValue;
       return data.filter(x => {
-        return x.menuCategory.id === filter || filter === "";
+        return x.menuCategory.id === filter || filter === '';
         }
       );
   }

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

@@ -1,15 +1,15 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ProductListDataSource } from './product-list-datasource';
-import { MatTable } from "@angular/material";
+import { MatTable } from '@angular/material';
 import { Product } from '../../core/product';
-import { ToCsvService } from "../../shared/to-csv.service";
-import { ToasterService } from "../../core/toaster.service";
-import { ProductService } from "../product.service";
-import { MenuCategory } from "../../core/menu-category";
-import { BehaviorSubject } from "rxjs";
+import { ToCsvService } from '../../shared/to-csv.service';
+import { ToasterService } from '../../core/toaster.service';
+import { ProductService } from '../product.service';
+import { MenuCategory } from '../../core/menu-category';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-product-list',
@@ -38,11 +38,11 @@ export class ProductListComponent implements OnInit {
     this.form = this.fb.group({
       menuCategory: ''
     });
-    this.filter = new BehaviorSubject("");
+    this.filter = new BehaviorSubject('');
     this.data = new BehaviorSubject([]);
     this.data.subscribe((data: Product[]) => {
       this.list = data;
-    })
+    });
   }
 
   filterOn(val: any) {

bookie/src/app/product/products-routing.module.ts

@@ -9,7 +9,7 @@ import { ProductListComponent } from './product-list/product-list.component';
 
 import { AuthGuard } from '../auth/auth-guard.service';
 import { MenuCategoryListResolver } from '../menu-category/menu-category-list-resolver.service';
-import { SaleCategoryListResolver } from "../sale-category/sale-category-list-resolver.service";
+import { SaleCategoryListResolver } from '../sale-category/sale-category-list-resolver.service';
 
 const productRoutes: Routes = [
   {

bookie/src/app/product/products.module.ts

@@ -16,7 +16,7 @@ import { MatTableModule } from '@angular/material/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { DragDropModule } from "@angular/cdk/drag-drop";
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   imports: [

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

@@ -6,7 +6,7 @@ import { SaleCategoryResolver } from './sale-category-resolver.service';
 import { SaleCategoryListComponent } from './sale-category-list/sale-category-list.component';
 import { SaleCategoryDetailComponent } from './sale-category-detail/sale-category-detail.component';
 import { AuthGuard } from '../auth/auth-guard.service';
-import { TaxListResolver } from "../taxes/tax-list-resolver.service";
+import { TaxListResolver } from '../taxes/tax-list-resolver.service';
 
 const saleCategoriesRoutes: Routes = [
   {

bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts

@@ -1,13 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from "@angular/material";
+import { MatDialog } from '@angular/material';
 
 import { SaleCategoryService } from '../sale-category.service';
 import { SaleCategory } from '../../core/sale-category';
 import { ToasterService } from '../../core/toaster.service';
-import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
-import { Tax } from "../../core/tax";
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { Tax } from '../../core/tax';
 
 @Component({
   selector: 'app-sale-category-detail',

bookie/src/app/sale-category/sale-category-list/sale-category-list-datasource.ts

@@ -1,7 +1,7 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
 import { SaleCategory } from '../../core/sale-category';
-import { tap } from "rxjs/operators";
+import { tap } from 'rxjs/operators';
 
 export class SaleCategoryListDatasource extends DataSource<SaleCategory> {
   private data: SaleCategory[];

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

@@ -2,10 +2,10 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { SaleCategoryListDatasource } from './sale-category-list-datasource';
 import { SaleCategory } from '../../core/sale-category';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatTable } from "@angular/material";
-import { ToasterService } from "../../core/toaster.service";
-import { SaleCategoryService } from "../sale-category.service";
-import { BehaviorSubject } from "rxjs";
+import { MatTable } from '@angular/material';
+import { ToasterService } from '../../core/toaster.service';
+import { SaleCategoryService } from '../sale-category.service';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-sale-category-list',
@@ -29,7 +29,7 @@ export class SaleCategoryListComponent implements OnInit {
     this.data = new BehaviorSubject([]);
     this.data.subscribe((data: SaleCategory[]) => {
       this.list = data;
-    })
+    });
   }
 
   ngOnInit() {

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

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BillService } from './bill.service';
+
+describe('BillService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: BillService = TestBed.get(BillService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import { Product } from '../core/product';
+import { ModifiersComponent } from './modifiers/modifiers.component';
+import { MatDialog } from '@angular/material';
+import { ModifierCategoryService } from '../modifier-categories/modifier-category.service';
+import {Subject} from "rxjs";
+import {Modifier} from "../core/modifier";
+import {ModifierCategory} from "../core/modifier-category";
+import {isNotNullOrUndefined} from "codelyzer/util/isNotNullOrUndefined";
+
+@Injectable()
+export class BillService {
+  public dataObs = new Subject<any[]>();
+  public data = [];
+  constructor(
+        private dialog: MatDialog,
+    private modifierCategoryService: ModifierCategoryService
+  ) { }
+
+  addProduct(product: Product) {
+    let item = {
+      isKot: false,
+      product: product,
+      productId: product.id,
+      info: `${product.name} (${product.units}) @ ${product.price}`,
+      quantity: 1,
+      modifiers: []
+    };
+    this.data.push(item);
+    this.modifierCategoryService.listIsActiveOfProduct(product.id).subscribe(result => {
+      if (result.reduce((a: any, c: ModifierCategory) => {return a + c.minimum}, 0)) {
+        this.showModifier(item);
+      }
+    });
+    this.dataObs.next(this.data);
+  }
+
+  showModifier(item: any): void {
+    // [routerLink]="['/sales', 'modifiers', item.id]"
+    const dialogRef = this.dialog.open(ModifiersComponent, {
+      position: {
+        top: '10vh'
+      },
+      data: {
+        list: this.modifierCategoryService.listIsActiveOfProduct(item.productId),
+        selected: item.modifiers
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (isNotNullOrUndefined(result)) {
+        item.modifiers = result;
+      }
+    });
+  }
+
+  addOne(item: any): void {
+    item.quantity += 1;
+    this.dataObs.next(this.data);
+  }
+
+  quantity(item: any): void {
+
+  }
+
+  subtractOne(item: any): void {
+    if (item.quantity > 1) {
+      item.quantity -= 1;
+      this.dataObs.next(this.data);
+    } else if (item.quantity === 0) {
+      this.removeItem(item);
+    }
+  }
+
+  removeItem(item: any): void {
+    this.data.splice(this.data.indexOf(item), 1);
+    this.dataObs.next(this.data);
+  }
+
+  modifier(item: any): void {
+    this.showModifier(item);
+  }
+
+}

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

@@ -1,18 +1,19 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
 import {Observable} from 'rxjs/internal/Observable';
-import {Table} from "../../core/table";
-import {TableService} from "../../tables/table.service";
+import {TableService} from '../../tables/table.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class BillResolver implements Resolve<Table[]> {
+export class BillResolver implements Resolve<any[]> {
 
   constructor(private ser: TableService, private router: Router) {
   }
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Table[]> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any[]> {
+    const tableId = route.queryParamMap.get('table');
+    const guestId = route.queryParamMap.get('guest');
     return this.ser.list();
   }
 }

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

@@ -0,0 +1,46 @@
+import {User} from '../../core/user';
+import {Table} from '../../core/table';
+import {GuestBook} from '../../guest-book/guest-book';
+import {Product} from '../../core/product';
+import {Tax} from '../../core/tax';
+import {Modifier} from '../../core/modifier';
+
+export class Inventory {
+  id: string;
+  sortOrder: number;
+  product: Product;
+  quantity: number;
+  price: number;
+  isHappyHour: boolean;
+  taxRate: number;
+  tax: Tax;
+  discount: number;
+  modifiers: Modifier;
+}
+
+export class Kot {
+  id: string;
+  serial: number;
+  date: string;
+  user: User;
+  inventories: Inventory[];
+}
+
+export class Bill {
+  id: string;
+  date: string;
+  user: User;
+  creationDate: string;
+  lastEditDate: string;
+  billId: string;
+  table: Table;
+  guest: GuestBook;
+  settlements: any[];
+  void: boolean;
+  voidReason: string;
+  printed: boolean;
+  voucherType: string;
+  serial: number;
+  kots: Kot[];
+  reprints: any[];
+}

bookie/src/app/sales/bills/bills-datasource.ts

@@ -0,0 +1,21 @@
+import { DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+
+export class BillsDataSource extends DataSource<any> {
+
+  constructor(private data: Observable<any[]>
+  ) {
+    super();
+  }
+
+  connect(): Observable<any[]> {
+    return this.data;
+  }
+
+  /**
+   *  Called when the table is being destroyed. Use this function, to clean up
+   * any open connections or free any held resources that were set up during connect.
+   */
+  disconnect() {
+  }
+}

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

@@ -2,12 +2,42 @@
   <mat-card-title-group>
     <mat-card-title>Bill</mat-card-title>
   </mat-card-title-group>
-  <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
+  <mat-card-content>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">
       <!-- Info Column -->
       <ng-container matColumnDef="info">
-        <mat-cell *matCellDef="let row" [class.kot]="row.isKot">{{row.info}}</mat-cell>
+        <mat-cell *matCellDef="let row" fxLayout="column" fxLayoutAlign="space-around start" [class.kot]="row.isKot">
+          <span>
+            {{row.info}}
+          </span>
+          <ul>
+            <li *ngFor="let m of row.modifiers">{{m.name}}</li>
+          </ul>
+        </mat-cell>
       </ng-container>
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <button mat-icon-button (click)="subtractOne(row)">
+            <mat-icon class="del">indeterminate_check_box</mat-icon>
+          </button>
+          <button mat-icon-button (click)="quantity(row)">
+            {{row.quantity}}
+          </button>
+          <button mat-icon-button (click)="addOne(row)">
+            <mat-icon class="del">control_point</mat-icon>
+          </button>
+          <button mat-icon-button (click)="removeItem(row)">
+            <mat-icon class="del">cancel</mat-icon>
+          </button>
+          <button mat-icon-button (click)="modifier(row)">
+            <mat-icon class="del">assignment</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
+
+
       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </mat-table>
   </mat-card-content>

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

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
-import { Table } from "../../core/table";
+import { ActivatedRoute } from '@angular/router';
+import {Bill, Inventory, Kot} from './bill';
+import {ModifierCategoryListDatasource} from '../../modifier-categories/modifier-category-list/modifier-category-list-datasource';
+import {BillsDataSource} from './bills-datasource';
+import {BillService} from "../bill.service";
 
 @Component({
   selector: 'app-bills',
@@ -8,15 +11,50 @@ import { Table } from "../../core/table";
   styleUrls: ['./bills.component.css']
 })
 export class BillsComponent implements OnInit {
-  list: Table[];
+  dataSource: BillsDataSource;
+  item: Bill;
+  view: any[];
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns: string[] = ['info', 'quantity'];
 
-  constructor(private route: ActivatedRoute) {
+  constructor(
+    private route: ActivatedRoute,
+    private bs: BillService
+  ) {
   }
 
   ngOnInit() {
     this.route.data
-      .subscribe((data: { list: Table[] }) => {
-        this.list = data.list;
+      .subscribe((data: { item: Bill }) => {
+        this.updateView(data.item);
       });
+       this.dataSource = new BillsDataSource(this.bs.dataObs);
+  }
+
+  updateView(item) {
+    this.item = item;
+    // this.view = item.kots.reduce((p: Kot, c:Kot) => {
+    //
+    // }, [])
+  }
+
+  addOne(item: any): void {
+    this.bs.addOne(item);
+  }
+
+  quantity(item: any): void {
+    this.bs.quantity(item);
+  }
+
+  subtractOne(item: any): void {
+    this.bs.subtractOne(item);
+  }
+
+  removeItem(item: any): void {
+    this.bs.removeItem(item);
+  }
+
+  modifier(item: any): void {
+    this.bs.modifier(item);
   }
 }

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

@@ -0,0 +1,5 @@
+.square-button {
+  min-width: 150px;
+  max-width: 150px;
+  min-height: 150px;
+}

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

@@ -0,0 +1,5 @@
+<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>

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

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

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

@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {Subject} from 'rxjs';
+import {AuthService} from '../../auth/auth.service';
+
+@Component({
+  selector: 'app-sales-home',
+  templateUrl: './sales-home.component.html',
+  styleUrls: ['./sales-home.component.css']
+})
+export class SalesHomeComponent implements OnInit {
+  public nameObject = new Subject<string>();
+
+  constructor(private auth: AuthService) {
+  }
+
+  ngOnInit() {
+    this.auth.userObservable.subscribe((user) => {
+      if (user.isAuthenticated) {
+        this.nameObject.next(user.name);
+      } else {
+        this.nameObject.next(null);
+      }
+    });
+  }
+}

bookie/src/app/sales/menu-categories/menu-categories-resolver.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
 import { MenuCategory } from '../../core/menu-category';
 import { Observable } from 'rxjs/internal/Observable';
-import { MenuCategoryService } from "../../menu-category/menu-category.service";
+import { MenuCategoryService } from '../../menu-category/menu-category.service';
 
 @Injectable({
   providedIn: 'root'

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

@@ -1,6 +1,7 @@
 <mat-card>
   <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
     <button mat-raised-button class="square-button"
-       *ngFor="let item of list" [routerLink]="['/sales', 'products', item.id]">{{item.name}}</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-content>
 </mat-card>

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

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

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

@@ -8,10 +8,12 @@
       </mat-chip-list>
     </ng-template>
     <mat-button-toggle-group multiple>
-      <mat-button-toggle mat-raised-button class="square-button" *ngFor="let m of item.modifiers" (click)="select(m)">{{m.name}}</mat-button-toggle>
+      <mat-button-toggle mat-raised-button class="square-button" *ngFor="let m of item.modifiers" (click)="select(m)" [checked]="selectedIds.indexOf(m.id) !== -1">
+        {{m.name}}
+      </mat-button-toggle>
     </mat-button-toggle-group>
   </mat-tab>
 </mat-tab-group>
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Done</button>
+  <button mat-button [mat-dialog-close]="selected">Done</button>
 </mat-dialog-actions>

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

@@ -1,8 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { ModifierCategory } from "../../core/modifier-category";
-import { Modifier } from "../../core/modifier";
-import { MAT_DIALOG_DATA } from "@angular/material";
-import {Observable} from "rxjs";
+import { ModifierCategory } from '../../core/modifier-category';
+import { Modifier } from '../../core/modifier';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'app-modifiers',
@@ -11,16 +11,24 @@ import {Observable} from "rxjs";
 })
 export class ModifiersComponent {
   list: ModifierCategory[];
+  selected: Modifier[];
+  selectedIds: string[];
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: Observable<ModifierCategory[]>) {
-    this.data.subscribe((list: ModifierCategory[]) => {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { list: Observable<ModifierCategory[]>, selected: Modifier[] }) {
+    this.data.list.subscribe((list: ModifierCategory[]) => {
       this.list = list;
-      console.log(this.list);
     });
-    console.log(this.list);
+    this.selected = data.selected;
+    this.selectedIds = this.selected.map(e => e.id);
   }
 
   select(m: Modifier) {
-    console.log(m);
+    let index = this.selectedIds.indexOf(m.id);
+    if (index === -1) {
+      this.selected.push(m);
+    } else {
+      this.selected.splice(index, 1);
+    }
+    this.selectedIds = this.selected.map(e => e.id);
   }
 }

bookie/src/app/sales/products/products-resolver.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from "@angular/router";
-import { Observable } from "rxjs";
-import { Product } from "../../core/product";
-import { ProductService } from "../../product/product.service";
+import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { Product } from '../../core/product';
+import { ProductService } from '../../product/product.service';
 
 @Injectable({
   providedIn: 'root'

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

@@ -1,6 +1,7 @@
 <mat-card>
   <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
     <button mat-raised-button class="square-button"
-       *ngFor="let item of list" (click)="showModifier(item)">{{item.name}}</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-content>
 </mat-card>

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

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
-import { MatDialog } from "@angular/material";
-import { Product } from "../../core/product";
-import {ModifiersComponent} from "../modifiers/modifiers.component";
-import {ModifierCategoryService} from "../../modifier-categories/modifier-category.service";
+import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { Product } from '../../core/product';
+import { BillService } from '../bill.service';
 
 @Component({
   selector: 'app-products',
@@ -13,7 +12,11 @@ import {ModifierCategoryService} from "../../modifier-categories/modifier-catego
 export class ProductsComponent implements OnInit {
   list: Product[];
 
-  constructor(private route: ActivatedRoute, private dialog: MatDialog, private modifierCategoryService: ModifierCategoryService) {
+  constructor(
+    private route: ActivatedRoute,
+    private location: Location,
+    private bs: BillService
+  ) {
   }
 
   ngOnInit() {
@@ -23,17 +26,12 @@ export class ProductsComponent implements OnInit {
       });
   }
 
-  showModifier(product: Product): void {
-    // [routerLink]="['/sales', 'modifiers', item.id]"
-    let dialogRef = this.dialog.open(ModifiersComponent, {
-      position: {
-        top: '10vh'
-      },
-      data: this.modifierCategoryService.listIsActiveOfProduct(product.id)
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      console.log('The dialog was closed');
-    });
+  addProduct(product: Product): void {
+    this.bs.addProduct(product);
   }
+
+  goBack(): void {
+    this.location.back();
+  }
+
 }

bookie/src/app/sales/running-tables/running-tables-resolver.service.ts

@@ -1,8 +1,8 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
 import {Observable} from 'rxjs/internal/Observable';
-import {Table} from "../../core/table";
-import {TableService} from "../../tables/table.service";
+import {Table} from '../../core/table';
+import {TableService} from '../../tables/table.service';
 
 @Injectable({
   providedIn: 'root'

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

@@ -3,8 +3,7 @@
     <mat-card-title>Running Tables</mat-card-title>
   </mat-card-title-group>
   <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
-    <button mat-raised-button class="square-button" [routerLink]="['/sales', 'menu-categories']">Menu Categories</button>
     <button mat-raised-button class="square-button"
-       *ngFor="let table of list" [routerLink]="['/bills', 'new']" [queryParams]="{table: table.id}" queryParamsHandling="merge">{{table.name}}</button>
+       *ngFor="let table of list" [routerLink]="['../bill']" [queryParams]="{table: table.id}" queryParamsHandling="merge">{{table.name}}</button>
   </mat-card-content>
 </mat-card>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
-import { Table } from "../../core/table";
+import { ActivatedRoute } from '@angular/router';
+import { Table } from '../../core/table';
 
 @Component({
   selector: 'app-running-tables',

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

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard } from "../auth/auth-guard.service";
-import { RunningTablesResolver } from "./running-tables/running-tables-resolver.service";
-import { RunningTablesComponent } from "./running-tables/running-tables.component";
-import { MenuCategoriesComponent } from "./menu-categories/menu-categories.component";
-import { MenuCategoriesResolver } from "./menu-categories/menu-categories-resolver.service";
-import { ProductsComponent } from "./products/products.component";
-import { ProductsResolver } from "./products/products-resolver.service";
-import { BillsComponent } from "./bills/bills.component";
-import { BillResolver } from "./bills/bill-resolver.service";
+import { AuthGuard } from '../auth/auth-guard.service';
+import { RunningTablesResolver } from './running-tables/running-tables-resolver.service';
+import { RunningTablesComponent } from './running-tables/running-tables.component';
+import { MenuCategoriesComponent } from './menu-categories/menu-categories.component';
+import { MenuCategoriesResolver } from './menu-categories/menu-categories-resolver.service';
+import { ProductsComponent } from './products/products.component';
+import { ProductsResolver } from './products/products-resolver.service';
+import { BillsComponent } from './bills/bills.component';
+import { BillResolver } from './bills/bill-resolver.service';
+import { SalesHomeComponent } from './home/sales-home.component';
 
 const routes: Routes = [
   {
@@ -45,6 +46,17 @@ const routes: Routes = [
       list: BillResolver
     },
     children: [
+      {
+        path: '',
+        component: SalesHomeComponent,
+        canActivate: [AuthGuard],
+        data: {
+          permission: 'Guest Book'
+        },
+        resolve: {
+          list: MenuCategoriesResolver
+        }
+      },
       {
         path: 'menu-categories',
         component: MenuCategoriesComponent,

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

@@ -6,17 +6,32 @@ 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 { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { SalesRoutingModule } from './sales-routing.module';
-import { RunningTablesComponent } from "./running-tables/running-tables.component";
+import { RunningTablesComponent } from './running-tables/running-tables.component';
 import { MenuCategoriesComponent } from './menu-categories/menu-categories.component';
 import { ProductsComponent } from './products/products.component';
 import { ModifiersComponent } from './modifiers/modifiers.component';
+import { BillsComponent } from './bills/bills.component';
+import { SalesHomeComponent } from './home/sales-home.component';
+import { BillService } from './bill.service';
 
 @NgModule({
-  declarations: [RunningTablesComponent, MenuCategoriesComponent, ProductsComponent, ModifiersComponent],
+  providers: [
+    BillService
+  ],
+  declarations: [
+    RunningTablesComponent,
+    MenuCategoriesComponent,
+    ProductsComponent,
+    ModifiersComponent,
+    BillsComponent,
+    SalesHomeComponent
+  ],
   imports: [
     CommonModule,
     FlexLayoutModule,
@@ -26,6 +41,8 @@ import { ModifiersComponent } from './modifiers/modifiers.component';
     MatCardModule,
     MatChipsModule,
     MatDialogModule,
+    MatIconModule,
+    MatTableModule,
     MatTabsModule,
     SalesRoutingModule
   ],

bookie/src/app/section-printers/section-printer-datasource.ts

@@ -1,6 +1,6 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
-import { SectionPrinterItem } from "../core/section-printer";
+import { SectionPrinterItem } from '../core/section-printer';
 
 
 export class SectionPrinterDataSource extends DataSource<SectionPrinterItem> {

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

@@ -2,15 +2,15 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router} from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { SectionPrinter } from '../core/section-printer';
 import { ToasterService } from '../core/toaster.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { Section } from "../core/section";
-import { Printer } from "../core/printer";
+import { Section } from '../core/section';
+import { Printer } from '../core/printer';
 import { SectionPrinterService } from './section-printer.service';
-import { SectionPrinterDataSource } from "./section-printer-datasource";
+import { SectionPrinterDataSource } from './section-printer-datasource';
 
 @Component({
   selector: 'app-section-printer',
@@ -65,7 +65,7 @@ export class SectionPrinterComponent implements OnInit {
         x => this.fb.group({
           menuCategory: x.menuCategory.name,
           printer: x.printer.id,
-          copies: "" + x.copies
+          copies: '' + x.copies
         })
       )
     ));

bookie/src/app/section-printers/section-printers-routing.module.ts

@@ -4,8 +4,8 @@ import {RouterModule, Routes} from '@angular/router';
 import {SectionPrinterResolver} from './section-printer-resolver.service';
 import {SectionPrinterComponent} from './section-printer.component';
 import {AuthGuard} from '../auth/auth-guard.service';
-import {SectionListResolver} from "../sections/section-list-resolver.service";
-import {PrinterListResolver} from "../printers/printer-list-resolver.service";
+import {SectionListResolver} from '../sections/section-list-resolver.service';
+import {PrinterListResolver} from '../printers/printer-list-resolver.service';
 
 const sectionPrinterRoutes: Routes = [
   {

bookie/src/app/sections/section-detail/section-detail.component.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog} from "@angular/material/dialog";
+import { MatDialog} from '@angular/material/dialog';
 
 import { SectionService } from '../section.service';
 import { Section } from '../../core/section';
 import { ToasterService } from '../../core/toaster.service';
-import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-section-detail',

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

@@ -5,9 +5,9 @@ import {Table} from '../../core/table';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ToasterService} from '../../core/toaster.service';
 import {FormBuilder, FormGroup} from '@angular/forms';
-import {ConfirmDialogComponent} from "../../shared/confirm-dialog/confirm-dialog.component";
-import {MatDialog} from "@angular/material";
-import {Section} from "../../core/section";
+import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
+import {MatDialog} from '@angular/material';
+import {Section} from '../../core/section';
 
 @Component({
   selector: 'app-table-detail',

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

@@ -2,12 +2,12 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { TableListDataSource } from './table-list-datasource';
 import { Table } from '../../core/table';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatTable } from "@angular/material";
-import { MenuCategory } from "../../core/menu-category";
-import { BehaviorSubject } from "rxjs";
-import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
-import { ToasterService } from "../../core/toaster.service";
-import { TableService } from "../table.service";
+import { MatTable } from '@angular/material';
+import { MenuCategory } from '../../core/menu-category';
+import { BehaviorSubject } from 'rxjs';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ToasterService } from '../../core/toaster.service';
+import { TableService } from '../table.service';
 
 @Component({
   selector: 'app-table-list',
@@ -31,7 +31,7 @@ export class TableListComponent implements OnInit {
     this.data = new BehaviorSubject([]);
     this.data.subscribe((data: Table[]) => {
       this.list = data;
-    })
+    });
   }
 
   ngOnInit() {

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

@@ -6,7 +6,7 @@ import { TableResolver } from './table-resolver.service';
 import { TableListComponent } from './table-list/table-list.component';
 import { TableDetailComponent } from './table-detail/table-detail.component';
 import { AuthGuard } from '../auth/auth-guard.service';
-import { SectionListResolver } from "../sections/section-list-resolver.service";
+import { SectionListResolver } from '../sections/section-list-resolver.service';
 
 const tablesRoutes: Routes = [
   {

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

@@ -11,7 +11,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { CdkTableModule } from '@angular/cdk/table';
-import { DragDropModule } from "@angular/cdk/drag-drop";
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TableListComponent }  from './table-list/table-list.component';
 import { TableDetailComponent } from './table-detail/table-detail.component';

bookie/src/app/taxes/tax-detail/tax-detail.component.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog} from "@angular/material/dialog";
+import { MatDialog} from '@angular/material/dialog';
 
 import { TaxService } from '../tax.service';
 import { Tax } from '../../core/tax';
 import { ToasterService } from '../../core/toaster.service';
-import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-tax-detail',