Enhancement in loan payment views (#1667)

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

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -49,7 +49,7 @@ export class LoanActionButtonResolver implements Resolve<Object> {
     } else if (loanActionButton === 'Reschedule') {
       return this.loansService.rescheduleLoanTemplate();
     } else if (loanActionButton === 'Prepay Loan') {
-      return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
+      return this.loansService.getLoanPrepayLoanActionTemplate(loanId, null);
     } else if (loanActionButton === 'Add Collateral') {
       return this.loansService.getLoanCollateralTemplate(loanId);
     } else if (loanActionButton === 'Disburse to Savings') {

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

@@ -73,14 +73,12 @@ const routes: Routes = [
       {
         path: ':loanId',
         data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
-        resolve: {
-          loanDetailsData: LoanDetailsResolver
-        },
         children: [
           {
             path: '',
             component: LoansViewComponent,
             resolve: {
+              loanDetailsData: LoanDetailsResolver,
               loanDatatables: LoanDatatablesResolver
             },
             children: [

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

@@ -20,7 +20,7 @@
         <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
       </ng-container>
 
-      <ng-container matColumnDef="dueasof">
+      <ng-container matColumnDef="dueDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
       </ng-container>
@@ -32,7 +32,7 @@
 
       <ng-container matColumnDef="due">
         <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
-        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amount| number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }} {{ charge.amount| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">

src/app/loans/loans-view/charges-tab/charges-tab.component.ts

@@ -35,7 +35,7 @@ export class ChargesTabComponent implements OnInit {
   /** Status */
   status: any;
   /** Columns to be displayed in charges table. */
-  displayedColumns: string[] = ['name', 'feepenalty', 'paymentdueat', 'dueasof', 'calculationtype', 'due', 'paid', 'waived', 'outstanding', 'actions'];
+  displayedColumns: string[] = ['name', 'feepenalty', 'paymentdueat', 'dueDate', 'calculationtype', 'due', 'paid', 'waived', 'outstanding', 'actions'];
   /** Data source for charges table. */
   dataSource: MatTableDataSource<any>;
 

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
+        });
+      });
+    });
   }
 
   /**

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

@@ -73,7 +73,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code }} {{ transactionData.currency.code }}
+          {{ transactionData.amount | currency }} {{ transactionData.currency.code }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.externalId">
@@ -110,7 +110,7 @@
               <ng-container matColumnDef="amount">
                 <th mat-header-cell *matHeaderCellDef> Amount </th>
                 <td mat-cell *matCellDef="let transactionRel">
-                  {{ transactionRel.amount | currency:transactionData.currency.code }} {{ transactionData.currency.code }}
+                  {{ transactionRel.amount | currency }} {{ transactionData.currency.code }}
                 </td>
               </ng-container>
               <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/loans/loans.service.ts

@@ -30,6 +30,17 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/transactions/template`, { params: httpParams });
   }
 
+  getLoanPrepayLoanActionTemplate(loanId: string, transactionDate: string): Observable<any> {
+    if (!transactionDate) {
+      transactionDate = this.dateUtils.formatDate(this.settingsService.businessDate, this.settingsService.dateFormat);
+    }
+    const httpParams = new HttpParams().set('command', 'prepayLoan')
+      .set('transactionDate', transactionDate)
+      .set('locale', this.settingsService.language.code)
+      .set('dateFormat', this.settingsService.dateFormat);
+    return this.http.get(`/loans/${loanId}/transactions/template`, { params: httpParams });
+  }
+
   getLoanForeclosureActionTemplate(loanId: string): Observable<any> {
     const httpParams = new HttpParams()
       .set('command', 'foreclosure')

src/assets/styles/_form.scss

@@ -31,3 +31,8 @@ textarea.noresize {
 .mat-tab-body-content {
   margin-bottom: 20px;
 }
+
+.mat-datepicker-input {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}