Enhancement loan transactions tab for sort and pagination (#1658)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -45,7 +45,7 @@
 
             <div fxFlexFill>
               <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
-                <mat-slide-toggle [(ngModel)]="showPaymentDetails" [ngModelOptions]="{standalone: true}">
+                <mat-slide-toggle>
                   <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                     <span class="m-l-10">Show Payment Details</span>
                   </div>

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -39,7 +39,7 @@
 
         <div fxFlexFill>
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
-            <mat-slide-toggle [(ngModel)]="addPaymentDetailsFlag" [ngModelOptions]="{standalone: true}">
+            <mat-slide-toggle>
               <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
                 <span class="m-l-10">Show Payment Details</span>
               </div>

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -12,15 +12,15 @@
 
   <div class="mat-elevation-z1 m-b-25">
 
-    <table mat-table [dataSource]="dataSource" >
+    <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
       </ng-container>
 
-      <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell class="center" *matHeaderCellDef> Transaction Date </th>
+      <ng-container matColumnDef="date">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Transaction Date </th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
@@ -58,6 +58,8 @@
 
     </table>
 
+    <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
+
   </div>
 
 </div>

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,7 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -21,6 +23,8 @@ export class TransactionsTabComponent implements OnInit {
   displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'viewReciept'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves savings account data from `resolve`.
@@ -36,6 +40,8 @@ export class TransactionsTabComponent implements OnInit {
 
   ngOnInit() {
     this.dataSource = new MatTableDataSource(this.transactionsData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
   }
 
   /**