feat: add view loan page (loan tranche details tab) (#873)

Fixes: #870

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

@@ -29,6 +29,7 @@ import { LoanDatatablesResolver } from './common-resolvers/loan-datatables.resol
 import { LoanDatatableResolver } from './common-resolvers/loan-datatable.resolver';
 import { LoanActionButtonResolver } from './common-resolvers/loan-action-button.resolver';
 import { FloatingInterestRatesComponent } from './loans-view/floating-interest-rates/floating-interest-rates.component';
+import { LoanTrancheDetailsComponent } from './loans-view/loan-tranche-details/loan-tranche-details.component';
 
 const routes: Routes = [
   {
@@ -84,6 +85,14 @@ const routes: Routes = [
             loanDetailsAssociationData: LoanDetailsChargesResolver
           }
         },
+        {
+          path: 'loan-tranche-details',
+          component: LoanTrancheDetailsComponent,
+          data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsChargesResolver
+          }
+        },
         {
           path: 'overdue-charges',
           component: OverdueChargesTabComponent,

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.ts

@@ -18,6 +18,11 @@ export class WriteOffPageComponent implements OnInit {
 
   @Input() dataObject: any;
 
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+
   /** Write Off form. */
   writeOffForm: FormGroup;
 

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html

@@ -0,0 +1,80 @@
+<div class="container">
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Maximum allowed outstanding balance:</span>
+    <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | number }}</span>
+  </div>
+
+  <h3> Loan Tranche Details</h3>
+
+  <div fxLayout="row" fxLayoutAlign="flex-end">
+      <button mat-raised-button color="primary" *ngIf="showAddDeleteTrancheButtons('adddisbursedetails')">
+        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      </button>
+      <span class="delete-button">
+        <button mat-raised-button color="warn" (click)="delete()" *ngIf="showAddDeleteTrancheButtons('deletedisbursedetails')">
+          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+        </button>
+      </span>
+  </div>
+
+  <table mat-table [dataSource]="loanDetails.disbursementDetails" *ngIf="loanDetails.disbursementDetails.length>0">
+
+    <ng-container matColumnDef="expected disbursement on">
+      <th mat-header-cell *matHeaderCellDef> Expected Disbursement On </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate | date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="disbursed on">
+      <th mat-header-cell *matHeaderCellDef> Disbursed On </th>
+      <td mat-cell *matCellDef="let ele">
+        <span *ngIf="ele.actualDisbursementDate">
+          {{ ele.actualDisbursementDate | date }}
+        </span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="principal">
+      <th mat-header-cell *matHeaderCellDef> Principal </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.principal }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let ele">
+        <span *ngIf="ele.actualDisbursementDate">
+          <i class="fa fa-check "></i>
+        </span>
+        <button mat-raised-button color="primary" *ngIf="showEdit(ele)">
+          <i class="fa fa-pencil"></i>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="expectedDisbursementColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: expectedDisbursementColumns;"></tr>
+  </table>
+
+  <div *ngIf="loanDetails.emiAmountVariations.length > 0">
+
+    <h3>Installment Amount Variations: </h3>
+
+    <table mat-table [dataSource]="loanDetails.emiAmountVariations">
+
+      <ng-container matColumnDef="emi amount variation from">
+        <th mat-header-cell *matHeaderCellDef> Applicable From Date </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom | date}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="fixed emi amount">
+        <th mat-header-cell *matHeaderCellDef> Installment Amount </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.termValue }} </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="emivariationColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: emivariationColumns;"></tr>
+    </table>
+  </div>
+  
+
+</div>

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.scss

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

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.spec.ts

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

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loan-tranche-details',
+  templateUrl: './loan-tranche-details.component.html',
+  styleUrls: ['./loan-tranche-details.component.scss'],
+})
+export class LoanTrancheDetailsComponent implements OnInit {
+  loanDetails: any;
+  return: any;
+  status: any;
+  totalDisbursedAmount: any;
+  count: number;
+  expectedDisbursementColumns: string[] = ['expected disbursement on', 'disbursed on', 'principal', 'action'];
+  emivariationColumns: string[] = ['emi amount variation from', 'fixed emi amount'];
+
+  /**
+   * Retrieves the loans data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { loanDetailsAssociationData: any }) => {
+      this.loanDetails = data.loanDetailsAssociationData;
+    });
+  }
+
+  ngOnInit() {
+    this.status = this.loanDetails.status.value;
+  }
+
+  showAddDeleteTrancheButtons(action: string) {
+    this.return = true;
+    if (
+      this.status === 'Closed (obligations met)' ||
+      this.status === 'Overpaid' ||
+      this.status === 'Closed (rescheduled)' ||
+      this.status === 'Closed (written off)' ||
+      this.status === 'Submitted and pending approval'
+    ) {
+      this.return = false;
+    }
+    this.totalDisbursedAmount = 0;
+    this.count = 0;
+    this.loanDetails.disbursementDetails.forEach((element: any) => {
+      if (element.actualDisbursementDate) {
+        this.totalDisbursedAmount += element.principal;
+      } else {
+        this.count += 1;
+      }
+    });
+
+    if (this.totalDisbursedAmount === this.loanDetails.approvedPrincipal || this.return === false) {
+      return false;
+    }
+    if (this.count === 0 && action === 'deletedisbursedetails') {
+      return false;
+    }
+
+    return true;
+  }
+
+  showEdit(disbursementDetail: any) {
+    if (
+      (!disbursementDetail.actualDisbursementDate || disbursementDetail.actualDisbursementDate === null) &&
+      this.status === 'Approved'
+    ) {
+      return true;
+    }
+    return false;
+  }
+}

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

@@ -70,6 +70,11 @@
 		<a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive" [active]="transactions.isActive">
 		  Transactions
 		</a>
+	  </ng-container>
+	  <ng-container *ngIf="loanDetailsData.multiDisburseLoan">
+		<a mat-tab-link [routerLink]="['./loan-tranche-details']" routerLinkActive #loanTrancheDetails="routerLinkActive" [active]="loanTrancheDetails.isActive">
+		  Loan Tranche Details
+		</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

@@ -32,6 +32,7 @@ import { MakeRepaymentComponent } from './loans-view/loan-account-actions/make-r
 import { WaiveInterestComponent } from './loans-view/loan-account-actions/waive-interest/waive-interest.component';
 import { FloatingInterestRatesComponent } from './loans-view/floating-interest-rates/floating-interest-rates.component';
 import { WriteOffPageComponent } from './loans-view/loan-account-actions/write-off-page/write-off-page.component';
+import { LoanTrancheDetailsComponent } from './loans-view/loan-tranche-details/loan-tranche-details.component';
 
 /**
  * Loans Module
@@ -64,6 +65,7 @@ import { WriteOffPageComponent } from './loans-view/loan-account-actions/write-o
     WaiveInterestComponent,
     FloatingInterestRatesComponent,
     WriteOffPageComponent,
+    LoanTrancheDetailsComponent,
   ],
   providers: [DatePipe],
 })