Merge pull request #2478 from alberto-art3ch/fix/loan_tranche_details_issue

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

src/app/clients/clients.component.html

@@ -30,7 +30,7 @@
     </div>
   </div>
 
-  <div [hidden]="!existsClientsToFilter">
+  <div [hidden]="!existsClientsToFilter" class="client-list">
     <div *ngIf="isLoading">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>

src/app/clients/clients.component.scss

@@ -158,3 +158,7 @@ $color: #e2e4ec;
     }
   }
 }
+
+.client-list {
+  padding: 1%;
+}

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

@@ -3,9 +3,14 @@
 
   <div class="flex-fill">
     <span class="flex-40">{{ 'labels.inputs.Product' | translate }}:</span>
-    <span class="flex-60">{{
+    <span class="flex-60">
-      loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name'
+      <mifosx-long-text
-    }}</span>
+        [chars]="60"
+        textValue="
+      {{ loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name' }}"
+      >
+      </mifosx-long-text
+    ></span>
   </div>
 
   <div class="flex-fill" *ngIf="loansAccount.loanOfficerId">

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

@@ -391,32 +391,28 @@
 
     <mat-divider class="flex-98"></mat-divider>
 
-    <div class="flex-fill">
+    <div class="flex-100 layout-row">
       <span class="flex-40"
         ><b>{{ 'labels.inputs.Recalculate Interest' | translate }}</b></span
       >
       <span class="flex-60">{{ loansAccountTermsData?.isInterestRecalculationEnabled | yesNo }}</span>
     </div>
 
-    <div class="flex-fill" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+    <div class="flex-100 layout-row" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
       <span class="flex-40">{{ 'labels.inputs.Days in year' | translate }}</span>
       <span class="flex-60">{{ loansAccountTermsData.daysInYearType.value | translateKey: 'catalogs' }}</span>
     </div>
+    <div class="flex-100 layout-row" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+      <span class="flex-40">{{ 'labels.inputs.Days in month' | translate }}</span>
+      <span class="flex-60">{{ loansAccountTermsData.daysInMonthType.value | translateKey: 'catalogs' }}</span>
+    </div>
+    <div class="flex-100 layout-row" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+      <span class="flex-40">{{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
+      <span class="flex-60">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
+    </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <div class="flex-fill" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
-        <span class="flex-60">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
-      </div>
-
-      <div class="flex-fill" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span class="flex-40">{{ 'labels.inputs.Days in month' | translate }}</span>
-        <span class="flex-60">{{ loansAccountTermsData.daysInMonthType.value | translateKey: 'catalogs' }}</span>
-      </div>
-    </ng-container>
-
-    <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <div class="flex-fill">
         <span class="flex-40">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}</span>
         <span class="flex-60">{{
           loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
@@ -424,7 +420,7 @@
         }}</span>
       </div>
 
-      <div class="flex-fill">
+      <div class="flex-100 layout-row">
         <span class="flex-40">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
         <span class="flex-60">
           <span>{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.value }}</span>
@@ -458,7 +454,7 @@
     </ng-container>
 
     <div
-      class="flex-fill"
+      class="flex-100 layout-row"
       *ngIf="
         loansAccountTermsData?.isInterestRecalculationEnabled &&
         loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id !== 1
@@ -470,7 +466,7 @@
       }}</span>
     </div>
 
-    <div class="flex-fill">
+    <div class="flex-100 layout-row">
       <span class="flex-40"
         ><b>{{ 'labels.inputs.Enable income capitalization' | translate }}</b></span
       >
@@ -479,13 +475,15 @@
 
     <ng-container *ngIf="multiDisburseLoan">
       <mat-divider class="flex-98"></mat-divider>
-      <div class="flex-fill" *ngIf="allowAddDisbursementDetails()">
+      <div class="flex-100 layout-row" *ngIf="allowAddDisbursementDetails()">
         <h4 class="mat-h4 flex-98">{{ 'labels.heading.Loan Tranche Details' | translate }}</h4>
+      </div>
+      <div class="flex-100 layout-row">
         <mat-form-field class="flex-48">
           <mat-label>{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}</mat-label>
           <input matInput required formControlName="maxOutstandingLoanBalance" />
         </mat-form-field>
