feat: add custom data source

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

src/app/accounting/accounting.service.ts

@@ -36,8 +36,24 @@ export class AccountingService {
     return this.http.get(`/journalentries`, { params: httpParams });
   }
 
-  getJournalEntries() {
+  // filterBy: officeId, glAccountId, manualEntriesOnly, fromDate, toDate, transactionId
-    return this.http.get('/journalentries');
+  getJournalEntries(filterBy: any, orderBy: any, sortBy: any, offset: number, limit: number) {
+    console.log('Order By:', orderBy);
+    console.log('Sort By:', sortBy);
+    console.log('Filter By:', filterBy);
+    let httpParams = new HttpParams()
+      .set('offset', offset.toString())
+      .set('limit', limit.toString())
+      .set('sortBy', sortBy)
+      .set('orderBy', orderBy);
+    filterBy.forEach(function (filter: any) {
+      if(filter.value) {
+        httpParams = httpParams.set(filter.type, filter.value);
+      }
+    });
+    return this.http.get('/journalentries', {
+      params: httpParams
+    });
   }
 
   revertTransaction(transactionId: string, comments: string) {

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

@@ -0,0 +1,36 @@
+import { CollectionViewer, DataSource } from "@angular/cdk/collections";
+
+import { Observable, BehaviorSubject } from "rxjs";
+
+import { AccountingService } from "../accounting.service";
+
+export class JournalEntriesDataSource implements DataSource<any> {
+
+    private journalEntriesSubject = new BehaviorSubject<any[]>([]);
+    private recordsSubject = new BehaviorSubject<number>(0);
+
+    public records$ = this.recordsSubject.asObservable();
+
+    constructor(private accountingService: AccountingService) {  }
+
+    loadJournalEntries(filterBy: any, orderBy = '', sortBy = '', offset = 0, limit = 10) {
+      this.journalEntriesSubject.next([]);
+      orderBy = (orderBy === 'debit' || orderBy === 'credit') ? 'amount' : orderBy;
+      this.accountingService.getJournalEntries(filterBy, orderBy, sortBy, offset, limit)
+        .subscribe((journalEntries: any) => {
+          console.log(journalEntries);
+          this.recordsSubject.next(journalEntries.totalFilteredRecords);
+          this.journalEntriesSubject.next(journalEntries.pageItems);
+        });
+    }
+
+    connect(collectionViewer: CollectionViewer): Observable<any[]> {
+      return this.journalEntriesSubject.asObservable();
+    }
+
+    disconnect(collectionViewer: CollectionViewer): void {
+      this.journalEntriesSubject.complete();
+      this.recordsSubject.complete();
+    }
+
+}

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

@@ -1,20 +1,20 @@
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%">
   <mat-form-field fxFlex="31%">
-    <mat-select placeholder="Office" [formControl]="officeName" (selectionChange)="applyFilter($event.value, 'officeName')">
+    <mat-select placeholder="Office" [formControl]="officeName" (selectionChange)="applyFilter($event.value, 'officeId')">
-      <mat-option *ngFor="let office of officeData" [value]="office.name">
+      <mat-option *ngFor="let office of officeData" [value]="office.id">
         {{ office.name }}
       </mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field fxFlex="31%">
-    <mat-select placeholder="Affected GL Entry" [formControl]="glAccountCode" (selectionChange)="applyFilter($event.value, 'glAccountCode')">
+    <mat-select placeholder="Affected GL Entry" [formControl]="glAccountCode" (selectionChange)="applyFilter($event.value, 'glAccountId')">
-      <mat-option *ngFor="let affectedGLEntryDebit of glAccountData" [value]="affectedGLEntryDebit.glCode">
+      <mat-option *ngFor="let affectedGLEntry of glAccountData" [value]="affectedGLEntry.id">
-        {{ affectedGLEntryDebit.name + ' (' + affectedGLEntryDebit.glCode + ')' }}
+        {{ affectedGLEntry.name + ' (' + affectedGLEntry.glCode + ')' }}
       </mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field fxFlex="31%">
-    <mat-select placeholder="Filter" [formControl]="filter" (selectionChange)="applyFilter($event.value, 'filter')">
+    <mat-select placeholder="Filter" [formControl]="filter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
       <mat-option *ngFor="let filter of filterData" [value]="filter.value">
         {{ filter.option }}
       </mat-option>
@@ -33,13 +33,6 @@
   <mat-form-field fxFlex="31%">
     <input matInput placeholder="Transaction ID" [formControl]="transactionId" (keyup)="applyFilter($event.target.value, 'transactionId')">
   </mat-form-field>
-  <!-- <mat-form-field fxFlex="33%">
-    <mat-select placeholder="Transaction ID" [formControl]="transactionId">
-      <mat-option *ngFor="let transaction of dataSource?.data" [value]="transaction.transactionId">
-        {{ transaction.transactionId }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field> -->
 </div>
 
 <div class="mat-elevation-z8 container">
@@ -67,12 +60,12 @@
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+      <th mat-header-cell *matHeaderCellDef> Type </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="createdByUserName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Created by </th>
+      <th mat-header-cell *matHeaderCellDef> Created by </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.createdByUserName }} </td>
     </ng-container>
 
@@ -101,6 +94,6 @@
 
   </table>
 
-  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
 </div>

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() {
+  ngAfterViewInit() {
-    this.accountingService.getJournalEntries().subscribe((journalEntryData: any) => {
+    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
-      this.dataSource = new MatTableDataSource(journalEntryData.pageItems);
+    merge(this.sort.sortChange, this.paginator.page)
-      this.dataSource.paginator = this.paginator;
+      .pipe(
-      this.dataSource.sortingDataAccessor = (transaction: any, property: any) => {
+        tap(() => this.loadJournalEntriesPage())
-        switch (property) {
+      )
-          case 'glAccountType': return transaction.glAccountType.value;
+      .subscribe();
-          case 'debit': return transaction.amount;
-          case 'credit': return transaction.amount;
-          default: return transaction[property];
-        }
-      };
-      this.dataSource.sort = this.sort;
-      this.dataSource.filterPredicate = this.filterPredicate;
-    });
   }
 
-  filterPredicate(data: any, filterValue: string) {
+  getJournalEntries() {
-    return data.officeName.indexOf(filterValue['officeName']) != -1
+    this.dataSource = new JournalEntriesDataSource(this.accountingService);
-      && data.glAccountCode.indexOf(filterValue['glAccountCode']) != -1
+    this.dataSource.loadJournalEntries(this.filterBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
-      && data.manualEntry.toString().indexOf(filterValue['filter']) != -1
+  }
-      && data.transactionId.indexOf(filterValue['transactionId']) != -1;
+
+  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.paginator.pageIndex = 0;
-    this.dataSource.filter = this.filterValue;
+    let findIndex = this.filterBy.findIndex(filter => filter.type === property);
+    this.filterBy[findIndex].value = filterValue;
+    this.loadJournalEntriesPage();
   }
 
   getOffices() {