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/create-gl-account/chart-of-accounts-template.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';
+
+/**
+ * Chart of accounts template data resolver.
+ */
+@Injectable()
+export class ChartOfAccountsTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the chart of accounts template data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.accountingService.getChartOfAccountsTemplate();
+  }
+
+}

src/app/accounting/chart-of-accounts/create-gl-account/create-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>
@@ -64,7 +83,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="[cancelRoute]">Cancel</button>
-        <button mat-raised-button color="primary">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,7 +1,7 @@
-.manualEntriesAllowedWrapper {
+.manual-entries-allowed-wrapper {
   position: relative;
 
-  .manualEntriesAllowed {
+  .manual-entries-allowed {
     padding: 0 0 17.5px 0;
     position: absolute;
     bottom: 0;

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

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Create gl account component.
+ */
 @Component({
   selector: 'mifosx-create-gl-account',
   templateUrl: './create-gl-account.component.html',
@@ -11,18 +16,32 @@ import { AccountingService } from '../../accounting.service';
 })
 export class CreateGlAccountComponent implements OnInit {
 
+  /** GL account form. */
   glAccountForm: FormGroup;
+  /** Chart of accounts data. */
   chartOfAccountsData: any;
+  /** Account type data. */
   accountTypeData: any;
-  parentData: any;
+  /** Account usage data. */
   accountUsageData: any;
+  /** Parent data. */
+  parentData: any;
+  /** Tag data. */
   tagData: any;
-
+  /** Account type id. (for creation of sub-ledger account) */
   accountTypeId: number;
+  /** Parent id. (for creation of sub-ledger account) */
   parentId: number;
+  /** Cancel route. (depending on creation of gl account or sub-ledger account) */
+  cancelRoute = '../../';
 
-  cancelRoute = '/accounting/chart-of-accounts';
-
+  /**
+   * 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,
@@ -31,39 +50,44 @@ export class CreateGlAccountComponent implements OnInit {
       this.accountTypeId = Number(params.get('accountType'));
       this.parentId = Number(params.get('parent'));
       if (this.parentId) {
-        this.cancelRoute = `/accounting/chart-of-accounts/gl-accounts/view/${this.parentId}`;
+        this.cancelRoute = `../view/${this.parentId}`;
       }
     });
+
+    this.route.data.subscribe((data: { chartOfAccountsTemplate: any }) => {
+      this.chartOfAccountsData = data.chartOfAccountsTemplate;
+      this.accountTypeData = data.chartOfAccountsTemplate.accountTypeOptions;
+      this.accountUsageData = data.chartOfAccountsTemplate.usageOptions;
+    });
   }
 
+  /**
+   * Creates and sets gl account form.
+   */
   ngOnInit() {
     this.createGlAccountForm();
-    this.getChartOfAccountsTemplate();
     this.setGLAccountForm();
   }
 
+  /**
+   * Creates gl account form.
+   */
   createGlAccountForm() {
     this.glAccountForm = this.formBuilder.group({
       'type': ['', Validators.required],
       'name': ['', Validators.required],
       'usage': ['', Validators.required],
       'glCode': ['', Validators.required],
-      'parentId': [this.parentId],
+      'parentId': [this.parentId || undefined],
       'tagId': [''],
       'manualEntriesAllowed': [true, Validators.required],
       'description': ['']
     });
   }
 
-  getChartOfAccountsTemplate() {
-    this.accountingService.getChartOfAccountsTemplate().subscribe((chartOfAccountsData: any) => {
-      this.chartOfAccountsData = chartOfAccountsData;
-      this.accountTypeData = chartOfAccountsData.accountTypeOptions;
-      this.accountUsageData = chartOfAccountsData.usageOptions;
-      this.glAccountForm.get('type').setValue(this.accountTypeId);
-    });
-  }
-
+  /**
+   * Sets gl account form for selected account type.
+   */
   setGLAccountForm() {
     this.glAccountForm.get('type').valueChanges.subscribe(accountTypeId => {
       switch (accountTypeId) {
@@ -84,11 +108,17 @@ export class CreateGlAccountComponent implements OnInit {
         break;
       }
     });
+
+    this.glAccountForm.get('type').setValue(this.accountTypeId);
   }
 
+  /**
+   * Submits the gl account form and creates gl account,
+   * if successful redirects to view created account.
+   */
   submit() {
     this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
-      this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/view', response.resourceId]);
+      this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
     });
   }