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

Trash can icon added to new order list - deleting line is not enabled yet.

Browse source
This commit is contained in:
Rene V. Vergara A. 2022-07-16 20:49:58 -05:00
parent e4a557660d
commit cbac13b373
4 changed files with 80 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/listorders/listorders.component.ts
View file

@ -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;
// -------------------------------------

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

@ -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;
}
.lineTrashCan {
cursor: pointer;
}

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

@ -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,10 +16,7 @@
>{{(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;
@ -43,35 +34,45 @@
<thead style="width: 100%;">
<tr style="background: lightblue;">
<th class="tbheader"
<th class="newOrdertbheader"
style="text-align: left;"
width="55%">Item
width="50%">Item
</th>
<th class="tbheader"
<th class="newOrdertbheader"
style="text-align: left;"
width="15%">Qty.
</th>
<th class="tbheader"
<th class="newOrdertbheader"
style="text-align: right;"
width="30%">Total
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of order.lines">
<td class="tbdetail"
<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}}
</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,order.lines)' >
<fa-icon [icon]="faTrashAlt"
style="color: lightslategrey;
font-size: 16px;
margin: auto;">
</fa-icon>
</a>
</td>
</tr>
</tbody>
</table>

18
src/app/order/order.component.ts
View file

@ -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<number>;
public totalUpdate: Observable<number>;
// ------------------------------------
//
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);
}
}