Add export data to csv functionality.
This commit is contained in:
parent
0bfaef30d2
commit
f115b5dae6
37
src/app/_helpers/export-csv.ts
Normal file
37
src/app/_helpers/export-csv.ts
Normal 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
|
||||
};
|
@ -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';
|
||||
|
31
src/app/_helpers/read-csv.ts
Normal file
31
src/app/_helpers/read-csv.ts
Normal 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
|
||||
};
|
@ -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">
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user