Fixed Sorting and paging of Employees and Accounts

overlord/src/app/account/account-list/account-list-datasource.ts

@@ -1,13 +1,13 @@
-import {DataSource} from '@angular/cdk/collections';
+import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {map, tap} from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
-import {merge, Observable, of as observableOf} from 'rxjs';
+import { merge, Observable, of as observableOf } from 'rxjs';
-import {Account} from '../../core/account';
+import { Account } from '../../core/account';
+import {Employee} from "../../employee/employee";
 
 
 export class AccountListDataSource extends DataSource<Account> {
-  private dataObservable: Observable<Account[]>;
   private filterValue: string;
 
   constructor(private paginator: MatPaginator, private sort: MatSort, private filter: Observable<string>, public data: Account[]) {
@@ -18,9 +18,8 @@ export class AccountListDataSource extends DataSource<Account> {
   }
 
   connect(): Observable<Account[]> {
-    this.dataObservable = observableOf(this.data);
     const dataMutations = [
-      this.dataObservable,
+      observableOf(this.data),
       this.filter,
       this.paginator.page,
       this.sort.sortChange
@@ -28,9 +27,13 @@ export class AccountListDataSource extends DataSource<Account> {
 
     return merge(...dataMutations).pipe(
       map((x: any) => {
-        return this.getPagedData(this.getSortedData(this.getFilteredData([...this.data])));
+        return this.getFilteredData([...this.data]);
       }),
       tap((x: Account[]) => this.paginator.length = x.length)
+    ).pipe(
+      map((x: any) => {
+        return this.getPagedData(this.getSortedData(x));
+      })
     );
   }
 
@@ -42,7 +45,7 @@ export class AccountListDataSource extends DataSource<Account> {
     return filter.split(' ').reduce((p: Account[], c: string) => {
       return p.filter(x => {
           const accountString = (
-            x.name + ' ' + x.type + ' ' + x.costCentre + (x.isActive ? ' active' : ' deactive')
+            x.name + ' ' + x.type + ' ' + x.costCentre + (x.isActive ? ' active' : ' inactive')
           ).toLowerCase();
           return accountString.indexOf(c) !== -1;
         }
@@ -65,6 +68,14 @@ export class AccountListDataSource extends DataSource<Account> {
       switch (this.sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
+        case 'type':
+          return compare(a.type, b.type, isAsc);
+        case 'isActive':
+          return compare(a.isActive, b.isActive, isAsc);
+        case 'isReconcilable':
+          return compare(a.isReconcilable, b.isReconcilable, isAsc);
+        case 'costCentre':
+          return compare(a.costCentre, b.costCentre, isAsc);
         case 'id':
           return compare(+a.id, +b.id, isAsc);
         default:

overlord/src/app/employee/employee-list/employee-list-datasource.ts

@@ -1,13 +1,12 @@
-import {DataSource} from '@angular/cdk/collections';
+import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {map, tap} from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
-import {merge, Observable, of as observableOf} from 'rxjs';
+import { merge, Observable, of as observableOf } from 'rxjs';
-import {Employee} from '../employee';
+import { Employee } from '../employee';
 
 
 export class EmployeeListDataSource extends DataSource<Employee> {
-  private dataObservable: Observable<Employee[]>;
   private filterValue: string;
 
   constructor(private paginator: MatPaginator, private sort: MatSort, private filter: Observable<string>, public data: Employee[]) {
@@ -18,9 +17,8 @@ export class EmployeeListDataSource extends DataSource<Employee> {
   }
 
   connect(): Observable<Employee[]> {
-    this.dataObservable = observableOf(this.data);
     const dataMutations = [
-      this.dataObservable,
+      observableOf(this.data),
       this.filter,
       this.paginator.page,
       this.sort.sortChange
@@ -28,9 +26,13 @@ export class EmployeeListDataSource extends DataSource<Employee> {
 
     return merge(...dataMutations).pipe(
       map((x: any) => {
-        return this.getPagedData(this.getSortedData(this.getFilteredData([...this.data])));
+        return this.getFilteredData([...this.data]);
       }),
       tap((x: Employee[]) => this.paginator.length = x.length)
+    ).pipe(
+      map((x: any) => {
+        return this.getPagedData(this.getSortedData(x));
+      })
     );
   }
 
@@ -42,7 +44,7 @@ export class EmployeeListDataSource extends DataSource<Employee> {
     return filter.split(' ').reduce((p: Employee[], c: string) => {
       return p.filter(x => {
           const employeeString = (
-            x.code + ' ' + x.name + ' ' + x.designation + ' ' + x.costCentre + (x.isActive ? ' active' : ' deactive')
+            x.code + ' ' + x.name + ' ' + x.designation + ' ' + x.costCentre + (x.isActive ? ' active' : ' inactive')
           ).toLowerCase();
           return employeeString.indexOf(c) !== -1;
         }