grassrootseconomics/cic-staff-client
5
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Add search form for name, phonenumber and account address.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-04-07 12:24:32 +03:00
parent 4d64a57591
commit 62655a691a
5 changed files with 104 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/_helpers/export-csv.ts
View File

@ -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;

6
src/app/_services/user.service.ts
View File

@ -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; }
}

41
src/app/pages/accounts/account-search/account-search.component.html
View File

@ -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-tab label="Name">
<form [formGroup]="nameSearchForm" (ngSubmit)="onNameSearch()">
<mat-form-field appearance="outline">
<mat-label> Search </mat-label>
<input matInput placeholder="Search for account by name">
<mat-icon matSuffix>name</mat-icon>
<input matInput type="text" placeholder="Search by name" formControlName="name" [errorStateMatcher]="matcher">
<mat-error *ngIf="nameSearchSubmitted && nameSearchFormStub.name.errors">Name is required.</mat-error>
<mat-icon matSuffix>face</mat-icon>
<mat-hint>Name</mat-hint>
</mat-form-field>
<button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2"> SEARCH </button>
</div>
<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>

54
src/app/pages/accounts/account-search/account-search.component.ts
View File

@ -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;
}
}

3
src/app/pages/accounts/accounts.component.html
View File

@ -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">