From 53c3d5e78effc26de14d9cc72e734fc7f7e81cb7 Mon Sep 17 00:00:00 2001 From: Rene Vergara A Date: Sun, 9 Oct 2022 09:40:58 -0500 Subject: [PATCH] Db-export component ready for testing --- CHANGELOG.md | 2 + src/app/db-export/db-export.component.css | 60 +++++++- src/app/db-export/db-export.component.html | 65 ++++++++- src/app/db-export/db-export.component.ts | 146 +++++++++++++++++-- src/app/listorders/listorders.component.css | 4 +- src/app/listorders/listorders.component.html | 11 +- 6 files changed, 259 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 073e50c..62eeb25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +- New component added to export orders in CSV format. Allows users to download orders. + ## [1.3.1] - 2022-10-08 ## Fixed diff --git a/src/app/db-export/db-export.component.css b/src/app/db-export/db-export.component.css index e6cf954..e4f5e91 100644 --- a/src/app/db-export/db-export.component.css +++ b/src/app/db-export/db-export.component.css @@ -1,3 +1,35 @@ +* { + font-family: 'Spartan', sans-serif; + font-size: 11px; +} + +.description { + padding-top: 30px; + padding-bottom: 20px; + font-size: 14px; + font-weight: 700; + color: indianred; + text-align: center; +} + +.datepicker { + border-color: dimgray; + border-width: 3px; + border-radius: 8px; + background-color: white; +} + +.noorders { + font-size: 14px; + font-weight: 700; + text-align: center; + padding-top: 20px; + padding-bottom: 20px; + border-color: dimgray; + border-width: 3px; + border-radius: 8px; + background-color: #f9e79f; +} .settings-title { font-family: 'Spartan', sans-serif; @@ -8,6 +40,30 @@ padding: 5px; } -.example-form-field { - margin: 0 8px 16px 0; +.daterange { + font-size: 13px; + font-weight: 700; + padding-bottom: 15px; +} + +.downloadbtn { + min-width: 120px; + max-width: 150px; + height: 25px; + border-color: dimgray; + border-width: 3px; + border-radius: 8px; + box-shadow: lightgray; + font-family: 'Spartan', sans-serif; + background: #ff5722; + color: white; + font-size: 16px; + text-align: center; + padding: 6px; +} + +::ng-deep .downloadbtntxt { + color: white; + font-size: 14px; + font-weight: 600; } diff --git a/src/app/db-export/db-export.component.html b/src/app/db-export/db-export.component.html index ff2e085..5a1121d 100644 --- a/src/app/db-export/db-export.component.html +++ b/src/app/db-export/db-export.component.html @@ -1,9 +1,58 @@ -
Export Data
- - Choose a date - - MM/DD/YYYY - - - +
Export Orders
+
+ Export orders in a .CSV format file +
+
+ + +
Date range:
+ + + + + MM/DD/YYYY – MM/DD/YYYY + + + Invalid start date + Invalid end date + +
+
+
+
+ +
+
+ You have no orders created. +
+ Nothig to do +
+
+
+
+
+
+
+ + +
+ Download +
+ +
+
+
diff --git a/src/app/db-export/db-export.component.ts b/src/app/db-export/db-export.component.ts index b23172a..2a30ddc 100644 --- a/src/app/db-export/db-export.component.ts +++ b/src/app/db-export/db-export.component.ts @@ -1,24 +1,146 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormControl } from '@angular/forms'; +import { DomSanitizer } from '@angular/platform-browser'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; + +import { Observable } from 'rxjs'; +import { Order } from '../order/order.model'; +import { FullnodeService } from '../fullnode.service'; +import { UserService } from '../user.service'; +import { Owner } from '../owner.model'; +import { OrderService } from '../order/order.service'; +import { NotifierService } from '../notifier.service'; + -var picker : Date; - @Component({ selector: 'app-db-export', templateUrl: './db-export.component.html', styleUrls: ['./db-export.component.css'] }) -export class DbExportComponent { - -} - -/* export class DbExportComponent implements OnInit { + public orders: Order[] = []; + public ownerUpdate: Observable; + public ordersUpdate: Observable; + fileUrl : any; + owner : Owner = { + address: '', + name: '', + currency: 'usd', + tax: false, + taxValue: 0, + vat: false, + vatValue: 0, + first: '', + last: '', + email: '', + street: '', + city: '', + state: '', + postal: '', + phone: '', + paid: false, + website: '', + country: '', + zats: false, + invoices: false, + expiration: new Date(Date.now()).toISOString(), + payconf: false, + viewkey: '', + crmToken: '' + }; - constructor() { } + _ordersOk = false; + + range = new FormGroup({ + start: new FormControl(null), + end: new FormControl(null), + }); + + constructor(private notifierService : NotifierService, + private dialogRef: MatDialogRef, + private sanitizer: DomSanitizer, + public orderService: OrderService, + public userService: UserService) { + this.ownerUpdate = userService.ownerUpdate; + this.orderService.getAllOrders(); + this.ordersUpdate = orderService.allOrdersUpdate; + } + + ngOnInit(): void { + console.log('db-export Init -->'); + this.owner = this.userService.currentOwner(); + console.log(this.owner.name); + console.log(this.range); + this.ordersUpdate.subscribe((orders) => { + this.orders = orders; +// console.log('Order -> ' + this.orders[0].timestamp); + if( this.orders.length != 0 ) { + this._ordersOk = true + } + }); + } + + + + ordersOk() : boolean { + return this._ordersOk; + } + + checkReady() : boolean { + var data : string = ''; + var chkRdy : boolean = false; + if ( (this.range.value.start != null ) && + (this.range.value.end != null) ) { + // process order list + const formatter = new Intl.NumberFormat('en-US', { + minimumFractionDigits: 8, + maximumFractionDigits: 8, + }); + + // create header + data = '"Date","Order ID","Currency","Closed?","Amount","Rate","ZEC","Paid?","Invoice"' + "\n"; + + var iniDate = new Date(this.range.value.start); + var endDate = new Date(this.range.value.end); + for (let i=0; i < this.orders.length; i++){ + var date = new Date(this.orders[i]!.timestamp!); + var orderid = String(this.orders[i]._id); + var closed = this.orders[i].closed ? 'Yes' : 'No'; +/* + console.log('Order No. ' + + this.orders[i]._id! + ' - totalZec = ' + + this.orders[i].totalZec); +*/ + var paid = this.orders[i].paid ? 'Yes' : 'No'; + if ( (date >= iniDate) && (date <= endDate) ) { + data = data + + date.getFullYear() + '-' + + (date.getMonth()+1).toString().padStart(2,'0') + '-' + + date.getDate().toString().padStart(2,'0') + + ',' + + orderid + ',' + + this.orders[i].currency + ',' + + closed + ',' + + this.orders[i].total + ',' + + this.orders[i].price! + ',' + + this.orders[i].totalZec + ',' + + paid + ',"' + + this.orders[i].externalInvoice + '"' + + '\n'; + } + } + const blob = new Blob([data], { type: 'application/octet-stream' }); + this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob)); + + chkRdy = true; + } + return chkRdy; + } + + closedbExport() { + this.dialogRef.close(); + } - ngOnInit(): void { } - } -*/ \ No newline at end of file diff --git a/src/app/listorders/listorders.component.css b/src/app/listorders/listorders.component.css index fbca950..ba1ccc9 100644 --- a/src/app/listorders/listorders.component.css +++ b/src/app/listorders/listorders.component.css @@ -97,8 +97,8 @@ img.icon{ } .orderListTitle { - font-family: 'Roboto Mono'; - font-size: 15px; + font-family: 'Roboto Mono' !important; + font-size: 14px; font-weight: 600; } diff --git a/src/app/listorders/listorders.component.html b/src/app/listorders/listorders.component.html index c776f7c..04239dc 100644 --- a/src/app/listorders/listorders.component.html +++ b/src/app/listorders/listorders.component.html @@ -45,12 +45,13 @@
- +
- {{order.totalZec | number: '1.08'}}
@@ -64,7 +65,7 @@ + font-size: 14px;"> {{order.timestamp | date: 'YYYY-MM-dd, HH:mm'}}