feat: add clients search field (#683)

Fixes: #445

src/app/clients/clients.component.html

@@ -2,7 +2,7 @@
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box">
       <mat-form-field>
-        <input matInput  placeholder="Search">
+        <input matInput placeholder="Search by client name" (keyup)="applyFilter($event.target.value)">
       </mat-form-field>
       <mat-checkbox #showClosedAccounts labelPosition="after">Show Closed Accounts
       </mat-checkbox>

src/app/clients/clients.component.ts

@@ -1,5 +1,6 @@
+/** Angular Imports. */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource, MatCheckbox } from '@angular/material';
+import { MatPaginator, MatSort, MatCheckbox } from '@angular/material';
 import { ClientsDataSource } from './clients.datasource';
 
 /** rxjs Imports */
@@ -20,6 +21,8 @@ export class ClientsComponent implements OnInit, AfterViewInit {
 
   displayedColumns = ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
   dataSource: ClientsDataSource;
+  /** Get the required filter value. */
+  searchValue = '';
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -47,7 +50,12 @@ export class ClientsComponent implements OnInit, AfterViewInit {
     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);
+    }
   }
 
   /**
@@ -57,4 +65,14 @@ export class ClientsComponent implements OnInit, AfterViewInit {
     this.dataSource = new ClientsDataSource(this.clientsService);
     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= '') {
+    this.searchValue = filterValue;
+    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

@@ -36,7 +36,7 @@ export class ClientsDataSource implements DataSource<any> {
     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;
+        clients.pageItems = (clientActive) ? (clients.pageItems.filter((client: any) => client.active)) : (clients.pageItems.filter((client: any) => !client.active));
         this.recordsSubject.next(clients.totalFilteredRecords);
         this.clientsSubject.next(clients.pageItems);
       });
@@ -57,4 +57,21 @@ export class ClientsDataSource implements DataSource<any> {
     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, clientActive: 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));
+        this.recordsSubject.next(clients.totalFilteredRecords);
+        this.clientsSubject.next(clients.pageItems);
+      });
+  }
+
 }