Add search form for name, phonenumber and account address.

src/app/_helpers/export-csv.ts

@@ -1,5 +1,8 @@
 function exportCsv(arrayData: any[], filename: string, delimiter = ','): void {
-  if (arrayData === undefined || arrayData.length === 0) { return; }
+  if (arrayData === undefined || arrayData.length === 0) {
+    alert('No data to be exported!');
+    return;
+  }
   const header = Object.keys(arrayData[0]).join(delimiter) + '\n';
   let csv = header;
   arrayData.forEach(obj => {
@@ -14,7 +17,6 @@ function exportCsv(arrayData: any[], filename: string, delimiter = ','): void {
 
   const csvData = new Blob([csv], {type: 'text/csv'});
   const csvUrl = URL.createObjectURL(csvData);
-  // csvUrl = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
 
   let downloadLink = document.createElement('a');
   downloadLink.href = csvUrl;

src/app/_services/user.service.ts

@@ -176,4 +176,10 @@ export class UserService {
     this.accounts = [];
     this.accountsList.next(this.accounts);
   }
+
+  searchAccountByName(name: string): any { return; }
+
+  searchAccountByPhone(phoneNumber: string): any { return; }
+
+  searchAccountByAddress(address: string): any { return; }
 }

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

@@ -14,7 +14,7 @@
         <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"><a routerLink="/accounts/search">Search</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Search</li>
         </ol>
       </nav>
       <div class="card">
@@ -22,15 +22,44 @@
           Accounts
         </mat-card-title>
         <div class="card-body">
-          <div class="row card-header">
+          <mat-tab-group>
-            <mat-form-field appearance="outline">
+            <mat-tab label="Name">
-              <mat-label> Search </mat-label>
+              <form [formGroup]="nameSearchForm" (ngSubmit)="onNameSearch()">
-              <input matInput placeholder="Search for account by name">
+                <mat-form-field appearance="outline">
-              <mat-icon matSuffix>name</mat-icon>
+                  <mat-label> Search </mat-label>
-              <mat-hint>Name</mat-hint>
+                  <input matInput type="text" placeholder="Search by name" formControlName="name" [errorStateMatcher]="matcher">
-            </mat-form-field>
+                  <mat-error *ngIf="nameSearchSubmitted && nameSearchFormStub.name.errors">Name is required.</mat-error>
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2"> SEARCH </button>
+                  <mat-icon matSuffix>face</mat-icon>
-          </div>
+                  <mat-hint>Name</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="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>

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

@@ -1,4 +1,7 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {CustomErrorStateMatcher} from '@app/_helpers';
+import {UserService} from '@app/_services';
 
 @Component({
   selector: 'app-account-search',
@@ -7,10 +10,59 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
   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 = new CustomErrorStateMatcher();
 
-  constructor() { }
+  constructor(
+    private formBuilder: FormBuilder,
+    private userService: UserService,
+  ) { }
 
   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;
+  }
+
+  onPhoneSearch(): void {
+    this.phoneSearchSubmitted = true;
+    if (this.phoneSearchForm.invalid) { return; }
+    this.phoneSearchLoading = true;
+    this.userService.searchAccountByPhone(this.phoneSearchFormStub.phoneNumber.value);
+    this.phoneSearchLoading = false;
+  }
+
+  onAddressSearch(): void {
+    this.addressSearchSubmitted = true;
+    if (this.addressSearchForm.invalid) { return; }
+    this.addressSearchLoading = true;
+    this.userService.searchAccountByAddress(this.addressSearchFormStub.address.value);
+    this.addressSearchLoading = false;
+  }
 }

src/app/pages/accounts/accounts.component.html

@@ -33,7 +33,8 @@
                 <mat-option value="group">GROUPACCOUNT</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>
+            <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">