Add export data to csv functionality.

src/app/_helpers/export-csv.ts

@@ -0,0 +1,37 @@
+function exportCsv(arrayData: any[], filename: string, delimiter = ','): void {
+  if (arrayData === undefined) { return; }
+  const header = Object.keys(arrayData[0]).join(delimiter) + '\n';
+  let csv = header;
+  arrayData.forEach(obj => {
+    let row = [];
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        row.push(obj[key]);
+      }
+    }
+    csv += row.join(delimiter) + '\n';
+  });
+
+  const csvData = new Blob([csv], {type: 'text/csv'});
+  const csvUrl = URL.createObjectURL(csvData);
+  // csvUrl = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+
+  let downloadLink = document.createElement('a');
+  downloadLink.href = csvUrl;
+  downloadLink.target = '_blank';
+  downloadLink.download = filename + '.csv';
+  downloadLink.style.display = 'none';
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+}
+
+function removeSpecialChar(str: string): string {
+  if (str === null || str === '') {
+    return '';
+  }
+  return str.replace(/[^a-zA-Z0-9 ]/g, '');
+}
+
+export {
+  exportCsv
+};

src/app/_helpers/index.ts

@@ -4,3 +4,5 @@ export * from '@app/_helpers/mock-backend';
 export * from '@app/_helpers/array-sum';
 export * from '@app/_helpers/http-getter';
 export * from '@app/_helpers/global-error-handler';
+export * from '@app/_helpers/export-csv';
+export * from '@app/_helpers/read-csv';

src/app/_helpers/read-csv.ts

@@ -0,0 +1,31 @@
+let objCsv = {
+  size: 0,
+  dataFile: []
+};
+
+function readCsv(input: any): any {
+  if (input.files && input.files[0]) {
+    let reader = new FileReader();
+    reader.readAsBinaryString(input.files[0]);
+    reader.onload = event => {
+      objCsv.size = event.total;
+      // @ts-ignore
+      objCsv.dataFile = event.target.result;
+      return parseData(objCsv.dataFile);
+    };
+  }
+}
+
+function parseData(data: any): any {
+  let csvData = [];
+  const lineBreak = data.split('\n');
+  lineBreak.forEach(res => {
+    csvData.push(res.split(','));
+  });
+  console.table(csvData);
+  return csvData;
+}
+
+export {
+  readCsv
+};

src/app/pages/accounts/account-details/account-details.component.html

@@ -257,6 +257,7 @@
                     <mat-option value="reclamation">RECLAMATION</mat-option>
                   </mat-select>
                 </mat-form-field>
+                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(transactions, 'transactions')"> EXPORT </button>
               </div>
             </div>
 
@@ -330,6 +331,7 @@
                     <mat-option value="group">GROUPACCOUNT</mat-option>
                   </mat-select>
                 </mat-form-field>
+                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(accounts, 'accounts')"> EXPORT </button>
               </div>
 
               <mat-form-field appearance="outline">

src/app/pages/accounts/account-details/account-details.component.ts

