Save Bill Works

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