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/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -9,31 +9,48 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-select placeholder="Account Type" required formControlName="type">
+            <mat-label>Account Type</mat-label>
+            <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
+              Account Type is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <input matInput placeholder="Account Name" required formControlName="name">
+            <mat-label>Account Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
+              Account Name is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-select placeholder="Account Usage" required formControlName="usage">
+            <mat-label>Account Usage</mat-label>
+            <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
+              Account Usage is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <input matInput placeholder="GL Code" required formControlName="glCode">
+            <mat-label>GL Code</mat-label>
+            <input matInput required formControlName="glCode">
+            <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
+              GL Code is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-select placeholder="Parent" formControlName="parentId">
+            <mat-label>Parent</mat-label>
+            <mat-select formControlName="parentId">
               <mat-option *ngFor="let parent of parentData" [value]="parent.id">
                 {{ parent.name }}
               </mat-option>
@@ -41,21 +58,23 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="28%">
-            <mat-select placeholder="Tag" formControlName="tagId">
+            <mat-label>Tag</mat-label>
+            <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="18%" class="manualEntriesAllowedWrapper">
-            <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manualEntriesAllowed">
+          <div fxFlex="18%" class="manual-entries-allowed-wrapper">
+            <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
               Manual Entries Allowed
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <textarea matInput placeholder="Description" formControlName="description"></textarea>
+            <mat-label>Description</mat-label>
+            <textarea matInput formControlName="description"></textarea>
           </mat-form-field>
 
         </div>
@@ -63,8 +82,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/chart-of-accounts']">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]="glAccountForm.pristine">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.scss

@@ -0,0 +1,10 @@
+.manual-entries-allowed-wrapper {
+  position: relative;
+
+  .manual-entries-allowed {
+    padding: 0 0 17.5px 0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.ts

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Edit gl account component.
+ */
 @Component({
   selector: 'mifosx-edit-gl-account',
   templateUrl: './edit-gl-account.component.html',
@@ -11,27 +16,46 @@ import { AccountingService } from '../../accounting.service';
 })
 export class EditGlAccountComponent implements OnInit {
 
+  /** GL account form. */
   glAccountForm: FormGroup;
+  /** GL account and chart of accounts data. */
   glAccount: any;
+  /** Account type data. */
   accountTypeData: any;
+  /** Account usage data. */
   accountUsageData: any;
+  /** Parent data. */
   parentData: any;
+  /** Tag data. */
   tagData: any;
 
-  constructor(private route: ActivatedRoute,
-              private formBuilder: FormBuilder,
+  /**
+   * Retrieves the chart of accounts 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 route: ActivatedRoute,
               private router: Router) {
-    this.route.data.subscribe((data: { glAccount: any }) => {
-      this.glAccount = data.glAccount;
+    this.route.data.subscribe((data: { glAccountAndChartOfAccountsTemplate: any }) => {
+      this.glAccount = data.glAccountAndChartOfAccountsTemplate;
     });
   }
 
+  /**
+   * Creates and sets gl account form.
+   */
   ngOnInit() {
     this.createGlAccountForm();
     this.setGLAccountForm();
   }
 
+  /**
+   * Creates gl account form.
+   */
   createGlAccountForm() {
     this.glAccountForm = this.formBuilder.group({
       'type': ['', Validators.required],
@@ -45,6 +69,9 @@ export class EditGlAccountComponent implements OnInit {
     });
   }
 
+  /**
+   * Sets gl account form for selected account type.
+   */
   setGLAccountForm() {
     this.accountTypeData = this.glAccount.accountTypeOptions;
     this.accountUsageData = this.glAccount.usageOptions;
@@ -67,13 +94,18 @@ export class EditGlAccountComponent implements OnInit {
         break;
       }
     });
+
     this.glAccountForm.get('type').setValue(this.glAccount.type.id);
   }
 
+  /**
+   * Submits the gl account form and updates gl account,
+   * if successful redirects to view updated account.
+   */
   submit() {
     this.accountingService.updateGlAccount(this.glAccount.id, this.glAccountForm.value)
       .subscribe((response: any) => {
-        this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/view', response.resourceId]);
+        this.router.navigate(['../../', response.resourceId], { relativeTo: this.route });
       });
   }