feat: add view loan page (repayment schedule tab) (#838)

Fixes: #813

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

@@ -21,6 +21,7 @@ import { ChargesTabComponent } from './loans-view/charges-tab/charges-tab.compon
 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';
+import { RepaymentScheduleTabComponent } from './loans-view/repayment-schedule-tab/repayment-schedule-tab.component';
 
 const routes: Routes = [
   {
@@ -59,6 +60,14 @@ const routes: Routes = [
             loanDetailsAssociationData: LoanDetailsChargesResolver
           }
         },
+        {
+          path: 'repayment-schedule',
+          component: RepaymentScheduleTabComponent,
+          data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsChargesResolver
+          }
+        },
         {
           path: 'overdue-charges',
           component: OverdueChargesTabComponent,

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

@@ -62,7 +62,10 @@
 		<a mat-tab-link [routerLink]="['./original-schedule']" routerLinkActive #originalSchedule="routerLinkActive" [active]="originalSchedule.isActive">
 		  Original Schedule
 		</a>
-      </ng-container>
+	  </ng-container>
+	  <a mat-tab-link [routerLink]="['./repayment-schedule']" routerLinkActive #repaymentSchedule="routerLinkActive" [active]="repaymentSchedule.isActive">
+		Repayment Schedule
+	  </a>
 	  <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/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -0,0 +1,138 @@
+<div class="container">
+
+  <table mat-table [dataSource]="repaymentScheduleDetails.periods">
+
+    <ng-container matColumnDef="number">
+      <th mat-header-cell *matHeaderCellDef> # </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.period }} </td>
+      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+    </ng-container>
+
+    <ng-container matColumnDef="days">
+      <th mat-header-cell *matHeaderCellDef> Days </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.daysInPeriod }} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> Total</b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate | date}} </td>
+      <td mat-footer-cell *matFooterCellDef>  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="paiddate">
+      <th mat-header-cell *matHeaderCellDef> Paid Date </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.obligationsMetOnDate | date}} </td>
+      <td mat-footer-cell *matFooterCellDef>  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="check">
+      <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
+      <td mat-cell *matCellDef="let ele">
+        <span *ngIf="ele.obligationsMetOnDate"> <i class='fa fa-check'></i> </span> 
+      </td>
+      <td mat-footer-cell *matFooterCellDef> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="principalDue">
+      <th mat-header-cell *matHeaderCellDef> Principal Due </th>
+      <td mat-cell class="check" *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
+      <td mat-footer-cell class="check" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | number }}</b>  </td>
+    </ng-container>
+
+    <ng-container matColumnDef="balanceOfLoan">
+      <th mat-header-cell *matHeaderCellDef> 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> Interest </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="fees">
+      <th mat-header-cell *matHeaderCellDef> Fees </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="penalties">
+      <th mat-header-cell *matHeaderCellDef> Penalties </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.penaltyChargesDue | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="due">
+      <th mat-header-cell *matHeaderCellDef> Due </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalDueForPeriod | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="paid">
+      <th mat-header-cell *matHeaderCellDef> Paid </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalPaidForPeriod | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="inadvance">
+      <th mat-header-cell *matHeaderCellDef> In advance </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalPaidInAdvanceForPeriod | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="late">
+      <th mat-header-cell *matHeaderCellDef> Late </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalPaidLateForPeriod | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | number }} </b> </td>
+    </ng-container>
+
+    <ng-container *ngIf="isWaived">
+      <ng-container matColumnDef="waived">
+        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.totalWaivedForPeriod | number}} </td>
+        <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | number }} </b> </td>
+      </ng-container>
+    </ng-container>
+
+    <ng-container *ngIf="!isWaived">
+      <ng-container matColumnDef="waived">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let ele"> </td>
+        <td mat-footer-cell *matFooterCellDef> <b> </b> </td>
+      </ng-container>
+    </ng-container>
+
+    <ng-container matColumnDef="outstanding">
+      <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | number}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | number }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="header">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="5"> </th>
+    </ng-container>
+
+    <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]="6"> 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>
+
+<!-- <p>It works</p> -->

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

@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+  margin: 3% 0%;
+}
+
+.container {
+  padding-bottom: 2%;
+}
+
+.check {
+  padding-left: 15px;
+}

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

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

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

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-repayment-schedule-tab',
+  templateUrl: './repayment-schedule-tab.component.html',
+  styleUrls: ['./repayment-schedule-tab.component.scss']
+})
+export class RepaymentScheduleTabComponent implements OnInit {
+
+  /** Loan Repayment Schedule Details Data */
+  repaymentScheduleDetails: any;
+  /** Stores if there is any waived amount */
+  isWaived: boolean;
+  /** Columns to be displayed in original schedule table. */
+  displayedColumns: string[] = ['number', 'days', 'date', 'paiddate', 'check', 'principalDue', 'balanceOfLoan', 'interest', 'fees', 'penalties', 'due', 'paid', 'inadvance', 'late', 'waived', '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.repaymentScheduleDetails = data.loanDetailsAssociationData.repaymentSchedule;
+      console.log(this.repaymentScheduleDetails);
+
+    });
+  }
+
+  ngOnInit() {
+    this.isWaived = this.repaymentScheduleDetails.totalWaived > 0;
+  }
+
+}

src/app/loans/loans.module.ts

@@ -17,6 +17,7 @@ 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';
+import { RepaymentScheduleTabComponent } from './loans-view/repayment-schedule-tab/repayment-schedule-tab.component';
 
 /**
  * Loans Module
@@ -34,6 +35,7 @@ import { OriginalScheduleTabComponent } from './loans-view/original-schedule-tab
     ChargesTabComponent,
     OverdueChargesTabComponent,
     OriginalScheduleTabComponent,
+    RepaymentScheduleTabComponent,
   ],
   providers: [DatePipe],
 })