File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-accounts |
| styleUrls |
./accounts.component.scss |
| templateUrl |
./accounts.component.html |
Methods
|
doFilter
|
doFilter(value: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
|
|
downloadCsv
|
downloadCsv()
|
|
|
|
|
|
filterAccounts
|
filterAccounts()
|
|
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
Returns : Promise<void>
|
|
refreshPaginator
|
refreshPaginator()
|
|
|
|
|
|
Async
viewAccount
|
viewAccount(account)
|
|
|
|
Returns : Promise<void>
|
|
accountsType
|
Type : string
|
Default value : 'all'
|
|
|
|
accountTypes
|
Type : Array<string>
|
|
|
|
dataSource
|
Type : MatTableDataSource<any>
|
|
|
|
defaultPageSize
|
Type : number
|
Default value : 10
|
|
|
|
displayedColumns
|
Type : Array<string>
|
Default value : ['name', 'phone', 'created', 'balance', 'location']
|
|
|
|
pageSizeOptions
|
Type : Array<number>
|
Default value : [10, 20, 50, 100]
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
|
|
|
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort)
|
|
|
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, TokenService, 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>;
tokenSymbol: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private userService: UserService,
private loggingService: LoggingService,
private router: Router,
private tokenService: TokenService
) {}
async ngOnInit(): Promise<void> {
await this.userService.init();
await this.tokenService.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));
this.tokenService.load.subscribe(async (status: boolean) => {
if (status) {
this.tokenSymbol = await this.tokenService.getTokenSymbol();
}
});
}
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 }} {{ tokenSymbol | uppercase }}
</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>
Legend
Html element with directive