Db-export component ready for testing
This commit is contained in:
parent
d4cdcd2a9a
commit
53c3d5e78e
6 changed files with 259 additions and 29 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,58 @@
|
|||
<div class="settings-title">Export Data</div>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Choose a date</mat-label>
|
||||
<input matInput [matDatepicker]="picker">
|
||||
<mat-hint>MM/DD/YYYY</mat-hint>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<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 >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-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>
|
||||
|
|
|
|||
|
|
@ -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<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;
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
ngOnInit(): void { }
|
||||
|
||||
}
|
||||
*/
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;"
|
||||
<img src="/assets/zec_rv.png"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue