File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-transactions |
| styleUrls |
./transactions.component.scss |
| templateUrl |
./transactions.component.html |
Methods
|
doFilter
|
doFilter(value: string, dataSource)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
| dataSource |
|
No
|
|
|
downloadCsv
|
downloadCsv()
|
|
|
|
|
|
filterTransactions
|
filterTransactions()
|
|
|
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
Returns : Promise<void>
|
|
viewTransaction
|
viewTransaction(transaction)
|
|
|
Parameters :
| Name |
Optional |
| transaction |
No
|
|
|
defaultPageSize
|
Type : number
|
Default value : 10
|
|
|
|
loading
|
Type : boolean
|
Default value : true
|
|
|
|
pageSizeOptions
|
Type : Array<number>
|
Default value : [10, 20, 50, 100]
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
|
|
|
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort)
|
|
|
|
transactionDataSource
|
Type : MatTableDataSource<any>
|
|
|
|
transactionDisplayedColumns
|
Type : Array<string>
|
Default value : ['sender', 'recipient', 'value', 'created', 'type']
|
|
|
|
transactionsType
|
Type : string
|
Default value : 'all'
|
|
|
|
transactionsTypes
|
Type : Array<string>
|
|
|
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
OnInit,
ViewChild,
} from '@angular/core';
import { BlockSyncService, TokenService, TransactionService, UserService } 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';
import { first } from 'rxjs/operators';
import { Transaction } from '@app/_models';
@Component({
selector: 'app-transactions',
templateUrl: './transactions.component.html',
styleUrls: ['./transactions.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TransactionsComponent implements OnInit, AfterViewInit {
transactionDataSource: MatTableDataSource<any>;
transactionDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
defaultPageSize: number = 10;
pageSizeOptions: Array<number> = [10, 20, 50, 100];
transactions: Array<Transaction>;
transaction: Transaction;
transactionsType: string = 'all';
transactionsTypes: Array<string>;
tokenSymbol: string;
loading: boolean = true;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private blockSyncService: BlockSyncService,
private transactionService: TransactionService,
private userService: UserService,
private tokenService: TokenService
) {}
async ngOnInit(): Promise<void> {
await this.blockSyncService.blockSync();
this.transactionService.transactionsSubject.subscribe((transactions) => {
this.transactionDataSource = new MatTableDataSource<any>(transactions);
this.transactionDataSource.paginator = this.paginator;
this.transactionDataSource.sort = this.sort;
this.transactions = transactions;
if (transactions.length > 0) {
this.loading = false;
}
});
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();
}
});
}
viewTransaction(transaction): void {
this.transaction = transaction;
}
doFilter(value: string, dataSource): void {
dataSource.filter = value.trim().toLocaleLowerCase();
}
filterTransactions(): void {
if (this.transactionsType === 'all') {
this.transactionService.transactionsSubject.subscribe((transactions) => {
this.transactionDataSource.data = transactions;
this.transactions = transactions;
});
} else {
this.transactionDataSource.data = this.transactions.filter(
(transaction) => transaction.type + 's' === this.transactionsType
);
}
}
ngAfterViewInit(): void {
if (this.transactionDataSource) {
this.transactionDataSource.paginator = this.paginator;
this.transactionDataSource.sort = this.sort;
}
}
downloadCsv(): void {
exportCsv(this.transactions, 'transactions');
}
}
<!-- Begin page -->
<div class="wrapper">
<app-sidebar></app-sidebar>
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div id="content">
<app-topbar></app-topbar>
<!-- Start Content-->
<div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Transactions</li>
</ol>
</nav>
<div class="card">
<mat-card-title class="card-header"> Transfers </mat-card-title>
<div class="card-body">
<app-transaction-details
[transaction]="transaction"
(closeWindow)="transaction = $event"
></app-transaction-details>
<div class="row card-header">
<mat-form-field appearance="outline">
<mat-label> TRANSFER TYPE </mat-label>
<mat-select
id="typeSelect"
[(value)]="transactionsType"
(selectionChange)="filterTransactions()"
>
<mat-option value="all">ALL TRANSFERS</mat-option>
<mat-option
*ngFor="let transactionType of transactionsTypes"
[value]="transactionType"
>
{{ transactionType | uppercase }}
</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">
<mat-label> Filter </mat-label>
<input
matInput
type="text"
(keyup)="doFilter($event.target.value, transactionDataSource)"
placeholder="Filter"
/>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="loading">
<h2 class="text-center"><strong>Loading Transactions!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<table
mat-table
class="mat-elevation-z10"
[dataSource]="transactionDataSource"
matSort
matSortActive="created"
matSortDirection="desc"
matSortDisableClear
>
<ng-container matColumnDef="sender">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Sender</th>
<td mat-cell *matCellDef="let transaction">
{{ transaction?.sender?.vcard.fn[0].value || transaction.from }}
</td>
</ng-container>
<ng-container matColumnDef="recipient">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Recipient</th>
<td mat-cell *matCellDef="let transaction">
{{ transaction?.recipient?.vcard.fn[0].value || transaction.to }}
</td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
<td mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'"
>{{ transaction?.value | tokenRatio }} {{ tokenSymbol | uppercase }}</span
>
<span *ngIf="transaction.type == 'conversion'"
>{{ transaction?.toValue | tokenRatio }} {{ tokenSymbol | uppercase }}</span
>
</td>
</ng-container>
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
<td mat-cell *matCellDef="let transaction">
{{ transaction?.tx.timestamp | unixDate }}
</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header>TYPE</th>
<td mat-cell *matCellDef="let transaction">
<span class="badge badge-success badge-pill"> {{ transaction?.type }} </span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="transactionDisplayedColumns"></tr>
<tr
mat-row
*matRowDef="let transaction; columns: transactionDisplayedColumns"
(click)="viewTransaction(transaction)"
></tr>
</table>
<mat-paginator
[pageSize]="defaultPageSize"
[pageSizeOptions]="pageSizeOptions"
showFirstLastButtons
></mat-paginator>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
Legend
Html element with directive