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>