Db-export component ready for testing

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

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 {
+.daterange {
-  margin: 0 8px 16px 0;
+	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;
 }

src/app/db-export/db-export.component.html

@@ -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-label >Enter a date range</mat-label>
-  <mat-hint>MM/DD/YYYY</mat-hint>
+  -->
+    <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-date-range-picker #picker></mat-date-range-picker>
-</mat-form-field>
 
+    <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>      

src/app/db-export/db-export.component.ts

@@ -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();
+  }
 
 }
-*/

src/app/listorders/listorders.component.css

@@ -97,8 +97,8 @@ img.icon{
 }
 
 .orderListTitle {
-	font-family: 'Roboto Mono';
+	font-family: 'Roboto Mono' !important;
-	font-size: 15px;
+	font-size: 14px;
 	font-weight: 600;
 }
 

src/app/listorders/listorders.component.html

@@ -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;
+			       style="height: 14px;
-			              margin-bottom: -2px;"
+			              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>