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/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -1,7 +1,7 @@
 <div class="container">
 
   <mat-card>
-    
+
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -9,19 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-select placeholder="Financial Activity" required formControlName="financialActivityId">
+            <mat-label>Financial Activity</mat-label>
+            <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
                 {{ financialActivity.name }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
+              Financial Activity is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-select placeholder="Account" required formControlName="glAccountId">
+            <mat-label>Account</mat-label>
+            <mat-select required formControlName="glAccountId">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="financialActivityMappingForm.controls.glAccountId.hasError('required')">
+              Account is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
         </div>
@@ -29,8 +37,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/financial-activity-mappings']">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]="!financialActivityMappingForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.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 financial activity mapping component.
+ */
 @Component({
   selector: 'mifosx-create-financial-activity-mapping',
   templateUrl: './create-financial-activity-mapping.component.html',
@@ -11,56 +16,79 @@ import { AccountingService } from '../../accounting.service';
 })
 export class CreateFinancialActivityMappingComponent implements OnInit {
 
+  /** Financial activity mapping form. */
   financialActivityMappingForm: FormGroup;
+  /** GL Account options. */
   glAccountOptions: any;
+  /** GL Account data. */
   glAccountData: any;
+  /** Financial activity data. */
   financialActivityData: any;
 
-  constructor(private formBuider: FormBuilder,
+  /**
+   * Retrieves the gl account options and financial activity 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.createFinancialActivityMappingForm();
-    this.getFinancialActivityAccountsTemplate();
-    this.setGLAccountData();
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { financialActivityAccountsTemplate: any }) => {
+      this.glAccountOptions = data.financialActivityAccountsTemplate.glAccountOptions;
+      this.financialActivityData = data.financialActivityAccountsTemplate.financialActivityOptions;
+    });
   }
 
+  /**
+   * Creates the financial activity mapping form and sets the gl account data.
+   */
+  ngOnInit() {
+    this.createFinancialActivityMappingForm();
+    this.setGlAccountData();
+  }
+
+  /**
+   * Creates the financial activity mapping form.
+   */
   createFinancialActivityMappingForm() {
-    this.financialActivityMappingForm = this.formBuider.group({
+    this.financialActivityMappingForm = this.formBuilder.group({
       'financialActivityId': ['', Validators.required],
       'glAccountId': ['', Validators.required]
     });
   }
 
-  getFinancialActivityAccountsTemplate() {
-    this.accountingService.getFinancialActivityAccountsTemplate().subscribe((financialActivityAccountData: any) => {
-      this.glAccountOptions = financialActivityAccountData.glAccountOptions;
-      this.financialActivityData = financialActivityAccountData.financialActivityOptions;
-    });
-  }
-
-  setGLAccountData() {
-    this.financialActivityMappingForm.get('financialActivityId').valueChanges.subscribe(financialActivityId => {
-      switch (financialActivityId) {
-        case 100:
-        case 101:
-        case 102:
-        case 103: this.glAccountData = this.glAccountOptions.assetAccountOptions;
-        break;
-        case 200:
-        case 201: this.glAccountData = this.glAccountOptions.liabilityAccountOptions;
-        break;
-        case 300: this.glAccountData = this.glAccountOptions.equityAccountOptions;
-        break;
-      }
-    });
+  /**
+   * Sets the gl account data on the basis of selected financial activity.
+   */
+  setGlAccountData() {
+    this.financialActivityMappingForm.get('financialActivityId').valueChanges
+      .subscribe(financialActivityId => {
+        switch (financialActivityId) {
+          case 100:
+          case 101:
+          case 102:
+          case 103: this.glAccountData = this.glAccountOptions.assetAccountOptions;
+          break;
+          case 200:
+          case 201: this.glAccountData = this.glAccountOptions.liabilityAccountOptions;
+          break;
+          case 300: this.glAccountData = this.glAccountOptions.equityAccountOptions;
+          break;
+        }
+      });
   }
 
+  /**
+   * Submits the financial activity mapping form and creates financial activity account,
+   * if successful redirects to view created account.
+   */
   submit() {
     this.accountingService.createFinancialActivityAccount(this.financialActivityMappingForm.value)
       .subscribe((response: any) => {
-        this.router.navigate(['/accounting/financial-activity-mappings/view', response.resourceId]);
+        this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
     });
   }
 

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/financial-activity-mappings-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';
+
+/**
+ * Financial activity mappings template data resolver.
+ */
+@Injectable()
+export class FinancialActivityMappingsTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the financial activity mappings template data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.accountingService.getFinancialActivityAccountsTemplate();
+  }
+
+}

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

@@ -9,7 +9,8 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-select placeholder="Financial Activity" required formControlName="financialActivityId">
+            <mat-label>Financial Activity</mat-label>
+            <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
                 {{ financialActivity.name }}
               </mat-option>
@@ -17,7 +18,8 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-select placeholder="Account" required formControlName="glAccountId">
+            <mat-label>Account</mat-label>
+            <mat-select required formControlName="glAccountId">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
               </mat-option>
@@ -29,8 +31,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/financial-activity-mappings/view', financialActivityAccountId]">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]="financialActivityMappingForm.pristine">Submit</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Edit financial activity mapping component.
+ */
 @Component({
   selector: 'mifosx-edit-financial-activity-mapping',
   templateUrl: './edit-financial-activity-mapping.component.html',
@@ -11,24 +16,54 @@ import { AccountingService } from '../../accounting.service';
 })
 export class EditFinancialActivityMappingComponent implements OnInit {
 
+  /** Financial activity mapping form. */
   financialActivityMappingForm: FormGroup;
+  /** GL Account options. */
   glAccountOptions: any;
+  /** GL Account data. */
   glAccountData: any;
-  financialActivityAccountId: any;
+  /** Financial activity data. */
   financialActivityData: any;
+  /** Financial activity account ID. */
+  financialActivityAccountId: string;
+  /** Financial activity ID. */
+  financialActivityId: number;
+  /** GL Account ID. */
+  glAccountId: number;
 
-  constructor(private route: ActivatedRoute,
-              private formBuider: FormBuilder,
+  /**
+   * Retrieves the gl account options, financial activity and financial activity account 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 formBuider: FormBuilder,
               private accountingService: AccountingService,
-              private router: Router) { }
-
-  ngOnInit() {
-    this.financialActivityAccountId = this.route.snapshot.paramMap.get('id');
-    this.createFinancialActivityMappingForm();
-    this.setGLAccountData();
-    this.getFinancialActivityAccount();
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { financialActivityAccountAndTemplate: any }) => {
+      this.financialActivityAccountId = data.financialActivityAccountAndTemplate.id;
+      this.financialActivityId = data.financialActivityAccountAndTemplate.financialActivityData.id;
+      this.glAccountId = data.financialActivityAccountAndTemplate.glAccountData.id;
+      this.glAccountOptions = data.financialActivityAccountAndTemplate.glAccountOptions;
+      this.financialActivityData = data.financialActivityAccountAndTemplate.financialActivityOptions;
+    });
   }
 
+  /**
+   * Creates and sets the financial activity mapping form and sets the gl account data.
+   */
+  ngOnInit() {
+    this.createFinancialActivityMappingForm();
+    this.setGLAccountData();
+    this.financialActivityMappingForm.get('financialActivityId').setValue(this.financialActivityId);
+    this.financialActivityMappingForm.get('glAccountId').setValue(this.glAccountId);
+  }
+
+  /**
+   * Creates the financial activity mapping form.
+   */
   createFinancialActivityMappingForm() {
     this.financialActivityMappingForm = this.formBuider.group({
       'financialActivityId': ['', Validators.required],
@@ -36,37 +71,35 @@ export class EditFinancialActivityMappingComponent implements OnInit {
     });
   }
 
-  getFinancialActivityAccount() {
-    this.accountingService.getFinancialActivityAccount(this.financialActivityAccountId, true)
-      .subscribe((financialActivityAccountData: any) => {
-        this.glAccountOptions = financialActivityAccountData.glAccountOptions;
-        this.financialActivityData = financialActivityAccountData.financialActivityOptions;
-        this.financialActivityMappingForm.get('financialActivityId').setValue(financialActivityAccountData.financialActivityData.id);
-        this.financialActivityMappingForm.get('glAccountId').setValue(financialActivityAccountData.glAccountData.id);
+  /**
+   * Sets the gl account data on the basis of selected financial activity.
+   */
+  setGLAccountData() {
+    this.financialActivityMappingForm.get('financialActivityId').valueChanges
+      .subscribe(financialActivityId => {
+        switch (financialActivityId) {
+          case 100:
+          case 101:
+          case 102:
+          case 103: this.glAccountData = this.glAccountOptions.assetAccountOptions;
+          break;
+          case 200:
+          case 201: this.glAccountData = this.glAccountOptions.liabilityAccountOptions;
+          break;
+          case 300: this.glAccountData = this.glAccountOptions.equityAccountOptions;
+          break;
+        }
       });
   }
 
-  setGLAccountData() {
-    this.financialActivityMappingForm.get('financialActivityId').valueChanges.subscribe(financialActivityId => {
-      switch (financialActivityId) {
-        case 100:
-        case 101:
-        case 102:
-        case 103: this.glAccountData = this.glAccountOptions.assetAccountOptions;
-        break;
-        case 200:
-        case 201: this.glAccountData = this.glAccountOptions.liabilityAccountOptions;
-        break;
-        case 300: this.glAccountData = this.glAccountOptions.equityAccountOptions;
-        break;
-      }
-    });
-  }
-
+  /**
+   * Submits the financial activity mapping form and updates financial activity account,
+   * if successful redirects to view updated account.
+   */
   submit() {
     this.accountingService.updateFinancialActivityAccount(this.financialActivityAccountId, this.financialActivityMappingForm.value)
       .subscribe((response: any) => {
-        this.router.navigate(['/accounting/financial-activity-mappings/view', response.resourceId]);
+        this.router.navigate(['../../', response.resourceId], { relativeTo: this.route });
     });
   }
 

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

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

@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/financial-activity-mappings/create']">
-    <mat-icon>add</mat-icon>&nbsp;&nbsp;Define New Mapping
+  <button mat-raised-button color="primary" [routerLink]="['create']">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Define New Mapping
   </button>
 </div>
 
@@ -24,7 +24,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/financial-activity-mappings/view', row.id]"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
 
   </table>
 

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

@@ -1,3 +1,7 @@
 table {
   width: 100%;
+
+  .select-row:hover {
+    cursor: pointer;
+  }
 }

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

@@ -1,8 +1,11 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
 
-import { AccountingService } from '../accounting.service';
-
+/**
+ * Financial activity mappings component.
+ */
 @Component({
   selector: 'mifosx-financial-activity-mappings',
   templateUrl: './financial-activity-mappings.component.html',
@@ -10,32 +13,50 @@ import { AccountingService } from '../accounting.service';
 })
 export class FinancialActivityMappingsComponent implements OnInit {
 
+  /** Financial activity account data. */
+  financialActivityAccountData: any;
+  /** Columns to be displayed in financial activity mappings table. */
   displayedColumns: string[] = ['financialActivity', 'glAccountName', 'glAccountCode'];
-  dataSource: any;
+  /** Data source for financial activity mappings table. */
+  dataSource: MatTableDataSource<any>;
 
+  /** Paginator for financial activity mappings table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for financial activity mappings table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private accountingService: AccountingService) { }
-
-  ngOnInit() {
-    this.getFinancialActivityAccounts();
-  }
-
-  getFinancialActivityAccounts() {
-    this.accountingService.getFinancialActivityAccounts().subscribe((financialActivityAccounts: any) => {
-      this.dataSource = new MatTableDataSource(financialActivityAccounts);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sortingDataAccessor = (financialActivityAccount: any, property: any) => {
-        switch (property) {
-          case 'financialActivity': return financialActivityAccount.financialActivityData.name;
-          case 'glAccountName': return financialActivityAccount.glAccountData.name;
-          case 'glAccountCode': return financialActivityAccount.glAccountData.glCode;
-          default: return financialActivityAccount[property];
-        }
-      };
-      this.dataSource.sort = this.sort;
+  /**
+   * Retrieves the financial activity accounts data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { financialActivityAccounts: any }) => {
+      this.financialActivityAccountData = data.financialActivityAccounts;
     });
   }
 
+  /**
+   * Sets the financial activity mappings table.
+   */
+  ngOnInit() {
+    this.setFinancialActivityAccounts();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for financial activity mappings table.
+   */
+  setFinancialActivityAccounts() {
+    this.dataSource = new MatTableDataSource(this.financialActivityAccountData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sortingDataAccessor = (financialActivityAccount: any, property: any) => {
+      switch (property) {
+        case 'financialActivity': return financialActivityAccount.financialActivityData.name;
+        case 'glAccountName': return financialActivityAccount.glAccountData.name;
+        case 'glAccountCode': return financialActivityAccount.glAccountData.glCode;
+        default: return financialActivityAccount[property];
+      }
+    };
+    this.dataSource.sort = this.sort;
+  }
+
 }

src/app/accounting/financial-activity-mappings/financial-activity-mappings.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';
+
+/**
+ * Financial activity mappings data resolver.
+ */
+@Injectable()
+export class FinancialActivityMappingsResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the financial activity mappings data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.accountingService.getFinancialActivityAccounts();
+  }
+
+}

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}` }