feat: add view loan (loan collateral tab) (#937)

Fixes: #936

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

@@ -30,6 +30,7 @@ import { LoanDatatableResolver } from './common-resolvers/loan-datatable.resolve
 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';
+import { LoanCollateralTabComponent } from './loans-view/loan-collateral-tab/loan-collateral-tab.component';
 
 const routes: Routes = [
   {
@@ -85,6 +86,14 @@ const routes: Routes = [
             loanDetailsAssociationData: LoanDetailsChargesResolver
           }
         },
+        {
+          path: 'loan-collateral',
+          component: LoanCollateralTabComponent,
+          data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsChargesResolver
+          }
+        },
         {
           path: 'loan-tranche-details',
           component: LoanTrancheDetailsComponent,

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

@@ -0,0 +1,24 @@
+<div class="container">
+
+  <table mat-table [dataSource]="loanDetails.collateral">
+
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="value">
+      <th mat-header-cell *matHeaderCellDef> Value </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+</div>

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.scss

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

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

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

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loan-collateral-tab',
+  templateUrl: './loan-collateral-tab.component.html',
+  styleUrls: ['./loan-collateral-tab.component.scss']
+})
+export class LoanCollateralTabComponent implements OnInit {
+
+  /** Loan Details */
+  loanDetails: any;
+  /** Columns to be displayed in collateral table. */
+  displayedColumns: string[] = ['type', 'value', 'description'];
+
+  /**
+   * 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() {
+  }
+
+}

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

@@ -71,6 +71,12 @@
 		  Transactions
 		</a>
 	  </ng-container>
+	  <ng-container *ngIf="loanDetailsData.collateral">
+		<a mat-tab-link [routerLink]="['./loan-collateral']" routerLinkActive #loanCollateralDetails="routerLinkActive"
+	  	  [active]="loanCollateralDetails.isActive">
+	      Loan Collateral Details
+		</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

src/app/loans/loans.module.ts

@@ -35,6 +35,7 @@ import { WriteOffPageComponent } from './loans-view/loan-account-actions/write-o
 import { LoanTrancheDetailsComponent } from './loans-view/loan-tranche-details/loan-tranche-details.component';
 import { CloseAsRescheduledComponent } from './loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component';
 import { LoanRescheduleComponent } from './loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component';
+import { LoanCollateralTabComponent } from './loans-view/loan-collateral-tab/loan-collateral-tab.component';
 
 /**
  * Loans Module
@@ -70,6 +71,7 @@ import { LoanRescheduleComponent } from './loans-view/loan-account-actions/loan-
     LoanTrancheDetailsComponent,
     CloseAsRescheduledComponent,
     LoanRescheduleComponent,
+    LoanCollateralTabComponent,
   ],
   providers: [DatePipe],
 })