File

src/app/pages/transactions/transactions.component.ts

Implements

OnInit AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-transactions
styleUrls ./transactions.component.scss
templateUrl ./transactions.component.html

Index

Properties
Methods

Constructor

constructor(blockSyncService: BlockSyncService, transactionService: TransactionService, userService: UserService)
Parameters :
Name Type Optional
blockSyncService BlockSyncService No
transactionService TransactionService No
userService UserService No

Methods

doFilter
doFilter(value: string, dataSource)
Parameters :
Name Type Optional
value string No
dataSource No
Returns : void
downloadCsv
downloadCsv()
Returns : void
filterTransactions
filterTransactions()
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnInit
ngOnInit()
Returns : void
viewTransaction
viewTransaction(transaction)
Parameters :
Name Optional
transaction No
Returns : void

Properties

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)
transaction
Type : Transaction
transactionDataSource
Type : MatTableDataSource<any>
transactionDisplayedColumns
Type : Array<string>
Default value : ['sender', 'recipient', 'value', 'created', 'type']
transactions
Type : Array<Transaction>
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>


./transactions.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""