feat: add loan view page (original schedule tab) (#834)

Fixes: #812

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

@@ -20,6 +20,7 @@ import { LoanNotesResolver } from './common-resolvers/loan-notes-resolver';
 import { ChargesTabComponent } from './loans-view/charges-tab/charges-tab.component';
 import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-charges.resolver';
 import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/overdue-charges-tab.component';
+import { OriginalScheduleTabComponent } from './loans-view/original-schedule-tab/original-schedule-tab.component';
 
 const routes: Routes = [
   {
@@ -50,6 +51,14 @@ const routes: Routes = [
             loanDetailsData: LoanDetailsGeneralResolver
           }
         },
+        {
+          path: 'original-schedule',
+          component: OriginalScheduleTabComponent,
+          data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsChargesResolver
+          }
+        },
         {
           path: 'overdue-charges',
           component: OverdueChargesTabComponent,

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

@@ -58,6 +58,11 @@
 	  <a mat-tab-link [routerLink]="['./accountdetail']" routerLinkActive #accountdetail="routerLinkActive" [active]="accountdetail.isActive">
 		Account Details
 	  </a>
+	  <ng-container *ngIf="loanDetailsData.originalSchedule">
+		<a mat-tab-link [routerLink]="['./original-schedule']" routerLinkActive #originalSchedule="routerLinkActive" [active]="originalSchedule.isActive">
+		  Original Schedule
+		</a>
+      </ng-container>
 	  <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
 		<a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive" [active]="overduecharges.isActive">
 			Overdue Charges

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

@@ -0,0 +1,72 @@
+<div class="container">
+
+  <table mat-table [dataSource]="originalScheduleDetails.periods" matSort>
+
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate | date}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> Total</b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="principalDue">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Principal Due </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPrincipalExpected | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="balanceOfLoan">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance Of Loan </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
+      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Interest </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalInterestCharged | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="fees">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Fees </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalFeeChargesCharged | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="penalties">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Penalties </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.penaltyChargesDue | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPenaltyChargesCharged | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="outstanding">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalRepaymentExpected | number }} </b> </td>
+    </ng-container>
+
+    <!-- Header row first group -->
+    <ng-container matColumnDef="header">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> </th>
+    </ng-container>
+
+    <!-- Header row second group -->
+    <ng-container matColumnDef="header-amount">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Loan Amount and Balance </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-total-cost">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Total Cost of Loan </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-installment-totals">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> Installment Totals </th>
+    </ng-container>
+
+    <tr mat-header-row *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-footer-row *matFooterRowDef="displayedColumns"></tr>
+
+  </table>
+
+</div>

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

@@ -0,0 +1,8 @@
+table {
+    width: 100%;
+    margin: 3% 0%;
+}
+
+.container {
+    padding-bottom: 2%;
+}

src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.spec.ts

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

src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-original-schedule-tab',
+  templateUrl: './original-schedule-tab.component.html',
+  styleUrls: ['./original-schedule-tab.component.scss']
+})
+export class OriginalScheduleTabComponent implements OnInit {
+
+  /** Loan Details Data */
+  originalScheduleDetails: any;
+  /** Columns to be displayed in original schedule table. */
+  displayedColumns: string[] = ['date', 'principalDue', 'balanceOfLoan', 'interest', 'fees', 'penalties', 'outstanding'];
+
+  /**
+   * Retrieves the loans with associations data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+      this.originalScheduleDetails = data.loanDetailsAssociationData.originalSchedule;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/loans/loans.module.ts

@@ -16,6 +16,7 @@ import { AccountDetailsComponent } from './loans-view/account-details/account-de
 import { NotesTabComponent } from './loans-view/notes-tab/notes-tab.component';
 import { ChargesTabComponent } from './loans-view/charges-tab/charges-tab.component';
 import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/overdue-charges-tab.component';
+import { OriginalScheduleTabComponent } from './loans-view/original-schedule-tab/original-schedule-tab.component';
 
 /**
  * Loans Module
@@ -32,6 +33,7 @@ import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/ove
     NotesTabComponent,
     ChargesTabComponent,
     OverdueChargesTabComponent,
+    OriginalScheduleTabComponent,
   ],
   providers: [DatePipe],
 })