Db-export component ready for testing

This commit is contained in:
Rene V. Vergara A. 2022-10-09 09:40:58 -05:00
parent d4cdcd2a9a
commit 53c3d5e78e
6 changed files with 259 additions and 29 deletions

View file

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

View file

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

View file

@ -1,9 +1,58 @@
<div class="settings-title">Export Data</div>
<div class="settings-title">Export Orders</div>
<div class='description'>
Export orders in a .CSV format file
</div>
<div class="datepicker"
*ngIf="ordersOk()">
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<!--
<mat-label >Enter a date range</mat-label>
-->
<div class="daterange">Date range:</div>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-hint>MM/DD/YYYY MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
<br>
<br>
<br>
</div>
<div class="noorders"
*ngIf="!ordersOk()">
<br>
You have no orders created.
<br>
Nothig to do
<br>
<br>
<br>
</div>
<br>
<br>
<div style="display: flex;
justify-content: space-between;
align-items: center;">
<button mat-raised-button
(click)="closedbExport()">
Close
</button>
<div class="downloadbtn"
*ngIf="checkReady()">
<a [href]="fileUrl"
class="downloadbtntxt"
download="orders.csv">Download</a>
</div>
</div>
<div style="height: 20px;
margin-top: 10px;">
</div>

View file

@ -1,6 +1,16 @@
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',
@ -8,17 +18,129 @@ var picker : Date;
styleUrls: ['./db-export.component.css']
})
export class DbExportComponent {
}
/*
export class DbExportComponent implements OnInit {
public orders: Order[] = [];
public ownerUpdate: Observable<Owner>;
public ordersUpdate: Observable<Order[]>;
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;
ngOnInit(): void { }
range = new FormGroup({
start: new FormControl<Date | null>(null),
end: new FormControl<Date | null>(null),
});
constructor(private notifierService : NotifierService,
private dialogRef: MatDialogRef<DbExportComponent>,
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();
}
}
*/

View file

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

View file

@ -45,12 +45,13 @@
<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-expansion-panel-header [collapsedHeight]="'35px'" [expandedHeight]="'30px'" >
<mat-panel-title>
<div class="orderListTitle">
<img src="/assets/zec_rv.png"
style="height: 16px;
margin-bottom: -2px;"
style="height: 14px;
margin-bottom: -2px;
padding-right: 3px;"
>{{order.totalZec | number: '1.08'}}
</div>
</mat-panel-title>
@ -64,7 +65,7 @@
<td align="center"
style="font-family: 'Roboto Mono' !important;
font-weight: 700 ;
font-size: 15px;">
font-size: 14px;">
{{order.timestamp | date: 'YYYY-MM-dd, HH:mm'}}
</td>
</tr>