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/financial-activity-mappings/view-financial-activity-mapping/financial-activity-mapping.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';
+
+/**
+ * Financial activity mapping data resolver.
+ */
+@Injectable()
+export class FinancialActivityMappingResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the financial activity mapping data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const financialActivityAccountId = route.paramMap.get('id');
+    return this.accountingService.getFinancialActivityAccount(financialActivityAccountId, false);
+  }
+
+}

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -1,9 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/financial-activity-mappings/view', financialActivityAccountId, 'edit']">
-    <mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteFinancialActivityAccount()">
-    <mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
   </button>
 </div>
 
@@ -20,7 +22,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ financialActivityAccountData?.financialActivityData.name }}
+          {{ financialActivityAccount?.financialActivityData.name }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -28,7 +30,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ financialActivityAccountData?.glAccountData.name }}
+          {{ financialActivityAccount?.glAccountData.name }}
         </div>
 
       </div>

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.scss

@@ -1,14 +1,14 @@
 .container {
   max-width: 37rem;
-}
 
-.content {
-  div {
-    margin: 1rem 0;
-    word-wrap: break-word;
-  }
+  .content {
+    div {
+      margin: 1rem 0;
+      word-wrap: break-word;
 
-  .header {
-    font-weight: 500;
+      &.header {
+        font-weight: 500;
+      }
+    }
   }
 }

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.ts

@@ -1,10 +1,17 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
+
+/** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
 
+/**
+ * View financial activity mapping component.
+ */
 @Component({
   selector: 'mifosx-view-financial-activity-mapping',
   templateUrl: './view-financial-activity-mapping.component.html',
@@ -12,26 +19,34 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 })
 export class ViewFinancialActivityMappingComponent implements OnInit {
 
+  /** Financial activity account ID. */
   financialActivityAccountId: any;
-  financialActivityAccountData: any;
+  /** Financial activity account data. */
+  financialActivityAccount: any;
 
-  constructor(private route: ActivatedRoute,
+  /**
+   * Retrieves the financial activity account data from `resolve`.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private accountingService: AccountingService,
+              private route: ActivatedRoute,
               private router: Router,
-              private accountingService: AccountingService,
-              public dialog: MatDialog) { }
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { financialActivityAccount: any }) => {
+      this.financialActivityAccount = data.financialActivityAccount;
+      this.financialActivityAccountId = data.financialActivityAccount.id;
+    });
+  }
 
   ngOnInit() {
-    this.financialActivityAccountId = this.route.snapshot.paramMap.get('id');
-    this.getFinancialActivityAccount();
-  }
-
-  getFinancialActivityAccount() {
-    this.accountingService.getFinancialActivityAccount(this.financialActivityAccountId, false)
-      .subscribe((financialActivityAccountData: any) => {
-        this.financialActivityAccountData = financialActivityAccountData;
-      });
   }
 
+  /**
+   * Deletes the financial activity account and redirects to financial activity mappings.
+   */
   deleteFinancialActivityAccount() {
     const deleteFinancialActivityAccountDialogRef = this.dialog.open(DeleteDialogComponent, {
       data: { deleteContext: `financial activity mapping ${this.financialActivityAccountId}` }