feat: add custom data source

Add custom data source to implement server side pagination, sorting and
filtering.

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -1,9 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator, MatSort } from '@angular/material';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 
+import { merge } from 'rxjs';
+import { tap} from 'rxjs/operators';
+
 import { AccountingService } from '../accounting.service';
+import { JournalEntriesDataSource } from './journal-entry.datasource';
 
 @Component({
   selector: 'mifosx-search-journal-entry',
@@ -12,13 +16,14 @@ import { AccountingService } from '../accounting.service';
 })
 export class SearchJournalEntryComponent implements OnInit {
 
+  // TODO: Update when date and language are set up throughout the application
+  minDate = new Date(2000, 0, 1);
+  maxDate = new Date();
   officeName = new FormControl();
   glAccountCode = new FormControl();
   transactionDateFrom = new FormControl(new Date(2000, 0, 1));
   transactionDateTo = new FormControl(new Date());
   transactionId = new FormControl();
-  minDate = new Date(2000, 0, 1);
-  maxDate = new Date();
   filter = new FormControl('');
   displayedColumns: string[] = ['id', 'officeName', 'transactionId', 'transactionDate', 'glAccountType', 'createdByUserName', 'glAccountCode', 'glAccountName', 'debit', 'credit'];
   dataSource: any;
@@ -35,13 +40,46 @@ export class SearchJournalEntryComponent implements OnInit {
     },
     {
       option: 'System Entries',
-      value: false
+      value: false  // Bug: unable to implement from server side
+    }
+  ];
+  filterBy = [
+    {
+      type: 'officeId',
+      value: ''
+    },
+    {
+      type: 'glAccountId',
+      value: ''
+    },
+    {
+      type: 'manualEntriesOnly',
+      value: ''
+    },
+    {
+      type: 'transactionId',
+      value: ''
+    },
+    {
+      type: 'fromDate',
+      value: '1 July 2018'
+    },
+    {
+      type: 'toDate',
+      value: '31 July 2018'
+    },
+    {
+      type: 'dateFormat',
+      value: 'dd MMMM yyyy'
+    },
+    {
+      type: 'locale',
+      value: 'en'
     }
   ];
-  filterValue: any = { officeName: '', glAccountCode: '', filter: '', transactionId: '' };
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort) sort: MatSort;  // Bug: Unable to implement desc order sorting
 
   constructor(private accountingService: AccountingService,
               private router: Router) { }
@@ -52,33 +90,32 @@ export class SearchJournalEntryComponent implements OnInit {
     this.getJournalEntries();
   }
 
-  getJournalEntries() {
-    this.accountingService.getJournalEntries().subscribe((journalEntryData: any) => {
-      this.dataSource = new MatTableDataSource(journalEntryData.pageItems);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sortingDataAccessor = (transaction: any, property: any) => {
-        switch (property) {
-          case 'glAccountType': return transaction.glAccountType.value;
-          case 'debit': return transaction.amount;
-          case 'credit': return transaction.amount;
-          default: return transaction[property];
-        }
-      };
-      this.dataSource.sort = this.sort;
-      this.dataSource.filterPredicate = this.filterPredicate;
-    });
+  ngAfterViewInit() {
+    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        tap(() => this.loadJournalEntriesPage())
+      )
+      .subscribe();
   }
 
-  filterPredicate(data: any, filterValue: string) {
-    return data.officeName.indexOf(filterValue['officeName']) != -1
-      && data.glAccountCode.indexOf(filterValue['glAccountCode']) != -1
-      && data.manualEntry.toString().indexOf(filterValue['filter']) != -1
-      && data.transactionId.indexOf(filterValue['transactionId']) != -1;
+  getJournalEntries() {
+    this.dataSource = new JournalEntriesDataSource(this.accountingService);
+    this.dataSource.loadJournalEntries(this.filterBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
+  }
+
+  loadJournalEntriesPage() {
+    if(!this.sort.direction) {
+      delete this.sort.active;
+    }
+    this.dataSource.loadJournalEntries(this.filterBy, this.sort.active, this.sort.direction, this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize);
   }
 
   applyFilter(filterValue: string, property: string) {
-    this.filterValue[property] = filterValue;
-    this.dataSource.filter = this.filterValue;
+    this.paginator.pageIndex = 0;
+    let findIndex = this.filterBy.findIndex(filter => filter.type === property);
+    this.filterBy[findIndex].value = filterValue;
+    this.loadJournalEntriesPage();
   }
 
   getOffices() {