-        <span class="flex">
+        <span class="flex-48">
           <button
             type="button"
             mat-icon-button
@@ -498,7 +496,7 @@
           </button>
         </span>
       </div>
-      <div class="flex-fill" *ngIf="!allowAddDisbursementDetails()">
+      <div class="flex-100 layout-row" *ngIf="!allowAddDisbursementDetails()">
         <h4 class="mat-h4 flex-98">
           {{ 'labels.heading.Loan Tranche Details are not allowed for this Loan Product' | translate }}
         </h4>
@@ -506,7 +504,7 @@
 
       <table mat-table [dataSource]="disbursementDataSource" [hidden]="disbursementDataSource.length === 0">
         <ng-container matColumnDef="expectedDisbursementDate">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Eexpected Disbursement Date' | translate }}</th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expected Disbursement Date' | translate }}</th>
           <td mat-cell *matCellDef="let row">
             {{ row.expectedDisbursementDate | dateFormat }}
           </td>

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 {

src/app/loans/loans.service.ts

@@ -6,6 +6,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { DisbursementData } from './models/loan-account.model';
 
 /**
  * Loans service.
@@ -668,4 +669,12 @@ export class LoansService {
     delete loansAccountData.allowPartialPeriodInterestCalculation;
     return loansAccountData;
   }
+
+  saveLoanDisbursementDetailsData(disbursementData: DisbursementData[]): void {
+    localStorage.setItem('disbursementData', JSON.stringify(disbursementData));
+  }
+
+  getLoanDisbursementDetailsData(): DisbursementData[] {
+    return JSON.parse(localStorage.getItem('disbursementData'));
+  }
 }

src/app/loans/models/loan-account.model.ts

@@ -115,3 +115,10 @@ export interface RepaymentSchedulePeriod {
   totalWrittenOffForPeriod?: number;
   totalInstallmentAmountForPeriod?: number;
 }
+
+export interface DisbursementData {
+  actualDisbursementDate: Date;
+  expectedDisbursementDate: Date;
+  principal: number;
+  id?: number;
+}

src/assets/translations/cs-CS.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Dny splatnosti pro případ splácení",
       "Due for collection on": "Termín odběru dne",
       "Dropdown": "Rozbalovací nabídka",
-      "Eexpected Disbursement Date": "Očekávané datum výplaty",
+      "Expected Disbursement Date": "Očekávané datum výplaty",
       "Effective Date": "Datum účinnosti",
       "Effective From": "Účinné od",
       "Email": "E-mailem",

src/assets/translations/de-DE.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Fälligkeitstage für das Rückzahlungsereignis",
       "Due for collection on": "Zur Abholung fällig am",
       "Dropdown": "Runterfallen",
-      "Eexpected Disbursement Date": "Voraussichtliches Auszahlungsdatum",
+      "Expected Disbursement Date": "Voraussichtliches Auszahlungsdatum",
       "Effective Date": "Datum des Inkrafttretens",
       "Effective From": "Gültig ab",
       "Email": "Email",

src/assets/translations/en-US.json

@@ -1547,7 +1547,7 @@
       "Due days for repayment event": "Due days for repayment event",
       "Due for collection on": "Due for collection on",
       "Dropdown": "Dropdown",
-      "Eexpected Disbursement Date": "Expected Disbursement Date",
+      "Expected Disbursement Date": "Expected Disbursement Date",
       "Effective Date": "Effective Date",
       "Effective From": "Effective From",
       "Email": "Email",

src/assets/translations/es-CL.json

@@ -1542,7 +1542,7 @@
       "Due days for repayment event": "Días de vencimiento para el evento de pago",
       "Due for collection on": "Vencimiento para su cobro el",
       "Dropdown": "Desplegable",
-      "Eexpected Disbursement Date": "Fecha prevista de curso",
+      "Expected Disbursement Date": "Fecha prevista de curso",
       "Effective Date": "Fecha efectiva",
       "Effective From": "Válido desde",
       "Email": "Correo electrónico",

src/assets/translations/es-MX.json

@@ -1542,7 +1542,7 @@
       "Due days for repayment event": "Días de vencimiento para el evento de pago",
       "Due for collection on": "Vencimiento para su cobro el",
       "Dropdown": "Desplegable",
-      "Eexpected Disbursement Date": "Fecha prevista de desembolso",
+      "Expected Disbursement Date": "Fecha prevista de desembolso",
       "Effective Date": "Fecha efectiva",
       "Effective From": "Válido desde",
       "Email": "Correo electrónico",

src/assets/translations/fr-FR.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Jours d'échéance pour l'événement de remboursement",
       "Due for collection on": "À encaisser le",
       "Dropdown": "Dérouler",
-      "Eexpected Disbursement Date": "Date de décaissement prévue",
+      "Expected Disbursement Date": "Date de décaissement prévue",
       "Effective Date": "Date effective",
       "Effective From": "À compter de",
       "Email": "E-mail",

src/assets/translations/it-IT.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Giorni di scadenza per l'evento di rimborso",
       "Due for collection on": "Scadenza per il ritiro il",
       "Dropdown": "Cadere in picchiata",
-      "Eexpected Disbursement Date": "Data di esborso prevista",
+      "Expected Disbursement Date": "Data di esborso prevista",
       "Effective Date": "Data effettiva",
       "Effective From": "Efficace da",
       "Email": "E-mail",

src/assets/translations/ko-KO.json

@@ -1544,7 +1544,7 @@
       "Due days for repayment event": "상환행사 마감일",
       "Due for collection on": "수집 마감일:",
       "Dropdown": "쓰러지 다",
-      "Eexpected Disbursement Date": "예상 지급일",
+      "Expected Disbursement Date": "예상 지급일",
       "Effective Date": "발효일",
       "Effective From": "시작일부터",
       "Email": "이메일",

src/assets/translations/lt-LT.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Grąžinimo įvykio terminas",
       "Due for collection on": "Iki paėmimo terminas",
       "Dropdown": "Išskleidžiamasis meniu",
-      "Eexpected Disbursement Date": "Numatoma išmokėjimo data",
+      "Expected Disbursement Date": "Numatoma išmokėjimo data",
       "Effective Date": "Įsigaliojimo data",
       "Effective From": "Veiksmingas nuo",
       "Email": "El. paštas",

src/assets/translations/lv-LV.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Atmaksas pasākuma termiņš",
       "Due for collection on": "Iekasēšanas termiņš ir",
       "Dropdown": "Nomest lejā",
-      "Eexpected Disbursement Date": "Paredzamais izmaksas datums",
+      "Expected Disbursement Date": "Paredzamais izmaksas datums",
       "Effective Date": "Spēkā stāšanās datums",
       "Effective From": "Efektīvs no",
       "Email": "E-pasts",

src/assets/translations/ne-NE.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "पुन: भुक्तानी कार्यक्रमको लागि बाँकी दिनहरू",
       "Due for collection on": "संकलन गर्न बाँकी छ",
       "Dropdown": "ड्रपडाउन",
-      "Eexpected Disbursement Date": "अपेक्षित वितरण मिति",
+      "Expected Disbursement Date": "अपेक्षित वितरण मिति",
       "Effective Date": "लागु हुने मिति",
       "Effective From": "बाट प्रभावकारी",
       "Email": "इमेल",

src/assets/translations/pt-PT.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Dias de vencimento para evento de reembolso",
       "Due for collection on": "Devido à coleta em",
       "Dropdown": "Suspenso",
-      "Eexpected Disbursement Date": "Data prevista de desembolso",
+      "Expected Disbursement Date": "Data prevista de desembolso",
       "Effective Date": "Data efetiva",
       "Effective From": "Eficaz a partir de",
       "Email": "E-mail",

src/assets/translations/sw-SW.json

@@ -1543,7 +1543,7 @@
       "Due days for repayment event": "Siku zinazohitajika kwa tukio la ulipaji",
       "Due for collection on": "Inadaiwa kukusanywa",
       "Dropdown": "Kunjuzi",
-      "Eexpected Disbursement Date": "Tarehe inayotarajiwa ya Utoaji",
+      "Expected Disbursement Date": "Tarehe inayotarajiwa ya Utoaji",
       "Effective Date": "Tarehe ya Kutumika",
       "Effective From": "Kuanzia",
       "Email": "Barua pepe",