Merge branch 'zgo-test' of gitlab.com:pitmutt/zgo into zgo-test
This commit is contained in:
commit
f4d8619239
GPG key ID:
65122AD495A7F5B2
12 changed files with 451 additions and 239 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
|
||||
|
|
|
|||
|
|
@ -35,17 +35,15 @@ p.price{
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/* Style buttons */
|
||||
.btn {
|
||||
background-color: DodgerBlue; /* Blue background */
|
||||
border: none; /* Remove borders */
|
||||
color: white; /* White text */
|
||||
padding: 12px 16px; /* Some padding */
|
||||
font-size: 16px; /* Set a font size */
|
||||
cursor: pointer; /* Mouse pointer on hover */
|
||||
}
|
||||
|
||||
/* Darker background on mouse-over */
|
||||
.btn:hover {
|
||||
background-color: RoyalBlue;
|
||||
.buttons-class-cart{
|
||||
background-color: #ff4700;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 25px !important;
|
||||
width: 50px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,8 +49,10 @@
|
|||
</fa-icon>
|
||||
</button>
|
||||
-->
|
||||
<button mat-raised-button color="primary" class="icons" (click)="addToOrder(item._id!)">
|
||||
<mat-icon>shopping_cart</mat-icon>
|
||||
<button mat-raised-button color="primary"
|
||||
class="buttons-class-cart"
|
||||
(click)="addToOrder(item._id!)">
|
||||
<mat-icon [inline]="true">shopping_cart</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -61,5 +63,9 @@
|
|||
</div>
|
||||
<p *ngIf = "items.length <= 0">No items yet!</p>
|
||||
<br>
|
||||
<button class="text" mat-raised-button (click)="openDialog()">
|
||||
<mat-icon class="icon">add</mat-icon>Add item</button>
|
||||
<button class="text"
|
||||
mat-raised-button
|
||||
(click)="openDialog()">
|
||||
<mat-icon class="icon">add</mat-icon>
|
||||
Add item
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
|
||||
|
||||
import { faCartShopping } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { Observable } from 'rxjs';
|
||||
import { Item } from '../item.model';
|
||||
import { Owner } from '../../owner.model';
|
||||
|
|
@ -20,10 +23,12 @@ import { ItemAddComponent } from '../item-add/item-add.component';
|
|||
|
||||
export class ItemListComponent implements OnInit{
|
||||
|
||||
@Input()
|
||||
zecPrice: number = 1;
|
||||
@Input() zecPrice: number = 1;
|
||||
|
||||
public items: Item[] = [];
|
||||
|
||||
faCartShopping = faCartShopping;
|
||||
|
||||
owner: Owner = {
|
||||
_id: '',
|
||||
name: '',
|
||||
|
|
@ -50,6 +55,7 @@ export class ItemListComponent implements OnInit{
|
|||
payconf: false,
|
||||
viewkey: ''
|
||||
};
|
||||
|
||||
public ownerUpdate: Observable<Owner>;
|
||||
public itemsUpdate: Observable<Item[]>;
|
||||
|
||||
|
|
|
|||
6
src/app/items/newlineitem.model.ts
Normal file
6
src/app/items/newlineitem.model.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export interface newLineItem {
|
||||
line_id: number;
|
||||
qty: number;
|
||||
name: string;
|
||||
cost: number;
|
||||
}
|
||||
|
|
@ -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 | 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>
|
||||
|
|
|
|||
|
|
@ -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 { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faHourglass } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCheck } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCheckCircle } 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;
|
||||
// -------------------------------------
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,14 +11,64 @@ img.icon{
|
|||
height: 18px;
|
||||
}
|
||||
|
||||
.tbheader {
|
||||
font-family: Roboto Mono;
|
||||
.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 {
|
||||
font-family: Roboto Mono;
|
||||
.newOrdertbdetail {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.lineTrashCan {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttons-class {
|
||||
background-color: #ff4700;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
height: 25px !important;
|
||||
width: 80px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.button-cancel-class {
|
||||
font-weight: 700;
|
||||
height: 25px !important;
|
||||
width: 80px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,14 @@
|
|||
<div align="center"
|
||||
style="font-family: Roboto Mono;
|
||||
font-size: 14PX;
|
||||
font-weight: 700;
|
||||
margin-top: 5px;" *ngIf="order.address.length == 0">
|
||||
<div class="noOrderMsg"
|
||||
*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;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
height: 20px;">
|
||||
<tr class="newOrderTitle1">
|
||||
<td width="50%">Order Total:</td>
|
||||
<td align="right"
|
||||
width="50%">
|
||||
|
|
@ -22,17 +16,13 @@
|
|||
>{{(total/price) | number: '1.0-6'}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
height: 18px;">
|
||||
<tr class="newOrderTitle2">
|
||||
<td width="50%">
|
||||
<img class="icon"
|
||||
style="color: lightgray;
|
||||
margin-bottom: -3px;"
|
||||
src="/assets/zec_rv.png"
|
||||
>1.0 ≅ {{ price | currency: getCurrency()}}
|
||||
|
||||
</td>
|
||||
<td width="50%" align="right">
|
||||
{{total | currency: getCurrency()}}
|
||||
|
|
@ -41,69 +31,97 @@
|
|||
</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="newOrdertbheader"
|
||||
style="text-align: left;"
|
||||
width="50%">Item
|
||||
</th>
|
||||
<th style= "font-family: Roboto Mono;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: left;"
|
||||
width="15%">Qty.
|
||||
<th class="newOrdertbheader"
|
||||
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="newOrdertbheader"
|
||||
style="text-align: right;"
|
||||
width="30%">Total
|
||||
</th>
|
||||
<th></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"
|
||||
|
||||
<tbody>
|
||||
<tr style="height: 30px;"
|
||||
*ngFor="let item of oLines">
|
||||
<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}}
|
||||
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,oLines)' >
|
||||
<fa-icon [icon]="faTrashAlt"
|
||||
style="color: lightslategrey;
|
||||
font-size: 14px;
|
||||
margin: auto;">
|
||||
</fa-icon>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="container" style="margin: 2px;
|
||||
height: 35px;
|
||||
background: lightblue;
|
||||
border-top: 2px solid lightgray;
|
||||
border-bottom: 2px solid lightgray;
|
||||
align-content: center;
|
||||
justify-content: center;">
|
||||
<!--
|
||||
<mat-card-actions>
|
||||
<table cellspacing="0" width="100%">
|
||||
<tr>
|
||||
-->
|
||||
<table style="margin-top: 4px;" cellspacing="0" width="100%">
|
||||
<tr style="height: 16px;
|
||||
margin-top: 10px">
|
||||
<td>
|
||||
<button mat-raised-button class="text" (click)="cancelOrder()">Cancel</button>
|
||||
<button mat-raised-button
|
||||
class="button-cancel-class"
|
||||
(click)="cancelOrder()">
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button mat-raised-button class="text" (click)="invoice()"><fa-icon [icon]="faInvoice" size="2x"></fa-icon> Invoice</button>
|
||||
<button mat-raised-button
|
||||
class="buttons-class"
|
||||
(click)="invoice()">
|
||||
<fa-icon [icon]="faInvoice" ></fa-icon> Invoice
|
||||
</button>
|
||||
</td>
|
||||
<td align="right">
|
||||
<td align="right">
|
||||
|
||||
<button mat-raised-button
|
||||
class="buttons-class"
|
||||
(click)="checkout()">
|
||||
Checkout
|
||||
</button>
|
||||
<!--
|
||||
<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>
|
||||
-->
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--
|
||||
</mat-card-actions>
|
||||
-->
|
||||
</div>
|
||||
</mat-card>
|
||||
<div style="font-family: Roboto Mono;
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
|
||||
import { Observable } from 'rxjs';
|
||||
import { LineItem } from '../items/lineitem.model';
|
||||
import { newLineItem } from '../items/newlineitem.model';
|
||||
import { Order } from './order.model';
|
||||
import { FullnodeService } from '../fullnode.service';
|
||||
import { OrderService } from './order.service';
|
||||
|
|
@ -10,6 +12,12 @@ 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';
|
||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faSignOut } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-order',
|
||||
templateUrl: './order.component.html',
|
||||
|
|
@ -17,6 +25,10 @@ import { faFileInvoiceDollar } from '@fortawesome/free-solid-svg-icons';
|
|||
})
|
||||
|
||||
export class OrderComponent implements OnInit{
|
||||
|
||||
public oLines : newLineItem[] = [];
|
||||
public myLines : LineItem[] = [];
|
||||
|
||||
faInvoice = faFileInvoiceDollar;
|
||||
public order: Order = {
|
||||
address: '',
|
||||
|
|
@ -42,6 +54,15 @@ export class OrderComponent implements OnInit{
|
|||
public priceUpdate: Observable<number>;
|
||||
public totalUpdate: Observable<number>;
|
||||
|
||||
// ------------------------------------
|
||||
//
|
||||
faTrash = faTrash;
|
||||
faTrashAlt = faTrashAlt;
|
||||
faChevronRight = faChevronRight;
|
||||
faSignOut = faSignOut;
|
||||
// -------------------------------------
|
||||
|
||||
|
||||
constructor(
|
||||
public fullnodeService: FullnodeService,
|
||||
public orderService: OrderService,
|
||||
|
|
@ -54,11 +75,32 @@ export class OrderComponent implements OnInit{
|
|||
this.orderUpdate = orderService.orderUpdate;
|
||||
this.orderUpdate.subscribe((order) => {
|
||||
this.order = order;
|
||||
// ------------------------------------------------
|
||||
this.oLines = [];
|
||||
this.myLines = this.order.lines;
|
||||
var nl = {} as newLineItem;
|
||||
|
||||
for ( let i = 0; i < this.myLines.length; i++ )
|
||||
{
|
||||
// console.log("Loop : " + i + " - name : " + this.myLines[i].name);
|
||||
nl = this.fillLineData(i,this.myLines[i].name,
|
||||
this.myLines[i].qty,
|
||||
this.myLines[i].cost) ;
|
||||
// console.log(">> line_id: " + nl.line_id +
|
||||
// " name: " + nl.name +
|
||||
// " qty: " + nl.qty +
|
||||
// " cost: " + nl.cost + " <<"
|
||||
// )
|
||||
this.oLines.push(nl);
|
||||
// this.oLines[i].cost = this.myLines[i].cost;
|
||||
}
|
||||
// ------------------------------------------------
|
||||
});
|
||||
this.totalUpdate = orderService.totalUpdate;
|
||||
this.totalUpdate.subscribe((total) => {
|
||||
this.total = total;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -82,6 +124,7 @@ export class OrderComponent implements OnInit{
|
|||
console.log('Returning to page');
|
||||
}
|
||||
this.orderService.getOrder();
|
||||
this.oLines = [];
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -113,6 +156,7 @@ export class OrderComponent implements OnInit{
|
|||
dialogRef2.afterClosed().subscribe( val => {
|
||||
if (val) {
|
||||
console.log('Receipt closed.');
|
||||
this.oLines = [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
|
@ -136,6 +180,7 @@ export class OrderComponent implements OnInit{
|
|||
dialogRef.afterClosed().subscribe((val) => {
|
||||
if (val) {
|
||||
this.orderService.closeOrder(false);
|
||||
this.oLines = [];
|
||||
} else {
|
||||
console.log('Returning to order');
|
||||
}
|
||||
|
|
@ -145,4 +190,44 @@ export class OrderComponent implements OnInit{
|
|||
getCurrency(){
|
||||
return this.order.currency.toUpperCase();
|
||||
}
|
||||
|
||||
|
||||
fillLineData(i: number,
|
||||
iname: string,
|
||||
iqty: number,
|
||||
icost: number) : newLineItem {
|
||||
|
||||
const a = { line_id: i,
|
||||
name: iname,
|
||||
qty: iqty,
|
||||
cost: icost } as newLineItem;
|
||||
return a;
|
||||
}
|
||||
|
||||
trashCanClicked(item : newLineItem, lines: newLineItem[]) {
|
||||
|
||||
const dialogConfig = new MatDialogConfig();
|
||||
|
||||
dialogConfig.disableClose = true;
|
||||
dialogConfig.autoFocus = true;
|
||||
dialogConfig.data = {title: 'Remove Item?',
|
||||
msg: 'Are you sure you want to remove <<' +
|
||||
item.name + ' x ' + item.qty +
|
||||
'>> from this order?'};
|
||||
const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
|
||||
dialogRef.afterClosed().subscribe((val) => {
|
||||
if (val) {
|
||||
// console.log('Deleting item at line: '
|
||||
// + (item.line_id +1)
|
||||
// + " => (" + item.name +")");
|
||||
this.orderService.updateOrder(item.line_id,lines);
|
||||
this.orderService.getOrder();
|
||||
|
||||
} else {
|
||||
console.log('Returning to order');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ import { UserService } from '../user.service';
|
|||
import { FullnodeService } from '../fullnode.service';
|
||||
import { User } from '../user.model';
|
||||
import { Owner } from '../owner.model';
|
||||
import { LineItem} from '../items/lineitem.model';
|
||||
import { LineItem } from '../items/lineitem.model';
|
||||
import { newLineItem } from '../items/newlineitem.model';
|
||||
|
||||
import { ConfigData } from '../configdata';
|
||||
|
||||
|
|
@ -235,4 +236,34 @@ export class OrderService {
|
|||
return obs;
|
||||
}
|
||||
|
||||
updateOrder(itemid: number, iLines : newLineItem[]) {
|
||||
if(this.dataStore.order._id != null) {
|
||||
|
||||
var item = {} as LineItem;
|
||||
this.dataStore.order.lines = [];
|
||||
for ( let i = 0; i < iLines.length; i++)
|
||||
{
|
||||
if ( i !== itemid )
|
||||
{
|
||||
item = this.fillItemData(iLines[i].name, iLines[i].qty, iLines[i].cost);
|
||||
// console.log("Push => ", item);
|
||||
this.dataStore.order.lines.push(item);
|
||||
}
|
||||
}
|
||||
let obs = this.http.post(this.beUrl+'api/order', { payload: this.dataStore.order }, { headers: this.reqHeaders });
|
||||
obs.subscribe((orderData) => {
|
||||
this.getOrder();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
fillItemData(iname:string, iqty: number, icost: number) : LineItem {
|
||||
|
||||
const a = { name: iname,
|
||||
qty: iqty,
|
||||
cost: icost } as LineItem;
|
||||
return a;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue