feat: add view loan page (transactions tab) (#839)

Fixes: #814

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

@@ -22,6 +22,7 @@ import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-char
 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';
+import { TransactiosTabComponent } from './loans-view/transactios-tab/transactios-tab.component';
 
 const routes: Routes = [
   {
@@ -68,6 +69,14 @@ const routes: Routes = [
             loanDetailsAssociationData: LoanDetailsChargesResolver
           }
         },
+        {
+          path: 'transactions',
+          component: TransactiosTabComponent,
+          data: { title: extract('Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsChargesResolver
+          }
+        },
         {
           path: 'overdue-charges',
           component: OverdueChargesTabComponent,

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

@@ -66,6 +66,11 @@
 	  <a mat-tab-link [routerLink]="['./repayment-schedule']" routerLinkActive #repaymentSchedule="routerLinkActive" [active]="repaymentSchedule.isActive">
 		Repayment Schedule
 	  </a>
+	  <ng-container *ngIf="loanDetailsData.transactions">
+		<a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive" [active]="transactions.isActive">
+		  Transactions
+		</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/transactios-tab/transactios-tab.component.html

@@ -0,0 +1,108 @@
+<div class="container">
+
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons">
+    <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">Hide Accruals</mat-checkbox>
+    <button mat-raised-button color="primary">
+      Export
+    </button>
+    <button mat-raised-button color="primary">
+      View Journal Entries
+    </button>
+  </div>
+
+  <table mat-table [dataSource]="showTransactions">
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.id }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="office">
+        <th mat-header-cell *matHeaderCellDef> Office </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.officeName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="transactionDate">
+        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.date | date }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="transactionType">
+        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.type.value  }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.amount | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="principal">
+        <th mat-header-cell *matHeaderCellDef> Breakdown </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.principalPortion | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="interest">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.interestPortion | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="fee">
+        <th mat-header-cell *matHeaderCellDef>  </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.feeChargesPortion | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="penalties">
+        <th mat-header-cell *matHeaderCellDef>  </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.penaltyChargesPortion | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="loanBalance">
+        <th mat-header-cell *matHeaderCellDef> Loan Balance </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.outstandingLoanBalance | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}">
+          <span *ngIf="!ele.manuallyReversedession">
+            <i class="fa fa-file-text fa fa-large" matTooltip="View Receipts"></i>
+          </span>
+          <span>
+            <i class="fa fa-arrow-circle-right fa fa-large coll" matTooltip="View Journal Entries" matTooltipPosition="left"></i>
+          </span>
+        </td>
+      </ng-container>
+
+    <!-- Sub header -->
+    <ng-container matColumnDef="header">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="5"> </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-principal">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> Principal </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-interest">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> Interest </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-fees">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> Fees </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-penalties">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> Penalties </th>
+    </ng-container>
+
+    <ng-container matColumnDef="header-action">
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2">  </th>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matHeaderRowDef="['header', 'header-principal', 'header-interest', 'header-fees', 'header-penalties', 'header-action']"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+  </table>
+
+</div>

src/app/loans/loans-view/transactios-tab/transactios-tab.component.scss

@@ -0,0 +1,22 @@
+table {
+  width: 100%;
+  margin: 3% 0%;
+}
+
+.container {
+  padding-bottom: 2%;
+}
+
+.transaction-buttons {
+  margin-right: 5%;
+  padding-top: 5%;
+}
+
+.strike {
+  text-decoration: line-through;
+  color: red;
+}
+
+.accruals {
+  padding-top: 1%;
+}

src/app/loans/loans-view/transactios-tab/transactios-tab.component.spec.ts

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

src/app/loans/loans-view/transactios-tab/transactios-tab.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {FormControl} from '@angular/forms';
+
+@Component({
+  selector: 'mifosx-transactios-tab',
+  templateUrl: './transactios-tab.component.html',
+  styleUrls: ['./transactios-tab.component.scss']
+})
+export class TransactiosTabComponent implements OnInit {
+
+  /** Loan Details Data */
+  transactions: any;
+  showTransactions: any;
+  tempTransaction: any;
+  /** Columns to be displayed in original schedule table. */
+  displayedColumns: string[] = ['id', 'office', 'transactionDate', 'transactionType', 'amount', 'principal', 'interest', 'fee', 'penalties', 'loanBalance', 'actions'];
+  hideAccrualsParam: FormControl;
+
+  /**
+   * 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.transactions = data.loanDetailsAssociationData.transactions;
+      this.tempTransaction = data.loanDetailsAssociationData.transactions;
+    });
+  }
+
+  ngOnInit() {
+    this.hideAccrualsParam = new FormControl(false);
+    this.tempTransaction.forEach((element: any) => {
+      if (element.type.accrual) {
+        this.tempTransaction = this.removeItem(this.tempTransaction, element);
+      }
+    });
+    this.showTransactions = this.transactions;
+  }
+
+  hideAccruals()  {
+    if (!this.hideAccrualsParam.value) {
+      this.showTransactions = this.tempTransaction;
+    } else {
+      this.showTransactions = this.transactions;
+    }
+  }
+
+  removeItem(arr: any, item: any) {
+    console.log('item: ', item);
+    return arr.filter((f: any) => f !== item);
+   }
+
+}

src/app/loans/loans.module.ts

@@ -18,6 +18,7 @@ import { ChargesTabComponent } from './loans-view/charges-tab/charges-tab.compon
 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';
+import { TransactiosTabComponent } from './loans-view/transactios-tab/transactios-tab.component';
 
 /**
  * Loans Module
@@ -36,6 +37,7 @@ import { RepaymentScheduleTabComponent } from './loans-view/repayment-schedule-t
     OverdueChargesTabComponent,
     OriginalScheduleTabComponent,
     RepaymentScheduleTabComponent,
+    TransactiosTabComponent,
   ],
   providers: [DatePipe],
 })