Add loan reschedule preview and fix broken link on task inbox reschedule tab

src/app/loans/common-resolvers/loan-reschedule-preview.resolver.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoanReschedulePreviewResolver } from './loan-reschedule-preview.resolver';
+
+describe('LoanReschedulePreviewResolver', () => {
+  let resolver: LoanReschedulePreviewResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(LoanReschedulePreviewResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});

src/app/loans/common-resolvers/loan-reschedule-preview.resolver.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import {
+  Router, Resolve,
+  RouterStateSnapshot,
+  ActivatedRouteSnapshot
+} from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { LoansService } from '../loans.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanReschedulePreviewResolver implements Resolve<boolean> {
+
+    /**
+     * @param {LoansService} LoansService Loans service.
+     */
+    constructor(private loansService: LoansService) { }
+
+    /**
+     * Returns the Loans data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+      const rescheduleId = route.paramMap.get('rescheduleId') || route.parent.paramMap.get('rescheduleId');
+      return this.loansService.getLoanReschedulePreview(rescheduleId);
+    }
+
+}

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

@@ -28,6 +28,7 @@ import { ViewRecieptComponent } from './loans-view/transactions/view-reciept/vie
 import { ExportTransactionsComponent } from './loans-view/transactions/export-transactions/export-transactions.component';
 import { GlimAccountComponent } from './glim-account/glim-account.component';
 import { CreateGlimAccountComponent } from './glim-account/create-glim-account/create-glim-account.component';
+import { ReschedulePreviewComponent } from './loans-view/reschedule-preview/reschedule-preview.component';
 
 /** Custom Resolvers */
 import { LoanDetailsResolver } from './common-resolvers/loan-details.resolver';
@@ -60,6 +61,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 { LoanReschedulePreviewResolver } from './common-resolvers/loan-reschedule-preview.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -146,15 +148,28 @@ const routes: Routes = [
           },
           {
             path: 'loan-reschedules',
-            data: {},
+            data: { breadcrumb: 'Reschedules' },
             resolve: {
               loanRescheduleData: LoanReschedulesResolver
             },
             children: [
               {
                 path: '',
                 component: RescheduleLoanTabComponent
-              }
+              },
+              {
+                path: ':rescheduleId',
+                data: { routeParamBreadcrumb: 'rescheduleId' },
+                resolve: {
+                  loanRescheduleData: LoanReschedulePreviewResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: ReschedulePreviewComponent
+                  }
+                ]
+              },
             ]
           },
           {

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html

@@ -44,15 +44,21 @@
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.statusEnum.pendingApproval">
-          <button class="action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Reject Reschedule' | translate}}" matTooltipPosition="left"
-          (click)="manageRequest(item, 'Reject')">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-          <button class="action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Approve Reschedule' | translate}}" matTooltipPosition="right"
+          <button class="action-button" mat-raised-button color="warn"
+            matTooltip="{{ 'tooltips.Reject Reschedule' | translate}}" matTooltipPosition="left"
+            (click)="manageRequest(item, 'Reject')">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+          <button class="action-button" mat-raised-button color="primary"
+            matTooltip="{{ 'tooltips.Approve Reschedule' | translate}}" matTooltipPosition="right"
             (click)="manageRequest(item, 'Approve')">
             <fa-icon icon="check"></fa-icon>
           </button>
-
+          <button class="action-button" mat-raised-button color="primary"
+            matTooltip="{{ 'tooltips.View Reschedule' | translate}}" matTooltipPosition="right"
+            [routerLink]="[item.id]">
+            <fa-icon icon="eye"></fa-icon>
+          </button>
         </span>
       </td>
     </ng-container>

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

@@ -0,0 +1,171 @@
+<div class="container">
+  <div fxLayout="row" class="m-t-20" fxLayoutAlign="end center">
+    <button mat-raised-button color="primary" (click)="exportToPDF()">
+      <fa-icon icon="download" class="m-r-10"></fa-icon>Export to PDF
+    </button>
+  </div>
+
+  <table mat-table [dataSource]="repaymentScheduleDetails.periods" id="repaymentSchedule">
+
+    <ng-container matColumnDef="number">
+      <th mat-header-cell class="center" *matHeaderCellDef> # </th>
+      <td mat-cell class="right" *matCellDef="let ele"> {{ ele.period }} </td>
+      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+    </ng-container>
+
+    <ng-container matColumnDef="days">
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Days" | translate}} </th>
+      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.daysInPeriod }} </td>
+      <td mat-footer-cell class="center" *matFooterCellDef> <b> Total</b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date" | translate}} </th>
+      <td mat-cell class="m-r-5" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.dueDate | dateFormat}}
+      </td>
+      <td mat-footer-cell *matFooterCellDef> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="paiddate">
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Paid Date" | translate}} </th>
+      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.obligationsMetOnDate |
+        dateFormat}} </td>
+      <td mat-footer-cell *matFooterCellDef> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="check">
+      <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
+      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        <span *ngIf="ele.obligationsMetOnDate"> <i class="fa fa-check"></i> </span>
+      </td>
+      <td mat-footer-cell *matFooterCellDef> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="balanceOfLoan">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
+        ele.principalLoanBalanceOutstanding | formatNumber }} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
+    </ng-container>
+
+    <ng-container matColumnDef="principalDue">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due" | translate}} </th>
+      <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue |
+        formatNumber }} </td>
+      <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{
+          repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue
+        | formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="fees">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue |
+        formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="penalties">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Penalties" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue |
+        formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged
+          | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="due">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Due" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod |
+        formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="paid">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod |
+        formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="inadvance">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.In advance" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
+        ele.totalPaidInAdvanceForPeriod | formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container matColumnDef="late">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Late" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
+        ele.totalPaidLateForPeriod | formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+    </ng-container>
+
+    <ng-container *ngIf="isWaived">
+      <ng-container matColumnDef="waived">
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
+        <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
+          ele.totalWaivedForPeriod | formatNumber}} </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived |
+            currency:currencyCode:'symbol-narrow':'1.2-2' }} </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 class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding |
+          currency:currencyCode:'symbol-narrow':'1.2-2' }} </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 class="center" *matHeaderCellDef [attr.colspan]="2"> {{"labels.inputs.Loan Amount and Balance"
+        | translate}} </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-total-cost">
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> {{"labels.inputs.Total Cost of Loan" |
+        translate}} </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-installment-totals">
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6"> {{"labels.inputs.Installment Totals" |
+        translate}} </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 fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button type="button" mat-raised-button color="primary" [routerLink]="['../../loan-reschedules']">{{ 'labels.buttons.Back' | translate}}</button>
+  </div>
+
+</div>

src/app/loans/loans-view/reschedule-preview/reschedule-preview.component.scss

@@ -0,0 +1,38 @@
+@import "assets/styles/helper";
+
+table {
+  width: 100%;
+  margin: 2% 0%;
+}
+
+.container {
+  padding-bottom: 2%;
+}
+
+.check {
+  padding-left: 15px;
+}
+
+.amount-changed {
+  color: $status-approved;
+}
+
+.additional {
+  color: $status-approved;
+}
+
+.downpayment {
+  color: $status-downpayment;
+}
+
+.paid {
+  color: $status-paid;
+}
+
+.current {
+  color: $status-active;
+}
+
+.overdued {
+  color: $status-matured;
+}

src/app/loans/loans-view/reschedule-preview/reschedule-preview.component.spec.ts

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