### File

`src/app/pages/accounts/accounts.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-accounts`
styleUrls | `./accounts.component.scss`
templateUrl | `./accounts.component.html`

### Index

###### Properties
accounts accountsType accountTypes dataSource defaultPageSize displayedColumns pageSizeOptions paginator sort
###### Methods
doFilter downloadCsv filterAccounts Async ngOnInit refreshPaginator Async viewAccount

### Constructor

`constructor(userService: UserService, loggingService: LoggingService, router: Router)`
Defined in src/app/pages/accounts/accounts.component.ts:29
Parameters :
Name | Type | Optional
userService | `UserService` | No
loggingService | `LoggingService` | No
router | `Router` | No

### Methods

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

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

filterAccounts
`filterAccounts()`
Defined in src/app/pages/accounts/accounts.component.ts:67
Returns : `void`

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

refreshPaginator
`refreshPaginator()`
Defined in src/app/pages/accounts/accounts.component.ts:78
Returns : `void`

Async viewAccount
`viewAccount(account)`
Defined in src/app/pages/accounts/accounts.component.ts:61
Parameters :
Name | Optional
account | No
Returns : `Promise<void>`

### Properties

accounts
Type : `Array<AccountDetails>`
Default value : `[]`
Defined in src/app/pages/accounts/accounts.component.ts:21

accountsType
Type : `string`
Default value : `'all'`
Defined in src/app/pages/accounts/accounts.component.ts:25

accountTypes
Type : `Array<string>`
Defined in src/app/pages/accounts/accounts.component.ts:26

dataSource
Type : `MatTableDataSource<any>`
Defined in src/app/pages/accounts/accounts.component.ts:20

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

displayedColumns
Type : `Array<string>`
Default value : `['name', 'phone', 'created', 'balance', 'location']`
Defined in src/app/pages/accounts/accounts.component.ts:22

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

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

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

    import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
    import { MatTableDataSource } from '@angular/material/table';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { LoggingService, UserService } from '@app/_services';
    import { Router } from '@angular/router';
    import { exportCsv } from '@app/_helpers';
    import { strip0x } from '@src/assets/js/ethtx/dist/hex';
    import { first } from 'rxjs/operators';
    import { environment } from '@src/environments/environment';
    import { AccountDetails } from '@app/_models';

    @Component({
      selector: 'app-accounts',
      templateUrl: './accounts.component.html',
      styleUrls: ['./accounts.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class AccountsComponent implements OnInit {
      dataSource: MatTableDataSource<any>;
      accounts: Array<AccountDetails> = [];
      displayedColumns: Array<string> = ['name', 'phone', 'created', 'balance', 'location'];
      defaultPageSize: number = 10;
      pageSizeOptions: Array<number> = [10, 20, 50, 100];
      accountsType: string = 'all';
      accountTypes: Array<string>;

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;

      constructor(
        private userService: UserService,
        private loggingService: LoggingService,
        private router: Router
      ) {}

      async ngOnInit(): Promise<void> {
        await this.userService.init();
        try {
          // TODO it feels like this should be in the onInit handler
          await this.userService.loadAccounts(100);
        } catch (error) {
          this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
        }
        this.userService.accountsSubject.subscribe((accounts) => {
          this.dataSource = new MatTableDataSource<any>(accounts);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          this.accounts = accounts;
        });
        this.userService
          .getAccountTypes()
          .pipe(first())
          .subscribe((res) => (this.accountTypes = res));
      }

      doFilter(value: string): void {
        this.dataSource.filter = value.trim().toLocaleLowerCase();
      }

      async viewAccount(account): Promise<void> {
        await this.router.navigateByUrl(
          `/accounts/${strip0x(account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
        );
      }

      filterAccounts(): void {
        if (this.accountsType === 'all') {
          this.userService.accountsSubject.subscribe((accounts) => {
            this.dataSource.data = accounts;
            this.accounts = accounts;
          });
        } else {
          this.dataSource.data = this.accounts.filter((account) => account.type === this.accountsType);
        }
      }

      refreshPaginator(): void {
        if (!this.dataSource.paginator) {
          this.dataSource.paginator = this.paginator;
        }

        this.paginator._changePageSize(this.paginator.pageSize);
      }

      downloadCsv(): void {
        exportCsv(this.accounts, 'accounts');
      }
    }

    <!-- 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">Accounts</li>
            </ol>
          </nav>
          <div class="card">
            <mat-card-title class="card-header"> Accounts </mat-card-title>
            <div class="card-body">
              <div class="row card-header">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE </mat-label>
                  <mat-select
                    id="typeSelect"
                    [(value)]="accountsType"
                    (selectionChange)="filterAccounts()"
                  >
                    <mat-option value="all">ALL</mat-option>
                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
                      {{ accountType | 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"
                  routerLink="/accounts/search"
                >
                  SEARCH
                </button>
                <button
                  mat-raised-button
                  color="primary"
                  type="button"
                  class="btn btn-outline-primary 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)"
                  placeholder="Filter"
                />
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table
                class="mat-elevation-z10"
                [dataSource]="dataSource"
                matSort
                matSortActive="created"
                matSortDirection="desc"
                matSortDisableClear
              >
                <ng-container matColumnDef="name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{ user?.vcard.fn[0].value }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="phone">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{ user?.vcard.tel[0].value }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="created">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{ user?.date_registered | unixDate }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="balance">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{ user?.balance | tokenRatio }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="location">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{ user?.location.area_name }} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row
                  *matRowDef="let account; columns: displayedColumns"
                  (click)="viewAccount(account)"
                  matRipple
                ></mat-row>
              </mat-table>

              <mat-paginator
                [pageSize]="defaultPageSize"
                [pageSizeOptions]="pageSizeOptions"
                showFirstLastButtons
              ></mat-paginator>
            </div>
          </div>
        </div>
        <app-footer appMenuSelection></app-footer>
      </div>
      <!-- ============================================================== -->
      <!-- End Page content -->
      <!-- ============================================================== -->
    </div>

`./accounts.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""