From 0aeff00dfe98ed010e711518c99bac64439fac4f Mon Sep 17 00:00:00 2001
From: Rene Vergara A <rvergara59@protonmail.com>
Date: Thu, 14 Jul 2022 21:35:06 -0500
Subject: [PATCH] Order list redesigned to meet order creation format

---
 CHANGELOG.md                                 |   2 +-
 src/app/listorders/listorders.component.css  |  55 +++-
 src/app/listorders/listorders.component.html | 271 ++++++++-----------
 src/app/order/order.component.html           |  45 ++-
 4 files changed, 185 insertions(+), 188 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4b6dcf..2ff1ab0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     
 ### Changed
-
+- (2022-07-14) Order list reformated - some unused css classes removed.
 - Added viewing key field to owner model
 - (2022-07-11) Order's list UI updated (Alpha version)
     + Paid status icons added to order's title
diff --git a/src/app/listorders/listorders.component.css b/src/app/listorders/listorders.component.css
index 04c27d7..7e750e5 100644
--- a/src/app/listorders/listorders.component.css
+++ b/src/app/listorders/listorders.component.css
@@ -51,15 +51,58 @@ img.icon{
 }
 
 .total{
-	font-size: 15px;
-	font-family: 'Roboto Mono', monospace;
+	font-family: Roboto Mono;
 	margin:  auto;
 }
 
