From c046ea415a991d0de105e933d3c2164564778e9f Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
Date: Wed, 15 Jun 2022 08:55:14 -0500
Subject: [PATCH] Clients list was not showing clients by status

---
 src/app/clients/clients.component.html | 12 ++++++------
 src/app/clients/clients.component.ts   | 11 ++++++-----
 src/app/clients/clients.datasource.ts  | 16 ++++++++++++----
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index 5e232a622..eae9e01fb 100644
--- a/src/app/clients/clients.component.html
+++ b/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>
 
diff --git a/src/app/clients/clients.component.ts b/src/app/clients/clients.component.ts
index 2ab1deaf1..911e61481 100644
--- a/src/app/clients/clients.component.ts
+++ b/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);
   }
 
 }
diff --git a/src/app/clients/clients.datasource.ts b/src/app/clients/clients.datasource.ts
index 5630ea79d..ef63e3672 100644
--- a/src/app/clients/clients.datasource.ts
+++ b/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);
       });