Loan account with Fixed Length attribute

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

@@ -86,7 +86,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="20%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
+    <mat-form-field fxFlex="14%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
       <mat-label>{{"labels.inputs.Select On" | translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
@@ -96,7 +96,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="20%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
+    <mat-form-field fxFlex="14%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
       <mat-label>{{"labels.inputs.Select Day" | translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
@@ -124,7 +124,7 @@
         </mat-select>
       </mat-form-field>
     
-      <mat-form-field fxFlex="23%">
+      <mat-form-field fxFlex="14%">
         <mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
         <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
           <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
@@ -135,8 +135,13 @@
           {{"labels.inputs.Amortization Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
+      
+      <mat-form-field fxFlex="14%" *ngIf="isEqualPrincipalPayments()">
+        <mat-label>{{"labels.inputs.Principal Percentage Per Installment" | translate}}</mat-label>
+        <input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment">
+      </mat-form-field>
 
-      <mat-checkbox fxFlex="23%" formControlName="isEqualAmortization"
+      <mat-checkbox fxFlex="14%" formControlName="isEqualAmortization"
         [checked]="loansAccountTermsData?.isEqualAmortization">
         <p>{{"labels.inputs.Is Equal Amortization" | translate}}</p>
       </mat-checkbox>
@@ -175,6 +180,7 @@
       </div>
 
     </ng-container>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Loan Schedule" | translate}}</h4>
 
     <div fxFlex="48%" *ngIf="loanScheduleType">
       <span fxFlex="40%"><p>{{"labels.inputs.Loan Schedule Type" | translate}}</p></span>

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

@@ -269,10 +269,19 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         this.calculateLoanTerm(numberOfRepayments, repaymentEvery);
       });
 
-      this.loansAccountTermsForm.get('loanTermFrequencyType').valueChanges
+    this.loansAccountTermsForm.get('loanTermFrequencyType').valueChanges
         .subscribe(loanTermFrequencyType => {
           this.loansAccountTermsForm.patchValue({'repaymentFrequencyType': loanTermFrequencyType});
       });
+
+    this.loansAccountTermsForm.get('amortizationType').valueChanges
+      .subscribe(amortizationType => {
+        if (amortizationType === 0) {  // Equal Principal Payments
+          this.loansAccountTermsForm.addControl('fixedPrincipalPercentagePerInstallment', new UntypedFormControl(''));
+        } else {  // Equal Installments
+          this.loansAccountTermsForm.removeControl('fixedPrincipalPercentagePerInstallment');
+        }
+    });
   }
 
   setAdvancedPaymentStrategyControls(): void {
@@ -282,7 +291,7 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         this.loansAccountTermsForm.removeControl('fixedLength');
         if (this.loansAccountTermsData.product.fixedLength) {
           this.loansAccountTermsForm.addControl('interestRatePerPeriod', new UntypedFormControl({value: 0, disabled: true}, Validators.required));
-          this.loansAccountTermsForm.addControl('fixedLength', new UntypedFormControl({value: this.loansAccountTermsData.product.fixedLength, disabled: true}));
+          this.loansAccountTermsForm.addControl('fixedLength', new UntypedFormControl(this.loansAccountTermsData.product.fixedLength));
         } else {
           this.loansAccountTermsForm.addControl('interestRatePerPeriod', new UntypedFormControl(this.loansAccountTermsData.interestRatePerPeriod, Validators.required));
         }
@@ -296,6 +305,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
     return false;
   }
 
+  isEqualPrincipalPayments(): boolean {
+    return (this.loansAccountTermsForm.value.amortizationType === 0);
+  }
+
   /** Create Loans Account Terms Form */
   createloansAccountTermsForm() {
     this.loansAccountTermsForm = this.formBuilder.group({
@@ -493,9 +506,7 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
    * Returns loans account terms form value.
    */
   get loansAccountTerms() {
-    const terms = this.loansAccountTermsForm.getRawValue();
-    delete terms['fixedLength'];
-    return terms;
+    return this.loansAccountTermsForm.getRawValue();
   }
 
   get loanCollateral() {

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

@@ -1,27 +1,37 @@
-<div class="container">
+<div class="container p-b-20">
   <h3> {{"labels.heading.Loan Details" | translate}} </h3>
 
     <div fxLayout="row wrap" fxLayout.lt-md="column">
 
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate}}:</span>
+            <span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate}}</span>
             <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName }}</span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Repayments" | translate}}:</span>
+            <span fxFlex="50%">{{"labels.inputs.Repayments" | translate}}</span>
             <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value}}
-            <span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0">
-              &nbsp;on&nbsp;{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value}}
+            <span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0" class="m-l-10">
+              <span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value}}
             </span>
             </span>
         </div>
 
+        <div fxFlexFill *ngIf="loanDetails.fixedLength">
+            <span fxFlex="50%"> {{"labels.inputs.Fixed Length" | translate}} </span>
+            <span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value}}</span>
+        </div>
+
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Amortization" | translate}} </span>
             <span fxFlex="50%"> {{loanDetails.amortizationType.value}} </span>
         </div>
 
+        <div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
+            <span fxFlex="50%"> {{"labels.inputs.Principal Percentage Per Installment" | translate}} </span>
+            <span fxFlex="50%"> {{loanDetails.fixedPrincipalPercentagePerInstallment | formatNumber}} %</span>
+        </div>
+
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Equal Amortization" | translate}} </span>
             <span fxFlex="50%"> {{loanDetails.isEqualAmortization | yesNo}} </span>
@@ -29,7 +39,12 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value}}) - {{"labels.text." + loanDetails.interestType.value | translate}} </span>
+            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value}}) </span>
+        </div>
+
+        <div fxFlexFill>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Type" | translate}} </span>
+            <span fxFlex="50%"> {{"labels.text." + loanDetails.interestType.value | translate}} </span>
         </div>
 
         <div fxFlexFill>
@@ -48,12 +63,12 @@
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%"> Enable Installment Level Delinquency </span>
+          <span fxFlex="50%"> {{"labels.inputs.Enable Installment Level Delinquency" | translate}} </span>
           <span fxFlex="50%"> {{loanDetails.enableInstallmentLevelDelinquency | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Fund Source</span>
+            <span fxFlex="50%"> {{"labels.inputs.Fund Source" | translate}} </span>
             <span fxFlex="50%" *ngIf="loanDetails.fundName"> {{loanDetails.fundName}} </span>
             <span fxFlex="50%" *ngIf="!loanDetails.fundName"> {{"labels.inputs.Unassigned" | translate}} </span>
         </div>
@@ -73,11 +88,6 @@
             <span fxFlex="50%"> {{loanDetails.allowPartialPeriodInterestCalcualtion | yesNo}} </span>
         </div>
 
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Type" | translate}}</span>
-            <span fxFlex="50%"> {{"labels.text." + loanDetails.interestType.value | translate}} </span>
-        </div>
-
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Submitted on" | translate}}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.submittedOnDate | dateFormat }} </span>