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/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -2,16 +2,20 @@
 
   <mat-card>
 
-    <form [formGroup]="provisioningEntriesForm" (ngSubmit)="submit()">
+    <form [formGroup]="provisioningEntryForm" (ngSubmit)="submit()">
 
       <mat-card-content>
 
         <div fxLayout="column">
 
           <mat-form-field fxFlex>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" placeholder="Date" required formControlName="date">
+            <mat-label>Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" required formControlName="date">
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
+            <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
+              Date is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <div fxFlex>
@@ -25,8 +29,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/provisioning-entries']">Cancel</button>
-        <button mat-raised-button color="primary">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!provisioningEntryForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.ts

@@ -1,8 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Create provisioning entry component.
+ */
 @Component({
   selector: 'mifosx-create-provisioning-entry',
   templateUrl: './create-provisioning-entry.component.html',
@@ -10,33 +16,65 @@ import { AccountingService } from '../../accounting.service';
 })
 export class CreateProvisioningEntryComponent implements OnInit {
 
+  /** Minimum provisioning date allowed. */
   minDate = new Date(2000, 0, 1);
+  /** Maximum provisioning date allowed. */
   maxDate = new Date();
-  provisioningEntriesForm: FormGroup;
+  /** Provisioning entry form. */
+  provisioningEntryForm: FormGroup;
 
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
   constructor(private formBuilder: FormBuilder,
-              private accountingService: AccountingService) { }
+              private accountingService: AccountingService,
+              private route: ActivatedRoute,
+              private router: Router) { }
 
+  /**
+   * Creates the provisioning entry form.
+   */
   ngOnInit() {
-    this.createProvisioningEntriesForm();
+    this.createProvisioningEntryForm();
   }
 
