### 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
defaultPageSize pageSizeOptions paginator sort tokenSymbol transaction transactionDataSource transactionDisplayedColumns transactions transactionsType transactionsTypes
###### Methods
doFilter downloadCsv filterTransactions ngAfterViewInit Async ngOnInit viewTransaction

### Constructor

`constructor(blockSyncService: BlockSyncService, transactionService: TransactionService, userService: UserService, tokenService: TokenService)`
Defined in src/app/pages/transactions/transactions.component.ts:34
Parameters :
Name | Type | Optional
blockSyncService | `BlockSyncService` | No
transactionService | `TransactionService` | No
userService | `UserService` | No
tokenService | `TokenService` | No

### Methods

doFilter
`doFilter(value: string, dataSource)`
Defined in src/app/pages/transactions/transactions.component.ts:70
Parameters :
Name | Type | Optional
value | `string` | No
dataSource |  | No
Returns : `void`

downloadCsv
`downloadCsv()`
Defined in src/app/pages/transactions/transactions.component.ts:92
Returns : `void`

filterTransactions
`filterTransactions()`
Defined in src/app/pages/transactions/transactions.component.ts:74
Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/app/pages/transactions/transactions.component.ts:87
Returns : `void`

Async ngOnInit
`ngOnInit()`
Defined in src/app/pages/transactions/transactions.component.ts:43
Returns : `Promise<void>`

viewTransaction
`viewTransaction(transaction)`
Defined in src/app/pages/transactions/transactions.component.ts:66
Parameters :
Name | Optional
transaction | No
Returns : `void`

### Properties

defaultPageSize
Type : `number`
Default value : `10`
Defined in src/app/pages/transactions/transactions.component.ts:25

pageSizeOptions
Type : `Array<number>`
Default value : `[10, 20, 50, 100]`
Defined in src/app/pages/transactions/transactions.component.ts:26

paginator
Type : `MatPaginator`
Decorators : `@ViewChild(MatPaginator)`
Defined in src/app/pages/transactions/transactions.component.ts:33

sort
Type : `MatSort`
Decorators : `@ViewChild(MatSort)`
Defined in src/app/pages/transactions/transactions.component.ts:34

tokenSymbol
Type : `string`
Defined in src/app/pages/transactions/transactions.component.ts:31

transaction
Type : `Transaction`
Defined in src/app/pages/transactions/transactions.component.ts:28

transactionDataSource
Type : `MatTableDataSource<any>`
Defined in src/app/pages/transactions/transactions.component.ts:23

transactionDisplayedColumns
Type : `Array<string>`
Default value : `['sender', 'recipient', 'value', 'created', 'type']`
Defined in src/app/pages/transactions/transactions.component.ts:24

transactions
Type : `Array<Transaction>`
Defined in src/app/pages/transactions/transactions.component.ts:27

transactionsType
Type : `string`
Default value : `'all'`
Defined in src/app/pages/transactions/transactions.component.ts:29

transactionsTypes
Type : `Array<string>`
Defined in src/app/pages/transactions/transactions.component.ts:30

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