From f115b5dae60abbb9a51f0fa582dedae90961765f Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Wed, 24 Mar 2021 16:26:51 +0300 Subject: [PATCH] Add export data to csv functionality. --- src/app/_helpers/export-csv.ts | 37 +++++++++++++++++++ src/app/_helpers/index.ts | 2 + src/app/_helpers/read-csv.ts | 31 ++++++++++++++++ .../account-details.component.html | 2 + .../account-details.component.ts | 6 ++- .../pages/accounts/accounts.component.html | 2 +- src/app/pages/accounts/accounts.component.ts | 5 +++ src/app/pages/admin/admin.component.html | 5 ++- src/app/pages/admin/admin.component.ts | 8 ++++ .../pages/settings/settings.component.html | 1 + src/app/pages/settings/settings.component.ts | 5 +++ src/app/pages/tokens/tokens.component.html | 5 ++- src/app/pages/tokens/tokens.component.ts | 5 +++ .../transactions/transactions.component.html | 1 + .../transactions/transactions.component.ts | 5 +++ 15 files changed, 116 insertions(+), 4 deletions(-) create mode 100644 src/app/_helpers/export-csv.ts create mode 100644 src/app/_helpers/read-csv.ts diff --git a/src/app/_helpers/export-csv.ts b/src/app/_helpers/export-csv.ts new file mode 100644 index 0000000..6962ae0 --- /dev/null +++ b/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 +}; diff --git a/src/app/_helpers/index.ts b/src/app/_helpers/index.ts index e340b56..0294677 100644 --- a/src/app/_helpers/index.ts +++ b/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'; diff --git a/src/app/_helpers/read-csv.ts b/src/app/_helpers/read-csv.ts new file mode 100644 index 0000000..8ba24af --- /dev/null +++ b/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 +}; diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html index 24758b2..c1ee838 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -257,6 +257,7 @@ RECLAMATION + @@ -330,6 +331,7 @@ GROUPACCOUNT + diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts index 7f6eeb3..8695592 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/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); + } } diff --git a/src/app/pages/accounts/accounts.component.html b/src/app/pages/accounts/accounts.component.html index 09426e7..18f045e 100644 --- a/src/app/pages/accounts/accounts.component.html +++ b/src/app/pages/accounts/accounts.component.html @@ -33,7 +33,7 @@ GROUPACCOUNT - + diff --git a/src/app/pages/accounts/accounts.component.ts b/src/app/pages/accounts/accounts.component.ts index ab944b1..007152c 100644 --- a/src/app/pages/accounts/accounts.component.ts +++ b/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'); + } } diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html index 3520dc3..453f743 100644 --- a/src/app/pages/admin/admin.component.html +++ b/src/app/pages/admin/admin.component.html @@ -18,7 +18,10 @@
- Actions +
+ Actions + +
diff --git a/src/app/pages/admin/admin.component.ts b/src/app/pages/admin/admin.component.ts index 585e70d..6e133f4 100644 --- a/src/app/pages/admin/admin.component.ts +++ b/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; 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(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'); + } } diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html index 7fdd713..dec3a0a 100644 --- a/src/app/pages/settings/settings.component.html +++ b/src/app/pages/settings/settings.component.html @@ -59,6 +59,7 @@
TRUSTED USERS +
diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 2154554..68c1acc 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/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'); + } } diff --git a/src/app/pages/tokens/tokens.component.html b/src/app/pages/tokens/tokens.component.html index 04397b3..486e39a 100644 --- a/src/app/pages/tokens/tokens.component.html +++ b/src/app/pages/tokens/tokens.component.html @@ -18,7 +18,10 @@
- Tokens +
+ Tokens + +
diff --git a/src/app/pages/tokens/tokens.component.ts b/src/app/pages/tokens/tokens.component.ts index d25ce51..8676f4f 100644 --- a/src/app/pages/tokens/tokens.component.ts +++ b/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 { await this.router.navigateByUrl(`/tokens/${token.symbol}`); } + + downloadCsv(): void { + exportCsv(this.tokens, 'tokens'); + } } diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html index 39e04db..fe178b2 100644 --- a/src/app/pages/transactions/transactions.component.html +++ b/src/app/pages/transactions/transactions.component.html @@ -36,6 +36,7 @@ RECLAMATION +
diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts index b65c50f..d9a7ce7 100644 --- a/src/app/pages/transactions/transactions.component.ts +++ b/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'); + } }