-  createProvisioningEntriesForm() {
-    this.provisioningEntriesForm = this.formBuilder.group({
+  /**
+   * Creates the provisioning entry form.
+   */
+  createProvisioningEntryForm() {
+    this.provisioningEntryForm = this.formBuilder.group({
       'date': ['', Validators.required],
       'createjournalentries': [false]
     });
   }
 
+  /**
+   * Submits the provisioning entry form and creates provisioning entry,
+   * if successful redirects to view created entry.
+   */
   submit() {
-    const provisioningEntry = this.provisioningEntriesForm.value;
+    const provisioningEntry = this.provisioningEntryForm.value;
     // TODO: Update once language and date settings are setup
     provisioningEntry.locale = 'en';
-    provisioningEntry.dateFormat = 'dd MMMM yyyy';
-    provisioningEntry.date = '06 August 2018';
+    provisioningEntry.dateFormat = 'yyyy-MM-dd';
+    if (provisioningEntry.date instanceof Date) {
+      let day = provisioningEntry.date.getDate();
+      let month = provisioningEntry.date.getMonth() + 1;
+      const year = provisioningEntry.date.getFullYear();
+      if (day < 10) {
+        day = `0${day}`;
+      }
+      if (month < 10) {
+        month = `0${month}`;
+      }
+      provisioningEntry.date = `${year}-${month}-${day}`;
+    }
     this.accountingService.createProvisioningEntry(provisioningEntry)
       .subscribe((response: any) => {
-        console.log(response);
+        this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
       });
   }
 

src/app/accounting/provisioning-entries/provisioning-entries.component.html

@@ -1,14 +1,16 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/provisioning-entries/create']">
-    <mat-icon>add</mat-icon>&nbsp;&nbsp;Create Provisioning Entry
+  <button mat-raised-button color="primary" [routerLink]="['create']">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    Create Provisioning Entry
   </button>
 </div>
 
 <div class="container">
 
-  <div fxLayout="row" fxLayoutGap="20px">
+  <div fxLayout="row">
     <mat-form-field fxFlex>
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
 
@@ -36,9 +38,8 @@
       <ng-container matColumnDef="viewReport">
         <th mat-header-cell *matHeaderCellDef> View Report </th>
         <td mat-cell *matCellDef="let provisioningEntry">
-          <button mat-button (click)="viewReport($event, provisioningEntry.id)" [disabled]="true" color="primary">
-            <!-- Tenant Customizable -->
-            <mat-icon>remove_red_eye</mat-icon>&nbsp;&nbsp;View
+          <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
+            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View
           </button>
         </td>
       </ng-container>
@@ -47,7 +48,7 @@
         <th mat-header-cell *matHeaderCellDef> Recreate Provisioning </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
-            <mat-icon>edit</mat-icon>&nbsp;&nbsp;Recreate
+            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Recreate
           </button>
         </td>
       </ng-container>
@@ -56,13 +57,13 @@
         <th mat-header-cell *matHeaderCellDef> View Journal Entry </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
-            <mat-icon>remove_red_eye</mat-icon>&nbsp;&nbsp;View
+            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/provisioning-entries/view', row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
     </table>
 

src/app/accounting/provisioning-entries/provisioning-entries.component.ts

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSort, MatPaginator, MatTableDataSource } from '@angular/material';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../accounting.service';
 
+/**
+ * Provisioning entries component.
+ */
 @Component({
   selector: 'mifosx-provisioning-entries',
   templateUrl: './provisioning-entries.component.html',
@@ -11,46 +16,76 @@ import { AccountingService } from '../accounting.service';
 })
 export class ProvisioningEntriesComponent implements OnInit {
 
+  /** Provisioning entry data. */
+  provisioningEntryData: any;
+  /** Columns to be displayed in provisioning entries table. */
   displayedColumns: string[] = ['createdUser', 'createdDate', 'journalEntry', 'viewReport', 'recreateProvisioning', 'viewJournalEntry'];
-  dataSource: any;
+  /** Data source for provisioning entries table. */
+  dataSource: MatTableDataSource<any>;
 
+  /** Paginator for provisioning entries table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for provisioning entries table. */
   @ViewChild(MatSort) sort: MatSort;
 
+  /**
+   * Retrieves the provisioning entries data from `resolve`.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
   constructor(private accountingService: AccountingService,
-              private router: Router) { }
-
-  ngOnInit() {
-    this.getProvisioningEntries();
-  }
-
-  getProvisioningEntries() {
-    this.accountingService.getProvisioningEntries().subscribe((provisioningEntryData: any) => {
-      this.dataSource = new MatTableDataSource(provisioningEntryData.pageItems);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { provisioningEntries: any }) => {
+      this.provisioningEntryData = data.provisioningEntries.pageItems;
     });
   }
 
+  /**
+   * Sets the provisioning entries table.
+   */
+  ngOnInit() {
+    this.setProvisioningEntries();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for provisioning entries table.
+   */
+  setProvisioningEntries() {
+    this.dataSource = new MatTableDataSource(this.provisioningEntryData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Filters data in provisioning entries table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
   applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
-  viewReport($event: any, provisioningEntryId: number) {
-    // Tenant Customizable
-    $event.stopPropagation();
-  }
-
-  recreateProvisioning($event: any, provisioningEntryId: string) {
+  /**
+   * Recreates provisioning entry.
+   * @param {Event} $event Event to stop propagation.
+   * @param {string} provisioningEntryId Provisioning entry id.
+   */
+  recreateProvisioning($event: Event, provisioningEntryId: string) {
     this.accountingService.recreateProvisioningEntries(provisioningEntryId)
       .subscribe((response: any) => {
-        this.router.navigate(['/accounting/provisioning-entries/view', response.resourceId]);
+        this.router.navigate(['view', response.resourceId], { relativeTo: this.route });
       });
     $event.stopPropagation();
   }
 
-  viewJournalEntry($event: any, provisioningEntryId: number) {
-    this.router.navigate(['/accounting/provisioning-entries/journal-entries/view', provisioningEntryId]);
+  /**
+   * View journal entries for the provisioning entry.
+   * @param {Event} $event Event to stop propagation.
+   * @param {number} provisioningEntryId Provisioning entry id.
+   */
+  viewJournalEntry($event: Event, provisioningEntryId: number) {
+    this.router.navigate(['journal-entries/view', provisioningEntryId], { relativeTo: this.route });
     $event.stopPropagation();
   }
 

src/app/accounting/provisioning-entries/provisioning-entries.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountingService } from '../accounting.service';
+
+/**
+ * Provisioning entries data resolver.
+ */
+@Injectable()
+export class ProvisioningEntriesResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the provisioning entries data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.accountingService.getProvisioningEntries();
+  }
+
+}

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry-entries.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountingService } from '../../accounting.service';
+
+/**
+ * Provisioning entry entries data resolver.
+ */
+@Injectable()
+export class ProvisioningEntryEntriesResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the provisioning entry entries data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const provisioningEntryId = route.paramMap.get('id');
+    return this.accountingService.getProvisioningEntryEntries(provisioningEntryId);
+  }
+
+}

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountingService } from '../../accounting.service';
+
+/**
+ * Provisioning entry data resolver.
+ */
+@Injectable()
+export class ProvisioningEntryResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the provisioning entry data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const provisioningEntryId = route.paramMap.get('id');
+    return this.accountingService.getProvisioningEntry(provisioningEntryId);
+  }
+
+}

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -2,7 +2,8 @@
 
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry">
-      <mat-icon>add</mat-icon>&nbsp;&nbsp;Create Journal Entries
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Journal Entries
     </button>
   </div>
 