-img.total{
-	margin-bottom:  -15px !important;
+.tbheader {
+	font-family:  Roboto Mono;
+	font-size: 14px;
+	font-weight: 700;
 }
 
-.central{
-	max-width: 450px;
+.tbdetail {
+	font-family:  Roboto Mono;
+	font-size: 14px;
+	font-weight: 400;
 }
+
+.totalsTbl {
+	margin-top: 15px;
+	border-bottom: solid;
+	border-color: lightgray;
+	border-width: 2px;
+	background: lightcyan;
+}
+
+.totalsHdr {
+	font-family:  Roboto Mono !important;
+	text-align: center;
+	margin-bottom: 50px;
+}
+
+.totalsHdrTitle {
+	font-size:  18px;
+	font-weight: 700;
+}
+
+.totalsHdrDetail {
+	font-size: 16px;
+	font-weight: 600;
+	margin-bottom: 5px;
+}
+
+.orderList {
+	font-family:  Roboto Mono !important;
+}
+
+.orderListTitle {
+	font-size: 16px;
+	font-weight: 600;
+}
+
+.orderListTitleDescr {
+	font-size: 16px;
+	font-weight: 600;
+	text-align:  justify;
+}
\ No newline at end of file
diff --git a/src/app/listorders/listorders.component.html b/src/app/listorders/listorders.component.html
index 4e42ba8..d9676bb 100644
--- a/src/app/listorders/listorders.component.html
+++ b/src/app/listorders/listorders.component.html
@@ -5,157 +5,124 @@
 		Back to Shop
 	</button>
 </div>
-<mat-divider></mat-divider>
-<div align="center">
-<div class="central">
-	<table class="text" style="font-size: 12px !important;" width="75%">
-		<tr>
-			<td width="50%" align="center">
-				<h3>Today's Total:</h3>
-				<div class="total">
-				   <img src="/assets/zec_rv.png" 
-						style='height: 16px !important;
-						       margin: -2px;'/>
-				   {{todayTotal | number: '1.06'}}
-				</div>
-			</td>
-			<td width="50%" align="center">
-				<h3>Overall Total:</h3>
-				<div class="total">
-				   <img src="/assets/zec_rv.png" 
-						style='height: 16px !important;
-						       margin: -2px;'/>
-				   {{total | number: '1.06'}}
-				</div>
-			</td>
-		</tr>
-	</table>
-</div>
-</div>
-<mat-divider></mat-divider>
-<div align="center">
-	<div class="central">
-		<mat-accordion *ngIf = "orders.length > 0">
-			<mat-expansion-panel class="text" *ngFor = "let order of orders">
-				<mat-expansion-panel-header class="text" >
-					<mat-panel-title>
-						<span class="price" 
-						      style='font-family: Roboto Mono !important;
-						             font-size: 14px; 
-						      		 font-weight: strong; 
-						      		 color:  black !important;
-						             margin: auto;'>
-						        <img src="/assets/zec_rv.png" 
-						             style='height: 16px;
-						                    margin: auto; '/>&nbsp;{{order.totalZec | number: '1.06'}}
-						</span>
-					</mat-panel-title>
-				    <mat-panel-description>
-						<fa-icon  [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
-						<div style='font-family: Roboto Mono !important;
-						            font-size: 14px;
-						            font-weight: strong; 
-						            color:  black !important;
-						            margin: auto;'>
-							{{order.timestamp | date: 'short'}}
-					    </div>
-					</mat-panel-description>
-				</mat-expansion-panel-header>
-				<div class='orderheader'>
-					<div class="text2"> <b>Order Id</b>: {{order._id}}</div>
-		  		</div>
-<!-- 
-     order header
--->      
-				<table style="width: 100%;" 
-				       cellspacing="0">
-					<tr style="font-family: Roboto Mono;
-					           font-size: 19px;
-					           font-weight: 700;
-					           height: 20px;">
-						<td width="50%">Order Total:</td>
-						<td align="right"
-						    width="50%">	
-							<img class="icon" src="/assets/zec_rv.png"
-							>{{ order.totalZec  | number: '1.06'}}
-						</td>
-					</tr>
-					<tr style="font-family: Roboto Mono;
-					           font-size: 16px;
-					           font-weight: 400;
-					           height: 18px;">
-						<td width="50%">
-							<img class="icon" 
-							     style="color: lightgray; 
-							            margin-bottom: -3px;" 
-							     src="/assets/zec_rv.png"
-							>1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
-						</td>
-						<td width="50%" align="right">
-							{{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}}
-						</td>
-					</tr>
-				</table>
+<table class="totalsTbl" width="100%">	
+	<tr class="totalsHdr">
+		<td width="10%"></td>
+		<td width="40%" >
+			<div class="totalsHdrTitle">Today's Total:</div>
+			<div class="totalsHdrDetail">
+			   <img src="/assets/zec_rv.png" 
+				   style="height: 16px !important;
+					     margin-bottom: -2px;">{{todayTotal | number: '1.06'}}
+			</div>
+		</td>
+		<td width="40%" >
+			<div class="totalsHdrTitle">Overall Total:</div>
+			<div class="totalsHdrDetail">
+			   <img src="/assets/zec_rv.png" 
+				   style="height: 16px !important;
+					     margin-bottom: -2px;">{{total | number: '1.06'}}
+			</div>
+		</td>
+		<td width="10%"></td>
+	</tr>
+</table>
+ 
+<div class="orderList">
+  <mat-accordion *ngIf = "orders.length > 0">
+	<mat-expansion-panel *ngFor = "let order of orders">
+		<mat-expansion-panel-header [collapsedHeight]="'30px'" [expandedHeight]="'30px'" >
+		   <mat-panel-title>
+			<div class="orderListTitle">
+  		        <img src="/assets/zec_rv.png" 
+			       style="height: 16px;
+			              margin-bottom: -2px;"
+			    >{{order.totalZec | number: '1.06'}}
+			</div>
+		   </mat-panel-title>
+		   <mat-panel-description>
+		   	 <table width="100%">
+		   	   <tr>	
+		   	   	<td>
+				   <fa-icon  [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
+			     </td>
+			     <td align="center">
+  			    		{{order.timestamp | date: 'short'}}
+  			    	</td>
+			   </tr>
+			 </table>
+		    </mat-panel-description>
+		</mat-expansion-panel-header>
+		<div class='orderheader'>
+			<div class="text2"> <b>Order Id</b>: {{order._id}}</div>
+  		</div>
 
-				<table style="width: 100%;">
-		<!--			
-					<div style="display: block;">
-		-->
-		            <thead style="width: 100%;">
-						<tr style="background: lightblue;">
-							<th style= "font-family:  Roboto Mono;
-										font-size: 14px;
-										font-weight: 700;
-										text-align: left;" 
-								width="55%">Item
-							</th>
-							<th style= "font-family:  Roboto Mono;
-										font-size: 14px;
-										font-weight: 700;
-										text-align: left;" 
-								width="15%">Qty.
-							</th>
-							<th style= "font-family:  Roboto Mono;
-										font-size: 14px;
-										font-weight: 700;
-										text-align: right;" 
-							    width="30%">Total
-							</th>
-						</tr>
-					</thead>	
-		<!--
-				    </div>
-		-->
-				    <tbody style="overflow-y: auto;    
-							      overflow-x: hidden;">
-						<tr style="height: 20px !important;" 
-						    *ngFor="let item of order.lines">
-							<td class="tbdetail" 
-							    style="text-align: left;" 
-								width="55%">{{item.name}}
-							</td>
-							<td class="tbdetail" 
-							    style="text-align: left;" 
-								width="15%">{{item.qty}}
-							</td>
-							<td class="tbdetail" 
-							    style="text-align: right;" 
-							    width="30%">{{item.qty * item.cost | number:'1.02' | currency: order.currency.toUpperCase() }} 
-							</td>
-						</tr>
-					</tbody>
-				</table>
-<!--					
-				<mat-list>
-					<mat-list-item class="text small" *ngFor="let item of order.lines">{{item.qty}} x {{item.name}}</mat-list-item>
+		<table style="width: 100%;" 
+		       cellspacing="0">
+			<tr style="font-family: Roboto Mono;
+			           font-weight: 700;
+			           font-size: 16px;
+			           height: 20px;">
+				<td width="50%">Order Total:</td>
+				<td align="right"
+				    width="50%">	
+					<img class="icon" src="/assets/zec_rv.png"
+					>{{ order.totalZec  | number: '1.06'}}
+				</td>
+			</tr>
+			<tr style="font-family: Roboto Mono;
+			           font-size: 15px;
+			           font-weight: 400;
+			           height: 18px;">
+				<td width="50%">
+					<img class="icon" 
+					     style="color: lightgray; 
+					            margin-bottom: -3px;" 
+					     src="/assets/zec_rv.png"
+					>1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
+				</td>
+				<td width="50%" align="right">
+					{{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}}
+				</td>
+			</tr>
+		</table>
 
-					<div class="orderdetail" *ngFor="let item of order.lines">
-						{{ item.name }} Qty.: {{ item.qty }} 
-					</div>	
-				</mat-list>
--->
-			</mat-expansion-panel>
-		</mat-accordion>
-		<p class="text" *ngIf = "orders.length <= 0">No orders</p>
-	</div>
-</div>
+		<table style="width: 100%;">
+             <thead style="width: 100%;">
+				<tr style="background: lightblue;">
+					<th class="tbheader"
+					    style="text-align: left;" 
+					    width="55%">Item
+					</th>
+					<th class="tbheader"
+					    style="text-align: left;" 
+					    width="15%">Qty.
+					</th>
+					<th class="tbheader"
+					    style="text-align: right;" 
+					    width="30%">Total
+					</th>
+				</tr>
+		    </thead>	
+
+		    <tbody>
+				<tr *ngFor="let item of order.lines">
+					<td class="tbdetail" 
+					    style="text-align: left;" 
+					    width="55%">{{item.name}}
+					</td>
+					<td class="tbdetail" 
+					    style="text-align: left;" 
+					    width="15%">{{item.qty}}
+					</td>
+					<td class="tbdetail" 
+					    style="text-align: right;" 
+					    width="30%">{{item.qty * item.cost | number:'1.02' | currency: order.currency.toUpperCase() }} 
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</mat-expansion-panel>
+  </mat-accordion>
+  <p class="text" *ngIf = "orders.length <= 0">No orders</p>
+</div> 	
diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
index a81ca57..c67f8af 100644
--- a/src/app/order/order.component.html
+++ b/src/app/order/order.component.html
@@ -1,6 +1,6 @@
 <div align="center" 
      style="font-family: Roboto Mono;
-            font-size: 14PX;
+            font-size: 14px;
             font-weight: 700;
             margin-top: 5px;" *ngIf="order.address.length == 0">
 	No open order!
@@ -32,7 +32,6 @@
 						            margin-bottom: -3px;" 
 						     src="/assets/zec_rv.png"
 						>1.0 &cong; {{ price | currency: getCurrency()}}
-
 					</td>
 					<td width="50%" align="right">
 						{{total | currency: getCurrency()}}
@@ -41,45 +40,33 @@
 			</table>
 		</mat-card-title>
 		<table style="width: 100%;">
-<!--			
-			<div style="display: block;">
--->
-            <thead style="width: 100%;">
+
+            	<thead style="width: 100%;">
 				<tr style="background: lightblue;">
-					<th style= "font-family:  Roboto Mono;
-								font-size: 14px;
-								font-weight: 700;
-								text-align: left;" 
-						width="55%">Item
+					<th class="tbheader"
+					    style="text-align: left;" 
+					    width="55%">Item
 					</th>
-					<th style= "font-family:  Roboto Mono;
-								font-size: 14px;
-								font-weight: 700;
-								text-align: left;" 
-						width="15%">Qty.
+					<th class="tbheader"
+					    style="text-align: left;" 
+					    width="15%">Qty.
 					</th>
-					<th style= "font-family:  Roboto Mono;
-								font-size: 14px;
-								font-weight: 700;
-								text-align: right;" 
+					<th class="tbheader"
+					    style="text-align: right;" 
 					    width="30%">Total
 					</th>
 				</tr>
 			</thead>	
-<!--
-		    </div>
--->
-		    <tbody style="overflow-y: auto;    
-					      overflow-x: hidden;">
-				<tr style="height: 20px !important;" 
-				    *ngFor="let item of order.lines">
+
+		     <tbody>
+				<tr *ngFor="let item of order.lines">
 					<td class="tbdetail" 
 					    style="text-align: left;" 
-						width="55%">{{item.name}}
+					    width="55%">{{item.name}}
 					</td>
 					<td class="tbdetail" 
 					    style="text-align: left;" 
-						width="15%">{{item.qty}}
+					    width="15%">{{item.qty}}
 					</td>
 					<td class="tbdetail" 
 					    style="text-align: right;"