Vergara_Tech/zgo
Vergara_Tech/zgo
2
1
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Order list redesigned to meet order creation format

Browse source
This commit is contained in:
Rene V. Vergara A. 2022-07-14 21:35:06 -05:00
parent 918c236453
commit 0aeff00dfe
4 changed files with 185 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -13,7 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed ### Changed
- (2022-07-14) Order list reformated - some unused css classes removed.
- Added viewing key field to owner model - Added viewing key field to owner model
- (2022-07-11) Order's list UI updated (Alpha version) - (2022-07-11) Order's list UI updated (Alpha version)
+ Paid status icons added to order's title + Paid status icons added to order's title

55
src/app/listorders/listorders.component.css
View file

@ -51,15 +51,58 @@ img.icon{
} }
.total{ .total{
font-size: 15px; font-family: Roboto Mono;
font-family: 'Roboto Mono', monospace;
margin: auto; margin: auto;
} }
img.total{ .tbheader {
margin-bottom: -15px !important; font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
} }
.central{ .tbdetail {
max-width: 450px; 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;
} }

133
src/app/listorders/listorders.component.html
View file

@ -5,73 +5,63 @@
Back to Shop Back to Shop
</button> </button>
</div> </div>
<mat-divider></mat-divider> <table class="totalsTbl" width="100%">
<div align="center"> <tr class="totalsHdr">
<div class="central"> <td width="10%"></td>
<table class="text" style="font-size: 12px !important;" width="75%"> <td width="40%" >
<tr> <div class="totalsHdrTitle">Today's Total:</div>
<td width="50%" align="center"> <div class="totalsHdrDetail">
<h3>Today's Total:</h3>
<div class="total">
<img src="/assets/zec_rv.png" <img src="/assets/zec_rv.png"
style='height: 16px !important; style="height: 16px !important;
margin: -2px;'/> margin-bottom: -2px;">{{todayTotal | number: '1.06'}}
{{todayTotal | number: '1.06'}}
</div> </div>
</td> </td>
<td width="50%" align="center"> <td width="40%" >
<h3>Overall Total:</h3> <div class="totalsHdrTitle">Overall Total:</div>
<div class="total"> <div class="totalsHdrDetail">
<img src="/assets/zec_rv.png" <img src="/assets/zec_rv.png"
style='height: 16px !important; style="height: 16px !important;
margin: -2px;'/> margin-bottom: -2px;">{{total | number: '1.06'}}
{{total | number: '1.06'}}
</div> </div>
</td> </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> </tr>
</table> </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-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class='orderheader'> <div class='orderheader'>
<div class="text2"> <b>Order Id</b>: {{order._id}}</div> <div class="text2"> <b>Order Id</b>: {{order._id}}</div>
</div> </div>
<!--
order header
-->
<table style="width: 100%;" <table style="width: 100%;"
cellspacing="0"> cellspacing="0">
<tr style="font-family: Roboto Mono; <tr style="font-family: Roboto Mono;
font-size: 19px;
font-weight: 700; font-weight: 700;
font-size: 16px;
height: 20px;"> height: 20px;">
<td width="50%">Order Total:</td> <td width="50%">Order Total:</td>
<td align="right" <td align="right"
@ -81,7 +71,7 @@
</td> </td>
</tr> </tr>
<tr style="font-family: Roboto Mono; <tr style="font-family: Roboto Mono;
font-size: 16px; font-size: 15px;
font-weight: 400; font-weight: 400;
height: 18px;"> height: 18px;">
<td width="50%"> <td width="50%">
@ -98,38 +88,25 @@
</table> </table>
<table style="width: 100%;"> <table style="width: 100%;">
<!--
<div style="display: block;">
-->
<thead style="width: 100%;"> <thead style="width: 100%;">
<tr style="background: lightblue;"> <tr style="background: lightblue;">
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: left;"
font-weight: 700;
text-align: left;"
width="55%">Item width="55%">Item
</th> </th>
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: left;"
font-weight: 700;
text-align: left;"
width="15%">Qty. width="15%">Qty.
</th> </th>
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: right;"
font-weight: 700;
text-align: right;"
width="30%">Total width="30%">Total
</th> </th>
</tr> </tr>
</thead> </thead>
<!--
</div> <tbody>
--> <tr *ngFor="let item of order.lines">
<tbody style="overflow-y: auto;
overflow-x: hidden;">
<tr style="height: 20px !important;"
*ngFor="let item of order.lines">
<td class="tbdetail" <td class="tbdetail"
style="text-align: left;" style="text-align: left;"
width="55%">{{item.name}} width="55%">{{item.name}}
@ -145,17 +122,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!--
<mat-list>
<mat-list-item class="text small" *ngFor="let item of order.lines">{{item.qty}} x {{item.name}}</mat-list-item>
<div class="orderdetail" *ngFor="let item of order.lines">
{{ item.name }} Qty.: {{ item.qty }}
</div>
</mat-list>
-->
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<p class="text" *ngIf = "orders.length <= 0">No orders</p> <p class="text" *ngIf = "orders.length <= 0">No orders</p>
</div> </div>
</div>

35
src/app/order/order.component.html
View file

@ -1,6 +1,6 @@
<div align="center" <div align="center"
style="font-family: Roboto Mono; style="font-family: Roboto Mono;
font-size: 14PX; font-size: 14px;
font-weight: 700; font-weight: 700;
margin-top: 5px;" *ngIf="order.address.length == 0"> margin-top: 5px;" *ngIf="order.address.length == 0">
No open order! No open order!
@ -32,7 +32,6 @@
margin-bottom: -3px;" margin-bottom: -3px;"
src="/assets/zec_rv.png" src="/assets/zec_rv.png"
>1.0 &cong; {{ price | currency: getCurrency()}} >1.0 &cong; {{ price | currency: getCurrency()}}
</td> </td>
<td width="50%" align="right"> <td width="50%" align="right">
{{total | currency: getCurrency()}} {{total | currency: getCurrency()}}
@ -41,38 +40,26 @@
</table> </table>
</mat-card-title> </mat-card-title>
<table style="width: 100%;"> <table style="width: 100%;">
<!--
<div style="display: block;">
-->
<thead style="width: 100%;"> <thead style="width: 100%;">
<tr style="background: lightblue;"> <tr style="background: lightblue;">
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: left;"
font-weight: 700;
text-align: left;"
width="55%">Item width="55%">Item
</th> </th>
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: left;"
font-weight: 700;
text-align: left;"
width="15%">Qty. width="15%">Qty.
</th> </th>
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: right;"
font-weight: 700;
text-align: right;"
width="30%">Total width="30%">Total
</th> </th>
</tr> </tr>
</thead> </thead>
<!--
</div> <tbody>
--> <tr *ngFor="let item of order.lines">
<tbody style="overflow-y: auto;
overflow-x: hidden;">
<tr style="height: 20px !important;"
*ngFor="let item of order.lines">
<td class="tbdetail" <td class="tbdetail"
style="text-align: left;" style="text-align: left;"
width="55%">{{item.name}} width="55%">{{item.name}}