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/closing-entries/create-closure/create-closure.component.html

@@ -9,21 +9,30 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-select placeholder="Office" required formControlName="officeId">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" placeholder="Closing Date" required formControlName="closingDate">
+            <mat-label>Closing Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
+            <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
+              Closing Date is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <textarea matInput placeholder="Comments" formControlName="comments"></textarea>
+            <mat-label>Comments</mat-label>
+            <textarea matInput formControlName="comments"></textarea>
           </mat-form-field>
 
         </div>
@@ -31,8 +40,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/closing-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]="!accountingClosureForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/closing-entries/create-closure/create-closure.component.ts

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Create closure component.
+ */
 @Component({
   selector: 'mifosx-create-closure',
   templateUrl: './create-closure.component.html',
@@ -11,22 +16,41 @@ import { AccountingService } from '../../accounting.service';
 })
 export class CreateClosureComponent implements OnInit {
 
-  // TODO: Validations, Hints
-
+  /** Minimum closing date allowed. */
   minDate = new Date(2000, 0, 1);
+  /** Maximum closing date allowed. */
   maxDate = new Date();
+  /** Accounting closure form. */
   accountingClosureForm: FormGroup;
+  /** Office data. */
   officeData: any;
 
+  /**
+   * Retrieves the offices data from `resolve`.
+   * @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 router: Router) { }
-
-  ngOnInit() {
-    this.createAccountingClosureForm();
-    this.getOffices();
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { offices: any }) => {
+      this.officeData = data.offices;
+    });
   }
 
+  /**
+   * Creates the accounting closure form.
+   */
+  ngOnInit() {
+    this.createAccountingClosureForm();
+  }
+
+  /**
+   * Creates the accounting closure form.
+   */
   createAccountingClosureForm() {
     this.accountingClosureForm = this.formBuilder.group({
       'officeId': ['', Validators.required],
@@ -35,20 +59,29 @@ export class CreateClosureComponent implements OnInit {
     });
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-    });
-  }
-
+  /**
+   * Submits the accounting closure form and creates accounting closure,
+   * if successful redirects to view created closure.
+   */
   submit() {
     const accountingClosure = this.accountingClosureForm.value;
     // TODO: Update once language and date settings are setup
     accountingClosure.locale = 'en';
-    accountingClosure.dateFormat = 'dd MMMM yyyy';
-    accountingClosure.closingDate = '4 August 2018';
+    accountingClosure.dateFormat = 'yyyy-MM-dd';
+    if (accountingClosure.closingDate instanceof Date) {
+      let day = accountingClosure.closingDate.getDate();
+      let month = accountingClosure.closingDate.getMonth() + 1;
+      const year = accountingClosure.closingDate.getFullYear();
+      if (day < 10) {
+        day = `0${day}`;
+      }
+      if (month < 10) {
+        month = `0${month}`;
+      }
+      accountingClosure.closingDate = `${year}-${month}-${day}`;
+    }
     this.accountingService.createAccountingClosure(accountingClosure).subscribe((response: any) => {
-      this.router.navigate(['/accounting/closing-entries/view', response.resourceId]);
+      this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
     });
   }