Loan Term variations including Interest Pauses

src/app/core/utils/dates.ts

@@ -48,4 +48,8 @@ export class Dates {
     return JSON.parse(localStorage.getItem('mifosXLanguage'));
   }
 
+  calculateDiff(date1: Date, date2: Date){
+    return Math.floor((Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate()) - Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate()) ) /(1000 * 60 * 60 * 24));
+  }
+
 }

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

@@ -172,7 +172,8 @@ const routes: Routes = [
             component: LoanTermVariationsTabComponent,
             data: { title: 'Loan Term Variations', breadcrumb: 'Loan Term Variations', routeParamBreadcrumb: false },
             resolve: {
-              loanTermVariationsData: LoanTermVariationsResolver
+              loanDetailsData: LoanDetailsResolver,
+              interestPausesData: LoanTermVariationsResolver
             },
           },
           {

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html

@@ -1,16 +1,35 @@
 <div class="container">
   <h3>{{ 'labels.heading.Term Variations' | translate }}</h3>
-  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData?.length > 0">
+  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData.length>0">
+    <ng-container matColumnDef="termType">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+      <td mat-cell *matCellDef="let item">{{ item.termType.value | translate }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="applicableFrom">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Added On" | translate}} </th>
+      <td mat-cell *matCellDef="let item">{{ item.termVariationApplicableFrom | dateFormat }}</td>
+    </ng-container>
+    <ng-container matColumnDef="value">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate}} </th>
+      <td mat-cell *matCellDef="let item">{{ item.decimalValue | formatNumber }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="specificToInstallment">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Specific to Installment" | translate}} </th>
+      <td mat-cell *matCellDef="let item">{{ item.isSpecificToInstallment | yesNo }}</td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="loanDTermVariationsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns;"></tr>
+  </table>
+
+  <h3 class="m-t-20">{{ 'labels.heading.Interest Pauses' | translate }}</h3>
+  <table mat-table class="m-t-20" [dataSource]="interestPausesData" *ngIf="interestPausesData?.length > 0">
     <ng-container matColumnDef="row">
       <th mat-header-cell *matHeaderCellDef>#</th>
       <td mat-cell *matCellDef="let item; let idx = index">{{ idx + 1 }}</td>
     </ng-container>
 
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Id' | translate }}</th>
-      <td mat-cell *matCellDef="let item">{{ item.id }}</td>
-    </ng-container>
-
     <ng-container matColumnDef="startDate">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
       <td mat-cell *matCellDef="let item">{{ item.startDate | dateFormat }}</td>
@@ -21,14 +40,19 @@
       <td mat-cell *matCellDef="let item">{{ item.endDate | dateFormat }}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="loanTermVariationsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanTermVariationsColumns"></tr>
+    <ng-container matColumnDef="days">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Days' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.days | formatNumber }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="interestPausesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: interestPausesColumns"></tr>
   </table>
 
-  <div class="alert" [hidden]="loanTermVariationsData?.length > 0">
+  <div class="alert" [hidden]="interestPausesData?.length > 0">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
       {{ 'labels.text.No data found' | translate }}
     </div>
   </div>
-</div>
+</div>

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-loan-term-variations-tab',
@@ -10,12 +11,22 @@ export class LoanTermVariationsTabComponent {
 
   /** Loan Term Variation Data */
   loanTermVariationsData: any[] = [];
-  loanTermVariationsColumns: string[] = ['row', 'id', 'startDate', 'endDate'];
+  loanDTermVariationsColumns: string[] = ['termType', 'applicableFrom', 'value', 'specificToInstallment'];
+  /** Interest Pauses Data */
+  interestPausesData: any[] = [];
+  interestPausesColumns: string[] = ['row', 'startDate', 'endDate', 'days'];
 
-  constructor(private route: ActivatedRoute) {
-    this.loanTermVariationsData = [];
-    this.route.data.subscribe((data: { loanTermVariationsData: any, }) => {
-      this.loanTermVariationsData = data.loanTermVariationsData;
+  constructor(private route: ActivatedRoute,
+    private dates: Dates
+  ) {
+    this.interestPausesData = [];
+    this.route.data.subscribe((data: { loanDetailsData: any, interestPausesData: any }) => {
+      this.loanTermVariationsData = data.loanDetailsData.loanTermVariations;
+      this.interestPausesData = [];
+      data.interestPausesData?.forEach((item: any) => {
+        item.days = dates.calculateDiff(new Date(item.startDate), new Date(item.endDate));
+        this.interestPausesData.push(item);
+      });
     });
   }
 }