CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Clients search enhancement (#1605)

Browse Source 
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2022-12-26 14:25:49 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 475059a974
commit d0dc2aabb2
29 changed files with 514 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/clients.component.html
+35 -32
View File
@@ -1,41 +1,47 @@
<mat-card class="container">
<div fxLayout="row" fxLayoutAlign="start center">
<div class="search-box">
<mat-form-field>
<input matInput placeholder="Search by client name" (keyup)="applyFilter($event.target.value)">
<div class="search-box m-r-30">
<mat-form-field class="search-box">
<input matInput placeholder="Search by client name, external Id, mobile" class="search-box" (keydown.enter)="search($event.target.value)">
</mat-form-field>
<mat-checkbox #showClosedAccounts labelPosition="after">Show Closed Accounts
</div>
<div class="filter-box" *ngIf="existsClientsToFilter">
<mat-form-field class="filter-box m-r-30">
<input matInput placeholder="Filter by client name or external Id" class="filter-box" (keyup)="applyFilter($event.target.value)">
</mat-form-field>
<mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10">Show Closed Accounts
</mat-checkbox>
</div>
<div class="action-button" fxLayoutGap="25px">
<button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Clients']" *mifosxHasPermission="'CREATE_CLIENT'">
<fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Client
<fa-icon icon="download" class="m-r-10"></fa-icon>Import Client
</button>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Client
<fa-icon icon="plus" class="m-r-10"></fa-icon>Create Client
</button>
</div>
</div>
<div>
<div *ngIf="existsClientsToFilter">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header="displayName"> Name </th>
<td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
<td mat-cell *matCellDef="let row"> {{row.entityName}} </td>
</ng-container>
<!-- Account no Column -->
<ng-container matColumnDef="clientno">
<th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account # </th>
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
<ng-container matColumnDef="clientNo">
<th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account No. </th>
<td mat-cell *matCellDef="let row"> {{row.entityAccountNo}} </td>
</ng-container>
<!-- External ID Column -->
<ng-container matColumnDef="externalid">
<th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> ExternalID </th>
<ng-container matColumnDef="externalId">
<th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> External Id </th>
<td mat-cell *matCellDef="let row">
<mifosx-external-identifier externalId="{{row.externalId}}"></mifosx-external-identifier>
<mifosx-external-identifier externalId="{{row.entityExternalId}}"></mifosx-external-identifier>
</td>
</ng-container>
@@ -43,43 +49,40 @@
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Status </th>
<td mat-cell *matCellDef="let row">
<div [ngClass]="row.status.code | statusLookup">
<div [ngClass]="row.entityStatus.code | statusLookup">
<fa-icon icon="stop"></fa-icon>
<span class="m-l-10 status">
{{ row.entityStatus.value | translate }}
</span>
</div>
</td>
</ng-container>
<!-- Mobile Number Column-->
<ng-container matColumnDef="mobileNo">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile Number </th>
<td mat-cell *matCellDef="let client"> {{ client.mobileNo }} </td>
</ng-container>
<!--Gender column-->
<ng-container matColumnDef="gender">
<th mat-header-cell *matHeaderCellDef> Gender </th>
<td mat-cell *matCellDef="let client"> {{ client.gender.name }} </td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="office">
<th mat-header-cell *matHeaderCellDef mat-sort-header="officeName"> OfficeName </th>
<td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header="officeName"> Office Name </th>
<td mat-cell *matCellDef="let row"> {{row.parentName}} </td>
</ng-container>
<!-- ID Column -->
<ng-container matColumnDef="staff">
<th mat-header-cell *matHeaderCellDef mat-sort-header="staffName"> StaffName </th>
<th mat-header-cell *matHeaderCellDef mat-sort-header="staffName"> Staff Name </th>
<td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']" class="select-row">
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.entityId,'general']" class="select-row">
</tr>
</table>
<mat-paginator [length]="dataSource?.records$ | async" [pageSize]="100" [pageSizeOptions]="[10, 25, 50, 100]"
<mat-paginator [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]"
showFirstLastButtons></mat-paginator>
</div>
<div class="alert" *ngIf="notExistsClientsToFilter">
<div class="message">
<i class="fa fa-exclamation-circle alert-check"></i>
No client was found
</div>
</div>
</mat-card>
src/app/clients/clients.component.scss
+10
View File
@@ -6,6 +6,12 @@
min-width: 30px;
margin: 4px;
}
.search-box {
min-width: 320px;
}
.filter-box {
min-width: 280px;
}
}
table {
@@ -16,3 +22,7 @@ table {
color : black;
}
}
.status {
color: black;
}
src/app/clients/clients.component.ts
+22 -50
View File
@@ -1,72 +1,34 @@
/** Angular Imports. */
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ClientsDataSource } from './clients.datasource';
/** rxjs Imports */
import { merge } from 'rxjs';
import { tap } from 'rxjs/operators';
import { MatTableDataSource } from '@angular/material/table';
/** Custom Services */
import { ClientsService } from './clients.service';
import { SearchService } from 'app/search/search.service';
@Component({
selector: 'mifosx-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.scss'],
})
export class ClientsComponent implements OnInit, AfterViewInit {
export class ClientsComponent implements OnInit {
@ViewChild('showClosedAccounts', { static: true }) showClosedAccounts: MatCheckbox;
displayedColumns = ['name', 'clientNo', 'externalId', 'status', 'office', 'staff'];
dataSource: MatTableDataSource<any>;
displayedColumns = ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
dataSource: ClientsDataSource;
/** Get the required filter value. */
searchValue = '';
existsClientsToFilter = false;
notExistsClientsToFilter = false;
moreClientsToFilter = false;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private clientsService: ClientsService) {
}
constructor(private searchService: SearchService) { }
ngOnInit() {
this.getClients();
}
ngAfterViewInit() {
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page, this.showClosedAccounts.change)
.pipe(
tap(() => this.loadClientsPage())
)
.subscribe();
}
/**
* Loads a page of journal entries.
*/
loadClientsPage() {
if (!this.sort.direction) {
delete this.sort.active;
}
if (this.searchValue !== '') {
this.applyFilter(this.searchValue);
} else {
this.dataSource.getClients(this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
}
}
/**
* Initializes the data source for clients table and loads the first page.
*/
getClients() {
this.dataSource = new ClientsDataSource(this.clientsService);
this.dataSource.getClients(this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
}
/**
@@ -74,8 +36,18 @@ export class ClientsComponent implements OnInit, AfterViewInit {
* @param {string} filterValue Value to filter data.
*/
applyFilter(filterValue: string = '') {
this.searchValue = filterValue;
this.dataSource.filterClients(filterValue.trim().toLowerCase(), this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* Searches server for query and resource.
*/
search(value: string) {
this.searchService.getSearchResults(value, 'clients').subscribe((data: any) => {
this.dataSource = new MatTableDataSource(data);
this.existsClientsToFilter = (data.length > 0);
this.notExistsClientsToFilter = !this.existsClientsToFilter;
this.moreClientsToFilter = (data.length > 50);
});
}
}
src/app/clients/clients.datasource.ts
-85
View File
@@ -1,85 +0,0 @@
/** Angular Imports */
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
/** rxjs Imports */
import { Observable, BehaviorSubject } from 'rxjs';
/** Custom Services */
import { ClientsService } from './clients.service';
/**
* Clients custom data source to implement server side filtering, pagination and sorting.
*/
export class ClientsDataSource implements DataSource<any> {
/** clients behavior subject to represent loaded journal clients page. */
private clientsSubject = new BehaviorSubject<any[]>([]);
/** Records subject to represent total number of filtered clients records. */
private recordsSubject = new BehaviorSubject<number>(0);
/** Records observable which can be subscribed to get the value of total number of filtered clients records. */
public records$ = this.recordsSubject.asObservable();
/**
* @param {ClientsService} clientsService Clients Service
*/
constructor(private clientsService: ClientsService) { }
/**
* Gets clients on the basis of provided parameters and emits the value.
* @param {any} filterBy Properties by which clients should be filtered.
* @param {string} orderBy Property by which clients should be sorted.
* @param {string} sortOrder Sort order: ascending or descending.
* @param {number} pageIndex Page number.
* @param {number} limit Number of clients within the page.
*/
getClients(orderBy: string = '', sortOrder: string = '', pageIndex: number = 0, limit: number = 10, showClosedAccounts: boolean = true) {
this.clientsSubject.next([]);
this.clientsService.getClients(orderBy, sortOrder, pageIndex * limit, limit)
.subscribe((clients: any) => {
if (showClosedAccounts) {
clients.pageItems = clients.pageItems;
} else {
clients.pageItems = clients.pageItems.filter((client: any) => client.status.value !== 'Closed');
}
this.recordsSubject.next(clients.totalFilteredRecords);
this.clientsSubject.next(clients.pageItems);
});
}
/**
* @param {CollectionViewer} collectionViewer
*/
connect(collectionViewer: CollectionViewer): Observable<any[]> {
return this.clientsSubject.asObservable();
}
/**
* @param {CollectionViewer} collectionViewer
*/
disconnect(collectionViewer: CollectionViewer): void {
this.clientsSubject.complete();
this.recordsSubject.complete();
}
/** Filter Active Client Data.
* @param {string} filterValue Filter Value which clients should be filtered.
* @param {string} orderBy Property by which clients should be sorted.
* @param {string} sortOrder Sort order: ascending or descending.
* @param {number} pageIndex Page number.
* @param {number} limit Number of clients within the page.
*/
filterClients(filter: string, orderBy: string = '', sortOrder: string = '', pageIndex: number = 0, limit: number = 10, showClosedAccounts: boolean = true) {
this.clientsSubject.next([]);
this.clientsService.getClients(orderBy, sortOrder, pageIndex * limit, limit)
.subscribe((clients: any) => {
if (showClosedAccounts) {
clients.pageItems = clients.pageItems.filter((client: any) => client.displayName.toLowerCase().includes(filter));
} else {
clients.pageItems = clients.pageItems.filter((client: any) => client.status.value !== 'Closed' && client.displayName.toLowerCase().includes(filter));
}
this.recordsSubject.next(clients.totalFilteredRecords);
this.clientsSubject.next(clients.pageItems);
});
}
}