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()
|
|
|
|
|
|
viewTransaction
|
viewTransaction(transaction)
|
|
|
Parameters :
| Name |
Optional |
| transaction |
No
|
|
|
defaultPageSize
|
Type : number
|
Default value : 10
|
|
|
|
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, 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>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private blockSyncService: BlockSyncService,
private transactionService: TransactionService,
private userService: UserService
) {
this.blockSyncService.blockSync();
}
ngOnInit(): void {
this.transactionService.transactionsSubject.subscribe((transactions) => {
this.transactionDataSource = new MatTableDataSource<any>(transactions);
this.transactionDataSource.paginator = this.paginator;
this.transactionDataSource.sort = this.sort;
this.transactions = transactions;
});
this.userService
.getTransactionTypes()
.pipe(first())
.subscribe((res) => (this.transactionsTypes = res));
}
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 === this.transactionsType
);
}
}
ngAfterViewInit(): void {
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"></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>
<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}} </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}} </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}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</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 | date}} </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