Loan Tranche Section Added

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">
+      [loansAccountTemplate] = "loansAccountTemplate" [multiDisburseLoan] = "multiDisburseLoan">
       </mifosx-loans-account-terms-step>
 
     </mat-step>

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

@@ -33,6 +33,8 @@ export class CreateLoansAccountComponent implements OnInit {
   loansAccountProductTemplate: any;
   /** Collateral Options */
   collateralOptions: any;
+  /** Multi Disburse Loan */
+  multiDisburseLoan: any;
 
   /**
    * Sets loans account create form.
@@ -65,6 +67,12 @@ export class CreateLoansAccountComponent implements OnInit {
     this.loansService.getLoansCollateralTemplateResource(this.loansAccountProductTemplate.loanProductId).subscribe((response: any) => {
       this.collateralOptions = response.loanCollateralOptions;
     });
+    const clientId = this.loansAccountTemplate.clientId;
+    const productId= this.loansAccountProductTemplate.loanProductId
+    this.loansService.getLoansAccountTemplateResource(clientId, productId).subscribe((response: any) => {
+      this.multiDisburseLoan = response.multiDisburseLoan;
+    });
+    
   }
 
   /** Get Loans Account Details Form Data */
@@ -113,6 +121,10 @@ export class CreateLoansAccountComponent implements OnInit {
         type: collateralEle.type,
         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),
@@ -146,6 +158,9 @@ export class CreateLoansAccountComponent implements OnInit {
     if (!(loansAccountData.isFloatingInterestRate === false)) {
       delete loansAccountData.isFloatingInterestRate;
     }
+    if (!(this.multiDisburseLoan)) {
+      delete loansAccountData.disbursementData;
+    }
 
     this.loansService.createLoansAccount(loansAccountData).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId], { relativeTo: this.route });

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

@@ -325,6 +325,53 @@
       <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
     </div>
 
+    <ng-container *ngIf="multiDisburseLoan">
+      <mat-divider fxFlex="98%"></mat-divider>
+      <h4 fxFlex="98%" class="mat-h4">Loan Tranche Details</h4>
+      <mat-form-field fxFlex="48%">
+        <mat-label>Maximum allowed outstanding balance</mat-label>
+        <input matInput required formControlName="loanTermFrequency">
+      </mat-form-field>
+      <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="disbursementData"
+          *ngFor="let item of disbursementData.controls; let i = index;">
+
+          <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+
+            <mat-form-field fxFlex="48%">
+              <mat-label>Expected disbursement on</mat-label>
+              <input matInput [required] ="multiDisburseLoan" [min]="minDate" [matDatepicker]="expectedDisbursementDatePicker"
+                formControlName="expectedDisbursementDate">
+              <mat-datepicker-toggle matSuffix [for]="expectedDisbursementDatePicker"></mat-datepicker-toggle>
+              <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%">
+              <mat-label>Principal</mat-label>
+              <input type="number" matInput [required]="multiDisburseLoan" formControlName="principal">
+              <mat-error *ngIf="disbursementData.at(i).controls.principal.hasError('required')">
+                Principal is <strong>required</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <span fxFlex>
+              <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeDisbursementDataEntry(disbursementData, i)">
+                <fa-icon icon="minus-circle" size="lg"></fa-icon>
+              </button>
+              <button *ngIf="i === 0" type="button" mat-icon-button color="primary" (click)="addDisbursementDataEntry(disbursementData)">
+                <fa-icon icon="plus-circle" size="lg"></fa-icon>
+              </button>
+            </span>
+
+          </div>
+
+        </div>
+
+
+    </ng-container>
+
     <ng-container
       *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled  && loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
 

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /**
@@ -17,6 +17,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   @Input() loansAccountProductTemplate: any;
   /** Loans Account Template */
   @Input() loansAccountTemplate: any;
+  /**Is Multi Disburse Loan  */
+  @Input() multiDisburseLoan: any;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -132,6 +134,7 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
       'numberOfRepayments': ['', Validators.required],
       'repaymentEvery': ['', Validators.required],
       'repaymentFrequencyType': ['', Validators.required],
+      'disbursementData': this.formBuilder.array([this.createDisbursementDataForm()]),
       'repaymentFrequencyNthDayType': [''],
       'repaymentFrequencyDayOfWeekType': [''],
       'repaymentsStartingFromDate': [''],
@@ -157,6 +160,42 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
     });
   }
 
+  /**
+   * Creates the Disbursement Data form.
+   * @returns {FormGroup} Disbursement Data form.
+   */
+  createDisbursementDataForm(): FormGroup {
+    return this.formBuilder.group({
+      'expectedDisbursementDate': [new Date()],
+      'principal': ['']
+    });
+  }
+
+    /**
+   * 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) {
+    disbursementDataFormArray.removeAt(index);
+  }
+
   /**
    * Sets all select dropdown options.
    */