refactor(clients): clients list page

- use statuslookup.pipe to set styles to represent status of the client
- add button to import client and create client
- add server side pagination
- toggle show closed clients in table

src/app/centers/centers.component.ts

@@ -8,7 +8,7 @@ import { Observable } from 'rxjs';
   selector: 'mifosx-app-centers',
   templateUrl: './centers.component.html',
   styleUrls: ['./centers.component.scss'],
-  encapsulation: ViewEncapsulation.None
+
 })
 export class CentersComponent implements OnInit {
   private ELEMENT_DATA: any = undefined;

src/app/clients/clients-routing.module.ts

@@ -21,7 +21,6 @@ import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-ta
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
 
 /** Custom Resolvers */
-import { ClientsResolver } from './common-resolvers/clients.resolver';
 import { ClientViewResolver } from './common-resolvers/client-view.resolver';
 import { ClientAccountsResolver } from './common-resolvers/client-accounts.resolver';
 import { ClientAddressResolver } from './common-resolvers/client-address.resolver';
@@ -47,9 +46,6 @@ const routes: Routes = [
       {
         path: '',
         component: ClientsComponent,
-        resolve: {
-          clientsData: ClientsResolver
-        }
       },
       {
         path: ':clientId',
@@ -152,7 +148,6 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    ClientsResolver,
     ClientViewResolver,
     ClientAccountsResolver,
     ClientAddressResolver,

src/app/clients/clients.component.html

@@ -1,10 +1,22 @@
-<div class="container m-t-40 m-b-40">
-
-  <mat-form-field class="filter">
-    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-  </mat-form-field>
-
-  <div class="mat-elevation-z8">
+<mat-card class="container">
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box">
+      <mat-form-field>
+        <input matInput  placeholder="Search">
+      </mat-form-field>
+      <mat-checkbox #showClosedAccounts labelPosition="after">Show Closed Accounts
+      </mat-checkbox>
+    </div>
+    <div class="action-button" fxLayoutGap="25px">
+      <button mat-raised-button color="primary" [routerLink]="['./import']">
+        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Client
+      </button>
+      <button mat-raised-button color="primary" [routerLink]="['./add']">
+        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Client
+      </button>
+    </div>
+  </div>
+  <div>
     <table mat-table [dataSource]="dataSource" matSort>
 
       <!-- Name Column -->
@@ -25,16 +37,14 @@
         <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
       </ng-container>
 
-
-
       <!-- Status Column -->
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='active'> Status </th>
-        <td mat-cell *matCellDef="let row"> 
-          <div [className]="row.active === true ? 'active' : 'inactive'">
-            <i class="fa fa-circle fa-2x"> </i>
+        <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> 
+        </td>
       </ng-container>
 
       <!-- Mobile Number Column-->
@@ -42,11 +52,11 @@
         <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 mat-sort-header> Gender </th>
-        <td mat-cell *matCellDef="let client" > {{ client.gender.name }} </td>
+        <th mat-header-cell *matHeaderCellDef> Gender </th>
+        <td mat-cell *matCellDef="let client"> {{ client.gender.name }} </td>
       </ng-container>
 
       <!-- Color Column -->
@@ -64,11 +74,11 @@
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']">
-         
       </tr>
     </table>
 
-    <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+    <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]"
+      showFirstLastButtons></mat-paginator>
   </div>
 
-</div>
+</mat-card>

src/app/clients/clients.component.scss

@@ -1,26 +1,11 @@
 
-  table {
-  width: 100%;
+.container {
+  .action-button{
+    margin-left: auto;
+  }
+  .search-button{
+    min-width: 30px;
+    margin: 4px;
+    
+  }
 }
-
-.mat-form-field {
-  font-size: 14px;
-  width: 100%;
-}
-
-td, th {
-  width: 15%;
-}
-
-.filter{
-  width: 50%;
-}
-
-.inactive {
-  color: red;
-}
-
-.active {
-  color: green;
-}
-

src/app/clients/clients.component.ts

@@ -1,48 +1,60 @@
-import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource, MatCheckbox } from '@angular/material';
+import { ClientsDataSource } from './clients.datasource';
+
+/** rxjs Imports */
+import { merge } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+/** Custom Services */
+import { ClientsService } from './clients.service';
+
 @Component({
   selector: 'mifosx-clients',
   templateUrl: './clients.component.html',
   styleUrls: ['./clients.component.scss'],
-  encapsulation: ViewEncapsulation.None
-
 })
-export class ClientsComponent implements OnInit {
-  post: any = [];
+export class ClientsComponent implements OnInit, AfterViewInit {
+  @ViewChild('showClosedAccounts') showClosedAccounts: MatCheckbox;
+
 
   displayedColumns = ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
-  dataSource = new MatTableDataSource();
+  dataSource: ClientsDataSource;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((clientsData: { clientsData: any }) => {
-      const res = clientsData.clientsData.pageItems;
-      res.active = !!res.active;
-      this.dataSource = new MatTableDataSource(res);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sortingDataAccessor = (data: any, property: any) => {
-        switch (property) {
-          case 'gender': return data.gender.name;
-          default: return data[property];
-        }
-      };
-      this.dataSource.sort = this.sort;
-    });
+  constructor(private clientsService: ClientsService) {
+
   }
 
+  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();
+  }
 
-  ngOnInit() { }
-
-  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 journal entries.
+   */
+  loadClientsPage() {
+    if (!this.sort.direction) {
+      delete this.sort.active;
     }
+    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);
+  }
 }

src/app/clients/clients.datasource.ts

@@ -0,0 +1,60 @@
+/** 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, clientActive: boolean = true) {
+    this.clientsSubject.next([]);
+    this.clientsService.getClients(orderBy, sortOrder, pageIndex * limit, limit)
+      .subscribe((clients: any) => {
+        clients.pageItems = (clientActive) ? (clients.pageItems.filter((client: any) => client.active)) : clients.pageItems;
+        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();
+  }
+
+}

src/app/clients/clients.module.ts

@@ -5,7 +5,7 @@ import { DatePipe } from '@angular/common';
 /** Custom Modules */
 import { ClientsRoutingModule } from './clients-routing.module';
 import { SharedModule } from 'app/shared/shared.module';
-import {PipesModule} from '../pipes/pipes.module';
+import { PipesModule } from '../pipes/pipes.module';
 
 /** Custom Components */
 import { ClientsComponent } from './clients.component';

src/app/clients/clients.service.ts

@@ -16,8 +16,13 @@ export class ClientsService {
    */
   constructor(private http: HttpClient) { }
 
-  getClients(): Observable<any> {
-    const httpParams = new HttpParams().set('orderBy', 'id');
+  getClients(orderBy: string, sortOrder: string, offset: number, limit: number): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('offset', offset.toString())
+      .set('limit', limit.toString())
+      .set('sortOrder', sortOrder)
+      .set('orderBy', orderBy);
+
     return this.http.get('/clients', { params: httpParams });
   }
 

src/app/clients/common-resolvers/clients.resolver.ts

@@ -1,30 +0,0 @@
-/** Angular Imports */
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Custom Services */
-import { ClientsService } from '../clients.service';
-
-/**
- * Clients data resolver.
- */
-@Injectable()
-export class ClientsResolver implements Resolve<Object> {
-
-    /**
-     * @param {ClientsService} ClientsService Clients service.
-     */
-    constructor(private clientsService: ClientsService) { }
-
-    /**
-     * Returns the Clients data.
-     * @returns {Observable<any>}
-     */
-    resolve(): Observable<any> {
-        return this.clientsService.getClients();
-    }
-
-}

src/app/pipes/status-lookup.pipe.ts

@@ -26,7 +26,16 @@ export class StatusLookupPipe implements PipeTransform {
       'shareAccountStatusType.active': 'status-active',
       'shareAccountStatusType.rejected': 'status-rejected',
       'loanProduct.active': 'status-active',
-      'loanProduct.inActive': 'status-inactive'
+      'loanProduct.inActive': 'status-inactive',
+      'clientStatusType.pending': 'status-pending',
+      'clientStatusType.closed': 'status-closed',
+      'clientStatusType.rejected': 'status-rejected', // write
+      'clientStatusType.withdraw': 'status-withdraw', // write
+      'clientStatusType.active': 'status-active',
+      'clientStatusType.submitted.and.pending.approval': 'status-pending',
+      'clientStatusTYpe.approved': 'status-approved',
+      'clientStatusType.transfer.in.progress': 'status-transfer-progress', // write
+      'clientStatusType.transfer.on.hold': 'status-transfer-hold' // write
     };
     return cssClassNameLookup[status];
   }

src/app/shared/icons.module.ts

@@ -72,10 +72,12 @@ import {
   faUsers,
   faUserShield,
   faDownload,
+  faUpload,
   faCloudDownloadAlt,
   faCloudUploadAlt,
   faTimes,
-  faStickyNote
+  faStickyNote,
+  faStop
 } from '@fortawesome/free-solid-svg-icons';
 
 /** Add icons to the library for convenient access in other components. */
@@ -147,10 +149,12 @@ library.add(
   faUsers,
   faUserShield,
   faDownload,
+  faUpload,
   faCloudDownloadAlt,
   faCloudUploadAlt,
   faTimes,
-  faStickyNote
+  faStickyNote,
+  faStop
 );
 
 /**

src/assets/styles/_colours.scss

@@ -71,5 +71,8 @@ $status-approved: #0f36e4;
 $status-overpaid: #800080;
 $status-active-overdue: #ff0000;
 $status-matured: #ff4000;
-
 $state-done: #00ce00;
+$status-transfer-progress:#FF4000;
+$status-transfer-hold:#DF0101;
+
+

src/assets/styles/_helper.scss

@@ -26,6 +26,14 @@ body {
   color: rgba(0, 0, 0, 0.87);
   line-height: 1.5;
   font-family: Roboto, Helvetica Neue, sans-serif;
+
+  table {
+    border: 1px solid rgba($color: #000000, $alpha: 0.12);
+    width: 100%;
+    tr:nth-child(even) {
+      background-color: #f2f2f2;
+    }
+  }
 }
 
 div {
@@ -1707,4 +1715,12 @@ textarea.noresize {
 
 .mat-step-header .mat-step-icon-state-done {
   background-color: $state-done;
+
+  .status-transfer-progress {
+    color: $status-transfer-progress;
+  }
+
+  .status-transfer-hold {
+    color: $status-transfer-hold;
+  }
 }