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/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();
+  }
+
+}