Add export data to csv functionality.

This commit is contained in:
Spencer Ofwiti 2021-03-24 16:26:51 +03:00
parent 0bfaef30d2
commit f115b5dae6
15 changed files with 116 additions and 4 deletions

View File

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

View File

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

View File

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

View File

@ -257,6 +257,7 @@
<mat-option value="reclamation">RECLAMATION</mat-option> <mat-option value="reclamation">RECLAMATION</mat-option>
</mat-select> </mat-select>
</mat-form-field> </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>
</div> </div>
@ -330,6 +331,7 @@
<mat-option value="group">GROUPACCOUNT</mat-option> <mat-option value="group">GROUPACCOUNT</mat-option>
</mat-select> </mat-select>
</mat-form-field> </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> </div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">

View File

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

View File

@ -33,7 +33,7 @@
<mat-option value="group">GROUPACCOUNT</mat-option> <mat-option value="group">GROUPACCOUNT</mat-option>
</mat-select> </mat-select>
</mat-form-field> </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> </div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">

View File

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

View File

@ -18,7 +18,10 @@
</nav> </nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <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> </mat-card-title>
<div class="card-body"> <div class="card-body">

View File

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

View File

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

View File

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

View File

@ -18,7 +18,10 @@
</nav> </nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <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> </mat-card-title>
<div class="card-body"> <div class="card-body">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">

View File

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

View File

@ -36,6 +36,7 @@
<mat-option value="reclamation">RECLAMATION</mat-option> <mat-option value="reclamation">RECLAMATION</mat-option>
</mat-select> </mat-select>
</mat-form-field> </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> </div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">

View File

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