Trash can icon added to new order list - deleting line is not enabled yet.

src/app/listorders/listorders.component.ts

@@ -6,11 +6,12 @@ import { UserService } from '../user.service';
 import {Owner} from '../owner.model';
 import { OrderService } from '../order/order.service';
 
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { faHourglass } from '@fortawesome/free-solid-svg-icons'
+import { faHourglass } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
 	selector: 'app-list-orders',
@@ -32,6 +33,7 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
 	faCheck = faCheck;
 	faCheckCircle = faCheckCircle;
 	faHourglass = faHourglass;
+	faTrash = faTrash;
 	// -------------------------------------
 
 

src/app/order/order.component.css

@@ -11,14 +11,41 @@ img.icon{
 	height: 18px;
 }
 
-.tbheader {
+.noOrderMsg {
 	font-family: Roboto Mono;
     font-size: 14px;
     font-weight: 700;
+    margin-top: 5px; 
+    align-items: center;
+}
+
+.newOrder {
+	font-family:  Roboto Mono !important;
+}
+
+.newOrderTitle1 {
+	font-size: 19px;
+	font-weight: 700;
+	height: 20px;
+}
+
+.newOrderTitle2 {
+	font-size: 16px;
+	font-weight: 400;
+	height: 18px;
+}
+
+.newOrdertbheader {
+	font-size: 14px;
+	font-weight: 700;
 }
 
-.tbdetail {
+.newOrdertbdetail {
-	font-family:  Roboto Mono;
 	font-size: 14px;
 	font-weight: 400;
 }
+
+.lineTrashCan {
+	cursor:  pointer;
+}
+

src/app/order/order.component.html

@@ -1,20 +1,14 @@
-<div align="center" 
+<div class="noOrderMsg" 
-     style="font-family: Roboto Mono;
+     *ngIf="order.address.length == 0">
-            font-size: 14px;
-            font-weight: 700;
-            margin-top: 5px;" *ngIf="order.address.length == 0">
 	No open order!
 </div>
 <mat-card style="margin-top: 10px;" *ngIf="order.address.length" >
 
-	<div>
+	<div class="newOrder">
 		<mat-card-title>
 			<table style="width: 100%;" 
 			       cellspacing="0">
-				<tr style="font-family: Roboto Mono;
+				<tr class="newOrderTitle1">
-				           font-size: 19px;
-				           font-weight: 700;
-				           height: 20px;">
 					<td width="50%">Order Total:</td>
 					<td align="right"
 					    width="50%">	
@@ -22,10 +16,7 @@
 						>{{(total/price) | number: '1.0-6'}}
 					</td>
 				</tr>
-				<tr style="font-family: Roboto Mono;
+				<tr class="newOrderTitle2">
-				           font-size: 16px;
-				           font-weight: 400;
-				           height: 18px;">
 					<td width="50%">
 						<img class="icon" 
 						     style="color: lightgray; 
@@ -43,35 +34,45 @@
 
             	<thead style="width: 100%;">
 				<tr style="background: lightblue;">
-					<th class="tbheader"
+					<th class="newOrdertbheader"
 					    style="text-align: left;" 
-					    width="55%">Item
+					    width="50%">Item
 					</th>
-					<th class="tbheader"
+					<th class="newOrdertbheader"
 					    style="text-align: left;" 
 					    width="15%">Qty.
 					</th>
-					<th class="tbheader"
+					<th class="newOrdertbheader"
 					    style="text-align: right;" 
 					    width="30%">Total
 					</th>
+					<th></th>
 				</tr>
 			</thead>	
 
 		     <tbody>
 				<tr *ngFor="let item of order.lines">
-					<td class="tbdetail" 
+					<td class="newOrdertbdetail" 
 					    style="text-align: left;" 
-					    width="55%">{{item.name}}
+					    width="50%">{{item.name}}
 					</td>
-					<td class="tbdetail" 
+					<td class="newOrdertbdetail" 
 					    style="text-align: left;" 
 					    width="15%">{{item.qty}}
 					</td>
-					<td class="tbdetail" 
+					<td class="newOrdertbdetail" 
 					    style="text-align: right;" 
 					    width="30%">{{item.qty * item.cost | number:'1.02' | currency: getCurrency() }} 
 					</td>
+					<td class="lineTrashCan">
+				        <a (click)='trashCanClicked(item,order.lines)' >	
+						   <fa-icon [icon]="faTrashAlt" 
+						            style="color: lightslategrey; 
+						                   font-size: 16px;
+						                   margin: auto;">
+						   </fa-icon>
+					   </a>
+					</td>
 				</tr>
 			</tbody>
 		</table>

src/app/order/order.component.ts

@@ -1,6 +1,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 { Order } from './order.model';
 import { FullnodeService } from '../fullnode.service';
 import { OrderService } from './order.service';
@@ -10,6 +11,10 @@ import { PromptInvoiceComponent } from '../prompt-invoice/prompt-invoice.compone
 import { ReceiptQRComponent} from '../receipt-qr/receipt-qr.component';
 import { faFileInvoiceDollar } from '@fortawesome/free-solid-svg-icons';
 
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+
+
 @Component({
 	selector: 'app-order',
 	templateUrl: './order.component.html',
@@ -42,6 +47,14 @@ export class OrderComponent implements OnInit{
 	public priceUpdate: Observable<number>;
 	public totalUpdate: Observable<number>;
 
+	// ------------------------------------
+	//
+	faTrash = faTrash;
+	faTrashAlt = faTrashAlt;
+	// -------------------------------------
+
+
+
 	constructor(
 		public fullnodeService: FullnodeService,
 		public orderService: OrderService,
@@ -145,4 +158,9 @@ export class OrderComponent implements OnInit{
 	getCurrency(){
 		return this.order.currency.toUpperCase();
 	}
+
+	trashCanClicked(item : LineItem, lines: LineItem[]) {
+		console.log(item);
+		console.log(lines);
+	}
 }