@@ -48,15 +49,18 @@
 <div class="container m-t-20" 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="Loan Product" [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
+    <mat-label>Loan Product</mat-label>
+    <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <input matInput placeholder="Provisioning Category" [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
+    <mat-label>Provisioning Category</mat-label>
+    <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
   </mat-form-field>
 
 </div>
@@ -122,7 +126,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/provisioning-entries/view', row.id]"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
   </table>
 

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.scss

@@ -6,9 +6,9 @@ table {
   div {
     margin: 1rem 0;
     word-wrap: break-word;
-  }
 
-  .header {
-    font-weight: 500;
+    &.header {
+      font-weight: 500;
+    }
   }
 }

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -1,12 +1,18 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
 
+/** rxjs Imports */
 import { startWith, map, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * View provisioning entry component.
+ */
 @Component({
   selector: 'mifosx-view-provisioning-entry',
   templateUrl: './view-provisioning-entry.component.html',
@@ -14,41 +20,87 @@ import { AccountingService } from '../../accounting.service';
 })
 export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
 
+  /** Provisioning entry id. */
   provisioningEntryId: string;
+  /** Provisioning entry. */
   provisioningEntry: any;
-
+  /** Provisioning entry entries. */
+  provisioningEntryEntries: any;
+  /** Office name filter form control. */
+  officeName = new FormControl();
+  /** Office data. */
+  officeData: any;
+  /** Filtered office data for autocomplete. */
+  filteredOfficeData: any;
+  /** Loan product filter form control. */
+  loanProduct = new FormControl();
+  /** Loan product data. */
+  loanProductData: any;
+  /** Filtered loan product data for autocomplete. */
+  filteredLoanProductData: any;
+  /** Provisioning category filter form control. */
+  provisioningCategory = new FormControl();
+  /** Provisioning category data. */
+  provisioningCategoryData: any;
+  /** Filtered provisioning category data for autocomplete. */
+  filteredProvisioningCategoryData: any;
+  /** Columns to be displayed in provisioning entry entries table. */
   displayedColumns: string[] = ['officeName', 'productName', 'currencyCode', 'categoryName', 'amountreserved', 'liabilityAccountName', 'expenseAccountName'];
-  dataSource: any;
-  filterValue: any = { officeName: '', productName: '', categoryName: '' };
+  /** Data source for provisioning entry entries table. */
+  dataSource: MatTableDataSource<any>;
+  /** Provisioning entry entries filter. */
+  filterValue: any = {
+    officeName: '',
+    productName: '',
+    categoryName: ''
+  };
 
+  /** Paginator for provisioning entry entries table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for provisioning entry entries table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  officeName = new FormControl();
-  officeData: any;
-  filteredOfficeData: any;
-
-  loanProduct = new FormControl();
-  loanProductData: any;
-  filteredLoanProductData: any;
-
-  provisioningCategory = new FormControl();
-  provisioningCategoryData: any;
-  filteredProvisioningCategoryData: any;
-
-  constructor(private route: ActivatedRoute,
-              private router: Router,
-              private accountingService: AccountingService) { }
-
-  ngOnInit() {
-    this.provisioningEntryId = this.route.snapshot.paramMap.get('id');
-    this.getProvisioningEntry();
-    this.getProvisioningEntryEntries();
-    this.getOffices();
-    this.getLoanProducts();
-    this.getProvisioningCategories();
+  /**
+   * Retrieves the provisioning entry, provisioning entry entries, offices,
+   * loan products, provisioning categories data from `resolve`.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private accountingService: AccountingService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: {
+        provisioningEntry: any,
+        provisioningEntryEntries: any,
+        offices: any,
+        loanProducts: any,
+        provisiningCategories: any
+      }) => {
+        this.provisioningEntryId = data.provisioningEntry.id;
+        this.provisioningEntry = data.provisioningEntry;
+        this.provisioningEntryEntries = data.provisioningEntryEntries;
+        this.officeData = data.offices;
+        this.loanProductData = data.loanProducts;
+        this.provisioningCategoryData = data.provisiningCategories;
+      });
   }
 
+  /**
+   * Sets filtered offices, loan products and provisioning categories for autocomplete
+   * and provisioning entry entries table.
+   */
+  ngOnInit() {
+    this.setProvisioningEntryEntries();
+    this.setFilteredOffices();
+    this.setFilteredLoanProducts();
+    this.setFilteredProvisioningCategories();
+  }
+
+  /**
+   * Subscribes to all search filters:
+   * Office Name, Loan Product, Provisioning categories.
+   */
   ngAfterViewInit() {
     this.officeName.valueChanges
       .pipe(
@@ -84,86 +136,109 @@ export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
       .subscribe();
   }
 
+  /**
+   * Filter predicate for provisioning entry entries table data.
+   * @param {any} data Table data.
+   * @param {any} filterValue Values to filter data by.
+   */
   filterPredicate(data: any, filterValue: any) {
     return data.officeName.toLowerCase().indexOf(filterValue['officeName']) !== -1
       && data.productName.toLowerCase().indexOf(filterValue['productName']) !== -1
       && data.categoryName.toLowerCase().indexOf(filterValue['categoryName']) !== -1;
   }
 
-   applyFilter(filterValue: string, property: string) {
+  /**
+   * Initializes the data source, paginator, sorter and filter predicate for
+   * provisioning entry entries table.
+   */
+  setProvisioningEntryEntries() {
+    this.dataSource = new MatTableDataSource(this.provisioningEntryEntries.pageItems);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.dataSource.filterPredicate = this.filterPredicate;
+  }
+
+  /**
+   * Filters data in provisioning entry entries table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   * @param {string} property Property to filter data.
+   */
+  applyFilter(filterValue: string, property: string) {
     this.filterValue[property] = filterValue;
     this.dataSource.filter = this.filterValue;
   }
 
-  getProvisioningEntry() {
-    this.accountingService.getProvisioningEntry(this.provisioningEntryId)
-      .subscribe((provisioningEntry: any) => {
-        this.provisioningEntry = provisioningEntry;
-      });
+  /**
+   * 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(officeName) : this.officeData)
+    );
   }
 
-  getProvisioningEntryEntries() {
-    this.accountingService.getProvisioningEntryEntries(this.provisioningEntryId)
-      .subscribe((provisioningEntryEntries: any) => {
-        this.dataSource = new MatTableDataSource(provisioningEntryEntries.pageItems);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-        this.dataSource.filterPredicate = this.filterPredicate;
-      });
+  /**
+   * Sets filtered loan products for autocomplete.
+   */
+  setFilteredLoanProducts() {
+    this.filteredLoanProductData = this.loanProduct.valueChanges
+    .pipe(
+      startWith(''),
+      map((loanProduct: any) => typeof loanProduct === 'string' ? loanProduct : loanProduct.name),
+      map((loanProductName: string) => loanProductName ? this.filterLoanProductAutocompleteData(loanProductName) : this.loanProductData)
+    );
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-      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)
-      );
-    });
+  /**
+   * Sets filtered provisioning categories for autocomplete.
+   */
+  setFilteredProvisioningCategories() {
+    this.filteredProvisioningCategoryData = this.provisioningCategory.valueChanges
+    .pipe(
+      startWith(''),
+      map((provisioningCategory: any) => typeof provisioningCategory === 'string' ? provisioningCategory : provisioningCategory.categoryName),
+      map((provisioningCategoryName: string) => provisioningCategoryName ? this.filterProvisioningCategoryAutocompleteData(provisioningCategoryName) : this.provisioningCategoryData)
+    );
   }
 
-  getLoanProducts() {
-    this.accountingService.getLoanProducts().subscribe(loanProductData => {
-      this.loanProductData = loanProductData;
-      this.filteredLoanProductData = this.loanProduct.valueChanges
-      .pipe(
-        startWith(''),
-        map((loanProduct: any) => typeof loanProduct === 'string' ? loanProduct : loanProduct.name),
-        map((loanProductName: string) => loanProductName ? this.filterLoanProductAutocompleteData(this.loanProductData, loanProductName) : this.loanProductData)
-      );
-    });
+  /**
+   * 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()));
   }
 
-  getProvisioningCategories() {
-    this.accountingService.getProvisioningCategories().subscribe(provisioningCategoryData => {
-      this.provisioningCategoryData = provisioningCategoryData;
-      this.filteredProvisioningCategoryData = this.provisioningCategory.valueChanges
-      .pipe(
-        startWith(''),
-        map((provisioningCategory: any) => typeof provisioningCategory === 'string' ? provisioningCategory : provisioningCategory.categoryName),
-        map((provisioningCategoryName: string) => provisioningCategoryName ? this.filterProvisioningCategoryAutocompleteData(this.provisioningCategoryData, provisioningCategoryName) : this.provisioningCategoryData)
-      );
-    });
+  /**
+   * Filters loan products.
+   * @param {string} loanProductName Loan product name to filter loan products by.
+   * @returns {any} Filtered loan products.
+   */
+  private filterLoanProductAutocompleteData(loanProductName: string): any {
+    return this.loanProductData.filter((loanProduct: any) => loanProduct.name.toLowerCase().includes(loanProductName.toLocaleLowerCase()));
   }
 
-  private filterOfficeAutocompleteData(officeData: any, officeName: string): any {
-    return officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
-  }
-
-  private filterLoanProductAutocompleteData(loanProductData: any, loanProductName: string): any {
-    return loanProductData.filter((loanProduct: any) => loanProduct.name.toLowerCase().includes(loanProductName.toLocaleLowerCase()));
-  }
-
-  private filterProvisioningCategoryAutocompleteData(provisioningCategoryData: any, provisioningCategoryName: string): any {
-    return provisioningCategoryData.filter((provisioningCategory: any) => provisioningCategory.categoryName.toLowerCase().includes(provisioningCategoryName.toLocaleLowerCase()));
+  /**
+   * Filters provisioning categories.
+   * @param {string} provisioningCategoryName Provisioning category name to filter provisioning categories by.
+   * @returns {any} Filtered provisioning categories.
+   */
+  private filterProvisioningCategoryAutocompleteData(provisioningCategoryName: string): any {
+    return this.provisioningCategoryData.filter((provisioningCategory: any) => provisioningCategory.categoryName.toLowerCase().includes(provisioningCategoryName.toLocaleLowerCase()));
   }
 
+  /**
+   * Creates provisioning journal entries
+   * and redirects to created entries.
+   */
   createProvisioningJournalEntries() {
     this.accountingService.createProvisioningJournalEntries(this.provisioningEntryId)
       .subscribe((response: any) => {
-        this.router.navigate(['/accounting/provisioning-entries/journal-entries/view', response.resourceId]);
+        this.router.navigate(['../../journal-entries/view', response.resourceId], { relativeTo: this.route });
       });
   }
 

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/provisioning-journal-entries.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountingService } from '../../accounting.service';
+
+/**
+ * Provisioning journal entries data resolver.
+ */
+@Injectable()
+export class ProvisioningJournalEntriesResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the provisioning journal entries data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const id = route.paramMap.get('id');
+    return this.accountingService.getProvisioningJournalEntries(id);
+  }
+
+}

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html

@@ -2,7 +2,8 @@
 
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
 

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.ts

@@ -1,9 +1,11 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
 
-import { AccountingService } from '../../accounting.service';
-
+/**
+ * View provisioning journal entries component.
+ */
 @Component({
   selector: 'mifosx-view-provisioning-journal-entries',
   templateUrl: './view-provisioning-journal-entries.component.html',
@@ -11,39 +13,56 @@ import { AccountingService } from '../../accounting.service';
 })
 export class ViewProvisioningJournalEntriesComponent implements OnInit {
 
-  provisioningEntryId: string;
-
+  /** Provisioning journal entry data. */
+  provisioningJournalEntryData: any;
+  /** Columns to be displayed in provisioning journal entries table. */
   displayedColumns: string[] = ['id', 'officeName', 'transactionDate', 'transactionId', 'glAccountType', 'createdByUserName', 'glAccountCode', 'glAccountName', 'debit', 'credit'];
-  dataSource: any;
+  /** Data source for provisioning journal entries table. */
+  dataSource: MatTableDataSource<any>;
 
+  /** Paginator for provisioning journal entries table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for provisioning journal entries table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private route: ActivatedRoute,
-              private accountingService: AccountingService) { }
+  /**
+   * Retrieves the provisioning journal entries data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { provisioningJournalEntry: any }) => {
+      this.provisioningJournalEntryData = data.provisioningJournalEntry.pageItems;
+    });
+  }
 
+  /**
+   * Sets the provisioning journal entries table.
+   */
   ngOnInit() {
-    this.provisioningEntryId = this.route.snapshot.paramMap.get('id');
-    this.getProvisioningJournalEntry();
+    this.setProvisioningJournalEntry();
   }
 
-  getProvisioningJournalEntry() {
-    this.accountingService.getProvisioningJournalEntries(this.provisioningEntryId)
-      .subscribe((provisioningJournalEntryData: any) => {
-        this.dataSource = new MatTableDataSource(provisioningJournalEntryData.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;
-      });
+  /**
+   * Initializes the data source, paginator and sorter for provisioning journal entries table.
+   */
+  setProvisioningJournalEntry() {
+    this.dataSource = new MatTableDataSource(this.provisioningJournalEntryData);
+    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;
   }
 
+  /**
+   * Filters data in provisioning journal entries table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
   applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }