From 0aeff00dfe98ed010e711518c99bac64439fac4f Mon Sep 17 00:00:00 2001 From: Rene Vergara A Date: Thu, 14 Jul 2022 21:35:06 -0500 Subject: [PATCH 1/3] 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 - -
-
- - - - - -
-

Today's Total:

-
- - {{todayTotal | number: '1.06'}} -
- 		-

Overall Total:

-
- - {{total | number: '1.06'}} -
-
-
-
- -
-
- - - - - -  {{order.totalZec | number: '1.06'}} - - - - -
- {{order.timestamp | date: 'short'}} -
- - -
-
Order Id: {{order._id}}
-
- - - - - - - - - - -
Order Total: - {{ order.totalZec | number: '1.06'}} -
- 1.0 = {{ order.price | currency: order.currency.toUpperCase()}} - - {{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}} -
+ + + + + + + +
+
Today's Total:
+
+ {{todayTotal | number: '1.06'}} +
+ 		+
Overall Total:
+
+ {{total | number: '1.06'}} +
+
+ +
+ + + + +
+ {{order.totalZec | number: '1.06'}} +
+ + + + + + + +
+ + + {{order.timestamp | date: 'short'}} +
+ + +
+
Order Id: {{order._id}}
+
- - - - - - - - - - - - - - - - - -
Item - Qty. - Total -
{{item.name}} - {{item.qty}} - {{item.qty * item.cost | number:'1.02' | currency: order.currency.toUpperCase() }} -
- - - -

No orders

-
-
+ + + + + + + + + + + + + + + + +
Item + Qty. + Total +
{{item.name}} + {{item.qty}} + {{item.qty * item.cost | number:'1.02' | currency: order.currency.toUpperCase() }} +
+ + +

No orders

+
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 @@
No open order! @@ -32,7 +32,6 @@ margin-bottom: -3px;" src="/assets/zec_rv.png" >1.0 ≅ {{ price | currency: getCurrency()}} - {{total | currency: getCurrency()}} @@ -41,45 +40,33 @@ - - + + - - - - - - + + + @@ -61,5 +63,9 @@

No items yet!


- + diff --git a/src/app/items/item-list/item-list.component.ts b/src/app/items/item-list/item-list.component.ts index edc7136..52a640e 100644 --- a/src/app/items/item-list/item-list.component.ts +++ b/src/app/items/item-list/item-list.component.ts @@ -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: '', @@ -49,6 +54,7 @@ export class ItemListComponent implements OnInit{ expiration: new Date(Date.now()).toISOString(), viewkey: '' }; + public ownerUpdate: Observable; public itemsUpdate: Observable; diff --git a/src/app/items/newlineitem.model.ts b/src/app/items/newlineitem.model.ts new file mode 100644 index 0000000..88c7a56 --- /dev/null +++ b/src/app/items/newlineitem.model.ts @@ -0,0 +1,6 @@ +export interface newLineItem { + line_id: number; + qty: number; + name: string; + cost: number; +} diff --git a/src/app/listorders/listorders.component.html b/src/app/listorders/listorders.component.html index d9676bb..45c191b 100644 --- a/src/app/listorders/listorders.component.html +++ b/src/app/listorders/listorders.component.html @@ -82,7 +82,7 @@ >1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
Item + Item Qty. + Qty. Total
{{item.name}} + width="55%">{{item.name}} {{item.qty}} + width="15%">{{item.qty}} Date: Sat, 16 Jul 2022 20:49:58 -0500 Subject: [PATCH 2/3] Trash can icon added to new order list - deleting line is not enabled yet. --- src/app/listorders/listorders.component.ts | 12 +++--- src/app/order/order.component.css | 37 +++++++++++++++--- src/app/order/order.component.html | 45 +++++++++++----------- src/app/order/order.component.ts | 18 +++++++++ 4 files changed, 80 insertions(+), 32 deletions(-) diff --git a/src/app/listorders/listorders.component.ts b/src/app/listorders/listorders.component.ts index fdf4aee..9ad26f8 100644 --- a/src/app/listorders/listorders.component.ts +++ b/src/app/listorders/listorders.component.ts @@ -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; // ------------------------------------- diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css index 7446731..3e881d4 100644 --- a/src/app/order/order.component.css +++ b/src/app/order/order.component.css @@ -11,14 +11,41 @@ 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; -} \ No newline at end of file +} + +.lineTrashCan { + cursor: pointer; +} + diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html index c67f8af..7be2b7f 100644 --- a/src/app/order/order.component.html +++ b/src/app/order/order.component.html @@ -1,20 +1,14 @@ -
+
No open order!
-
+
- + - + - - - + - - - +
Order Total: @@ -22,10 +16,7 @@ >{{(total/price) | number: '1.0-6'}}
Item + width="50%">Item Qty. Total
{{item.name}} + width="50%">{{item.name}} {{item.qty}} {{item.qty * item.cost | number:'1.02' | currency: getCurrency() }} + + + + +
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts index 93e99b9..cd480fe 100644 --- a/src/app/order/order.component.ts +++ b/src/app/order/order.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { MatDialog, MatDialogConfig} from '@angular/material/dialog'; import { Observable } from 'rxjs'; +import { LineItem } from '../items/lineitem.model'; import { Order } from './order.model'; import { FullnodeService } from '../fullnode.service'; import { OrderService } from './order.service'; @@ -10,6 +11,10 @@ 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'; + + @Component({ selector: 'app-order', templateUrl: './order.component.html', @@ -42,6 +47,14 @@ export class OrderComponent implements OnInit{ public priceUpdate: Observable; public totalUpdate: Observable; + // ------------------------------------ + // + faTrash = faTrash; + faTrashAlt = faTrashAlt; + // ------------------------------------- + + + constructor( public fullnodeService: FullnodeService, public orderService: OrderService, @@ -145,4 +158,9 @@ export class OrderComponent implements OnInit{ getCurrency(){ return this.order.currency.toUpperCase(); } + + trashCanClicked(item : LineItem, lines: LineItem[]) { + console.log(item); + console.log(lines); + } } From b8ebfa07d776d5bd09aa64d2bb342e084de76765 Mon Sep 17 00:00:00 2001 From: Rene Vergara A Date: Sun, 17 Jul 2022 19:46:56 -0500 Subject: [PATCH 3/3] Delete item in order funcionality active --- .../items/item-list/item-list.component.css | 24 +++--- .../items/item-list/item-list.component.html | 14 +++- .../items/item-list/item-list.component.ts | 10 ++- src/app/items/newlineitem.model.ts | 6 ++ src/app/listorders/listorders.component.html | 2 +- src/app/order/order.component.css | 23 ++++++ src/app/order/order.component.html | 46 ++++++++++-- src/app/order/order.component.ts | 75 ++++++++++++++++++- src/app/order/order.service.ts | 33 +++++++- 9 files changed, 200 insertions(+), 33 deletions(-) create mode 100644 src/app/items/newlineitem.model.ts diff --git a/src/app/items/item-list/item-list.component.css b/src/app/items/item-list/item-list.component.css index 1a8e670..652f03a 100644 --- a/src/app/items/item-list/item-list.component.css +++ b/src/app/items/item-list/item-list.component.css @@ -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; } diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html index f88eb92..a693018 100644 --- a/src/app/items/item-list/item-list.component.html +++ b/src/app/items/item-list/item-list.component.html @@ -49,8 +49,10 @@ --> -
- {{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}} + {{ order.total | currency: order.currency.toUpperCase()}}
diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css index 3e881d4..b27ca21 100644 --- a/src/app/order/order.component.css +++ b/src/app/order/order.component.css @@ -49,3 +49,26 @@ img.icon{ 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; +} diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html index 7be2b7f..81a5401 100644 --- a/src/app/order/order.component.html +++ b/src/app/order/order.component.html @@ -51,7 +51,8 @@ - + {{item.name}} @@ -65,10 +66,10 @@ width="30%">{{item.qty * item.cost | number:'1.02' | currency: getCurrency() }} - + @@ -77,21 +78,50 @@
+
+ + + -
- + - + + + + +
+ +
> 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() { @@ -95,6 +124,7 @@ export class OrderComponent implements OnInit{ console.log('Returning to page'); } this.orderService.getOrder(); + this.oLines = []; }); } @@ -126,6 +156,7 @@ export class OrderComponent implements OnInit{ dialogRef2.afterClosed().subscribe( val => { if (val) { console.log('Receipt closed.'); + this.oLines = []; } }); } else { @@ -149,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'); } @@ -159,8 +191,43 @@ export class OrderComponent implements OnInit{ return this.order.currency.toUpperCase(); } - trashCanClicked(item : LineItem, lines: LineItem[]) { - console.log(item); - console.log(lines); + + 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'); + } + }); + + } } diff --git a/src/app/order/order.service.ts b/src/app/order/order.service.ts index ab6cda3..5caf6a1 100644 --- a/src/app/order/order.service.ts +++ b/src/app/order/order.service.ts @@ -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'; @@ -234,4 +235,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; + } + + }