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/accounting-rules/accounting-rule.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';
+
+/**
+ * Accounting rule data resolver.
+ */
+@Injectable()
+export class AccountingRuleResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the accounting rule data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const id = route.paramMap.get('id');
+    return this.accountingService.getAccountingRule(id);
+  }
+
+}

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

src/app/accounting/accounting-rules/accounting-rules.component.html

@@ -1,14 +1,16 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/accounting-rules/create']">
-    <mat-icon>add</mat-icon>&nbsp;&nbsp;Add Rule
+  <button mat-raised-button color="primary" [routerLink]="['create']">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    Add Rule
   </button>
 </div>
 
 <div class="container">
 
-  <div fxLayout="row" fxLayoutGap="20px">
+  <div fxLayout="row">
     <mat-form-field fxFlex>
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
 
@@ -47,7 +49,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/accounting-rules/view', row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
 
     </table>
 

src/app/accounting/accounting-rules/accounting-rules.component.scss

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

src/app/accounting/accounting-rules/accounting-rules.component.ts

@@ -1,7 +1,11 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
-import { AccountingService } from '../accounting.service';
+import { ActivatedRoute } from '@angular/router';
 
+/**
+ * Accounting rules component.
+ */
 @Component({
   selector: 'mifosx-accounting-rules',
   templateUrl: './accounting-rules.component.html',
@@ -9,37 +13,59 @@ import { AccountingService } from '../accounting.service';
 })
 export class AccountingRulesComponent implements OnInit {
 
+  /** Accounting rule data. */
+  accountingRuleData: any;
+  /** Columns to be displayed in accounting rules table. */
   displayedColumns: string[] = ['name', 'officeName', 'debitTags', 'debitAccount', 'creditTags', 'creditAccount'];
-  dataSource: any;
+  /** Data source for accounting rules table. */
+  dataSource: MatTableDataSource<any>;
 
+  /** Paginator for accounting rules table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for accounting rules table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private accountingService: AccountingService) { }
-
-  ngOnInit() {
-    this.getAccountingRules();
-  }
-
-  getAccountingRules() {
-    this.accountingService.getAccountingRules().subscribe(accountingRules => {
-      accountingRules.forEach((accountingRule: any) => {
-        accountingRule.debitTags = accountingRule.debitTags ? accountingRule.debitTags.map((debitTag: any) => debitTag.tag.name).join(', ') : '';
-        accountingRule.creditTags = accountingRule.creditTags ? accountingRule.creditTags.map((creditTag: any) => creditTag.tag.name).join(', ') : '';
-      });
-      this.dataSource = new MatTableDataSource(accountingRules);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sortingDataAccessor = (accountingRule: any, property: any) => {
-        switch (property) {
-          case 'debitAccount': return accountingRule.debitAccounts[0].name;
-          case 'creditAccount': return accountingRule.creditAccounts[0].name;
-          default: return accountingRule[property];
-        }
-      };
-      this.dataSource.sort = this.sort;
+  /**
+   * Retrieves the accounting rules data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { accountingRules: any }) => {
+      this.accountingRuleData = data.accountingRules;
     });
   }
 
+  /**
+   * Sets the accounting rules table.
+   */
+  ngOnInit() {
+    this.setAccountingRules();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for accounting rules table.
+   */
+  setAccountingRules() {
+    this.accountingRuleData.forEach((accountingRule: any) => {
+      accountingRule.debitTags = accountingRule.debitTags ? accountingRule.debitTags.map((debitTag: any) => debitTag.tag.name).join(', ') : '';
+      accountingRule.creditTags = accountingRule.creditTags ? accountingRule.creditTags.map((creditTag: any) => creditTag.tag.name).join(', ') : '';
+    });
+    this.dataSource = new MatTableDataSource(this.accountingRuleData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sortingDataAccessor = (accountingRule: any, property: any) => {
+      switch (property) {
+        case 'debitAccount': return accountingRule.debitAccounts[0].name;
+        case 'creditAccount': return accountingRule.creditAccounts[0].name;
+        default: return accountingRule[property];
+      }
+    };
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Filters data in accounting rules table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
   applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }

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

src/app/accounting/accounting-rules/create-rule/create-rule.component.html

@@ -9,19 +9,27 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <input matInput placeholder="Accounting Rule Name" required formControlName="name">
+            <mat-label>Accounting Rule Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
+              Accounting Rule Name is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-select placeholder="Office" required formControlName="officeId">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</label>
+            <mat-label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
               <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
               <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
@@ -29,7 +37,8 @@
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-select placeholder="Account to Debit" required formControlName="accountToDebit">
+            <mat-label>Account to Debit</mat-label>
+            <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
               </mat-option>
@@ -38,22 +47,23 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-select placeholder="Debit Tags" required formControlName="debitTags" multiple>
+              <mat-label>Debit Tags</mat-label>
+              <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" class="entries-wrapper">
-              <mat-checkbox labelPosition="before" required formControlName="allowMultipleDebitEntries" class="entries">
+            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+              <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                 Multiple Debit Entries Allowed
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</label>
+            <mat-label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
               <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
               <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
@@ -61,7 +71,8 @@
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-select placeholder="Account to Credit" required formControlName="accountToCredit">
+            <mat-label>Account to Credit</mat-label>
+            <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
               </mat-option>
@@ -70,22 +81,24 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-select placeholder="Credit Tags" required formControlName="creditTags" multiple>
+              <mat-label>Credit Tags</mat-label>
+              <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" class="entries-wrapper">
-              <mat-checkbox labelPosition="before" required formControlName="allowMultipleCreditEntries" class="entries">
+            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+              <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                 Multiple Credit Entries Allowed
               </mat-checkbox>
             </div>
           </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>
@@ -93,8 +106,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/accounting-rules']">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]="!accountingRuleForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/accounting-rules/create-rule/create-rule.component.scss

@@ -2,11 +2,6 @@
   margin: 17.5px 0 0 0;
 }
 
-.additional-selection {
-  opacity: 0.75;
-  font-size: 0.75em;
-}
-
 .entries-wrapper {
   position: relative;
 

src/app/accounting/accounting-rules/create-rule/create-rule.component.ts

@@ -1,17 +1,17 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
-import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
-const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: FormGroup): ValidationErrors | null => {
-  const accountToDebit = accountingRuleForm.controls.accountToDebit.value;
-  const debitTags = accountingRuleForm.controls.debitTags.value;
-  const accountToCredit = accountingRuleForm.controls.accountToCredit.value;
-  const creditTags = accountingRuleForm.controls.creditTags.value;
-  return ((accountToDebit || debitTags) && (accountToCredit || creditTags)) ? null : { 'error': true };
-};
+/** Custom Validators */
+import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-required.validator';
 
+/**
+ * Create accounting rule component.
+ */
 @Component({
   selector: 'mifosx-create-rule',
   templateUrl: './create-rule.component.html',
@@ -19,23 +19,48 @@ const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: Form
 })
 export class CreateRuleComponent implements OnInit {
 
+  /** Accounting rule form. */
   accountingRuleForm: FormGroup;
+  /** Office data. */
   officeData: any;
+  /** GL Account data. */
   glAccountData: any;
+  /** Debit tag data. */
   debitTagData: any;
+  /** Credit tag data. */
   creditTagData: any;
 
+  /**
+   * Retrieves the offices, gl accounts, debit tags and credit tags 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) { }
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { accountingRulesTemplate: any }) => {
+      this.officeData = data.accountingRulesTemplate.allowedOffices;
+      this.glAccountData = data.accountingRulesTemplate.allowedAccounts;
+      this.debitTagData = data.accountingRulesTemplate.allowedDebitTagOptions;
+      this.creditTagData = data.accountingRulesTemplate.allowedCreditTagOptions;
+    });
+  }
 
+  /**
+   * Creates and sets accounting rules form.
+   */
   ngOnInit() {
-    this.createAccountingRulesForm();
-    this.getAccountingRulesTemplate();
+    this.createAccountingRuleForm();
     this.setAccountingRulesForm();
   }
 
-  createAccountingRulesForm() {
+  /**
+   * Creates accounting rule form.
+   */
+  createAccountingRuleForm() {
     this.accountingRuleForm = this.formBuilder.group({
       'name': ['', Validators.required],
       'officeId': ['', Validators.required],
@@ -51,40 +76,52 @@ export class CreateRuleComponent implements OnInit {
     }, { validator: oneOfTheFieldsIsRequiredValidator });
   }
 
+  /**
+   * Sets accounting rule form for selected accounting rule type.
+   */
   setAccountingRulesForm() {
-    this.accountingRuleForm.get('debitRuleType').valueChanges.subscribe(debitRuleType => {
+    this.accountingRuleForm.get('debitRuleType').valueChanges.subscribe((debitRuleType: string) => {
       if (debitRuleType === 'fixedAccount') {
         this.accountingRuleForm.get('debitTags').reset();
         this.accountingRuleForm.get('allowMultipleDebitEntries').reset();
       } else {
+        this.accountingRuleForm.get('accountToDebit').reset();
         this.accountingRuleForm.get('allowMultipleDebitEntries').setValue(false);
       }
     });
-    this.accountingRuleForm.get('creditRuleType').valueChanges.subscribe(creditRuleType => {
+    this.accountingRuleForm.get('creditRuleType').valueChanges.subscribe((creditRuleType: string) => {
       if (creditRuleType === 'fixedAccount') {
         this.accountingRuleForm.get('creditTags').reset();
         this.accountingRuleForm.get('allowMultipleCreditEntries').reset();
       } else {
+        this.accountingRuleForm.get('accountToCredit').reset();
         this.accountingRuleForm.get('allowMultipleCreditEntries').setValue(false);
       }
     });
   }
 
-  getAccountingRulesTemplate() {
-    this.accountingService.getAccountingRulesTemplate().subscribe((accountingRulesData: any) => {
-      this.officeData = accountingRulesData.allowedOffices;
-      this.glAccountData = accountingRulesData.allowedAccounts;
-      this.debitTagData = accountingRulesData.allowedDebitTagOptions;
-      this.creditTagData = accountingRulesData.allowedCreditTagOptions;
-    });
-  }
-
+  /**
+   * Submits the accounting rule form and creates accounting rule,
+   * if successful redirects to view created rule.
+   */
   submit() {
     const accountingRule = this.accountingRuleForm.value;
+    if (accountingRule.debitRuleType === 'fixedAccount') {
+      delete accountingRule.debitTags;
+      delete accountingRule.allowMultipleDebitEntries;
+    } else {
+      delete accountingRule.accountToDebit;
+    }
+    if (accountingRule.creditRuleType === 'fixedAccount') {
+      delete accountingRule.creditTags;
+      delete accountingRule.allowMultipleCreditEntries;
+    } else {
+      delete accountingRule.accountToCredit;
+    }
     delete accountingRule.debitRuleType;
     delete accountingRule.creditRuleType;
     this.accountingService.createAccountingRule(accountingRule).subscribe((response: any) => {
-      this.router.navigate(['/accounting/accounting-rules/view', response.resourceId]);
+      this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
     });
   }
 

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html

@@ -9,19 +9,27 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <input matInput placeholder="Accounting Rule Name" required formControlName="name">
+            <mat-label>Accounting Rule Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
+              Accounting Rule Name is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-select placeholder="Office" required formControlName="officeId">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</label>
+            <mat-label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
               <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
               <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
@@ -29,7 +37,8 @@
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-select placeholder="Account to Debit" required formControlName="accountToDebit">
+            <mat-label>Account to Debit</mat-label>
+            <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
               </mat-option>
@@ -38,22 +47,23 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-select placeholder="Debit Tags" required formControlName="debitTags" multiple>
+              <mat-label>Debit Tags</mat-label>
+              <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" class="entries-wrapper">
-              <mat-checkbox labelPosition="before" required formControlName="allowMultipleDebitEntries" class="entries">
+            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+              <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                 Multiple Debit Entries Allowed
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</label>
+            <mat-label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
               <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
               <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
@@ -61,7 +71,8 @@
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-select placeholder="Account to Credit" required formControlName="accountToCredit">
+            <mat-label>Account to Credit</mat-label>
+            <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
               </mat-option>
@@ -70,22 +81,24 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-select placeholder="Credit Tags" required formControlName="creditTags" multiple>
+              <mat-label>Credit Tags</mat-label>
+              <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" class="entries-wrapper">
-              <mat-checkbox labelPosition="before" required formControlName="allowMultipleCreditEntries" class="entries">
+            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+              <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                 Multiple Credit Entries Allowed
               </mat-checkbox>
             </div>
           </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>
@@ -93,8 +106,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/accounting-rules/view', accountingRule?.id]">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]="accountingRuleForm.pristine || !accountingRuleForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.scss

@@ -2,11 +2,6 @@
   margin: 17.5px 0 0 0;
 }
 
-.additional-selection {
-  opacity: 0.75;
-  font-size: 0.75em;
-}
-
 .entries-wrapper {
   position: relative;
 

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.ts

@@ -1,17 +1,17 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
-const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: FormGroup): ValidationErrors | null => {
-  const accountToDebit = accountingRuleForm.controls.accountToDebit.value;
-  const debitTags = accountingRuleForm.controls.debitTags.value;
-  const accountToCredit = accountingRuleForm.controls.accountToCredit.value;
-  const creditTags = accountingRuleForm.controls.creditTags.value;
-  return ((accountToDebit || debitTags) && (accountToCredit || creditTags)) ? null : { 'error': true };
-};
+/** Custom Validators */
+import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-required.validator';
 
+/**
+ * Edit accounting rule component.
+ */
 @Component({
   selector: 'mifosx-edit-rule',
   templateUrl: './edit-rule.component.html',
@@ -19,29 +19,54 @@ const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: Form
 })
 export class EditRuleComponent implements OnInit {
 
+  /** Accounting rule form. */
   accountingRuleForm: FormGroup;
+  /** Accounting rule. */
   accountingRule: any;
+  /** Office data. */
   officeData: any;
+  /** GL Account data. */
   glAccountData: any;
+  /** Debit tag data. */
   debitTagData: any;
+  /** Credit tag data. */
   creditTagData: any;
 
-  constructor(private route: ActivatedRoute,
-              private formBuilder: FormBuilder,
+  /**
+   * Retrieves the offices, gl accounts, debit tags, credit tags and accounting rule 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: { accountingRule: any }) => {
-      this.accountingRule = data.accountingRule;
-    });
+    this.route.data.subscribe((data: {
+        accountingRulesTemplate: any,
+        accountingRule: any
+      }) => {
+        this.officeData = data.accountingRulesTemplate.allowedOffices;
+        this.glAccountData = data.accountingRulesTemplate.allowedAccounts;
+        this.debitTagData = data.accountingRulesTemplate.allowedDebitTagOptions;
+        this.creditTagData = data.accountingRulesTemplate.allowedCreditTagOptions;
+        this.accountingRule = data.accountingRule;
+      });
   }
 
+  /**
+   * Creates and sets accounting rule form.
+   */
   ngOnInit() {
-    this.createAccountingRulesForm();
-    this.getAccountingRulesTemplate();
+    this.createAccountingRuleForm();
     this.setAccountingRulesForm();
   }
 
-  createAccountingRulesForm() {
+  /**
+   * Creates accounting rule form.
+   */
+  createAccountingRuleForm() {
     this.accountingRuleForm = this.formBuilder.group({
       'name': [this.accountingRule.name, Validators.required],
       'officeId': [this.accountingRule.officeId, Validators.required],
@@ -57,12 +82,16 @@ export class EditRuleComponent implements OnInit {
     }, { validator: oneOfTheFieldsIsRequiredValidator });
   }
 
+  /**
+   * Sets accounting rule form for selected accounting rule type.
+   */
   setAccountingRulesForm() {
     this.accountingRuleForm.get('debitRuleType').valueChanges.subscribe(debitRuleType => {
       if (debitRuleType === 'fixedAccount') {
         this.accountingRuleForm.get('debitTags').reset();
         this.accountingRuleForm.get('allowMultipleDebitEntries').reset();
       } else {
+        this.accountingRuleForm.get('accountToDebit').reset();
         this.accountingRuleForm.get('allowMultipleDebitEntries').setValue(false);
       }
     });
@@ -71,6 +100,7 @@ export class EditRuleComponent implements OnInit {
         this.accountingRuleForm.get('creditTags').reset();
         this.accountingRuleForm.get('allowMultipleCreditEntries').reset();
       } else {
+        this.accountingRuleForm.get('accountToCredit').reset();
         this.accountingRuleForm.get('allowMultipleCreditEntries').setValue(false);
       }
     });
@@ -94,21 +124,28 @@ export class EditRuleComponent implements OnInit {
     }
   }
 
-  getAccountingRulesTemplate() {
-    this.accountingService.getAccountingRulesTemplate().subscribe((accountingRulesData: any) => {
-      this.officeData = accountingRulesData.allowedOffices;
-      this.glAccountData = accountingRulesData.allowedAccounts;
-      this.debitTagData = accountingRulesData.allowedDebitTagOptions;
-      this.creditTagData = accountingRulesData.allowedCreditTagOptions;
-    });
-  }
-
+  /**
+   * Submits the accounting rule form and updates accounting rule,
+   * if successful redirects to view updated rule.
+   */
   submit() {
     const accountingRule = this.accountingRuleForm.value;
+    if (accountingRule.debitRuleType === 'fixedAccount') {
+      delete accountingRule.debitTags;
+      delete accountingRule.allowMultipleDebitEntries;
+    } else {
+      delete accountingRule.accountToDebit;
+    }
+    if (accountingRule.creditRuleType === 'fixedAccount') {
+      delete accountingRule.creditTags;
+      delete accountingRule.allowMultipleCreditEntries;
+    } else {
+      delete accountingRule.accountToCredit;
+    }
     delete accountingRule.debitRuleType;
     delete accountingRule.creditRuleType;
     this.accountingService.updateAccountingRule(this.accountingRule.id, accountingRule).subscribe((response: any) => {
-      this.router.navigate(['/accounting/accounting-rules/view', response.resourceId]);
+      this.router.navigate(['../../', response.resourceId], { relativeTo: this.route });
     });
   }
 

src/app/accounting/accounting-rules/one-of-the-fields-is-required.validator.ts

@@ -0,0 +1,11 @@
+/** Angular Imports */
+import { FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
+
+/** Validates that one of the fields for debit or credit is filled for a given accounting rule type. */
+export const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: FormGroup): ValidationErrors | null => {
+  const accountToDebit = accountingRuleForm.controls.accountToDebit.value;
+  const debitTags = accountingRuleForm.controls.debitTags.value;
+  const accountToCredit = accountingRuleForm.controls.accountToCredit.value;
+  const creditTags = accountingRuleForm.controls.creditTags.value;
+  return ((accountToDebit || debitTags) && (accountToCredit || creditTags)) ? null : { 'error': true };
+};

src/app/accounting/accounting-rules/view-rule/view-rule.component.html

@@ -1,9 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/accounting-rules/view', accountingRule?.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)="deleteAccountingRule()">
-    <mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
   </button>
 </div>
 
@@ -25,11 +27,11 @@
             {{ accountingRule.officeName }}
           </div>
 
-          <div fxFlex="50%" class="header">
+          <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
             Description
           </div>
 
-          <div fxFlex="50%">
+          <div fxFlex="50%" *ngIf="accountingRule.description">
             {{ accountingRule.description }}
           </div>
 

src/app/accounting/accounting-rules/view-rule/view-rule.component.scss

@@ -2,9 +2,9 @@
   div {
     margin: 1rem 0;
     word-wrap: break-word;
-  }
 
-  .header {
-    font-weight: 500;
+    &.header {
+      font-weight: 500;
+    }
   }
 }

src/app/accounting/accounting-rules/view-rule/view-rule.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 accounting rule component.
+ */
 @Component({
   selector: 'mifosx-view-rule',
   templateUrl: './view-rule.component.html',
@@ -12,11 +19,19 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 })
 export class ViewRuleComponent implements OnInit {
 
+  /** Accounting rule. */
   accountingRule: any;
 
-  constructor(private route: ActivatedRoute,
+  /**
+   * Retrieves the accounting rule 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) {
     this.route.data.subscribe((data: { accountingRule: any }) => {
       this.accountingRule = data.accountingRule;
@@ -26,6 +41,9 @@ export class ViewRuleComponent implements OnInit {
   ngOnInit() {
   }
 
+  /**
+   * Deletes the accounting rule and redirects to accounting rules.
+   */
   deleteAccountingRule() {
     const deleteAccountingRuleDialogRef = this.dialog.open(DeleteDialogComponent, {
       data: { deleteContext: `accounting rule ${this.accountingRule.id}` }

src/app/accounting/accounting-rules/view-rule/view-rule.resolver.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-
-import { Observable } from 'rxjs';
-
-import { AccountingService } from '../../accounting.service';
-
-@Injectable()
-export class ViewAccountingRuleResolver implements Resolve<Object> {
-
-  constructor(private accountingService: AccountingService) {}
-
-  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const id = route.paramMap.get('id');
-
-    return this.accountingService.getAccountingRule(id);
-  }
-
-}