Loan Tranche Section Added

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.
    */