Delete item in order funcionality active

src/app/items/item-list/item-list.component.css

@@ -35,17 +35,15 @@ p.price{
 	text-align: right;
 }
 
- /* Style buttons */
-.btn {
-  background-color: DodgerBlue; /* Blue background */
-  border: none; /* Remove borders */
-  color: white; /* White text */
-  padding: 12px 16px; /* Some padding */
-  font-size: 16px; /* Set a font size */
-  cursor: pointer; /* Mouse pointer on hover */
-}
-
-/* Darker background on mouse-over */
-.btn:hover {
-  background-color: RoyalBlue;
+.buttons-class-cart{
+  background-color: #ff4700;
+  color: white;
+  font-size: 18px;
+  font-weight: 700;
+  height: 25px !important;
+  width: 50px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }

src/app/items/item-list/item-list.component.html

@@ -49,8 +49,10 @@
 								</fa-icon>
 							</button>	
 -->
-							<button mat-raised-button color="primary" class="icons" (click)="addToOrder(item._id!)">
-								<mat-icon>shopping_cart</mat-icon>
+							<button mat-raised-button color="primary" 
+							        class="buttons-class-cart" 
+							        (click)="addToOrder(item._id!)">
+								<mat-icon [inline]="true">shopping_cart</mat-icon>
 							</button>
 						</td>
 					</tr>
@@ -61,5 +63,9 @@
 </div>
 <p *ngIf = "items.length <= 0">No items yet!</p>
 <br>
-<button class="text" mat-raised-button (click)="openDialog()">
-	<mat-icon class="icon">add</mat-icon>Add item</button>
+<button class="text" 
+        mat-raised-button 
+        (click)="openDialog()">
+	<mat-icon class="icon">add</mat-icon>
+       Add item
+</button>

src/app/items/item-list/item-list.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
+
+import { faCartShopping } from '@fortawesome/free-solid-svg-icons';
+
 import { Observable } from 'rxjs';
 import { Item } from '../item.model';
 import { Owner } from '../../owner.model';
@@ -20,10 +23,12 @@ import { ItemAddComponent } from '../item-add/item-add.component';
 
 export class ItemListComponent implements OnInit{
 
-	@Input()
-	zecPrice: number = 1;
+	@Input() zecPrice: number = 1;
 
 	public items: Item[] = [];
+
+	faCartShopping = faCartShopping;
+    
 	owner: Owner = {
 		_id: '',
 		name: '',
@@ -49,6 +54,7 @@ export class ItemListComponent implements OnInit{
 		expiration: new Date(Date.now()).toISOString(),
 		viewkey: ''
 	};
+
 	public ownerUpdate: Observable<Owner>;
 	public itemsUpdate: Observable<Item[]>;
 

src/app/items/newlineitem.model.ts

@@ -0,0 +1,6 @@
+export interface newLineItem {
+    line_id: number;
+    qty: number;
+    name: string;
+    cost: number;
+}

src/app/listorders/listorders.component.html

@@ -82,7 +82,7 @@
 					>1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
 				</td>
 				<td width="50%" align="right">
-					{{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}}
+					{{ order.total | currency: order.currency.toUpperCase()}}
 				</td>
 			</tr>
 		</table>

src/app/order/order.component.css

@@ -49,3 +49,26 @@ img.icon{
 	cursor:  pointer;
 }
 
+.buttons-class {
+  background-color: #ff4700;
+  color: white;
+  font-weight: 700;
+  height: 25px !important;
+  width: 80px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: auto;
+}
+
+.button-cancel-class {
+  font-weight: 700;
+  height: 25px !important;
+  width: 80px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: auto;
+}

src/app/order/order.component.html

@@ -51,7 +51,8 @@
 			</thead>	
 
 		     <tbody>
-				<tr *ngFor="let item of order.lines">
+				<tr style="height:  30px;"
+				    *ngFor="let item of oLines">
 					<td class="newOrdertbdetail" 
 					    style="text-align: left;" 
 					    width="50%">{{item.name}}
@@ -65,10 +66,10 @@
 					    width="30%">{{item.qty * item.cost | number:'1.02' | currency: getCurrency() }} 
 					</td>
 					<td class="lineTrashCan">
-				        <a (click)='trashCanClicked(item,order.lines)' >	
+				        <a (click)='trashCanClicked(item,oLines)' >	
 						   <fa-icon [icon]="faTrashAlt" 
 						            style="color: lightslategrey; 
-						                   font-size: 16px;
+						                   font-size: 14px;
 						                   margin: auto;">
 						   </fa-icon>
 					   </a>
@@ -77,21 +78,50 @@
 			</tbody>
 		</table>
 	</div>
+<div class="container" style="margin: 2px; 
+                              height: 35px;
+                              background: lightblue;
+                              border-top: 2px solid lightgray;
+                              border-bottom: 2px solid lightgray;
+                              align-content: center;
+                              justify-content: center;">
+<!--	
 	<mat-card-actions>
-		<table cellspacing="0" width="100%">
-			<tr>
+-->
+		<table style="margin-top: 4px;" cellspacing="0" width="100%">
+			<tr style="height: 16px;
+			           margin-top: 10px">
 				<td>
-					<button mat-raised-button class="text" (click)="cancelOrder()">Cancel</button>
+					<button mat-raised-button
+					 	   class="button-cancel-class"
+					        (click)="cancelOrder()">
+					   	   Cancel
+					</button>
 				</td>
 				<td>
-					<button mat-raised-button class="text" (click)="invoice()"><fa-icon [icon]="faInvoice" size="2x"></fa-icon> Invoice</button>
+					<button mat-raised-button 
+					        class="buttons-class"
+					        (click)="invoice()">
+					        <fa-icon [icon]="faInvoice" ></fa-icon> Invoice
+					</button>
 				</td>
 				<td  align="right">
+
+					<button mat-raised-button 
+					        class="buttons-class"
+					        (click)="checkout()">
+					        Checkout
+					</button>
+<!--
 					<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>
+-->
 				</td>
 			</tr>
 		</table>
+<!--
 	</mat-card-actions>
+-->
+</div>
 </mat-card>
 <div style="font-family: Roboto Mono;
             font-size: 18px;

src/app/order/order.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 import { LineItem } from '../items/lineitem.model';
+import { newLineItem } from '../items/newlineitem.model';
 import { Order } from './order.model';
 import { FullnodeService } from '../fullnode.service';
 import { OrderService } from './order.service';
@@ -13,6 +14,8 @@ import { faFileInvoiceDollar } from '@fortawesome/free-solid-svg-icons';
 
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faSignOut } from '@fortawesome/free-solid-svg-icons';
 
 
 @Component({
@@ -22,6 +25,10 @@ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 })
 
 export class OrderComponent implements OnInit{
+
+	public oLines : newLineItem[] = [];
+	public myLines : LineItem[] = [];
+
 	faInvoice = faFileInvoiceDollar;
 	public order: Order = {
 		address: '',
@@ -51,10 +58,11 @@ export class OrderComponent implements OnInit{
 	//
 	faTrash = faTrash;
 	faTrashAlt = faTrashAlt;
+	faChevronRight = faChevronRight;
+	faSignOut = faSignOut;
 	// -------------------------------------
 
 
-
 	constructor(
 		public fullnodeService: FullnodeService,
 		public orderService: OrderService,
@@ -67,11 +75,32 @@ export class OrderComponent implements OnInit{
 		this.orderUpdate = orderService.orderUpdate;
 		this.orderUpdate.subscribe((order) => {
 			this.order = order;
+// ------------------------------------------------
+			this.oLines = [];
+			this.myLines = this.order.lines;
+            var nl = {} as newLineItem;
+
+			for ( let i = 0; i < this.myLines.length; i++ )
+			{
+//			   console.log("Loop : " + i + " - name : " + this.myLines[i].name);
+			   nl = this.fillLineData(i,this.myLines[i].name,
+			   	             this.myLines[i].qty,
+			   	             this.myLines[i].cost) ;
+//			   console.log(">> line_id: " + nl.line_id +
+//			   			   " name: " + nl.name +
+//			   			   " qty: " + nl.qty +
+//			   			   " cost: " + nl.cost + " <<" 	
+//			   	          )
+			   this.oLines.push(nl);
+               // this.oLines[i].cost = this.myLines[i].cost;
+ 			}
+// ------------------------------------------------
 		});
 		this.totalUpdate = orderService.totalUpdate;
 		this.totalUpdate.subscribe((total) => {
 			this.total = total;
 		});
+
 	}
 
 	ngOnInit() {
@@ -95,6 +124,7 @@ export class OrderComponent implements OnInit{
 				console.log('Returning to page');
 			}
 			this.orderService.getOrder();
+			this.oLines = [];
 		});
 	}
 
@@ -126,6 +156,7 @@ export class OrderComponent implements OnInit{
 				dialogRef2.afterClosed().subscribe( val => {
 					if (val) {
 						console.log('Receipt closed.');
+						this.oLines = [];
 					}
 				});
 			} else {
@@ -149,6 +180,7 @@ export class OrderComponent implements OnInit{
 		dialogRef.afterClosed().subscribe((val) => {
 			if (val) {
 				this.orderService.closeOrder(false);
+				this.oLines = [];
 			} else {
 				console.log('Returning to order');
 			}
@@ -159,8 +191,43 @@ export class OrderComponent implements OnInit{
 		return this.order.currency.toUpperCase();
 	}
 
-	trashCanClicked(item : LineItem, lines: LineItem[]) {
-		console.log(item);
-		console.log(lines);
+
+	fillLineData(i: number, 
+		         iname: string,
+		         iqty: number,
+		         icost: number) : newLineItem {
+
+		const a = { line_id: i, 
+			        name: iname, 
+			        qty: iqty, 
+			        cost: icost } as newLineItem;
+		return a;
+	}
+
+	trashCanClicked(item : newLineItem, lines: newLineItem[]) {
+
+		const dialogConfig = new MatDialogConfig();
+
+		dialogConfig.disableClose = true;
+		dialogConfig.autoFocus = true;
+		dialogConfig.data = {title: 'Remove Item?',
+		                     msg: 'Are you sure you want to remove   <<' + 
+		                          item.name + ' x ' + item.qty +
+		                          '>>   from this order?'};
+		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
+		dialogRef.afterClosed().subscribe((val) => {
+			if (val) {
+//				console.log('Deleting item at line: ' 
+//					         + (item.line_id +1)
+//					         + " => (" + item.name +")");
+				this.orderService.updateOrder(item.line_id,lines);
+				this.orderService.getOrder();
+					
+			} else {
+				console.log('Returning to order');
+			}
+		});
+
+
 	}
 }

src/app/order/order.service.ts

@@ -7,6 +7,7 @@ import { FullnodeService } from '../fullnode.service';
 import { User } from '../user.model';
 import { Owner } from '../owner.model';
 import { LineItem } from '../items/lineitem.model';
+import { newLineItem } from '../items/newlineitem.model';
 
 import { ConfigData } from '../configdata';
 
@@ -234,4 +235,34 @@ export class OrderService {
 		return obs;
 	}
 
+	updateOrder(itemid: number, iLines : newLineItem[]) {
+		if(this.dataStore.order._id != null) {
+
+			var item = {} as LineItem;
+			this.dataStore.order.lines = [];
+			for ( let i = 0; i < iLines.length; i++)
+			  {
+			  	 if ( i !== itemid )
+			  	 {
+				  	item = this.fillItemData(iLines[i].name, iLines[i].qty, iLines[i].cost);
+//				  	console.log("Push => ", item);
+ 					this.dataStore.order.lines.push(item);
+				 } 	
+			  }	
+			let obs = this.http.post(this.beUrl+'api/order', { payload: this.dataStore.order }, { headers: this.reqHeaders });
+			obs.subscribe((orderData) => {
+				this.getOrder();
+			});
+		}
+	}
+
+	fillItemData(iname:string, iqty: number, icost: number) : LineItem {
+
+		const a = { name: iname, 
+			        qty: iqty, 
+			        cost: icost } as LineItem;
+		return a;
+	}
+
+
 }