Realtime Loan Delinquency Classification

src/app/core/shell/breadcrumb/breadcrumb.component.ts

@@ -107,6 +107,7 @@ export class BreadcrumbComponent implements OnInit {
               const routeData: Data = route.snapshot.data;
               if (routeData.breadcrumb === 'Clients') {
                 breadcrumbLabel = routeData.clientViewData.displayName;
+                currentUrl += `/general`;
               } else if (routeData.breadcrumb === 'Groups') {
                 breadcrumbLabel = routeData.groupViewData.name;
               } else if (routeData.breadcrumb === 'Centers') {

src/app/loans/common-resolvers/loan-delinquency-tags.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 { LoansService } from '../loans.service';
+
+/**
+ * Clients data resolver.
+ */
+@Injectable()
+export class LoanDelinquencyTagsResolver implements Resolve<Object> {
+
+    /**
+     * @param {LoansService} LoansService Loans service.
+     */
+    constructor(private loansService: LoansService) { }
+
+    /**
+     * Returns the Loans with Association data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId') || route.parent.parent.paramMap.get('loanId');
+        return this.loansService.getDelinquencyTags(loanId);
+    }
+
+}

src/app/loans/create-loans-account/create-loans-account.component.html

@@ -36,7 +36,7 @@
       <ng-template matStepLabel>TERMS</ng-template>
 
       <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-      [loansAccountTemplate] = "loansAccountTemplate" [multiDisburseLoan] = "multiDisburseLoan" [collateralOptions]="collateralOptions"
+      [loansAccountTemplate] = "loansAccountTemplate" [collateralOptions]="collateralOptions"
       [loansAccountFormValid]="loansAccountFormValid" [loanPrincipal]="loanPrincipal">
       </mifosx-loans-account-terms-step>
 

src/app/loans/create-loans-account/create-loans-account.component.ts

@@ -110,7 +110,8 @@ export class CreateLoansAccountComponent implements OnInit {
       ...this.loansAccountDetailsStep.loansAccountDetails,
       ...this.loansAccountTermsStep.loansAccountTerms,
       ...this.loansAccountChargesStep.loansAccountCharges,
-      ...this.loansAccountTermsStep.loanCollateral
+      ...this.loansAccountTermsStep.loanCollateral,
+      ...this.loansAccountTermsStep.disbursementData
     };
   }
 
@@ -169,9 +170,11 @@ export class CreateLoansAccountComponent implements OnInit {
       delete loansAccountData.disbursementData;
     }
     delete loansAccountData.isValid;
+    loansAccountData.principal = loansAccountData.principalAmount;
+    delete loansAccountData.principalAmount;
 
     this.loansService.createLoansAccount(loansAccountData).subscribe((response: any) => {
-      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+      this.router.navigate(['../', response.resourceId, 'general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/edit-loans-account/edit-loans-account.component.ts

@@ -78,11 +78,12 @@ export class EditLoansAccountComponent implements OnInit {
   /** Checks wheter all the forms in different steps are valid and not pristine */
   get loansAccountFormValidAndNotPristine() {
     return (
-      this.loansAccountDetailsForm.valid &&
+      (this.loansAccountDetailsForm.valid &&
-      this.loansAccountTermsForm.valid &&
+      this.loansAccountTermsForm.valid) &&
       (
         !this.loansAccountDetailsForm.pristine ||
         !this.loansAccountTermsForm.pristine ||
+        !this.loansAccountTermsStep.pristine ||
         !this.loansAccountChargesStep.pristine
       )
     );
@@ -94,6 +95,8 @@ export class EditLoansAccountComponent implements OnInit {
       ...this.loansAccountDetailsStep.loansAccountDetails,
       ...this.loansAccountTermsStep.loansAccountTerms,
       ...this.loansAccountChargesStep.loansAccountCharges,
+      ...this.loansAccountTermsStep.loanCollateral,
+      ...this.loansAccountTermsStep.disbursementData
     };
   }
 
@@ -117,6 +120,10 @@ export class EditLoansAccountComponent implements OnInit {
         value: collateralEle.value,
         description: collateralEle.description
       })),
+      disbursementData: this.loansAccount.disbursementData.map((item: any) => ({
+        expectedDisbursementDate: this.dateUtils.formatDate(item.expectedDisbursementDate, dateFormat),
+        principal: item.principal
+      })),
       interestChargedFromDate: this.dateUtils.formatDate(this.loansAccount.interestChargedFromDate, dateFormat),
       repaymentsStartingFromDate: this.dateUtils.formatDate(this.loansAccount.repaymentsStartingFromDate, dateFormat),
       submittedOnDate: this.dateUtils.formatDate(this.loansAccount.submittedOnDate, dateFormat),
@@ -141,6 +148,8 @@ export class EditLoansAccountComponent implements OnInit {
     if (!(loansAccountData.isFloatingInterestRate === false)) {
       delete loansAccountData.isFloatingInterestRate;
     }
+    loansAccountData.principal = loansAccountData.principalAmount;
+    delete loansAccountData.principalAmount;
     this.loansService.updateLoansAccount(this.loanId, loansAccountData).subscribe((response: any) => {
       this.router.navigate(['../'], { relativeTo: this.route });
     });

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

@@ -55,10 +55,10 @@
       <td mat-cell *matCellDef="let charge">
         <span
           *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-          {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
+          {{(charge.dueDate | dateFormat) || 'Unassigned'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
+          {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
         </span>
         <span
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
@@ -127,4 +127,7 @@
     Next&nbsp;&nbsp;
     <fa-icon icon="arrow-right"></fa-icon>
   </button>
+  <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
+    Cancel
+  </button>
 </div>

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts

@@ -14,6 +14,7 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { ActivatedRoute } from '@angular/router';
 
 /**
  * Recurring Deposit Account Charges Step
@@ -50,6 +51,7 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   isCollateralSufficient = false;
   /** Total value of all collateral added to a loan */
   totalCollateralValue: any = 0;
+  loanId: any = null;
 
   /**
    * Loans Account Charges Form Step
@@ -59,7 +61,9 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
    */
   constructor(public dialog: MatDialog,
     private dateUtils: Dates,
+    private route: ActivatedRoute,
     private settingsService: SettingsService) {
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html

@@ -96,6 +96,9 @@
       Next  
       <fa-icon icon="arrow-right"></fa-icon>
     </button>
+    <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
+      Cancel
+    </button>
   </div>
 
 </form>

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Services */
@@ -38,6 +39,8 @@ export class LoansAccountDetailsStepComponent implements OnInit {
   /** Loans Account Details Form */
   loansAccountDetailsForm: FormGroup;
 
+  loanId: any = null;
+
   /** Loans Account Template with product data  */
   @Output() loansAccountProductTemplate = new EventEmitter();
   /**
@@ -48,12 +51,14 @@ export class LoansAccountDetailsStepComponent implements OnInit {
    */
   constructor(private formBuilder: FormBuilder,
     private loansService: LoansService,
+    private route: ActivatedRoute,
     private settingsService: SettingsService) {
+    this.loanId = this.route.snapshot.params['loanId'];
     this.createLoansAccountDetailsForm();
   }
 
   ngOnInit() {
-    this.maxDate = this.settingsService.businessDate;
+    this.maxDate = this.settingsService.maxFutureDate;
     this.buildDependencies();
     if (this.loansAccountTemplate) {
       this.productData = this.loansAccountTemplate.productOptions;

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -3,9 +3,9 @@
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Principal {{loansAccountProductTemplate?.currency.displaySymbol}}</mat-label>
+        <mat-label>Principal {{currencyDisplaySymbol}}</mat-label>
-        <input type="number" matInput formControlName="principal">
+        <input type="number" matInput formControlName="principalAmount">
-        <mat-error *ngIf="loansAccountTermsForm.controls.principal.hasError('required')">
+        <mat-error *ngIf="loansAccountTermsForm.controls.principalAmount.hasError('required')">
           Principal is <strong>required</strong>
         </mat-error>
       </mat-form-field>
@@ -52,8 +52,7 @@
 
       <mat-form-field fxFlex="48%">
         <mat-label>Repaid every</mat-label>
-        <input matInput required formControlName="repaymentEvery"
+        <input matInput required formControlName="repaymentEvery" >
-          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
         <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
           Repaid every is <strong>required</strong>
         </mat-error>
@@ -61,8 +60,7 @@
 
       <mat-form-field fxFlex="48%">
         <mat-label>Frequency</mat-label>
-        <mat-select formControlName="repaymentFrequencyType" required
+        <mat-select formControlName="repaymentFrequencyType" required >
-          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
           <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData"
             [value]="repaymentFrequencyType.id">
             {{ repaymentFrequencyType.value }}
@@ -100,7 +98,7 @@
         <mat-datepicker #interestPicker></mat-datepicker>
       </mat-form-field>
 
-    <ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
+    <ng-container *ngIf="!loansAccountTemplate?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="48%">
         <mat-label>Nominal interest rate</mat-label>
@@ -109,8 +107,7 @@
 
         <mat-form-field fxFlex="48%">
           <mat-label>Interest method</mat-label>
-          <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
+          <mat-select formControlName="interestType">
-            formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData"
               [value]="interestType.id">
               {{ interestType.value }}
@@ -119,13 +116,13 @@
         </mat-form-field>
 
         <mat-checkbox fxFlex="48%" formControlName="isEqualAmortization"
-          [checked]="loansAccountProductTemplate?.isEqualAmortization">
+          [checked]="loansAccountTemplate?.isEqualAmortization">
           <p>Is Equal Amortization</p>
         </mat-checkbox>
 
     </ng-container>
 
-    <ng-container *ngIf="loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
+    <ng-container *ngIf="loansAccountTemplate?.isLoanProductLinkedToFloatingRate">
 
       <!-- <mat-form-field fxFlex="48%">
         <mat-label>Interest Rate Differential</mat-label>
@@ -137,8 +134,7 @@
         <mat-form-field fxFlex="48%">
           <mat-label>Interest Method</mat-label>
           <mat-select formControlName="interestType">
-            <mat-option [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
+            <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-              *ngFor="let interestType of interestTypeData" [value]="interestType.id">
               {{ interestType.value }}
             </mat-option>
           </mat-select>
@@ -154,8 +150,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Amortization</mat-label>
-      <mat-select required [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.amortizationType"
+      <mat-select required formControlName="amortizationType">
-        formControlName="amortizationType">
         <mat-option *ngFor="let amortizationType of amortizationTypeData"
           [value]="amortizationType.id">
           {{ amortizationType.value }}
@@ -170,9 +165,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Interest calculation period</mat-label>
-      <mat-select
+      <mat-select formControlName="interestCalculationPeriodType">
-        [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestCalculationPeriodType"
-        formControlName="interestCalculationPeriodType">
         <mat-option
           *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
@@ -182,16 +175,13 @@
     </mat-form-field>
 
     <!-- <mat-checkbox *ngIf="interestCalculationPeriodType != 0" fxFlex="48%" -->
-    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion"
+    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion" >
-      [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestCalculationPeriodType">
       <p>Calculate interest for exact days in partial period</p>
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Arrears tolerance {{loansAccountProductTemplate?.currency.displaySymbol}}</mat-label>
+      <mat-label>Arrears tolerance {{currencyDisplaySymbol}}</mat-label>
-      <input matInput type="number"
+      <input matInput type="number" formControlName="inArrearsTolerance">
-        [attr.disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.inArrearsTolerance"
-        formControlName="inArrearsTolerance">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
@@ -201,9 +191,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Repayment strategy</mat-label>
-      <mat-select required
+      <mat-select required formControlName="transactionProcessingStrategyId">
-        [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.transactionProcessingStrategyId"
-        formControlName="transactionProcessingStrategyId">
         <mat-option
           *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData"
           [value]="transactionProcessingStrategy.id">
@@ -217,27 +205,24 @@
 
     <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
 
-    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnPrincipalPayment" class="margin-v"
+    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnPrincipalPayment" class="margin-v" >
-    [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment">
       On Principal Payment
     </mat-checkbox>
 
-    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnInterestPayment" class="margin-v"
+    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnInterestPayment" class="margin-v" >
-    [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment">
       On Interest Payment
     </mat-checkbox>
 
-    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v"
+    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v" >
-    [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.graceOnArrearsAgeing">
       On Arreas Aging
     </mat-checkbox>
 
-    <mat-form-field fxFlex="48%" *ngIf="loansAccountProductTemplate?.canDefineInstallmentAmount">
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountTemplate?.canDefineInstallmentAmount">
       <mat-label>Installment Amount</mat-label>
       <input type="number" matInput formControlName="fixedEmiAmount">
     </mat-form-field>
 
-    <ng-container *ngIf="loansAccountProductTemplate?.canUseForTopup">
+    <ng-container *ngIf="loansAccountTemplate?.canUseForTopup">
 
       <mat-checkbox fxFlex="48%" formControlName="isTopup">
         <p>Is Topup Loan?</p>
@@ -259,58 +244,58 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Recalculate Interest</span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ loansAccountTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
     </div>
 
-    <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+    <div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
       <span fxFlex="40%">Days in year</span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInYearType.value}}</span>
+      <span fxFlex="60%">{{ loansAccountTemplate?.daysInYearType.value}}</span>
     </div>
 
-    <ng-container *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+    <ng-container *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
 
-      <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+      <div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
         <span fxFlex="40%">Advance payments adjustment type</span>
-        <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.rescheduleStrategyType.value }}</span>
+        <span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.rescheduleStrategyType.value }}</span>
       </div>
 
-      <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+      <div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
         <span fxFlex="40%">Days in month</span>
-        <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
+        <span fxFlex="60%">{{ loansAccountTemplate?.daysInMonthType.value }}</span>
       </div>
 
     </ng-container>
 
-    <ng-container *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+    <ng-container *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
 
       <div fxFlexFill>
         <span fxFlex="40%">Interest recalculation compounding on</span>
-        <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
+        <span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
       </div>
 
       <div fxFlexFill>
         <span fxFlex="40%">Frequency Interval for recalculation</span>
         <span fxFlex="60%">
-          <span>{{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
+          <span>{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
-          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
+          <span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
-                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday != null">
+                loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday != null">
-            on {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
+            on {{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
-          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
+          <span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
-                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay != null">on day
+                loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay != null">on day
-            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay}}</span>
+            {{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay}}</span>
-          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
+          <span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
-                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay == null &&
+                loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay == null &&
-                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay != null">on
+                loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay != null">on
-            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
+            {{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
-            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
+            {{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
         </span>
       </div>
 
     </ng-container>
 
-    <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled && loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id != 1">
+    <div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled && loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id != 1">
       <span fxFlex="40%">Frequency Interval for recalculation</span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
+      <span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
     </div>
 
     <ng-container *ngIf="multiDisburseLoan">
@@ -320,86 +305,81 @@
         <mat-label>Maximum allowed outstanding balance</mat-label>
         <input matInput required formControlName="maxOutstandingLoanBalance">
       </mat-form-field>
-      <span fxFlex *ngIf="!loansAccountProductTemplate?.product.disallowExpectedDisbursements">
+      <span fxFlex *ngIf="!loansAccountTemplate?.product?.disallowExpectedDisbursements">
-        <button type="button" mat-icon-button color="primary" (click)="addDisbursementDataEntry(disbursementData)">
+        <button type="button" mat-icon-button color="primary" (click)="addDisbursementDataEntry(disbursementData)"
+          [disabled]="isMultiDisbursedCompleted">
           <fa-icon icon="plus-circle" size="lg"></fa-icon>
         </button>
       </span>
 
-      <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="disbursementData"
+      <table mat-table [dataSource]="disbursementDataSource" [hidden]="disbursementDataSource.length === 0">
-          *ngFor="let item of disbursementData.controls; let i = index;">
 
-          <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+        <ng-container matColumnDef="expectedDisbursementDate">
+          <th mat-header-cell *matHeaderCellDef> Eexpected Disbursement Date </th>
+          <td mat-cell *matCellDef="let row">
+            {{ row.expectedDisbursementDate | dateFormat }} </td>
+        </ng-container>
 
-            <mat-form-field fxFlex="48%" (click)="expectedDisbursementDatePicker.open()">
+        <ng-container matColumnDef="principal">
-              <mat-label>Expected disbursement on</mat-label>
+          <th mat-header-cell *matHeaderCellDef> Principal </th>
-              <input matInput [required] ="multiDisburseLoan" [min]="minDate" [matDatepicker]="expectedDisbursementDatePicker"
+          <td mat-cell *matCellDef="let row">
-                formControlName="expectedDisbursementDate">
+            {{ row.principal }} </td>
-              <mat-datepicker-toggle matSuffix [for]="expectedDisbursementDatePicker"></mat-datepicker-toggle>
+        </ng-container>
-              <mat-datepicker #expectedDisbursementDatePicker></mat-datepicker>
-              <mat-error *ngIf="disbursementData.at(i).controls.expectedDisbursementDate.hasError('required')">
-                Expected disbursement on is <strong>required</strong>
-              </mat-error>
-            </mat-form-field>
 
-            <mat-form-field fxFlex="43%">
+        <ng-container matColumnDef="actions">
-              <mat-label>Principal</mat-label>
+          <th mat-header-cell *matHeaderCellDef> Actions </th>
-              <input type="number" matInput [required]="multiDisburseLoan" formControlName="principal">
+          <td mat-cell *matCellDef="let row; let rowIndex = index">
-              <mat-error *ngIf="disbursementData.at(i).controls.principal.hasError('required')">
+            <button type="button" mat-icon-button color="warn"
-                Principal is <strong>required</strong>
+              (click)="removeDisbursementDataEntry(rowIndex)" matTooltip="Delete"
-              </mat-error>
+              matTooltipPosition="left">
-            </mat-form-field>
+              <fa-icon icon="trash"></fa-icon>
-
+            </button>
-            <span fxFlex>
+          </td>
-              <button type="button" mat-icon-button (click)="removeDisbursementDataEntry(disbursementData, i)">
+        </ng-container>
-                <fa-icon icon="minus-circle" size="lg"></fa-icon>
-              </button>
-            </span>
-
-          </div>
-
-        </div>
 
+        <tr mat-header-row *matHeaderRowDef="disbursementDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: disbursementDisplayedColumns;"></tr>
 
+      </table>
     </ng-container>
 
     <ng-container
-      *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled  && loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
+      *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled  && loansAccountTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
 
       <div fxFlexFill>
         <span fxFlex="40%">Frequency for compounding</span>
-        <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
+        <span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
-          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
+          <span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
-            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null">
+            loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null">
-            on {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
+            on {{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
           </span>
-          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
+          <span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
-            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay != null">on day
+            loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay != null">on day
-            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
+            {{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
           </span>
-          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
+          <span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
-            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay == null &&
+            loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay == null &&
-            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on
+            loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on
-            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
+            {{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
-            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
+            {{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
           </span>
         </span>
       </div>
 
     </ng-container>
 
-    <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled && loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
+    <div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled && loansAccountTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
       <span fxFlex="40%">Frequency Interval for compounding</span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
+      <span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlex="50%">
-      <div fxLayout="column" fxFlex="50%" class="tableName">
+      <div fxLayout="column" fxFlex="50%" class="table_name">
         <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
       </div>
-  
+
       <div fxLayout="column" fxFlex="50%">
         <div fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-raised-button color="primary" (click)="addCollateral()">
@@ -414,22 +394,22 @@
         <th mat-header-cell *matHeaderCellDef> Name </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="value">
         <th mat-header-cell *matHeaderCellDef> Quantity </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="totalValue">
         <th mat-header-cell *matHeaderCellDef> Total Value </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
       </ng-container>
-      
+
       <ng-container matColumnDef="totalCollateralValue">
         <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="action">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let ele; let collateralIndex = index">
@@ -438,7 +418,7 @@
           </button>
         </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></tr>
     </table>
@@ -453,6 +433,9 @@
         Next&nbsp;&nbsp;
         <fa-icon icon="arrow-right"></fa-icon>
       </button>
+      <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
+        Cancel
+      </button>
     </div>
 
 </form>

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts

@@ -2,9 +2,14 @@
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
 import { LoansAccountAddCollateralDialogComponent } from 'app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 
 /**
  * Create Loans Account Terms Step
@@ -20,8 +25,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   @Input() loansAccountProductTemplate: any;
   /** Loans Account Template */
   @Input() loansAccountTemplate: any;
+  loansAccountTermsData: any;
+
   /** Is Multi Disburse Loan  */
-  @Input() multiDisburseLoan: any;
+  multiDisburseLoan: any;
   // @Input() loansAccountFormValid: LoansAccountFormValid
   @Input() loansAccountFormValid: boolean;
   // @Input collateralOptions: Collateral Options
@@ -51,6 +58,9 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   transactionProcessingStrategyData: any;
   /** Client Active Loan Data */
   clientActiveLoanData: any;
+  /** Multi Disbursement Data */
+  disbursementDataSource: {}[] = [];
+  currencyDisplaySymbol = '$';
 
   /** Check if value of collateral added  is more than principal amount */
   isCollateralSufficient = false;
@@ -60,62 +70,148 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   collateralDataSource: {}[] = [];
   /** Columns to be displayed in collateral table. */
   loanCollateralDisplayedColumns: string[] = ['type', 'value', 'totalValue', 'totalCollateralValue', 'action'];
+  /** Disbursement Data Displayed Columns */
+  disbursementDisplayedColumns: string[] = ['expectedDisbursementDate', 'principal', 'actions'];
+  /** Multi Disbursement Control */
+  totalMultiDisbursed: any = 0;
+  isMultiDisbursedCompleted = false;
+
   /** Component is pristine if there has been no changes by user interaction */
   pristine = true;
 
+  loanId: any = null;
+
   /**
    * Create Loans Account Terms Form
    * @param formBuilder FormBuilder
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
-      private settingsService: SettingsService,
+    private settingsService: SettingsService,
-      public dialog: MatDialog) {
+    private route: ActivatedRoute,
-    this.createloansAccountTermsForm();
+    public dialog: MatDialog) {
+      this.loanId = this.route.snapshot.params['loanId'];
+      this.createloansAccountTermsForm();
   }
   /**
    * Executes on change of input values
    */
   ngOnChanges() {
     if (this.loansAccountProductTemplate) {
+      this.loansAccountTermsData = this.loansAccountProductTemplate;
+      this.currencyDisplaySymbol = this.loansAccountTermsData.currency.displaySymbol;
+      if (this.loanId != null && this.loansAccountTemplate.accountNo) {
+        this.loansAccountTermsData = this.loansAccountTemplate;
+      }
+
       this.loansAccountTermsForm.patchValue({
-        'principal': this.loansAccountProductTemplate.principal,
+        'principalAmount': this.loansAccountTermsData.principal,
-        'loanTermFrequency': this.loansAccountProductTemplate.termFrequency,
+        'loanTermFrequency': this.loansAccountTermsData.termFrequency,
-        'loanTermFrequencyType': this.loansAccountProductTemplate.termPeriodFrequencyType.id,
+        'loanTermFrequencyType': this.loansAccountTermsData.termPeriodFrequencyType.id,
-        'numberOfRepayments': this.loansAccountProductTemplate.numberOfRepayments,
+        'numberOfRepayments': this.loansAccountTermsData.numberOfRepayments,
-        'repaymentEvery': this.loansAccountProductTemplate.repaymentEvery,
+        'repaymentEvery': this.loansAccountTermsData.repaymentEvery,
-        'repaymentFrequencyType': this.loansAccountProductTemplate.repaymentFrequencyType.id,
+        'repaymentFrequencyType': this.loansAccountTermsData.repaymentFrequencyType.id,
-        'interestRatePerPeriod': this.loansAccountProductTemplate.interestRatePerPeriod,
+        'interestRatePerPeriod': this.loansAccountTermsData.interestRatePerPeriod,
-        'amortizationType': this.loansAccountProductTemplate.amortizationType.id,
+        'amortizationType': this.loansAccountTermsData.amortizationType.id,
-        'isEqualAmortization': this.loansAccountProductTemplate.isEqualAmortization,
+        'isEqualAmortization': this.loansAccountTermsData.isEqualAmortization,
-        'interestType': this.loansAccountProductTemplate.interestType.id,
+        'interestType': this.loansAccountTermsData.interestType.id,
-        'isFloatingInterestRate': this.loansAccountProductTemplate.isLoanProductLinkedToFloatingRate ? false : '',
+        'isFloatingInterestRate': this.loansAccountTermsData.isLoanProductLinkedToFloatingRate ? false : '',
-        'interestCalculationPeriodType': this.loansAccountProductTemplate.interestCalculationPeriodType.id,
+        'interestCalculationPeriodType': this.loansAccountTermsData.interestCalculationPeriodType.id,
-        'allowPartialPeriodInterestCalcualtion': this.loansAccountProductTemplate.allowPartialPeriodInterestCalcualtion,
+        'allowPartialPeriodInterestCalcualtion': this.loansAccountTermsData.allowPartialPeriodInterestCalcualtion,
-        'inArrearsTolerance': this.loansAccountProductTemplate.inArrearsTolerance,
+        'inArrearsTolerance': this.loansAccountTermsData.inArrearsTolerance,
-        'graceOnPrincipalPayment': this.loansAccountProductTemplate.graceOnPrincipalPayment,
+        'graceOnPrincipalPayment': this.loansAccountTermsData.graceOnPrincipalPayment,
-        'graceOnInterestPayment': this.loansAccountProductTemplate.graceOnInterestPayment,
+        'graceOnInterestPayment': this.loansAccountTermsData.graceOnInterestPayment,
-        'graceOnArrearsAgeing': this.loansAccountProductTemplate.graceOnArrearsAgeing,
+        'graceOnArrearsAgeing': this.loansAccountTermsData.graceOnArrearsAgeing,
-        'transactionProcessingStrategyId': this.loansAccountProductTemplate.transactionProcessingStrategyId,
+        'transactionProcessingStrategyId': this.loansAccountTermsData.transactionProcessingStrategyId,
-        'graceOnInterestCharged': this.loansAccountProductTemplate.graceOnInterestCharged,
+        'graceOnInterestCharged': this.loansAccountTermsData.graceOnInterestCharged,
-        'fixedEmiAmount': this.loansAccountProductTemplate.fixedEmiAmount,
+        'fixedEmiAmount': this.loansAccountTermsData.fixedEmiAmount,
-        'maxOutstandingLoanBalance': this.loansAccountProductTemplate.maxOutstandingLoanBalance
+        'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance
       });
+
+      this.multiDisburseLoan = this.loansAccountTermsData.multiDisburseLoan;
+      if (this.loansAccountTermsData.disbursementDetails) {
+        this.disbursementDataSource = this.loansAccountTermsData.disbursementDetails;
+        this.totalMultiDisbursed = 0;
+        this.disbursementDataSource.forEach((item: any) => {
+          this.totalMultiDisbursed += item.principal;
+        });
+      }
+
+      this.collateralDataSource = this.loansAccountTermsData.collateral || [];
+
+      const allowAttributeOverrides = this.loansAccountTermsData.product.allowAttributeOverrides;
+      if (!allowAttributeOverrides.repaymentEvery) {
+        this.loansAccountTermsForm.controls.repaymentEvery.disable();
+        this.loansAccountTermsForm.controls.repaymentFrequencyType.disable();
+      }
+      if (!allowAttributeOverrides.interestType) {
+        this.loansAccountTermsForm.controls.interestType.disable();
+      }
+      if (!allowAttributeOverrides.amortizationType) {
+        this.loansAccountTermsForm.controls.amortizationType.disable();
+      }
+      if (!allowAttributeOverrides.interestCalculationPeriodType) {
+        this.loansAccountTermsForm.controls.interestCalculationPeriodType.disable();
+        this.loansAccountTermsForm.controls.allowPartialPeriodInterestCalcualtion.disable();
+      }
+      if (!allowAttributeOverrides.inArrearsTolerance) {
+        this.loansAccountTermsForm.controls.inArrearsTolerance.disable();
+      }
+      if (!allowAttributeOverrides.transactionProcessingStrategyId) {
+        this.loansAccountTermsForm.controls.transactionProcessingStrategyId.disable();
+      }
+      if (!allowAttributeOverrides.graceOnPrincipalAndInterestPayment) {
+        this.loansAccountTermsForm.controls.graceOnPrincipalPayment.disable();
+      }
+      if (!allowAttributeOverrides.graceOnPrincipalAndInterestPayment) {
+        this.loansAccountTermsForm.controls.graceOnInterestPayment.disable();
+      }
+      if (!allowAttributeOverrides.graceOnArrearsAgeing) {
+        this.loansAccountTermsForm.controls.graceOnArrearsAgeing.disable();
+      }
       this.setOptions();
     }
   }
 
   ngOnInit() {
-    this.maxDate = this.settingsService.businessDate;
+    this.maxDate = this.settingsService.maxFutureDate;
-    if (this.loansAccountTemplate) {
+    this.loansAccountTermsData = this.loansAccountProductTemplate;
-      if (this.loansAccountTemplate.loanProductId) {
+    if (this.loanId != null && this.loansAccountTemplate.accountNo) {
+      this.loansAccountTermsData = this.loansAccountTemplate;
+    }
+
+    if (this.loansAccountTermsData) {
+      if (this.loansAccountTermsData.loanProductId) {
         this.loansAccountTermsForm.patchValue({
-          'repaymentsStartingFromDate': this.loansAccountTemplate.expectedFirstRepaymentOnDate && new Date(this.loansAccountTemplate.expectedFirstRepaymentOnDate)
+          'repaymentsStartingFromDate': this.loansAccountTermsData.expectedFirstRepaymentOnDate && new Date(this.loansAccountTermsData.expectedFirstRepaymentOnDate)
         });
       }
+      this.loansAccountTermsForm.patchValue({
+        'principalAmount': this.loansAccountTermsData.principal,
+        'loanTermFrequency': this.loansAccountTermsData.termFrequency,
+        'loanTermFrequencyType': this.loansAccountTermsData.termPeriodFrequencyType.id,
+        'numberOfRepayments': this.loansAccountTermsData.numberOfRepayments,
+        'repaymentEvery': this.loansAccountTermsData.repaymentEvery,
+        'repaymentFrequencyType': this.loansAccountTermsData.repaymentFrequencyType.id,
+        'interestRatePerPeriod': this.loansAccountTermsData.interestRatePerPeriod,
+        'amortizationType': this.loansAccountTermsData.amortizationType.id,
+        'isEqualAmortization': this.loansAccountTermsData.isEqualAmortization,
+        'interestType': this.loansAccountTermsData.interestType.id,
+        'isFloatingInterestRate': this.loansAccountTermsData.isLoanProductLinkedToFloatingRate ? false : '',
+        'interestCalculationPeriodType': this.loansAccountTermsData.interestCalculationPeriodType.id,
+        'allowPartialPeriodInterestCalcualtion': this.loansAccountTermsData.allowPartialPeriodInterestCalcualtion,
+        'inArrearsTolerance': this.loansAccountTermsData.inArrearsTolerance,
+        'graceOnPrincipalPayment': this.loansAccountTermsData.graceOnPrincipalPayment,
+        'graceOnInterestPayment': this.loansAccountTermsData.graceOnInterestPayment,
+        'graceOnArrearsAgeing': this.loansAccountTermsData.graceOnArrearsAgeing,
+        'transactionProcessingStrategyId': this.loansAccountTermsData.transactionProcessingStrategyId,
+        'graceOnInterestCharged': this.loansAccountTermsData.graceOnInterestCharged,
+        'fixedEmiAmount': this.loansAccountTermsData.fixedEmiAmount,
+        'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance
+      });
     }
     this.createloansAccountTermsForm();
-    this.setCustomValidators();
+    // this.setCustomValidators();
   }
 
   /** Custom Validators for the form */
@@ -142,20 +238,18 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   /** Create Loans Account Terms Form */
   createloansAccountTermsForm() {
     this.loansAccountTermsForm = this.formBuilder.group({
-      'principal': ['', Validators.required],
+      'principalAmount': ['', Validators.required],
       'loanTermFrequency': ['', Validators.required],
       'loanTermFrequencyType': ['', Validators.required],
       'numberOfRepayments': ['', Validators.required],
       'repaymentEvery': ['', Validators.required],
       'repaymentFrequencyType': ['', Validators.required],
-      'disbursementData': this.formBuilder.array([]),
       'repaymentFrequencyNthDayType': [''],
       'repaymentFrequencyDayOfWeekType': [''],
       'repaymentsStartingFromDate': [''],
       'interestChargedFromDate': [''],
       'interestRatePerPeriod': [''],
       'interestType': [''],
-      // 'interestRateDifferential': [''],
       'isFloatingInterestRate': [''],
       'isEqualAmortization': [''],
       'amortizationType': ['', Validators.required],
@@ -175,51 +269,87 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   }
 
   /**
-   * Creates the Disbursement Data form.
+   * Gets the Disbursement Data array.
-   * @returns {FormGroup} Disbursement Data form.
+   * @returns {Array} Disbursement Data array.
    */
-  createDisbursementDataForm(): FormGroup {
+  get disbursementData() {
-    return this.formBuilder.group({
+    return {
-      'expectedDisbursementDate': [new Date()],
+      disbursementData: this.disbursementDataSource
-      'principal': ['']
+    };
+  }
+
+  /**
+   * Adds the Disbursement Data entry form to given Disbursement Data entry.
+   */
+  addDisbursementDataEntry() {
+    const currentPrincipalAmount = this.loansAccountTermsForm.get('principalAmount').value;
+    const formfields: FormfieldBase[] = [
+      new DatepickerBase({
+        controlName: 'expectedDisbursementDate',
+        label: 'Expected Disbursement Date',
+        value: new Date() || '',
+        type: 'datetime-local',
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        required: true,
+        order: 1
+      }),
+      new InputBase({
+        controlName: 'principal',
+        label: 'Principal',
+        value: (currentPrincipalAmount - this.totalMultiDisbursed),
+        type: 'number',
+        required: true,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Add Disbursement Details',
+      layout: { addButtonText: 'Add' },
+      formfields: formfields
+    };
+    const disbursementDialogRef = this.dialog.open(FormDialogComponent, { data });
+    disbursementDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const principal = response.data.value.principal * 1;
+        if ((this.totalMultiDisbursed + principal) <= currentPrincipalAmount) {
+          this.disbursementDataSource = this.disbursementDataSource.concat(response.data.value);
+          this.totalMultiDisbursed += principal;
+          this.isMultiDisbursedCompleted = (this.totalMultiDisbursed === currentPrincipalAmount);
+          this.pristine = false;
+        }
+      }
     });
   }
 
-  /**
-   * Gets the Disbursement Data form array.
-   * @returns {FormArray} Disbursement Data form array.
-   */
-    get disbursementData(): FormArray {
-    return this.loansAccountTermsForm.get('disbursementData') as FormArray;
-  }
-
-  /**
-   * Adds the Disbursement Data entry form to given Disbursement Data entry form array.
-   * @param {FormArray} disbursementDataFormArray Given affected gl entry form array (debit/credit).
-   */
-   addDisbursementDataEntry(disbursementDataFormArray: FormArray) {
-    disbursementDataFormArray.push(this.createDisbursementDataForm());
-  }
-
   /**
    * Removes the Disbursement Data entry form from given Disbursement Data entry form array at given index.
-   * @param {FormArray} disbursementDataFormArray Given Disbursement Data entry form array.
    * @param {number} index Array index from where Disbursement Data entry form needs to be removed.
    */
-   removeDisbursementDataEntry(disbursementDataFormArray: FormArray, index: number) {
+  removeDisbursementDataEntry(index: number) {
-    disbursementDataFormArray.removeAt(index);
+    const currentPrincipalAmount = this.loansAccountTermsForm.get('principalAmount').value;
+    const dialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `this` }
+    });
+    dialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        const principal = this.disbursementDataSource[index]['principal'] * 1;
+        this.disbursementDataSource.splice(index, 1);
+        this.disbursementDataSource = this.disbursementDataSource.concat([]);
+        this.totalMultiDisbursed -= principal;
+        this.isMultiDisbursedCompleted = (this.totalMultiDisbursed === currentPrincipalAmount);
+      }
+    });
   }
 
   /**
    * Add a Collateral to the loan
    */
-    addCollateral() {
+  addCollateral() {
     const addCollateralDialogRef = this.dialog.open(LoansAccountAddCollateralDialogComponent, {
       data: { collateralOptions: this.collateralOptions }
     });
-    console.log(this.collateralOptions);
     addCollateralDialogRef.afterClosed().subscribe((response: any) => {
-      console.log(this.loanPrincipal);
       if (response.data) {
         const collateralData = {
           type: response.data.value.collateral,

src/app/loans/loans-routing.module.ts

@@ -51,6 +51,8 @@ import { GLIMViewResolver } from './glim-account/glim-account-view.resolver';
 import { GSIMAccountsResolver } from 'app/groups/common-resolvers/gsim-account-resolver';
 import { GLIMLoanTemplateResolver } from './common-resolvers/glim-loan-template.resolver';
 import { GroupViewResolver } from 'app/groups/common-resolvers/group-view.resolver';
+import { LoanDelinquencyTagsResolver } from './common-resolvers/loan-delinquency-tags.resolver';
+import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -116,6 +118,19 @@ const routes: Routes = [
                 }
               ]
             },
+            {
+              path: 'delinquencytags',
+              data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+              resolve: {
+                loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+              },
+              children: [
+                {
+                  path: '',
+                  component: LoanDelinquencyTagsTabComponent
+                },
+              ]
+            },
             {
               path: 'loan-collateral',
               component: LoanCollateralTabComponent,
@@ -250,7 +265,7 @@ const routes: Routes = [
         },
         {
           path: 'edit-loans-account',
-          data: { title: extract('Edit Loans Account'), breadcrumb: 'Edit Loans Account', routeParamBreadcrumb: 'Edit' },
+          data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
           component: EditLoansAccountComponent,
           resolve: {
             loansAccountAndTemplate: LoansAccountAndTemplateResolver
@@ -293,6 +308,7 @@ const routes: Routes = [
     LoanNotesResolver,
     LoanDatatablesResolver,
     LoanDatatableResolver,
+    LoanDelinquencyTagsResolver,
     LoanActionButtonResolver,
     LoansAccountTemplateResolver,
     LoanDocumentsResolver,

src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html

@@ -0,0 +1,36 @@
+<div class="container">
+
+  <h3>Loan Delinquency Tags</h3>
+
+  <table mat-table [dataSource]="loanDelinquencyTags" *ngIf="loanDelinquencyTags.length>0">
+
+    <ng-container matColumnDef="classification">
+      <th mat-header-cell *matHeaderCellDef> Delinquency Classification </th>
+      <td mat-cell *matCellDef="let item"> {{ item.delinquencyRange.classification }}
+        <span *ngIf="item.delinquencyRange.maximumAgeDays">( {{ item.delinquencyRange.minimumAgeDays }} - {{ item.delinquencyRange.maximumAgeDays }} )</span>
+        <span *ngIf="!item.delinquencyRange.maximumAgeDays">( {{ item.delinquencyRange.minimumAgeDays }} )</span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="addedOn">
+      <th mat-header-cell *matHeaderCellDef> Added On </th>
+      <td mat-cell *matCellDef="let item">
+        <span *ngIf="item.addedOnDate">
+          {{ item.addedOnDate  | dateFormat }}
+        </span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="liftedOn">
+      <th mat-header-cell *matHeaderCellDef> Lifted On </th>
+      <td mat-cell *matCellDef="let item">
+        <span *ngIf="item.liftedOnDate">
+          {{ item.liftedOnDate  | dateFormat }}
+        </span>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="loanDelinquencyTagsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanDelinquencyTagsColumns;"></tr>
+  </table>
+</div>

src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.scss

@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+}
+
+.container {
+  padding-top: 1%;
+  padding-bottom: 2%;
+  .delete-button {
+      margin-left: 1%;
+  }
+}

src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.spec.ts

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

src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loan-delinquency-tags-tab',
+  templateUrl: './loan-delinquency-tags-tab.component.html',
+  styleUrls: ['./loan-delinquency-tags-tab.component.scss']
+})
+export class LoanDelinquencyTagsTabComponent implements OnInit {
+
+  loanDelinquencyTags: any;
+  loanDelinquencyTagsColumns: string[] = ['classification', 'addedOn', 'liftedOn'];
+
+  constructor(private route: ActivatedRoute) {
+    this.route.parent.data.subscribe((data: { loanDelinquencyTagsData: any }) => {
+      this.loanDelinquencyTags = data.loanDelinquencyTagsData;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/loans/loans-view/loans-view.component.html

@@ -100,6 +100,12 @@
           Transactions
         </a>
       </ng-container>
+      <ng-container>
+        <a mat-tab-link [routerLink]="['./delinquencytags']" routerLinkActive #delinquencytags="routerLinkActive"
+          [active]="delinquencytags.isActive">
+          Delinquency Tags
+        </a>
+      </ng-container>
       <ng-container *ngIf="loanDetailsData.collateral">
         <a mat-tab-link [routerLink]="['./loan-collateral']" routerLinkActive #loanCollateralDetails="routerLinkActive"
           [active]="loanCollateralDetails.isActive">

src/app/loans/loans.module.ts

@@ -71,6 +71,7 @@ import { LoansAccountViewGuarantorDetailsDialogComponent } from './custom-dialog
 import { LoansAccountAddCollateralDialogComponent } from './custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
 import { LoanCreditBalanceRefundComponent } from './loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component';
+import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
 
 /**
  * Loans Module
@@ -140,7 +141,8 @@ import { LoanCreditBalanceRefundComponent } from './loans-view/loan-account-acti
     GlimDetailsStepComponent,
     GlimChargesStepComponent,
     GlimTermsStepComponent,
-    GlimPreviewStepComponent
+    GlimPreviewStepComponent,
+    LoanDelinquencyTagsTabComponent
   ],
   providers: [ ],
 })

src/app/loans/loans.service.ts

@@ -47,15 +47,19 @@ export class LoansService {
     return this.http.delete(`/loans/${loanId}`);
   }
 
+  getDelinquencyTags(loanId: string): Observable<any> {
+    return this.http.get(`/loans/${loanId}/delinquencytags`);
+  }
+
   /**
    * Returns the loan template data with specific condition
    * @param loanId Loan Id
    */
   getLoanTemplate(loanId: string): Observable<any> {
     const httpParams = new HttpParams()
-                      .set('fields', 'id,loanOfficerId,loanOfficerOptions')
+      .set('fields', 'id,loanOfficerId,loanOfficerOptions')
-                      .set('staffInSelectedOfficeOnly', 'true')
+      .set('staffInSelectedOfficeOnly', 'true')
-                      .set('template', 'true');
+      .set('template', 'true');
     return this.http.get(`/loans/${loanId}`, { params: httpParams });
   }
 
@@ -102,7 +106,7 @@ export class LoansService {
     const httpParams = new HttpParams()
       .set('associations', 'all')
       .set('exclude', 'guarantors,futureSchedule');
-    return this.http.get(`/loans/${loanId}`, {params: httpParams});
+    return this.http.get(`/loans/${loanId}`, { params: httpParams });
   }
 
   getApproveAssociationsDetails(loanId: any) {
@@ -156,13 +160,13 @@ export class LoansService {
    */
   submitLoanActionButton(loanId: string, data: any, command: any) {
     const httpParams = new HttpParams().set('command', command);
-    return this.http.post(`/loans/${loanId}/transactions`, data, {params: httpParams});
+    return this.http.post(`/loans/${loanId}/transactions`, data, { params: httpParams });
   }
 
   getLoanScreenReportsData(): Observable<any> {
     const httpParams = new HttpParams().set('entityId', '1')
-                                       .set('typeId', '0');
+      .set('typeId', '0');
-    return this.http.get(`/templates`, {params: httpParams});
+    return this.http.get(`/templates`, { params: httpParams });
   }
 
   /**
@@ -222,19 +226,19 @@ export class LoansService {
    */
   loanActionButtons(loanId: any, command: any, data?: any): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
-    return this.http.post(`/loans/${loanId}`, data, {params: httpParams});
+    return this.http.post(`/loans/${loanId}`, data, { params: httpParams });
   }
 
   /**
    * @param {string|number} loanId Loan Id.
    * @param {any} foreclosuredata ForeClosure Data
    */
-  getForeclosureData(loanId: string|number, foreclosuredata: any) {
+  getForeclosureData(loanId: string | number, foreclosuredata: any) {
     const httpParams = new HttpParams().set('command', foreclosuredata.command)
-                                       .set('dateFormat', foreclosuredata.dateFormat)
+      .set('dateFormat', foreclosuredata.dateFormat)
-                                       .set('locale', foreclosuredata.locale)
+      .set('locale', foreclosuredata.locale)
-                                       .set('transactionDate', foreclosuredata.transactionDate);
+      .set('transactionDate', foreclosuredata.transactionDate);
-    return this.http.get(`/loans/${loanId}/transactions/template`, {params: httpParams});
+    return this.http.get(`/loans/${loanId}/transactions/template`, { params: httpParams });
 
   }
 
@@ -244,7 +248,7 @@ export class LoansService {
    */
   loanForclosureData(loanId: any, data: any) {
     const httpParams = new HttpParams().set('command', 'foreclosure');
-    return this.http.post(`/loans/${loanId}/transactions`, data, {params: httpParams});
+    return this.http.post(`/loans/${loanId}/transactions`, data, { params: httpParams });
   }
 
   /**
@@ -260,7 +264,7 @@ export class LoansService {
    */
   submitRescheduleData(data: any) {
     const httpParams = new HttpParams().set('command', 'reschedule');
-    return this.http.post('/rescheduleloans', data, {params: httpParams});
+    return this.http.post('/rescheduleloans', data, { params: httpParams });
   }
 
   /**
@@ -270,19 +274,19 @@ export class LoansService {
    */
   getLoansAccountTemplateResource(entityId: any, isGroup: boolean, productId?: any): Observable<any> {
     let httpParams = new HttpParams().set('activeOnly', 'true')
-                                      .set('staffInSelectedOfficeOnly', 'true');
+      .set('staffInSelectedOfficeOnly', 'true');
     httpParams = productId ? httpParams.set('productId', productId) : httpParams;
     httpParams = isGroup ? httpParams.set('groupId', entityId)
-                                      .set('templateType', 'group') :
+      .set('templateType', 'group') :
-                                      httpParams.set('clientId', entityId)
+      httpParams.set('clientId', entityId)
-                                      .set('templateType', 'individual');
+        .set('templateType', 'individual');
     return this.http.get('/loans/template', { params: httpParams });
   }
 
   getLoansAccountAndTemplateResource(loanId: any): Observable<any> {
     const httpParams = new HttpParams().set('associations', 'charges,collateral,meeting,multiDisburseDetails')
-                                       .set('staffInSelectedOfficeOnly', 'true')
+      .set('staffInSelectedOfficeOnly', 'true')
-                                       .set('template', 'true');
+      .set('template', 'true');
     return this.http.get(`/loans/${loanId}`, { params: httpParams });
   }
 
@@ -292,8 +296,8 @@ export class LoansService {
    */
   getLoansCollateralTemplateResource(productId: any): Observable<any> {
     const httpParams = new HttpParams().set('fields', 'id, loanCollateralOptions')
-                                  .set('productId', productId)
+      .set('productId', productId)
-                                  .set('templateType', 'collateral');
+      .set('templateType', 'collateral');
     return this.http.get('/loans/template', { params: httpParams });
   }
 
@@ -346,7 +350,7 @@ export class LoansService {
 
   getTemplateData(templateId: any, loanId: any): Observable<any> {
     const httpParams = new HttpParams().set('loanId', loanId);
-    return this.http.post(`/templates/${templateId}`, {}, { params: httpParams, responseType: 'text'});
+    return this.http.post(`/templates/${templateId}`, {}, { params: httpParams, responseType: 'text' });
   }
 
   /**
@@ -444,16 +448,17 @@ export class LoansService {
    * @param glimId GLIM Id of account to get data for.
    * @returns {Observable<any>} GLIM Account data.
    */
-   getGLIMAccountData(glimId: string, groupId: string): Observable<any> {
+  getGLIMAccountData(glimId: string, groupId: string): Observable<any> {
     return this.http.get(`/loans/glimAccount/${glimId}`);
   }
 
   getGLIMLoanAccountTemplate(groupId: any): Observable<any> {
     const httpParams = new HttpParams().set('groupId', groupId)
-                                        .set('lendingStrategy', '300')
+      .set('lendingStrategy', '300')
-                                        .set('templateType', 'jlgbulk');
+      .set('templateType', 'jlgbulk');
-  return this.http.get('/loans/template', { params: httpParams });
+    return this.http.get('/loans/template', { params: httpParams });
   }
+
   createGlimAccount(glimAccount: any): Observable<any> {
     return this.http.post('/batches?enclosingTransaction=true', glimAccount);
   }