@@ -6,7 +6,7 @@ import {BlockSyncService, LocationService, LoggingService, TokenService, Transac
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {first} from 'rxjs/operators';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {CustomErrorStateMatcher} from '@app/_helpers';
+import {CustomErrorStateMatcher, exportCsv} from '@app/_helpers';
 import {Envelope, User} from 'cic-client-meta';
 const vCard = require('vcard-parser');
 
@@ -189,4 +189,8 @@ export class AccountDetailsComponent implements OnInit {
   public trackByName(index, item): string {
     return item.name;
   }
+
+  downloadCsv(data: any, filename: string): void {
+    exportCsv(data, filename);
+  }
 }

src/app/pages/accounts/accounts.component.html

@@ -33,7 +33,7 @@
                 <mat-option value="group">GROUPACCOUNT</mat-option>
               </mat-select>
             </mat-form-field>
-            <button mat-raised-button color="primary" routerLink="/accounts/export" type="button" class="btn btn-outline-primary ml-auto"> EXPORT </button>
+            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
           </div>
 
           <mat-form-field appearance="outline">

src/app/pages/accounts/accounts.component.ts

@@ -4,6 +4,7 @@ import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {LoggingService, UserService} from '@app/_services';
 import {Router} from '@angular/router';
+import {exportCsv} from '@app/_helpers';
 
 @Component({
   selector: 'app-accounts',
@@ -71,4 +72,8 @@ export class AccountsComponent implements OnInit {
 
     this.paginator._changePageSize(this.paginator.pageSize);
   }
+
+  downloadCsv(): void {
+    exportCsv(this.accounts, 'accounts');
+  }
 }

src/app/pages/admin/admin.component.html

@@ -18,7 +18,10 @@
       </nav>
       <div class="card">
         <mat-card-title class="card-header">
-          Actions
+          <div class="row">
+            Actions
+            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+          </div>
         </mat-card-title>
         <div class="card-body">
 

src/app/pages/admin/admin.component.ts

@@ -5,6 +5,7 @@ import {MatSort} from '@angular/material/sort';
 import {LoggingService, UserService} from '@app/_services';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {first} from 'rxjs/operators';
+import {exportCsv} from '@app/_helpers';
 
 @Component({
   selector: 'app-admin',
@@ -23,6 +24,7 @@ export class AdminComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
   displayedColumns = ['expand', 'user', 'role', 'action', 'status', 'approve'];
   action: any;
+  actions: any;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -36,6 +38,8 @@ export class AdminComponent implements OnInit {
       this.dataSource = new MatTableDataSource<any>(actions);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
+      this.actions = actions;
+      console.log(this.actions);
     });
   }
 
@@ -65,4 +69,8 @@ export class AdminComponent implements OnInit {
   expandCollapse(row): void {
     row.isExpanded = !row.isExpanded;
   }
+
+  downloadCsv(): void {
+    exportCsv(this.actions, 'actions');
+  }
 }

src/app/pages/settings/settings.component.html

@@ -59,6 +59,7 @@
             <mat-card-title class="card-header">
               <div class="row">
                 TRUSTED USERS
+                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
               </div>
             </mat-card-title>
             <div class="card-body">

src/app/pages/settings/settings.component.ts

@@ -4,6 +4,7 @@ import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {AuthService} from '@app/_services';
 import {Staff} from '@app/_models/staff';
+import {exportCsv} from '@app/_helpers';
 
 @Component({
   selector: 'app-settings',
@@ -36,4 +37,8 @@ export class SettingsComponent implements OnInit {
   doFilter(value: string): void {
     this.dataSource.filter = value.trim().toLocaleLowerCase();
   }
+
+  downloadCsv(): void {
+    exportCsv(this.trustedUsers, 'users');
+  }
 }

src/app/pages/tokens/tokens.component.html

@@ -18,7 +18,10 @@
       </nav>
       <div class="card">
         <mat-card-title class="card-header">
-          Tokens
+          <div class="row">
+            Tokens
+            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+          </div>
         </mat-card-title>
         <div class="card-body">
           <mat-form-field appearance="outline">

src/app/pages/tokens/tokens.component.ts

@@ -4,6 +4,7 @@ import {MatSort} from '@angular/material/sort';
 import {LoggingService, TokenService} from '@app/_services';
 import {MatTableDataSource} from '@angular/material/table';
 import {Router} from '@angular/router';
+import {exportCsv} from '@app/_helpers';
 
 @Component({
   selector: 'app-tokens',
@@ -41,4 +42,8 @@ export class TokensComponent implements OnInit {
   async viewToken(token): Promise<void> {
     await this.router.navigateByUrl(`/tokens/${token.symbol}`);
   }
+
+  downloadCsv(): void {
+    exportCsv(this.tokens, 'tokens');
+  }
 }

src/app/pages/transactions/transactions.component.html

@@ -36,6 +36,7 @@
                 <mat-option value="reclamation">RECLAMATION</mat-option>
               </mat-select>
             </mat-form-field>
+            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
           </div>
 
           <mat-form-field appearance="outline">

src/app/pages/transactions/transactions.component.ts

@@ -3,6 +3,7 @@ import {BlockSyncService, TransactionService} from '@app/_services';
 import {MatTableDataSource} from '@angular/material/table';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
+import {exportCsv} from '@app/_helpers';
 
 @Component({
   selector: 'app-transactions',
@@ -61,4 +62,8 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
     this.transactionDataSource.paginator = this.paginator;
     this.transactionDataSource.sort = this.sort;
   }
+
+  downloadCsv(): void {
+    exportCsv(this.transactions, 'transactions');
+  }
 }