fix: Loan Tranche Details isn't displayed after switching between tabs

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

@@ -23,7 +23,7 @@
 
           <div class="layout-row-wrap" *ngIf="showDetails()">
             <div class="flex-50 mat-body-strong">
-              {{ 'Principal' | translate }}
+              {{ 'labels.inputs.Principal' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">
@@ -31,7 +31,7 @@
             </div>
 
             <div class="flex-50 mat-body-strong">
-              {{ 'Interest' | translate }}
+              {{ 'labels.inputs.Interest' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">
@@ -39,7 +39,7 @@
             </div>
 
             <div class="flex-50 mat-body-strong">
-              {{ 'Fees' | translate }}
+              {{ 'labels.inputs.Fees' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">
@@ -47,7 +47,7 @@
             </div>
 
             <div class="flex-50 mat-body-strong">
-              {{ 'Penalties' | translate }}
+              {{ 'labels.inputs.Penalties' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">

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

@@ -23,7 +23,7 @@
 
           <div class="layout-row-wrap">
             <div class="flex-50 mat-body-strong">
-              {{ 'Principal' | translate }}
+              {{ 'labels.inputs.Principal' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">
@@ -31,7 +31,7 @@
             </div>
 
             <div class="flex-50 mat-body-strong">
-              {{ 'Interest' | translate }}
+              {{ 'labels.inputs.Interest' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">
@@ -39,7 +39,7 @@
             </div>
 
             <div class="flex-50 mat-body-strong">
-              {{ 'Fees' | translate }}
+              {{ 'labels.inputs.Fees' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">
@@ -47,7 +47,7 @@
             </div>
 
             <div class="flex-50 mat-body-strong">
-              {{ 'Penalties' | translate }}
+              {{ 'labels.inputs.Penalties' | translate }}
             </div>
 
             <div class="flex-50 r-amount right-label">

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 import { LoansService } from 'app/loans/loans.service';
+import { DisbursementData } from 'app/loans/models/loan-account.model';
 import { SettingsService } from 'app/settings/settings.service';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -35,7 +36,7 @@ export class LoanTrancheDetailsComponent implements OnInit {
   currentPrincipalAmount: number;
   minDate = new Date(2000, 0, 1);
   maxDate = new Date(2100, 0, 1);
-  disbursementDataSource: {}[] = [];
+  disbursementDataSource: DisbursementData[] = [];
   totalMultiDisbursed: number = null;
   disallowExpectedDisbursements = false;
   pristine = true;
@@ -46,7 +47,8 @@ export class LoanTrancheDetailsComponent implements OnInit {
    */
   constructor(
     private route: ActivatedRoute,
-    public dialog: MatDialog,
+    private router: Router,
+    private dialog: MatDialog,
     private loanServices: LoansService,
     private settingsService: SettingsService,
     private dateUtils: Dates
@@ -55,7 +57,6 @@ export class LoanTrancheDetailsComponent implements OnInit {
       this.loanId = data.loanDetailsData.id;
       this.loanDetails = data.loanDetailsData;
       this.disallowExpectedDisbursements = this.loanDetails.disallowExpectedDisbursements || false;
-      this.disbursementDataSource = data.loanDetailsData.disbursementDetails;
       this.currentPrincipalAmount = this.loanDetails.approvedPrincipal;
     });
   }
@@ -63,6 +64,12 @@ export class LoanTrancheDetailsComponent implements OnInit {
   ngOnInit() {
     this.maxDate = this.settingsService.maxFutureDate;
     this.status = this.loanDetails.status.value;
+    this.disbursementDataSource = this.loanServices.getLoanDisbursementDetailsData();
+    this.disbursementDataSource.forEach((data: DisbursementData) => {
+      if (!data.id) {
+        this.pristine = false;
+      }
+    });
   }
 
   showAddTrancheButtons() {
@@ -156,6 +163,7 @@ export class LoanTrancheDetailsComponent implements OnInit {
         const principal = response.data.value.principal * 1;
         if (this.totalMultiDisbursed + principal <= this.currentPrincipalAmount) {
           this.disbursementDataSource = this.disbursementDataSource.concat(response.data.value);
+          this.loanServices.saveLoanDisbursementDetailsData(this.disbursementDataSource);
           this.pristine = false;
         }
       }
@@ -226,7 +234,13 @@ export class LoanTrancheDetailsComponent implements OnInit {
       .editDisbursements(this.loanId, payload)
       .toPromise()
       .then((result) => {
+        this.reload();
         this.pristine = true;
       });
   }
+
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/clients`, { skipLocationChange: true }).then(() => this.router.navigate([url]));
+  }
 }

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

@@ -67,6 +67,7 @@ export class LoansViewComponent implements OnInit {
         this.loanStatus = this.loanDetailsData.status;
         this.loanSubStatus = this.loanDetailsData.subStatus === undefined ? null : this.loanDetailsData.subStatus;
         this.currency = this.loanDetailsData.currency;
+        loansService.saveLoanDisbursementDetailsData(this.loanDetailsData.disbursementDetails);
         if (this.loanStatus.active) {
           this.loanDetailsData.transactions.forEach((lt: LoanTransaction) => {
             if (!lt.manuallyReversed) {

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -211,7 +211,7 @@
       *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"
     ></tr>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" class="table-row"></tr>
     <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
   </table>
 

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss

@@ -6,8 +6,13 @@ table {
   margin: 2% 0%;
 }
 
+.table-row {
+  font-size: small;
+}
+
 .container {
   padding-bottom: 2%;
+  width: 98%;
 }
 
 .check {