93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
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<Transaction>;
|
|
|
|
@Output() viewTx: EventEmitter<any> = new EventEmitter<any>();
|
|
|
|
transactionsDataSource: MatTableDataSource<any>;
|
|
transactionsDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
|
|
transactionsDefaultPageSize: number = 10;
|
|
transactionsPageSizeOptions: Array<number> = [10, 20, 50, 100];
|
|
@ViewChild('TransactionTablePaginator', { static: true }) transactionTablePaginator: MatPaginator;
|
|
@ViewChild('TransactionTableSort', { static: true }) transactionTableSort: MatSort;
|
|
transactionsType: string = 'all';
|
|
transactionsTypes: Array<string>;
|
|
tokenSymbol: string;
|
|
|
|
constructor(
|
|
private cdr: ChangeDetectorRef,
|
|
private tokenService: TokenService,
|
|
private transactionService: TransactionService,
|
|
private userService: UserService,
|
|
) {}
|
|
|
|
async ngOnInit(): Promise<void> {
|
|
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<any>(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);
|
|
}
|
|
}
|