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/periodic-accruals/periodic-accruals.component.html

@@ -9,9 +9,13 @@
         <div fxLayout="row">
 
           <mat-form-field fxFlex>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" placeholder="Accrue Till Date" required formControlName="tillDate">
+            <mat-label>Accrue Till Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
+            <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
+              Accrue Date is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
         </div>
@@ -19,8 +23,11 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting']">Cancel</button>
-        <button mat-raised-button color="primary"><mat-icon>play_arrow</mat-icon>&nbsp;&nbsp;Run Periodic Accruals</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid">
+          <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+          Run Periodic Accruals
+        </button>
       </mat-card-actions>
 
     </form>

src/app/accounting/periodic-accruals/periodic-accruals.component.ts

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../accounting.service';
 
+/**
+ * Periodic accruals component.
+ */
 @Component({
   selector: 'mifosx-periodic-accruals',
   templateUrl: './periodic-accruals.component.html',
@@ -11,32 +16,63 @@ import { AccountingService } from '../accounting.service';
 })
 export class PeriodicAccrualsComponent implements OnInit {
 
+  /** Minimum accrue date allowed. */
   minDate = new Date(2000, 0, 1);
+  /** Maximum accrue date allowed. */
   maxDate = new Date();
+  /** Periodic accruals form. */
   periodicAccrualsForm: 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 route: ActivatedRoute,
               private router: Router) { }
 
+  /**
+   * Creates periodic accruals form.
+   */
   ngOnInit() {
     this.createPeriodicAccrualsForm();
   }
 
+  /**
+   * Creates periodic accruals form.
+   */
   createPeriodicAccrualsForm() {
     this.periodicAccrualsForm = this.formBuilder.group({
       'tillDate': ['', Validators.required]
     });
   }
 
+  /**
+   * Submits the periodic accruals form and executes periodic accruals,
+   * if successful redirects to accounting.
+   */
   submit() {
     const periodicAccruals = this.periodicAccrualsForm.value;
     // TODO: Update once language and date settings are setup
     periodicAccruals.locale = 'en';
-    periodicAccruals.dateFormat = 'dd MMMM yyyy';
-    periodicAccruals.tillDate = '06 August 2018';
-    this.accountingService.executePeriodicAccruals(periodicAccruals).subscribe(response => {
-      this.router.navigate(['/accounting']);
+    periodicAccruals.dateFormat = 'yyyy-MM-dd';
+    if (periodicAccruals.tillDate instanceof Date) {
+      let day = periodicAccruals.tillDate.getDate();
+      let month = periodicAccruals.tillDate.getMonth() + 1;
+      const year = periodicAccruals.tillDate.getFullYear();
+      if (day < 10) {
+        day = `0${day}`;
+      }
+      if (month < 10) {
+        month = `0${month}`;
+      }
+      periodicAccruals.tillDate = `${year}-${month}-${day}`;
+    }
+    this.accountingService.executePeriodicAccruals(periodicAccruals).subscribe(() => {
+      this.router.navigate(['../'], { relativeTo: this.route });
     });
   }