Clients list was not showing clients by status

src/app/clients/clients.component.html

@@ -21,19 +21,19 @@
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='displayName'> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="displayName"> Name </th>
         <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
       </ng-container>
 
       <!-- Account no Column -->
       <ng-container matColumnDef="clientno">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='accountNo'> Account # </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account # </th>
         <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
       </ng-container>
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalid">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='externalId'> ExternalID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> ExternalID </th>
         <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
       </ng-container>
 
@@ -41,7 +41,7 @@
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef> Status </th>
         <td mat-cell *matCellDef="let row">
-          <div [ngClass]="row.active|statusLookup">
+          <div [ngClass]="row.status.code | statusLookup">
             <fa-icon icon="stop"></fa-icon>
           </div>
         </td>
@@ -61,13 +61,13 @@
 
       <!-- Color Column -->
       <ng-container matColumnDef="office">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='officeName'> OfficeName </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="officeName"> OfficeName </th>
         <td mat-cell *matCellDef="let row"> {{row.officeName}} </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"> StaffName </th>
         <td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
       </ng-container>
 

src/app/clients/clients.component.ts

@@ -36,6 +36,7 @@ export class ClientsComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.getClients();
   }
+
   ngAfterViewInit() {
     this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
     merge(this.sort.sortChange, this.paginator.page, this.showClosedAccounts.change)
@@ -54,9 +55,9 @@ export class ClientsComponent implements OnInit, AfterViewInit {
     }
 
     if (this.searchValue !== '') {
-    this.applyFilter(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);
+      this.dataSource.getClients(this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
     }
   }
 
@@ -65,16 +66,16 @@ export class ClientsComponent implements OnInit, AfterViewInit {
    */
   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);
+    this.dataSource.getClients(this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
   }
 
   /**
    * Filter Client Data
    * @param {string} filterValue Value to filter data.
    */
-  applyFilter(filterValue: string= '') {
+  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.filterClients(filterValue.trim().toLowerCase(), this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
   }
 
 }

src/app/clients/clients.datasource.ts

@@ -32,11 +32,15 @@ export class ClientsDataSource implements DataSource<any> {
    * @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) {
+  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) => {
-        clients.pageItems = (clientActive) ? (clients.pageItems.filter((client: any) => client.active)) : (clients.pageItems.filter((client: any) => !client.active));
+        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);
       });
@@ -64,11 +68,15 @@ export class ClientsDataSource implements DataSource<any> {
    * @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, clientActive: boolean = true) {
+  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) => {
-        clients.pageItems = clients.pageItems.filter((client: any) => client.active === clientActive && client.displayName.toLowerCase().includes(filter));
+        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);
       });