diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts new file mode 100644 index 0000000..64cfe6f --- /dev/null +++ b/src/app/components/components.module.ts @@ -0,0 +1,30 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { TransactionsDatatableComponent } from './datatables/transactions-datatable/transactions-datatable.component'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatRippleModule } from '@angular/material/core'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { SharedModule } from '@app/shared/shared.module'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + declarations: [TransactionsDatatableComponent], + exports: [TransactionsDatatableComponent], + imports: [ + CommonModule, + MatFormFieldModule, + MatSelectModule, + MatSortModule, + MatTableModule, + MatRippleModule, + MatPaginatorModule, + SharedModule, + MatIconModule, + MatButtonModule, + ], +}) +export class ComponentsModule {} diff --git a/src/app/components/datatables/transactions-datatable/transactions-datatable.component.html b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.html new file mode 100644 index 0000000..4de4522 --- /dev/null +++ b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.html @@ -0,0 +1,107 @@ +
+
+
+ + TRANSACTION TYPE + + ALL TRANSFERS + + {{ transactionType | uppercase }} + + + + +
+
+ +
+ + Filter + + search + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sender + {{ transaction?.sender?.vcard.fn[0].value || transaction.from }} + Recipient + {{ transaction?.recipient?.vcard.fn[0].value || transaction.to }} + Value + {{ transaction?.value | tokenRatio }} {{ tokenSymbol | uppercase }} + {{ transaction?.toValue | tokenRatio }} {{ tokenSymbol | uppercase }} + Created + {{ transaction?.tx.timestamp | unixDate }} + TYPE + {{ transaction?.type }} +
+ + +
+
diff --git a/src/app/components/datatables/transactions-datatable/transactions-datatable.component.scss b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/datatables/transactions-datatable/transactions-datatable.component.spec.ts b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.spec.ts new file mode 100644 index 0000000..89dbb33 --- /dev/null +++ b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TransactionsDatatableComponent } from './transactions-datatable.component'; + +describe('TransactionsDatatableComponent', () => { + let component: TransactionsDatatableComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TransactionsDatatableComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TransactionsDatatableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/datatables/transactions-datatable/transactions-datatable.component.ts b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.ts new file mode 100644 index 0000000..845c214 --- /dev/null +++ b/src/app/components/datatables/transactions-datatable/transactions-datatable.component.ts @@ -0,0 +1,92 @@ +import { + Component, + OnInit, + ChangeDetectionStrategy, + ViewChild, + Input, + ChangeDetectorRef, + Output, + EventEmitter, +} from '@angular/core'; +import { MatTableDataSource } from '@angular/material/table'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { Transaction } from '@app/_models'; +import { exportCsv } from '@app/_helpers'; +import {TokenService, TransactionService, UserService} from '@app/_services'; +import {first} from 'rxjs/operators'; + +@Component({ + selector: 'app-transactions-datatable', + templateUrl: './transactions-datatable.component.html', + styleUrls: ['./transactions-datatable.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TransactionsDatatableComponent implements OnInit { + @Input() transactions: Array; + + @Output() viewTx: EventEmitter = new EventEmitter(); + + transactionsDataSource: MatTableDataSource; + transactionsDisplayedColumns: Array = ['sender', 'recipient', 'value', 'created', 'type']; + transactionsDefaultPageSize: number = 10; + transactionsPageSizeOptions: Array = [10, 20, 50, 100]; + @ViewChild('TransactionTablePaginator', { static: true }) transactionTablePaginator: MatPaginator; + @ViewChild('TransactionTableSort', { static: true }) transactionTableSort: MatSort; + transactionsType: string = 'all'; + transactionsTypes: Array; + tokenSymbol: string; + + constructor( + private cdr: ChangeDetectorRef, + private tokenService: TokenService, + private transactionService: TransactionService, + private userService: UserService, + ) {} + + async ngOnInit(): Promise { + await this.tokenService.init(); + await this.transactionService.init(); + await this.userService.init(); + this.userService + .getTransactionTypes() + .pipe(first()) + .subscribe((res) => (this.transactionsTypes = res)); + this.tokenService.load.subscribe(async (status: boolean) => { + if (status) { + this.tokenSymbol = await this.tokenService.getTokenSymbol(); + } + }); + if (this.transactions) { + this.transactionsDataSource = new MatTableDataSource(this.transactions); + this.transactionsDataSource.paginator = this.transactionTablePaginator; + this.transactionsDataSource.sort = this.transactionTableSort; + this.cdr.detectChanges(); + } + } + + viewTransaction(transaction): void { + this.viewTx.emit(transaction); + } + + doTransactionFilter(value: string): void { + this.transactionsDataSource.filter = value.trim().toLocaleLowerCase(); + } + + filterTransactions(): void { + if (this.transactionsType === 'all') { + this.transactionService.transactionsSubject.subscribe((transactions) => { + this.transactionsDataSource.data = transactions; + this.transactions = transactions; + }); + } else { + this.transactionsDataSource.data = this.transactions.filter( + (transaction) => transaction.type + 's' === this.transactionsType + ); + } + } + + downloadCsv(data: any, filename: string): void { + exportCsv(data, filename); + } +} 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 4378beb..e50f614 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -333,6 +333,13 @@ + + + + + + +