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, tokenService: TokenService)
Parameters :
Name Type Optional
blockSyncService BlockSyncService No
transactionService TransactionService No
userService UserService No
tokenService TokenService 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
Async ngOnInit
ngOnInit()
Returns : Promise<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)
tokenSymbol
Type : string
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, 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;

  @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> {
    this.transactionService.transactionsSubject.subscribe((transactions) => {
      this.transactionDataSource = new MatTableDataSource<any>(transactions);
      this.transactionDataSource.paginator = this.paginator;
      this.transactionDataSource.sort = this.sort;
      this.transactions = transactions;
    });
    await this.blockSyncService.init();
    await this.tokenService.init();
    await this.transactionService.init();
    await this.userService.init();
    await this.blockSyncService.blockSync();
    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 {
    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>

          <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>

./transactions.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""