File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-account-search |
| styleUrls |
./account-search.component.scss |
| templateUrl |
./account-search.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
Returns : Promise<void>
|
|
Async
onAddressSearch
|
onAddressSearch()
|
|
|
|
Returns : Promise<void>
|
|
onNameSearch
|
onNameSearch()
|
|
|
|
|
|
Async
onPhoneSearch
|
onPhoneSearch()
|
|
|
|
Returns : Promise<void>
|
|
addressSearchLoading
|
Type : boolean
|
Default value : false
|
|
|
|
addressSearchSubmitted
|
Type : boolean
|
Default value : false
|
|
|
|
nameSearchLoading
|
Type : boolean
|
Default value : false
|
|
|
|
nameSearchSubmitted
|
Type : boolean
|
Default value : false
|
|
|
|
phoneSearchLoading
|
Type : boolean
|
Default value : false
|
|
|
|
phoneSearchSubmitted
|
Type : boolean
|
Default value : false
|
|
|
Accessors
|
nameSearchFormStub
|
getnameSearchFormStub()
|
|
|
|
phoneSearchFormStub
|
getphoneSearchFormStub()
|
|
|
|
addressSearchFormStub
|
getaddressSearchFormStub()
|
|
|
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomErrorStateMatcher } from '@app/_helpers';
import { UserService } from '@app/_services';
import { Router } from '@angular/router';
import { strip0x } from '@src/assets/js/ethtx/dist/hex';
import { environment } from '@src/environments/environment';
@Component({
selector: 'app-account-search',
templateUrl: './account-search.component.html',
styleUrls: ['./account-search.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccountSearchComponent implements OnInit {
nameSearchForm: FormGroup;
nameSearchSubmitted: boolean = false;
nameSearchLoading: boolean = false;
phoneSearchForm: FormGroup;
phoneSearchSubmitted: boolean = false;
phoneSearchLoading: boolean = false;
addressSearchForm: FormGroup;
addressSearchSubmitted: boolean = false;
addressSearchLoading: boolean = false;
matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
constructor(
private formBuilder: FormBuilder,
private userService: UserService,
private router: Router
) {}
async ngOnInit(): Promise<void> {
await this.userService.init();
this.nameSearchForm = this.formBuilder.group({
name: ['', Validators.required],
});
this.phoneSearchForm = this.formBuilder.group({
phoneNumber: ['', Validators.required],
});
this.addressSearchForm = this.formBuilder.group({
address: ['', Validators.required],
});
}
get nameSearchFormStub(): any {
return this.nameSearchForm.controls;
}
get phoneSearchFormStub(): any {
return this.phoneSearchForm.controls;
}
get addressSearchFormStub(): any {
return this.addressSearchForm.controls;
}
onNameSearch(): void {
this.nameSearchSubmitted = true;
if (this.nameSearchForm.invalid) {
return;
}
this.nameSearchLoading = true;
this.userService.searchAccountByName(this.nameSearchFormStub.name.value);
this.nameSearchLoading = false;
}
async onPhoneSearch(): Promise<void> {
this.phoneSearchSubmitted = true;
if (this.phoneSearchForm.invalid) {
return;
}
this.phoneSearchLoading = true;
(
await this.userService.getAccountByPhone(this.phoneSearchFormStub.phoneNumber.value, 100)
).subscribe(async (res) => {
if (res !== undefined) {
await this.router.navigateByUrl(
`/accounts/${strip0x(res.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
);
} else {
alert('Account not found!');
}
});
this.phoneSearchLoading = false;
}
async onAddressSearch(): Promise<void> {
this.addressSearchSubmitted = true;
if (this.addressSearchForm.invalid) {
return;
}
this.addressSearchLoading = true;
(
await this.userService.getAccountByAddress(this.addressSearchFormStub.address.value, 100)
).subscribe(async (res) => {
if (res !== undefined) {
await this.router.navigateByUrl(
`/accounts/${strip0x(res.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
);
} else {
alert('Account not found!');
}
});
this.addressSearchLoading = false;
}
}
<!-- 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"><a routerLink="/accounts">Accounts</a></li>
<li class="breadcrumb-item active" aria-current="page">Search</li>
</ol>
</nav>
<div class="card">
<mat-card-title class="card-header"> Accounts </mat-card-title>
<div class="card-body">
<mat-tab-group>
<mat-tab label="Phone Number">
<form [formGroup]="phoneSearchForm" (ngSubmit)="onPhoneSearch()">
<mat-form-field appearance="outline">
<mat-label> Search </mat-label>
<input
matInput
type="text"
placeholder="Search by phone number"
formControlName="phoneNumber"
[errorStateMatcher]="matcher"
/>
<mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors"
>Phone Number is required.</mat-error
>
<mat-icon matSuffix>phone</mat-icon>
<mat-hint>Phone Number</mat-hint>
</mat-form-field>
<button
mat-raised-button
color="primary"
type="submit"
class="btn btn-outline-primary ml-3"
>
SEARCH
</button>
</form>
</mat-tab>
<mat-tab label="Account Address">
<form [formGroup]="addressSearchForm" (ngSubmit)="onAddressSearch()">
<mat-form-field appearance="outline">
<mat-label> Search </mat-label>
<input
matInput
type="text"
placeholder="Search by account address"
formControlName="address"
[errorStateMatcher]="matcher"
/>
<mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors"
>Account Address is required.</mat-error
>
<mat-icon matSuffix>view_in_ar</mat-icon>
<mat-hint>Account Address</mat-hint>
</mat-form-field>
<button
mat-raised-button
color="primary"
type="submit"
class="btn btn-outline-primary ml-3"
>
SEARCH
</button>
</form>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
Legend
Html element with directive