Order list redesigned to meet order creation format
This commit is contained in:
parent
918c236453
commit
0aeff00dfe
4 changed files with 185 additions and 188 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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; '/> {{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>
|
||||
|
|
|
|||
|
|
@ -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 ≅ {{ 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;"
|
||||
|
|
|
|||
Loading…
Reference in a new issue