refractor: accounting module (#300)

* Refractor components.
* Add resolvers.
* Add relative router links.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes: #298

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

@@ -1,32 +1,57 @@
+/** Angular Imports */
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 
+/** rxjs Imports */
 import { Observable, BehaviorSubject } from 'rxjs';
 
+/** Custom Services */
 import { AccountingService } from '../accounting.service';
 
+/**
+ * Journal entries custom data source to implement server side filtering, pagination and sorting.
+ */
 export class JournalEntriesDataSource implements DataSource<any> {
 
+  /** Journal entries behavior subject to represent loaded journal entries page. */
   private journalEntriesSubject = new BehaviorSubject<any[]>([]);
+  /** Records subject to represent total number of filtered journal entry records. */
   private recordsSubject = new BehaviorSubject<number>(0);
-
+  /** Records observable which can be subscribed to get the value of total number of filtered journal entry records. */
   public records$ = this.recordsSubject.asObservable();
 
+  /**
+   * @param {AccountingService} accountingService Accounting Service
+   */
   constructor(private accountingService: AccountingService) {  }
 
-  getJournalEntries(filterBy: any, orderBy: string = '', sortOrder: string = '', offset: number = 0, limit: number = 10) {
+  /**
+   * Gets journal entries on the basis of provided parameters and emits the value.
+   * @param {any} filterBy Properties by which entries should be filtered.
+   * @param {string} orderBy Property by which entries should be sorted.
+   * @param {string} sortOrder Sort order: ascending or descending.
+   * @param {number} pageIndex Page number.
+   * @param {number} limit Number of entries within the page.
+   */
+  getJournalEntries(filterBy: any, orderBy: string = '', sortOrder: string = '', pageIndex: number = 0, limit: number = 10) {
     this.journalEntriesSubject.next([]);
     orderBy = (orderBy === 'debit' || orderBy === 'credit') ? 'amount' : orderBy;
-    this.accountingService.getJournalEntries(filterBy, orderBy, sortOrder, offset, limit)
+    this.accountingService.getJournalEntries(filterBy, orderBy, sortOrder, pageIndex * limit, limit)
       .subscribe((journalEntries: any) => {
         this.recordsSubject.next(journalEntries.totalFilteredRecords);
         this.journalEntriesSubject.next(journalEntries.pageItems);
       });
   }
 
+  /**
+   * @param {CollectionViewer} collectionViewer
+   */
   connect(collectionViewer: CollectionViewer): Observable<any[]> {
     return this.journalEntriesSubject.asObservable();
   }
 
+  /**
+   * @param {CollectionViewer} collectionViewer
+   */
   disconnect(collectionViewer: CollectionViewer): void {
     this.journalEntriesSubject.complete();
     this.recordsSubject.complete();

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

@@ -1,15 +1,18 @@
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="31%">
-    <input matInput placeholder="Office Name" [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <mat-label>Office Name</mat-label>
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <input matInput placeholder="GL Account Name or Code" [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
+    <mat-label>GL Account Name or Code</mat-label>
+    <input matInput [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-select placeholder="Filter" [formControl]="filter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
+    <mat-label>Filter</mat-label>
+    <mat-select [formControl]="entryTypeFilter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
       <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
         {{ filter.option }}
       </mat-option>
@@ -17,19 +20,22 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" placeholder="Transaction Date From" [formControl]="transactionDateFrom">
+    <mat-label>Transaction Date From</mat-label>
+    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" [formControl]="transactionDateFrom">
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" placeholder="Transaction Date To" [formControl]="transactionDateTo">
+    <mat-label>Transaction Date To</mat-label>
+    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" [formControl]="transactionDateTo">
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <input matInput placeholder="Transaction ID" [formControl]="transactionId">
+    <mat-label>Transaction ID</mat-label>
+    <input matInput [formControl]="transactionId">
   </mat-form-field>
 
 </div>
@@ -104,7 +110,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewTransaction(row)" class="select"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['transactions/view', row.transactionId]" class="select-row"></tr>
 
   </table>
 

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

@@ -1,3 +1,7 @@
 table {
   width: 100%;
+
+  .select-row:hover {
+    cursor: pointer;
+  }
 }

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

@@ -1,14 +1,22 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { FormControl } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
+/** rxjs Imports */
 import { merge } from 'rxjs';
 import { tap, startWith, map, distinctUntilChanged, debounceTime} from 'rxjs/operators';
 
+/** Custom Services */
 import { AccountingService } from '../accounting.service';
+
+/** Custom Data Source */
 import { JournalEntriesDataSource } from './journal-entry.datasource';
 
+/**
+ * Search journal entry component.
+ */
 @Component({
   selector: 'mifosx-search-journal-entry',
   templateUrl: './search-journal-entry.component.html',
@@ -16,19 +24,25 @@ import { JournalEntriesDataSource } from './journal-entry.datasource';
 })
 export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
 
-  // TODO: Update once language and date settings are setup
+  /** Minimum transaction date allowed. */
   minDate = new Date(2000, 0, 1);
+  /** Maximum transaction date allowed. */
   maxDate = new Date();
-
+  /** Office name filter form control.  */
   officeName = new FormControl();
+  /** Office data. */
   officeData: any;
+  /** Filtered office data for autocomplete. */
   filteredOfficeData: any;
-
+  /** Gl Account filter form control. */
   glAccount = new FormControl();
+  /** Gl Account data. */
   glAccountData: any;
+  /** Filtered gl account data. */
   filteredGLAccountData: any;
-
-  filter = new FormControl('');
+  /** Entry type filter form control. */
+  entryTypeFilter = new FormControl('');
+  /** Entry type filter data. */
   entryTypeFilterData = [
     {
       option: 'All',
@@ -43,15 +57,17 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
       value: false  // Bug: unable to implement from server side
     }
   ];
-
-  transactionDateFrom = new FormControl(new Date(2000, 0, 1));
+  /** Transaction date from form control. */
+  transactionDateFrom = new FormControl(new Date(new Date().setMonth(new Date().getMonth() - 1)));
+  /** Transaction date to form control. */
   transactionDateTo = new FormControl(new Date());
-
+  /** Transaction ID form control. */
   transactionId = new FormControl();
-
+  /** Columns to be displayed in journal entries table. */
   displayedColumns: string[] = ['id', 'officeName', 'transactionId', 'transactionDate', 'glAccountType', 'createdByUserName', 'glAccountCode', 'glAccountName', 'debit', 'credit'];
-  dataSource: any;
-
+  /** Data source for journal entries table. */
+  dataSource: JournalEntriesDataSource;
+  /** Journal entries filter. */
   filterJournalEntriesBy = [
     {
       type: 'officeId',
@@ -71,15 +87,15 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
     },
     {
       type: 'fromDate',
-      value: '1 July 2018'
+      value: this.getDate(new Date(new Date().setMonth(new Date().getMonth() - 1)))
     },
     {
       type: 'toDate',
-      value: '31 July 2018'
+      value: this.getDate(new Date())
     },
     {
       type: 'dateFormat',
-      value: 'dd MMMM yyyy'
+      value: 'yyyy-MM-dd'
     },
     {
       type: 'locale',
@@ -87,18 +103,41 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
     }
   ];
 
+  /** Paginator for journal entries table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;  // Bug: Unable to implement desc order sorting
+  /** Sorter for journal entries table. */
+  @ViewChild(MatSort) sort: MatSort;
 
+  /**
+   * Retrieves the offices and gl accounts data from `resolve`.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   */
   constructor(private accountingService: AccountingService,
-              private router: Router) { }
+              private route: ActivatedRoute) {
+    this.route.data.subscribe((data: {
+        offices: any,
+        glAccounts: any
+      }) => {
+        this.officeData = data.offices;
+        this.glAccountData = data.glAccounts;
+      });
+  }
 
+  /**
+   * Sets filtered offices and gl accounts for autocomplete and journal entries table.
+   */
   ngOnInit() {
-    this.getOffices();
-    this.getGlAccounts();
+    this.setFilteredOffices();
+    this.setFilteredGlAccounts();
     this.getJournalEntries();
   }
 
+  /**
+   * Subscribes to all search filters:
+   * Office Name, GL Account, Transaction ID, Transaction Date From, Transaction Date To,
+   * sort change and page change.
+   */
   ngAfterViewInit() {
     this.officeName.valueChanges
       .pipe(
@@ -132,6 +171,26 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
       )
       .subscribe();
 
+    this.transactionDateFrom.valueChanges
+      .pipe(
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(this.getDate(filterValue), 'fromDate');
+        })
+      )
+      .subscribe();
+
+    this.transactionDateTo.valueChanges
+      .pipe(
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(this.getDate(filterValue), 'toDate');
+        })
+      )
+      .subscribe();
+
     this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
 
     merge(this.sort.sortChange, this.paginator.page)
@@ -141,13 +200,21 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
       .subscribe();
   }
 
+  /**
+   * Loads a page of journal entries.
+   */
   loadJournalEntriesPage() {
     if (!this.sort.direction) {
       delete this.sort.active;
     }
-    this.dataSource.getJournalEntries(this.filterJournalEntriesBy, this.sort.active, this.sort.direction, this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize);
+    this.dataSource.getJournalEntries(this.filterJournalEntriesBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
   }
 
+  /**
+   * Filters data in journal entries table based on passed value and poperty.
+   * @param {string} filterValue Value to filter data.
+   * @param {string} property Property to filter data by.
+   */
   applyFilter(filterValue: string, property: string) {
     this.paginator.pageIndex = 0;
     const findIndex = this.filterJournalEntriesBy.findIndex(filter => filter.type === property);
@@ -155,53 +222,92 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
     this.loadJournalEntriesPage();
   }
 
-  viewTransaction(journalEntry: any) {
-    this.router.navigate(['/accounting/transactions/view', journalEntry.transactionId]);
-  }
-
+  /**
+   * Displays office name in form control input.
+   * @param {any} office Office data.
+   * @returns {string} Office name if valid otherwise undefined.
+   */
   displayOfficeName(office?: any): string | undefined {
     return office ? office.name : undefined;
   }
 
+  /**
+   * Displays gl account name in form control input.
+   * @param {any} glAccount Gl Account data.
+   * @returns {string} Gl Account name if valid otherwise undefined.
+   */
   displayGLAccount(glAccount?: any): string | undefined {
     return glAccount ? glAccount.name + ' (' + glAccount.glCode + ')' : undefined;
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-      this.filteredOfficeData = this.officeName.valueChanges
+  /**
+   * Sets filtered offices for autocomplete.
+   */
+  setFilteredOffices() {
+    this.filteredOfficeData = this.officeName.valueChanges
       .pipe(
         startWith(''),
         map((office: any) => typeof office === 'string' ? office : office.name),
-        map((officeName: string) => officeName ? this.filterOfficeAutocompleteData(this.officeData, officeName) : this.officeData)
+        map((officeName: string) => officeName ? this.filterOfficeAutocompleteData(officeName) : this.officeData)
       );
-    });
   }
 
-  getGlAccounts() {
-    this.accountingService.getGlAccounts().subscribe(glAccountData => {
-      this.glAccountData = glAccountData;
-      this.filteredGLAccountData = this.glAccount.valueChanges
+  /**
+   * Sets filtered gl accounts for autocomplete.
+   */
+  setFilteredGlAccounts() {
+    this.filteredGLAccountData = this.glAccount.valueChanges
       .pipe(
         startWith(''),
         map((glAccount: any) => typeof glAccount === 'string' ? glAccount : glAccount.name + ' (' + glAccount.glCode + ')'),
-        map((glAccount: string) => glAccount ? this.filterGLAccountAutocompleteData(this.glAccountData, glAccount) : this.glAccountData)
+        map((glAccount: string) => glAccount ? this.filterGLAccountAutocompleteData(glAccount) : this.glAccountData)
       );
-    });
   }
 
-  private filterOfficeAutocompleteData(officeData: any, officeName: string): any {
-    return officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
+  /**
+   * Filters offices.
+   * @param {string} officeName Office name to filter office by.
+   * @returns {any} Filtered offices.
+   */
+  private filterOfficeAutocompleteData(officeName: string): any {
+    return this.officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
   }
 
-  private filterGLAccountAutocompleteData(glAccountData: any, glAccount: string): any {
-    return glAccountData.filter((option: any) => (option.name + ' (' + option.glCode + ')').toLowerCase().includes(glAccount.toLowerCase()));
+  /**
+   * Filters gl accounts.
+   * @param {string} glAccount Gl Account name to filter gl account by.
+   * @returns {any} Filtered gl accounts.
+   */
+  private filterGLAccountAutocompleteData(glAccount: string): any {
+    return this.glAccountData.filter((option: any) => (option.name + ' (' + option.glCode + ')').toLowerCase().includes(glAccount.toLowerCase()));
   }
 
+  /**
+   * Initializes the data source for journal entries table and loads the first page.
+   */
   getJournalEntries() {
     this.dataSource = new JournalEntriesDataSource(this.accountingService);
-    this.dataSource.getJournalEntries(this.filterJournalEntriesBy, this.sort.active, this.sort.direction, this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize);
+    this.dataSource.getJournalEntries(this.filterJournalEntriesBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
+  }
+
+  /**
+   * Gets the date from the passed timestamp.
+   *
+   * TODO: Update once language and date settings are setup.
+   *
+   * @param {any} timestamp Timestam from which date is to be extracted.
+   */
+  private getDate(timestamp: any) {
+    let day = timestamp.getDate();
+    let month = timestamp.getMonth() + 1;
+    const year = timestamp.getFullYear();
+    if (day < 10) {
+      day = `0${day}`;
+    }
+    if (month < 10) {
+      month = `0${month}`;
+    }
+    return `${year}-${month}-${day}`;
   }
 
 }