refactor: Loans Module (#1150)

Fixes: #1149

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -33,7 +33,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!collateralForm.valid" *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts

@@ -62,7 +62,7 @@ export class AddCollateralComponent implements OnInit {
     const collateralForm = this.collateralForm.value;
     collateralForm.locale = 'en';
     this.loanService.createLoanCollateral(loanId, collateralForm).subscribe((response: any) => {
-      this.router.navigate(['../general'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -0,0 +1,55 @@
+<form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
+
+  <mat-card-content>
+
+    <div fxLayout="column">
+      <mat-form-field>
+        <mat-label>Charge</mat-label>
+        <mat-select required formControlName="chargeId">
+          <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
+            {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
+          Charge is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Amount</mat-label>
+        <input type=number required matInput formControlName="amount" />
+        <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
+          Amount is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Charge Calculation</mat-label>
+        <input matInput formControlName="chargeCalculation" />
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Charge Time</mat-label>
+        <input matInput formControlName="chargeTime" />
+      </mat-form-field>
+
+      <mat-form-field *ngIf="loanChargeForm.controls['dueDate']">
+        <mat-label>Due On</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
+          formControlName="dueDate">
+        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #dueDatePicker></mat-datepicker>
+        <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
+          Due Date is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+
+    <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+      <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid">Submit</button>
+    </mat-card-actions>
+
+  </mat-card-content>
+</form>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddLoanChargeComponent } from './add-loan-charge.component';
+
+describe('AddloanchargeComponent', () => {
+  let component: AddLoanChargeComponent;
+  let fixture: ComponentFixture<AddLoanChargeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddLoanChargeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddLoanChargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.ts

@@ -0,0 +1,111 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { LoansService } from '../../../loans.service';
+
+/**
+ * Create Add Loan Charge component.
+ */
+@Component({
+  selector: 'mifosx-add-loan-charge',
+  templateUrl: './add-loan-charge.component.html',
+  styleUrls: ['./add-loan-charge.component.scss']
+})
+export class AddLoanChargeComponent implements OnInit {
+
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** Add Loan Charge form. */
+  loanChargeForm: FormGroup;
+  /** loan charge options. */
+  loanChargeOptions: {
+    id: number;
+    name: string;
+    amount: number;
+    currency: {
+      name: string;
+    };
+    chargeCalculationType: {
+      value: any;
+    };
+    chargeTimeType: {
+      id: number;
+      value: any;
+    };
+  }[];
+  /** loan Id of the loan account. */
+  loanId: string;
+
+  /**
+   * Retrieves the loan charge template 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 route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private loansService: LoansService) {
+    this.route.data.subscribe((data: { actionButtonData: any }) => {
+      this.loanChargeOptions = data.actionButtonData.chargeOptions;
+    });
+    this.loanId = this.route.parent.snapshot.params['loanId'];
+  }
+
+  /**
+   * Creates the Loan Charge form.
+   */
+  ngOnInit() {
+    this.createLoanChargeForm();
+    this.loanChargeForm.controls.chargeId.valueChanges.subscribe(chargeId => {
+      const chargeDetails = this.loanChargeOptions.find(option => {
+        return option.id === chargeId;
+      });
+      if (chargeDetails.chargeTimeType.id === 2) {
+        this.loanChargeForm.addControl('dueDate', new FormControl('', Validators.required));
+      } else {
+        this.loanChargeForm.removeControl('dueDate');
+      }
+      this.loanChargeForm.patchValue({
+        'amount': chargeDetails.amount,
+        'chargeCalculation': chargeDetails.chargeCalculationType.value,
+        'chargeTime': chargeDetails.chargeTimeType.value
+      });
+    });
+  }
+
+  /**
+   * Creates the Loan Charge form.
+   */
+  createLoanChargeForm() {
+    this.loanChargeForm = this.formBuilder.group({
+      'chargeId': ['', Validators.required],
+      'amount': ['', Validators.required],
+      'chargeCalculation': [{ value: '', disabled: true }],
+      'chargeTime': [{ value: '', disabled: true }]
+    });
+  }
+
+  submit() {
+    const prevDueDate: Date = this.loanChargeForm.value.dueDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'yyyy-MM-dd';
+    this.loanChargeForm.patchValue({
+      dueDate: this.datePipe.transform(prevDueDate, dateFormat)
+    });
+    const loanCharge = this.loanChargeForm.value;
+    loanCharge.locale = 'en';
+    loanCharge.dateFormat = dateFormat;
+    this.loansService.createLoanCharge(this.loanId, 'charges', loanCharge).subscribe(res => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+}

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -31,7 +31,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.ts

@@ -68,7 +68,7 @@ export class CloseAsRescheduledComponent implements OnInit {
     closeForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close-rescheduled')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 }

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html

@@ -5,32 +5,67 @@
 
       <div fxLayout="column">
 
-          <mat-checkbox labelPosition="before" formControlName="existingClient">
-            Existing Client
-          </mat-checkbox>
+        <mat-checkbox labelPosition="before" formControlName="existingClient">
+          Existing Client
+        </mat-checkbox>
 
         <ng-container *ngIf="!showClientDetailsForm">
 
-          <mat-form-field>
+          <mat-form-field fxFlex="30%">
             <mat-label>Name</mat-label>
-            <input matInput required formControlName="name" required>
+            <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete">
             <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
               Name <strong>is required</strong>
             </mat-error>
           </mat-form-field>
 
+          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient"
+            (optionSelected)='clientSelected($event.option.value)'>
+            <mat-option *ngFor="let client of clientsData" [value]="client">
+              {{ client.displayName }}
+            </mat-option>
+          </mat-autocomplete>
+
+          <mat-form-field>
+            <mat-label>Relationship</mat-label>
+            <mat-select formControlName="clientRelationshipTypeId">
+              <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
+                {{ relationType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <ng-container *ngIf="accountOptions.length > 0">
+
+            <mat-form-field>
+              <mat-label>Account</mat-label>
+              <mat-select formControlName="savingsId">
+                <mat-option *ngFor="let accountOption of accountOptions" [value]="accountOption.id">
+                  {{ accountOption.productName }} - {{ accountOption.accountNo }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Amount</mat-label>
+              <input type="number" matInput required formControlName="amount" required>
+            </mat-form-field>
+
+          </ng-container>
+
         </ng-container>
 
-        <mat-form-field>
-          <mat-label>Relationship</mat-label>
-          <mat-select formControlName="clientRelationshipTypeId">
-            <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
-              {{ relationType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
         <ng-container *ngIf="showClientDetailsForm">
+
+          <mat-form-field>
+            <mat-label>Relationship</mat-label>
+            <mat-select formControlName="clientRelationshipTypeId">
+              <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
+                {{ relationType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
           <mat-form-field>
             <mat-label>First Name</mat-label>
             <input matInput required formControlName="firstname" required>
@@ -89,7 +124,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!newGuarantorForm.valid"
           *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
       </mat-card-actions>
@@ -97,4 +132,25 @@
     </mat-card-content>
 
   </form>
-</div>
+
+  <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">
+    <div class="mat-table">
+      <div class="mat-header-row">
+        <div class="mat-header-cell">Client Details</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Name</div>
+        <div class="mat-cell">{{newGuarantorForm.controls.name.value.displayName}}</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Id</div>
+        <div class="mat-cell">{{newGuarantorForm.controls.name.value.id}}</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Office</div>
+        <div class="mat-cell">{{newGuarantorForm.controls.name.value.officeName}}</div>
+      </div>
+    </div>
+  </ng-container>
+
+</div>

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.scss

@@ -0,0 +1,31 @@
+.container {
+
+  .mat-table {
+    display: block;
+    font-family: Tahoma, Verdana;
+    width: 100%;
+  }
+  
+  .mat-row,
+  .mat-header-row {
+    display: flex;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 24px;
+  }
+  
+  .mat-cell,
+  .mat-header-cell {
+    flex: 1;
+    overflow: hidden;
+    word-wrap: break-word;
+  }
+  
+  h3 {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
+}

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.ts

@@ -1,11 +1,12 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
 import { DatePipe } from '@angular/common';
+import { ClientsService } from 'app/clients/clients.service';
 
 /**
  * Create Guarantor Action
@@ -15,7 +16,7 @@ import { DatePipe } from '@angular/common';
   templateUrl: './create-guarantor.component.html',
   styleUrls: ['./create-guarantor.component.scss']
 })
-export class CreateGuarantorComponent implements OnInit {
+export class CreateGuarantorComponent implements OnInit, AfterViewInit {
 
   @Input() dataObject: any;
   /** New Guarantor Form */
@@ -30,6 +31,10 @@ export class CreateGuarantorComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
   maxDate = new Date();
+  /** Client data. */
+  clientsData: any = [];
+  /** Account Options */
+  accountOptions: any = [];
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -42,7 +47,8 @@ export class CreateGuarantorComponent implements OnInit {
     private loanService: LoansService,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe) {
+    private datePipe: DatePipe,
+    private clientsService: ClientsService) {
     this.loanId = this.route.parent.snapshot.params['loanId'];
   }
 
@@ -57,7 +63,9 @@ export class CreateGuarantorComponent implements OnInit {
     this.newGuarantorForm = this.formBuilder.group({
       'existingClient': [''],
       'name': ['', Validators.required],
-      'clientRelationshipTypeId': ['']
+      'clientRelationshipTypeId': [''],
+      'savingsId': [''],
+      'amount': ['']
     });
   }
 
@@ -86,8 +94,12 @@ export class CreateGuarantorComponent implements OnInit {
         this.newGuarantorForm.addControl('mobileNumber', new FormControl(''));
         this.newGuarantorForm.addControl('housePhoneNumber', new FormControl(''));
         this.newGuarantorForm.removeControl('name');
+        this.newGuarantorForm.removeControl('savingsId');
+        this.newGuarantorForm.removeControl('amount');
       } else {
         this.newGuarantorForm.addControl('name', new FormControl(''));
+        this.newGuarantorForm.addControl('savingsId', new FormControl(''));
+        this.newGuarantorForm.addControl('amount', new FormControl(''));
         this.newGuarantorForm.removeControl('firstname');
         this.newGuarantorForm.removeControl('lastname');
         this.newGuarantorForm.removeControl('dob');
@@ -101,6 +113,39 @@ export class CreateGuarantorComponent implements OnInit {
     });
   }
 
+  /**
+   * Subscribes to Clients search filter:
+   */
+  ngAfterViewInit() {
+    if (this.newGuarantorForm.value.existingClient) {
+      this.newGuarantorForm.get('name').valueChanges.subscribe((value: string) => {
+        if (value.length >= 2) {
+          this.clientsService.getFilteredClients('displayName', 'ASC', true, value)
+            .subscribe((data: any) => {
+              this.clientsData = data.pageItems;
+            });
+        }
+      });
+    }
+  }
+
+  clientSelected(clientDetails: any){
+    console.log(clientDetails);
+    this.accountOptions = [];
+    this.loanService.guarantorAccountResource(this.loanId, clientDetails.id).subscribe((response: any) => {
+      this.accountOptions = response.accountLinkingOptions;
+    })
+  }
+
+  /**
+   * Displays Client name in form control input.
+   * @param {any} client Client data.
+   * @returns {string} Client name if valid otherwise undefined.
+   */
+  displayClient(client: any): string | undefined {
+    return client ? client.displayName : undefined;
+  }
+
   /** Submits the new guarantor details form */
   submit() {
     const prevdob: Date = this.newGuarantorForm.value.dob;
@@ -108,17 +153,25 @@ export class CreateGuarantorComponent implements OnInit {
     // TODO: Update once language and date settings are setup
     const dateFormat = 'dd-MM-yyyy';
     const locale = 'en';
-    const newGuarantorData = {
+    let newGuarantorData = {
       ... this.newGuarantorForm.value,
-      dob: this.datePipe.transform(prevdob, dateFormat),
       locale,
-      dateFormat,
       guarantorTypeId
     };
+
+    if(this.newGuarantorForm.value.existingClient) {
+      newGuarantorData['entityId'] = this.newGuarantorForm.controls.name.value.id;
+    } else {
+      newGuarantorData['dob'] = this.datePipe.transform(prevdob, dateFormat),
+      newGuarantorData['dateFormat'] = dateFormat
+    }
+
     delete newGuarantorData.existingClient;
+    delete newGuarantorData.name;
+
     this.loanService.createNewGuarantor(this.loanId, newGuarantorData)
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component.html

@@ -40,7 +40,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid" *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component.ts

@@ -72,7 +72,7 @@ export class DisburseLoanAccountComponent implements OnInit {
     disbursementForm.locale = 'en';
     disbursementForm.dateFormat = dateFormat;
     this.loanService.loanActionButtons(loanId, 'disbursetosavings', disbursementForm).subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -80,7 +80,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid" *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.ts

@@ -109,7 +109,7 @@ export class DisburseComponent implements OnInit {
     disbursementLoanData.dateFormat = dateFormat;
     this.loanService.loanActionButtons(this.loanId, 'disburse', disbursementLoanData )
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html

@@ -49,7 +49,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid" *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.ts

@@ -117,7 +117,7 @@ export class ForeclosureComponent implements OnInit {
 
     this.loanService.loanForclosureData(this.loanId, formData)
       .subscribe((response: any) => {
-        this.router.navigate([`../general`], { relativeTo: this.route });
+        this.router.navigate([`../../general`], { relativeTo: this.route });
       });
     }
 

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts

@@ -33,7 +33,8 @@ export class LoanAccountActionsComponent {
             withdrawn_by_client: boolean,
             undo_disbursal: boolean,
             loan_screen_reports: boolean,
-            approve: boolean } = {
+            approve: boolean,
+            add_loan_charge: boolean } = {
               close: false,
               undo_approval: false,
               write_off: false,
@@ -54,7 +55,8 @@ export class LoanAccountActionsComponent {
               withdrawn_by_client: false,
               undo_disbursal: false,
               loan_screen_reports: false,
-              approve: false };
+              approve: false,
+              add_loan_charge: false };
 
   actionButtonData: any;
   actionName: any;
@@ -74,6 +76,9 @@ export class LoanAccountActionsComponent {
       if (this.actionName === 'change-loan-officer') {
         this.actionName = 'assign-loan-officer';
       }
+      for (const key of Object.keys(this.actions)) {
+        this.actions[key] = false;
+      }
       this.actions[this.actionName.replace(/-/g, '_')] = true;
     });
   }

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html

@@ -88,7 +88,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid" *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.ts

@@ -81,7 +81,7 @@ export class LoanRescheduleComponent implements OnInit {
       // TODO: needs to be updated
       // mentioned in Community App:
       // location.path('/loans/' + scope.loanId + '/viewreschedulerequest/'+ data.resourceId);
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.ts

@@ -52,7 +52,6 @@ export class LoanScreenReportsComponent implements OnInit {
   ngOnInit() {
     this.templatesData = this.dataObject;
     this.createLoanScreenReportForm();
-    console.log('templateData: ', this.templatesData);
   }
 
   /**

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts

@@ -69,7 +69,7 @@ export class LoansAccountCloseComponent implements OnInit {
     closeForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -80,7 +80,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts

@@ -108,7 +108,7 @@ export class MakeRepaymentComponent implements OnInit {
     repaymentLoanData.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, repaymentLoanData, 'repayment')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -93,7 +93,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.ts

@@ -120,7 +120,7 @@ export class PrepayLoanComponent implements OnInit {
     prepayLoanData.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, prepayLoanData, 'repayment')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -81,7 +81,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
           *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
       </mat-card-actions>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts

@@ -109,7 +109,7 @@ export class RecoveryRepaymentComponent implements OnInit {
     recoveryRepaymentLoanData.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, recoveryRepaymentLoanData, 'recoverypayment')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid" *mifosxHasPermission="'REJECT_LOAN'" >Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.ts

@@ -68,7 +68,7 @@ export class RejectLoanComponent implements OnInit {
     rejectForm.locale = 'en';
     rejectForm.dateFormat = dateFormat;
     this.loanService.loanActionButtons(this.loanId, 'reject', rejectForm).subscribe((response: any) => {
-      this.router.navigate(['../general'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html

@@ -8,7 +8,7 @@
     </mat-form-field>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
     </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.ts

@@ -38,7 +38,7 @@ export class UndoApprovalComponent implements OnInit {
   submit() {
     const loanId = this.route.parent.snapshot.params['loanId'];
     this.loanService.loanActionButtons(loanId, 'undoapproval', { 'note': this.note.value }).subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html

@@ -8,7 +8,7 @@
     </mat-form-field>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
     </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.ts

@@ -45,8 +45,8 @@ export class UndoDisbursalComponent implements OnInit {
    * Submits the undo disbursal form.
    */
   submit() {
-    this.loansService.loanActionButtons(this.loanId, 'undoDisbursal', {'note': this.note.value}).subscribe((response: any) => {
-      this.router.navigate(['../general'], { relativeTo: this.route });
+    this.loansService.loanActionButtons(this.loanId, 'undodisbursal', {'note': this.note.value}).subscribe((response: any) => {
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html

@@ -32,7 +32,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid" *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.ts

@@ -71,7 +71,7 @@ export class WaiveInterestComponent implements OnInit {
     loanInterestForm.locale = 'en';
     loanInterestForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(loanId, loanInterestForm, 'waiveinterest').subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid" *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.ts

@@ -73,7 +73,7 @@ export class WithdrawnByClientComponent implements OnInit {
     WithdrawnByClientLoanData.dateFormat = dateFormat;
     this.loanService.loanActionButtons(this.loanId, 'withdrawnByApplicant', WithdrawnByClientLoanData)
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html

@@ -31,7 +31,7 @@
     </form>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
     </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.ts

@@ -70,7 +70,7 @@ export class WriteOffPageComponent implements OnInit {
     writeOffForm.locale = 'en';
     writeOffForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(loanId, writeOffForm, 'writeoff').subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../../general'], {relativeTo: this.route});
     });
   }