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

feat: add server-side pagination sort and search for centers component (#506)

Browse Source 
- Add server-side pagination, sort and search for centers component
- Refactor code to meet current guidelines

See: #234
This commit is contained in:
punwai
2020-05-07 02:54:09 +05:30
committed by GitHub
parent f2a19708b7
commit 3136cd3b30
6 changed files with 289 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/centers/centers.component.html
+51 -44
View File
@@ -1,53 +1,60 @@
<div class="container m-t-40 m-b-40">
<mat-card class="container">
<div fxLayout="row" fxLayoutAlign="start center">
<div class="search-box">
<mat-form-field>
<input matInput placeholder="Search by Name" [formControl]="name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Search by ExternalID" [formControl]="externalId">
</mat-form-field>
<mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()">Show Closed Centers
</mat-checkbox>
</div>
<div class="action-button" fxLayoutGap="25px">
<button mat-raised-button color="primary">
<fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Center
</button>
<button mat-raised-button color="primary">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Center
</button>
</div>
</div>
<mat-form-field class="filter">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" matSort>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let center"> {{ center.name }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header='name'> Name </th>
<td mat-cell *matCellDef="let row"> {{row?.name}} </td>
</ng-container>
<ng-container matColumnDef="accountNo">
<th mat-header-cell *matHeaderCellDef> Account # </th>
<td mat-cell *matCellDef="let center"> {{ center.accountNo }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="accountno">
<th mat-header-cell *matHeaderCellDef mat-sort-header='accountno'> Account # </th>
<td mat-cell *matCellDef="let row"> {{row?.accountNo}} </td>
</ng-container>
<ng-container matColumnDef="externalId">
<th mat-header-cell *matHeaderCellDef> ExternalID </th>
<td mat-cell *matCellDef="let center"> {{ center.externalId }} </td>
</ng-container>
<!-- Account no Column -->
<ng-container matColumnDef="externalid">
<th mat-header-cell *matHeaderCellDef mat-sort-header='externalid'> ExternalID </th>
<td mat-cell *matCellDef="let row"> {{row?.externalId}} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Status </th>
<td mat-cell *matCellDef="let row">
<div [ngClass]="row.active|statusLookup">
<fa-icon icon="stop"></fa-icon>
</div>
</td>
</ng-container>
<!-- External ID Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header='status'> Status </th>
<td mat-cell *matCellDef="let row"> <div [className]="row.active === true ? 'active' : 'inactive'">
<i class="fa fa-circle fa-2x"> </i>
</div> </td>
</ng-container>
<ng-container matColumnDef="officeName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
<td mat-cell *matCellDef="let center"> {{ center.officeName }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[ ]"></tr>
</table>
<mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
<!-- Status Column -->
<ng-container matColumnDef="office">
<th mat-header-cell *matHeaderCellDef mat-sort-header='office'> Office </th>
<td mat-cell *matCellDef="let row"> {{row?.officeName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[ ]">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</div>
</mat-card>
src/app/centers/centers.component.scss
+8 -25
View File
@@ -1,27 +1,10 @@
table {
width: 100%;
.container {
.action-button{
margin-left: auto;
}
.mat-form-field {
font-size: 14px;
width: 100%;
.search-button{
min-width: 30px;
margin: 4px;
}
td, th {
width: 15%;
}
.filter{
width: 50%;
}
.inactive {
color: red;
}
.active {
color: green;
}
}
src/app/centers/centers.component.ts
+114 -27
View File
@@ -1,45 +1,132 @@
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import { CentersService } from 'app/centers/centers.service';
import {DataSource} from '@angular/cdk/collections';
import { Observable } from 'rxjs';
/** Angular Imports */
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator, MatSort, MatCheckbox } from '@angular/material';
import { FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
/** rxjs Imports */
import { merge } from 'rxjs';
import { tap, startWith, map, distinctUntilChanged, debounceTime} from 'rxjs/operators';
/** Custom Services */
import { CentersService } from './centers.service';
/** Custom Data Source */
import { CentersDataSource } from './centers.datasource';
/**
* Centers component.
*/
@Component({
selector: 'mifosx-app-centers',
templateUrl: './centers.component.html',
styleUrls: ['./centers.component.scss'],
})
export class CentersComponent implements OnInit {
private ELEMENT_DATA: any = undefined;
displayedColumns = ['name', 'accountno', 'externalid', 'status', 'office'];
dataSource = new MatTableDataSource();
export class CentersComponent implements OnInit, AfterViewInit {
@ViewChild('showClosedCenters') showClosedCenters: MatCheckbox;
/** Name form control. */
name = new FormControl();
/** ExternalId form control. */
externalId = new FormControl();
/** Columns to be displayed in centers table. */
displayedColumns = ['name', 'accountNo', 'externalId', 'status', 'officeName'];
/** Data source for centers table. */
dataSource: CentersDataSource;
/** Centers filter. */
filterCentersBy = [
{
type: 'name',
value: ''
},
{
type: 'externalId',
value: ''
}
];
/** Paginator for centers table. */
@ViewChild(MatPaginator) paginator: MatPaginator;
/** Sorter for centers table. */
@ViewChild(MatSort) sort: MatSort;
constructor(private centerService: CentersService) { }
constructor(private centersService: CentersService) { }
ngOnInit() {
this.centerService.getCenters()
.subscribe(
(res => {
console.log(res);
// console.log(res.active);
res.active = !!res.active;
this.dataSource = new MatTableDataSource(res);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.getCenters();
}
/**
* Subscribes to all search filters:
* Name, ExternalId
* sort change and page change.
*/
ngAfterViewInit() {
this.name.valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged(),
tap((filterValue) => {
this.applyFilter(filterValue, 'name');
})
);
)
.subscribe();
this.externalId.valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged(),
tap((filterValue) => {
this.applyFilter(filterValue, 'externalId');
})
)
.subscribe();
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page)
.pipe(
tap(() => this.loadCentersPage())
)
.subscribe();
}
/**
* Reloads page on changing show closed centers checkbox
*/
changeShowClosedCenters() {
this.loadCentersPage();
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
/**
* Loads a page of centers.
*/
loadCentersPage() {
if (!this.sort.direction) {
delete this.sort.active;
}
this.dataSource.getCenters(this.filterCentersBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, !this.showClosedCenters.checked);
}
/**
* Filters data in centers table based on passed value and poperty.
* @param {string} filterValue Value to filter data.
* @param {string} property Property to filter data by.
*/
applyFilter(filterValue: string, property: string) {
this.paginator.pageIndex = 0;
const findIndex = this.filterCentersBy.findIndex(filter => filter.type === property);
this.filterCentersBy[findIndex].value = filterValue;
this.loadCentersPage();
}
/**
* Initializes the data source for centers table and loads the first page.
*/
getCenters() {
this.dataSource = new CentersDataSource(this.centersService);
this.dataSource.getCenters(this.filterCentersBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
}
}
src/app/centers/centers.datasource.ts
+61
View File
@@ -0,0 +1,61 @@
/** Angular Imports */
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
/** rxjs Imports */
import { Observable, BehaviorSubject } from 'rxjs';
/** Custom Services */
import { CentersService } from './centers.service';
/**
* Centers custom data source to implement server side filtering, pagination and sorting.
*/
export class CentersDataSource implements DataSource<any> {
/** centers behavior subject to represent loaded centers page. */
private centersSubject = new BehaviorSubject<any[]>([]);
/** Records subject to represent total number of filtered centers records. */
private recordsSubject = new BehaviorSubject<number>(0);
/** Records observable which can be subscribed to get the value of total number of filtered centers records. */
public records$ = this.recordsSubject.asObservable();
/**
* @param {CentersService} centersService Centers Service
*/
constructor(private centersService: CentersService) { }
/**
* Gets centers on the basis of provided parameters and emits the value.
* @param {any} filterBy Properties by which entries should be filtered.
* @param {string} orderBy Property by which entries should be sorted.
* @param {string} sortOrder Sort order: ascending or descending.
* @param {number} pageIndex Page number.
* @param {number} limit Number of entries within the page.
* @param {boolean} centerActive Specify whether to only filter active centers.
*/
getCenters(filterBy: any, orderBy: string = '', sortOrder: string = '', pageIndex: number = 0, limit: number = 10, centerActive: boolean = true) {
this.centersSubject.next([]);
this.centersService.getCenters(filterBy, orderBy, sortOrder, pageIndex * limit, limit)
.subscribe((centers: any) => {
centers.pageItems = (centerActive) ? (centers.pageItems.filter((center: any) => center.active)) : centers.pageItems;
this.recordsSubject.next(centers.totalFilteredRecords);
this.centersSubject.next(centers.pageItems);
});
}
/**
* @param {CollectionViewer} collectionViewer
*/
connect(collectionViewer: CollectionViewer): Observable<any[]> {
return this.centersSubject.asObservable();
}
/**
* @param {CollectionViewer} collectionViewer
*/
disconnect(collectionViewer: CollectionViewer): void {
this.centersSubject.complete();
this.recordsSubject.complete();
}
}
src/app/centers/centers.module.ts
+20 -19
View File
@@ -1,28 +1,29 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CoreModule } from '../core/core.module';
import { MatTableModule } from '@angular/material/table';
import { FlexLayoutModule } from '@angular/flex-layout';
/** Angular Imports */
import { NgModule } from '@angular/core';
import { DatePipe } from '@angular/common';
/** Custom Modules */
import { CentersRoutingModule } from './centers-routing.module';
import { SharedModule } from 'app/shared/shared.module';
import { PipesModule } from '../pipes/pipes.module';
/** Custom Components */
import { CentersComponent } from './centers.component';
import { CentersRoutingModule } from 'app/centers/centers-routing.module';
import { CentersService } from './centers.service';
/**
* Centers Module
*
* All components related to Centers should be declared here.
*/
@NgModule({
imports: [
CoreModule,
CommonModule,
SharedModule,
CentersRoutingModule,
FormsModule,
MatTableModule,
FlexLayoutModule
PipesModule
],
declarations: [CentersComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
declarations: [
CentersComponent
],
providers: [DatePipe]
})
export class CentersModule { }
src/app/centers/centers.service.ts
+35 -7
View File
@@ -1,17 +1,45 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
/** rxjs Imports */
import { Observable } from 'rxjs';
/**
* Clients service.
*/
@Injectable({
providedIn: 'root'
})
})
export class CentersService {
constructor(private http: HttpClient) { }
/**
* @param {HttpClient} http Http Client to send requests.
*/
constructor(private http: HttpClient) { }
getCenters(): Observable<any> {
return this.http.get('/centers');
}
/**
* @param {any} filterBy Properties by which entries should be filtered.
* @param {string} orderBy Property by which entries should be sorted.
* @param {string} sortOrder Sort order: ascending or descending.
* @param {number} offset Page offset.
* @param {number} limit Number of entries within the page.
* @returns {Observable<any>} Centers.
*/
getCenters(filterBy: any, orderBy: string, sortOrder: string, offset: number, limit: number): Observable<any> {
let httpParams = new HttpParams()
.set('offset', offset.toString())
.set('limit', limit.toString())
.set('sortOrder', sortOrder)
.set('orderBy', orderBy)
.set('paged', 'true');
// filterBy: name, externalId
filterBy.forEach(function (filter: any) {
if (filter.value) {
console.log(filter.value);
httpParams = httpParams.set(filter.type, filter.value);
}
});
return this.http.get('/centers', { params: httpParams });
}
}