File

src/app/pages/accounts/account-search/account-search.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-account-search
styleUrls ./account-search.component.scss
templateUrl ./account-search.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(formBuilder: FormBuilder, userService: UserService, router: Router)
Parameters :
Name Type Optional
formBuilder FormBuilder No
userService UserService No
router Router No

Methods

ngOnInit
ngOnInit()
Returns : void
Async onAddressSearch
onAddressSearch()
Returns : Promise<void>
onNameSearch
onNameSearch()
Returns : void
Async onPhoneSearch
onPhoneSearch()
Returns : Promise<void>

Properties

addressSearchForm
Type : FormGroup
addressSearchLoading
Type : boolean
Default value : false
addressSearchSubmitted
Type : boolean
Default value : false
matcher
Type : CustomErrorStateMatcher
Default value : new CustomErrorStateMatcher()
nameSearchForm
Type : FormGroup
nameSearchLoading
Type : boolean
Default value : false
nameSearchSubmitted
Type : boolean
Default value : false
phoneSearchForm
Type : FormGroup
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
  ) {}

  ngOnInit(): void {
    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>

./account-search.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""