Bills initially working just as proof of concept

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

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);
   }
 }