feat: add loan transactions tab actions (#1206)

- add export transaction
- add view transactions
- add edit transactions
- add undo transactions
- add view receipt

Fixes: #1205

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

@@ -1,8 +1,8 @@
 <div class="container">
 
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons">
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
     <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">Hide Accruals</mat-checkbox>
-    <button mat-raised-button color="primary">
+    <button mat-raised-button color="primary" [routerLink]="['export']">
       Export
     </button>
     <button mat-raised-button color="primary">
@@ -10,67 +10,69 @@
     </button>
   </div>
 
-  <table mat-table [dataSource]="showTransactions">
+  <table mat-table [dataSource]="showTransactionsData">
 
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef> Date </th>
-        <td mat-cell *matCellDef="let ele" [ngClass]="{'strike': ele.manuallyReversed}"> {{ ele.id }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.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>
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}">
+          <button class="account-action-button" *ngIf="!transaction.manuallyReversedession" mat-raised-button color="primary" (click)="routeEdit($event)"
+            [routerLink]="[transaction.id, 'reciept']" matTooltip="View Receipts">
+            <i class="fa fa-file-text"></i>
+          </button>
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries" matTooltipPosition="left"
+            (click)="routeEdit($event)" >
+            <i class="fa fa-arrow-circle-right"></i>
+          </button>
         </td>
       </ng-container>
 
@@ -101,7 +103,7 @@
 
     <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>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
 
   </table>
 

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

@@ -1,22 +1,28 @@
-table {
-  width: 100%;
-  margin: 3% 0%;
-}
-
 .container {
   padding-bottom: 2%;
-}
 
-.transaction-buttons {
-  margin-right: 5%;
-  padding-top: 5%;
-}
+  .transaction-buttons {
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    .accruals {
+      padding-top: 1%;
+    }
+  }
 
-.strike {
-  text-decoration: line-through;
-  color: red;
-}
-
-.accruals {
-  padding-top: 1%;
+  table {
+    width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 0 3px 0;
+      margin: 0 10%;
+      line-height: 25px;
+    }
+    .select-row:hover {
+      cursor: pointer;
+    }
+    .strike {
+      text-decoration: line-through;
+      color: red;
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import {FormControl} from '@angular/forms';
 
 @Component({
@@ -11,20 +11,27 @@ export class TransactionsTabComponent implements OnInit {
 
   /** Loan Details Data */
   transactions: any;
-  showTransactions: any;
+  /** Show Transactions Data */
+  showTransactionsData: any;
+  /** Temporary Transaction Data */
   tempTransaction: any;
+  /** Form control to handle accural parameter */
+  hideAccrualsParam: FormControl;
+  /** Stores the status of the loan account */
+  status: string;
   /** 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 }) => {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
+    this.route.parent.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
       this.transactions = data.loanDetailsAssociationData.transactions;
       this.tempTransaction = data.loanDetailsAssociationData.transactions;
+      this.status = data.loanDetailsAssociationData.status.value;
     });
   }
 
@@ -35,14 +42,25 @@ export class TransactionsTabComponent implements OnInit {
         this.tempTransaction = this.removeItem(this.tempTransaction, element);
       }
     });
-    this.showTransactions = this.transactions;
+    this.showTransactionsData = this.transactions;
+  }
+
+  /**
+   * Checks Status of the loan account
+   */
+  checkStatus() {
+    if (this.status === 'Active' || this.status === 'Closed (obligations met)' || this.status === 'Overpaid' ||
+      this.status === 'Closed (rescheduled)' || this.status === 'Closed (written off)') {
+      return true;
+    }
+    return false;
   }
 
   hideAccruals()  {
     if (!this.hideAccrualsParam.value) {
-      this.showTransactions = this.tempTransaction;
+      this.showTransactionsData = this.tempTransaction;
     } else {
-      this.showTransactions = this.transactions;
+      this.showTransactionsData = this.transactions;
     }
   }
 
@@ -50,4 +68,22 @@ export class TransactionsTabComponent implements OnInit {
     return arr.filter((f: any) => f !== item);
    }
 
+  /**
+   * Show Transactions Details
+   * @param transactionsData Transactions Data
+   */
+  showTransactions(transactionsData: any) {
+    if (transactionsData.type.id === 2 || transactionsData.type.id === 4 || transactionsData.type.id === 1) {
+      this.router.navigate([transactionsData.id], { relativeTo: this.route });
+    }
+  }
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }