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

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

@ -5,157 +5,124 @@
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> <img src="/assets/zec_rv.png"
<div class="total"> style="height: 16px !important;
<img src="/assets/zec_rv.png" margin-bottom: -2px;">{{todayTotal | number: '1.06'}}
style='height: 16px !important; </div>
margin: -2px;'/> </td>
{{todayTotal | number: '1.06'}} <td width="40%" >
</div> <div class="totalsHdrTitle">Overall Total:</div>
</td> <div class="totalsHdrDetail">
<td width="50%" align="center"> <img src="/assets/zec_rv.png"
<h3>Overall Total:</h3> style="height: 16px !important;
<div class="total"> margin-bottom: -2px;">{{total | number: '1.06'}}
<img src="/assets/zec_rv.png" </div>
style='height: 16px !important; </td>
margin: -2px;'/> <td width="10%"></td>
{{total | number: '1.06'}} </tr>
</div> </table>
</td>
</tr> <div class="orderList">
</table> <mat-accordion *ngIf = "orders.length > 0">
</div> <mat-expansion-panel *ngFor = "let order of orders">
</div> <mat-expansion-panel-header [collapsedHeight]="'30px'" [expandedHeight]="'30px'" >
<mat-divider></mat-divider> <mat-panel-title>
<div align="center"> <div class="orderListTitle">
<div class="central"> <img src="/assets/zec_rv.png"
<mat-accordion *ngIf = "orders.length > 0"> style="height: 16px;
<mat-expansion-panel class="text" *ngFor = "let order of orders"> margin-bottom: -2px;"
<mat-expansion-panel-header class="text" > >{{order.totalZec | number: '1.06'}}
<mat-panel-title> </div>
<span class="price" </mat-panel-title>
style='font-family: Roboto Mono !important; <mat-panel-description>
font-size: 14px; <table width="100%">
font-weight: strong; <tr>
color: black !important; <td>
margin: auto;'> <fa-icon [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
<img src="/assets/zec_rv.png" </td>
style='height: 16px; <td align="center">
margin: auto; '/>&nbsp;{{order.totalZec | number: '1.06'}} {{order.timestamp | date: 'short'}}
</span> </td>
</mat-panel-title> </tr>
<mat-panel-description> </table>
<fa-icon [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon> </mat-panel-description>
<div style='font-family: Roboto Mono !important; </mat-expansion-panel-header>
font-size: 14px; <div class='orderheader'>
font-weight: strong; <div class="text2"> <b>Order Id</b>: {{order._id}}</div>
color: black !important; </div>
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 style="width: 100%;"> <table style="width: 100%;"
<!-- cellspacing="0">
<div style="display: block;"> <tr style="font-family: Roboto Mono;
--> font-weight: 700;
<thead style="width: 100%;"> font-size: 16px;
<tr style="background: lightblue;"> height: 20px;">
<th style= "font-family: Roboto Mono; <td width="50%">Order Total:</td>
font-size: 14px; <td align="right"
font-weight: 700; width="50%">
text-align: left;" <img class="icon" src="/assets/zec_rv.png"
width="55%">Item >{{ order.totalZec | number: '1.06'}}
</th> </td>
<th style= "font-family: Roboto Mono; </tr>
font-size: 14px; <tr style="font-family: Roboto Mono;
font-weight: 700; font-size: 15px;
text-align: left;" font-weight: 400;
width="15%">Qty. height: 18px;">
</th> <td width="50%">
<th style= "font-family: Roboto Mono; <img class="icon"
font-size: 14px; style="color: lightgray;
font-weight: 700; margin-bottom: -3px;"
text-align: right;" src="/assets/zec_rv.png"
width="30%">Total >1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
</th> </td>
</tr> <td width="50%" align="right">
</thead> {{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}}
<!-- </td>
</div> </tr>
--> </table>
<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>
<div class="orderdetail" *ngFor="let item of order.lines"> <table style="width: 100%;">
{{ item.name }} Qty.: {{ item.qty }} <thead style="width: 100%;">
</div> <tr style="background: lightblue;">
</mat-list> <th class="tbheader"
--> style="text-align: left;"
</mat-expansion-panel> width="55%">Item
</mat-accordion> </th>
<p class="text" *ngIf = "orders.length <= 0">No orders</p> <th class="tbheader"
</div> style="text-align: left;"
</div> 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>

45
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,45 +40,33 @@
</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; width="55%">Item
text-align: left;"
width="55%">Item
</th> </th>
<th style= "font-family: Roboto Mono; <th class="tbheader"
font-size: 14px; style="text-align: left;"
font-weight: 700; width="15%">Qty.
text-align: left;"
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}}
</td> </td>
<td class="tbdetail" <td class="tbdetail"
style="text-align: left;" style="text-align: left;"
width="15%">{{item.qty}} width="15%">{{item.qty}}
</td> </td>
<td class="tbdetail" <td class="tbdetail"
style="text-align: right;" style="text-align: right;"