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/view-closure/view-closure.component.html

@@ -1,13 +1,15 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/closing-entries/view', accountingClosure?.id, '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)="deleteAccountingClosure()">
-    <mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
   </button>
 </div>
 
-<div class="container" *ngIf="accountingClosure">
+<div class="container" *ngIf="glAccountClosure">
 
   <mat-card>
 
@@ -20,7 +22,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.officeName }}
+          {{ glAccountClosure.officeName }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -28,7 +30,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.closingDate }}
+          {{ glAccountClosure.closingDate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -36,7 +38,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.createdByUsername }}
+          {{ glAccountClosure.createdByUsername }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -44,7 +46,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.lastUpdatedByUsername }}
+          {{ glAccountClosure.lastUpdatedByUsername }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -52,7 +54,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.lastUpdatedDate }}
+          {{ glAccountClosure.lastUpdatedDate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -60,7 +62,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.createdDate }}
+          {{ glAccountClosure.createdDate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -68,7 +70,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.comments }}
+          {{ glAccountClosure.comments }}
         </div>
 
       </div>

src/app/accounting/closing-entries/view-closure/view-closure.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/closing-entries/view-closure/view-closure.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 closure component.
+ */
 @Component({
   selector: 'mifosx-view-closure',
   templateUrl: './view-closure.component.html',
@@ -12,33 +19,38 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 })
 export class ViewClosureComponent implements OnInit {
 
-  accountingClosureId: number;
-  accountingClosure: any;
+  /** GL Account closure. */
+  glAccountClosure: any;
 
+  /**
+   * Retrieves the gl account closure 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,
-              public dialog: MatDialog) { }
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { glAccountClosure: any }) => {
+      this.glAccountClosure = data.glAccountClosure;
+    });
+  }
 
   ngOnInit() {
-    this.accountingClosureId = Number(this.route.snapshot.paramMap.get('id'));
-    this.getAccountingClosure();
-  }
-
-  getAccountingClosure() {
-    this.accountingService.getAccountingClosure(this.accountingClosureId)
-      .subscribe((accountingClosure: any) => {
-        this.accountingClosure = accountingClosure;
-      });
   }
 
+  /**
+   * Deletes the gl account closure and redirects to closing entries.
+   */
   deleteAccountingClosure() {
     const deleteAccountingClosureDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `accounting closure ${this.accountingClosureId}` }
+      data: { deleteContext: `accounting closure ${this.glAccountClosure.id}` }
     });
     deleteAccountingClosureDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
-        this.accountingService.deleteAccountingClosure(this.accountingClosureId)
+        this.accountingService.deleteAccountingClosure(this.glAccountClosure.id)
           .subscribe(() => {
             this.router.navigate(['/accounting/closing-entries']);
           });