Enhancement in loan payment views (#1667)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -24,7 +24,7 @@
               {{ 'Principal' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
+            <div fxFlex="50%" class="r-amount right-label">
               {{ dataObject.principalPortion | number }}
             </div>
 
@@ -32,7 +32,7 @@
               {{ 'Interest' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
+            <div fxFlex="50%" class="r-amount right-label">
               {{ dataObject.interestPortion | number }}
             </div>
 
@@ -40,7 +40,7 @@
               {{ 'Fees' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
+            <div fxFlex="50%" class="r-amount right-label">
               {{ dataObject.feeChargesPortion | number }}
             </div>
 
@@ -48,14 +48,16 @@
               {{ 'Penalties' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
+            <div fxFlex="50%" class="r-amount right-label">
               {{ dataObject.penaltyChargesPortion | number }}
             </div>
           </div>
 
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <mat-label>Transaction Amount</mat-label>
-            <input type="number" matInput required formControlName="transactionAmount">
+            <span matTextSuffix class="m-l-10">{{ dataObject.currency.code }}</span>
+            <span fxFlex="auto"></span>
+            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
             <mat-error *ngIf="repaymentLoanForm.controls.transactionAmount.hasError('required')">
               Transaction Amount <strong>is required</strong>
             </mat-error>

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

@@ -5,3 +5,11 @@
 .container {
     max-width: 37rem;
 }
+
+.right-input {
+  text-align: right;
+}
+
+.right-label {
+  padding-right: 25px !important;
+}

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

@@ -24,38 +24,40 @@
               {{ 'Principal' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
-              {{ dataObject.principalPortion | number }}
+            <div fxFlex="50%" class="r-amount right-label">
+              {{ prepayData.principalPortion | number }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
               {{ 'Interest' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
-              {{ dataObject.interestPortion | number }}
+            <div fxFlex="50%" class="r-amount right-label">
+              {{ prepayData.interestPortion | number }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
               {{ 'Fees' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
-              {{ dataObject.feeChargesPortion | number }}
+            <div fxFlex="50%" class="r-amount right-label">
+              {{ prepayData.feeChargesPortion | number }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
               {{ 'Penalties' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount">
-              {{ dataObject.penaltyChargesPortion | number }}
+            <div fxFlex="50%" class="r-amount right-label">
+              {{ prepayData.penaltyChargesPortion | number }}
             </div>
           </div>
 
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <mat-label>Transaction Amount</mat-label>
-            <input type="number" matInput required formControlName="transactionAmount">
+            <span matTextSuffix class="m-l-10">{{ prepayData.currency.code }}</span>
+            <span fxFlex="auto"></span>
+            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
             <mat-error *ngIf="prepayLoanForm.controls.transactionAmount.hasError('required')">
               Transaction Amount <strong>is required</strong>
             </mat-error>

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

@@ -5,3 +5,11 @@
 .container {
     max-width: 37rem;
 }
+
+.right-input {
+  text-align: right;
+}
+
+.right-label {
+  padding-right: 25px !important;
+}

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

@@ -37,6 +37,8 @@ export class PrepayLoanComponent implements OnInit {
   /** Prepay Loan form. */
   prepayLoanForm: FormGroup;
 
+  prepayData: any;
+
   /**
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {LoansService} loanService Loan Service.
@@ -61,6 +63,7 @@ export class PrepayLoanComponent implements OnInit {
     this.maxDate = this.settingsService.businessDate;
     this.createprepayLoanForm();
     this.setPrepayLoanDetails();
+    this.prepayData = this.dataObject;
   }
 
   /**
@@ -84,6 +87,17 @@ export class PrepayLoanComponent implements OnInit {
     this.prepayLoanForm.patchValue({
       transactionAmount: this.dataObject.amount
     });
+    this.prepayLoanForm.get('transactionDate').valueChanges.subscribe((transactionDate: string) => {
+      const prepayDate = this.dateUtils.formatDate(transactionDate, this.settingsService.dateFormat);
+
+      this.loanService.getLoanPrepayLoanActionTemplate(this.loanId, prepayDate)
+      .subscribe((response: any) => {
+        this.prepayData = response;
+        this.prepayLoanForm.patchValue({
+          transactionAmount: this.prepayData.amount
+        });
+      });
+    });
   }
 
   /**