Loan account with Term variations details tab

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

@@ -60,6 +60,7 @@ import { ExternalAssetOwnerActiveTransferResolver } from './common-resolvers/ext
 import { LoanCollateralsResolver } from './common-resolvers/loan-collaterals.resolver';
 import { LoanDelinquencyDataResolver } from './common-resolvers/loan-delinquency-data.resolver';
 import { LoanDelinquencyActionsResolver } from './common-resolvers/loan-delinquency-actions.resolver';
+import { LoanTermVariationsTabComponent } from './loans-view/loan-term-variations-tab/loan-term-variations-tab.component';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -165,6 +166,14 @@ const routes: Routes = [
               loanCollaterals: LoanCollateralsResolver
             }
           },
+          {
+            path: 'term-variations',
+            component: LoanTermVariationsTabComponent,
+            data: { title: 'Loan Term Variations', breadcrumb: 'Loan Term Variations', routeParamBreadcrumb: false },
+            resolve: {
+              loanDetailsData: LoanDetailsResolver
+            },
+          },
           {
             path: 'loan-tranche-details',
             component: LoanTrancheDetailsComponent,

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

@@ -0,0 +1,29 @@
+<div class="container">
+
+    <h3>{{"labels.heading.Term Variations" | translate}}</h3>
+    <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>
+</div>

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

@@ -0,0 +1,12 @@
+table {
+    width: 100%;
+}
+
+.container {
+    padding-top: 1%;
+    padding-bottom: 2%;
+
+    .delete-button {
+        margin-left: 1%;
+    }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanTermVariationsTabComponent } from './loan-term-variations-tab.component';
+
+describe('LoanTermVariationsTabComponent', () => {
+  let component: LoanTermVariationsTabComponent;
+  let fixture: ComponentFixture<LoanTermVariationsTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoanTermVariationsTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoanTermVariationsTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loan-term-variations-tab',
+  templateUrl: './loan-term-variations-tab.component.html',
+  styleUrls: ['./loan-term-variations-tab.component.scss']
+})
+export class LoanTermVariationsTabComponent implements OnInit {
+
+  /** Loan Details Data */
+  loanTermVariationsData: any[] = [];
+
+  loanId: number;
+
+  loanDTermVariationsColumns: string[] = ['termType', 'applicableFrom', 'value', 'specificToInstallment'];
+
+  constructor(private route: ActivatedRoute) {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
+      this.loanTermVariationsData = data.loanDetailsData.loanTermVariations;
+    });
+    this.loanId = this.route.parent.parent.snapshot.params['loanId'];
+  }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -173,6 +173,12 @@
           {{"labels.inputs.Loan Tranche Details" | translate}}
         </a>
       </ng-container>
+      <ng-container *ngIf="loanDetailsData.loanTermVariations">
+        <a mat-tab-link [routerLink]="['./term-variations']" routerLinkActive #termVariations="routerLinkActive"
+          [active]="termVariations.isActive">
+          {{"labels.inputs.Term Variations" | translate}}
+        </a>
+      </ng-container>
       <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
         <a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive"
           [active]="overduecharges.isActive">

src/app/loans/loans.module.ts

@@ -82,6 +82,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { LoanDelinquencyActionDialogComponent } from './custom-dialog/loan-delinquency-action-dialog/loan-delinquency-action-dialog.component';
 import { LoanReagingComponent } from './loans-view/loan-account-actions/loan-reaging/loan-reaging.component';
 import { LoanReamortizeComponent } from './loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component';
+import { LoanTermVariationsTabComponent } from './loans-view/loan-term-variations-tab/loan-term-variations-tab.component';
 
 /**
  * Loans Module
@@ -167,7 +168,8 @@ import { LoanReamortizeComponent } from './loans-view/loan-account-actions/loan-
     ExternalAssetTransferComponent,
     LoanDelinquencyActionDialogComponent,
     LoanReagingComponent,
-    LoanReamortizeComponent
+    LoanReamortizeComponent,
+    LoanTermVariationsTabComponent
   ],
   providers: [ ],
 })