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

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

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -184,7 +184,7 @@
 
     <mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%" (click)="activatedOnDatePicker.open()">
       <mat-label>Activation Date</mat-label>
-      <input matInput [min]="createClientForm.value.submittedOnDate" [max]="createClientForm.value.submittedOnDate" [matDatepicker]="activatedOnDatePicker" required
+      <input matInput [min]="createClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
         formControlName="activationDate">
       <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #activatedOnDatePicker></mat-datepicker>

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

@@ -4,10 +4,10 @@
     <h3>Performance History</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
       <p>
-        # of Repayments :{{loanDetails?.numberOfRepayments}}
+        Repayments    : {{loanDetails?.numberOfRepayments | number}}
       </p>
       <p>
-        Maturity Date :{{loanDetails?.timeline.expectedMaturityDate  | dateFormat}}
+        Maturity Date : {{loanDetails?.timeline.expectedMaturityDate | dateFormat}}
       </p>
     </div>
   </ng-container>

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -43,7 +43,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/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -77,7 +77,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/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts

@@ -83,6 +83,7 @@ export class MakeRepaymentComponent implements OnInit {
    */
   addPaymentDetails() {
     this.showPaymentDetails = !this.showPaymentDetails;
+    console.log(this.showPaymentDetails);
     if (this.showPaymentDetails) {
       this.repaymentLoanForm.addControl('accountNumber', new FormControl(''));
       this.repaymentLoanForm.addControl('checkNumber', new FormControl(''));

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -77,7 +77,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/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -38,7 +38,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/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html

@@ -4,16 +4,20 @@
 
     <mat-card-content>
 
-      <mat-form-field fxFlex>
+      <div fxLayout="column">
-        <mat-label>Note</mat-label>
-        <textarea matInput [formControl]="note"></textarea>
-      </mat-form-field>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-form-field fxFlex>
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <mat-label>Note</mat-label>
-        <button mat-raised-button color="primary" (click)="submit()"
+          <textarea matInput [formControl]="note"></textarea>
-          *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
+        </mat-form-field>
-      </mat-card-actions>
+
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" (click)="submit()"
+            *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
+        </mat-card-actions>
+
+      </div>
 
     </mat-card-content>
 

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

@@ -49,7 +49,6 @@ export class LoansViewComponent implements OnInit {
       this.loanDetailsData = data.loanDetailsData;
       this.loanDatatables = data.loanDatatables;
       this.loanStatus = this.loanDetailsData.status;
-      console.log(this.loanStatus);
     });
     this.loanId = this.route.snapshot.params['loanId'];
     this.clientId = this.loanDetailsData.clientId;

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

@@ -2,18 +2,18 @@
 
   <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" [routerLink]="['export']">
+    <button mat-raised-button color="primary" class="transaction-button" [routerLink]="['export']">
       Export
     </button>
-    <button mat-raised-button color="primary">
+    <button mat-raised-button color="primary" class="transaction-button">
       View Journal Entries
     </button>
   </div>
 
-  <table mat-table [dataSource]="showTransactionsData">
+  <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" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.id }} </td>
       </ng-container>
 
@@ -29,8 +29,8 @@
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="transactionDate">
+      <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
@@ -114,4 +114,6 @@
 
   </table>
 
+  <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
+
 </div>

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

@@ -24,14 +24,25 @@
     }
     .strike {
       text-decoration: line-through;
-      color: red;
+      color: $status-active-overdue;
     }
     .linked {
       color: $status-approved;
     }
+    .accrual {
+      color: $msg-default;
+    }
   }
 }
 
 .td-min-space {
   min-width: 60px;
 }
+
+.filter-box {
+  min-width: 280px;
+}
+
+.transaction-button {
+  min-width: 180px;
+}

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

@@ -1,6 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {FormControl} from '@angular/forms';
+import { FormControl } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'mifosx-transactions-tab',
@@ -11,8 +14,6 @@ export class TransactionsTabComponent implements OnInit {
 
   /** Loan Details Data */
   transactions: any;
-  /** Show Transactions Data */
-  showTransactionsData: any;
   /** Temporary Transaction Data */
   tempTransaction: any;
   /** Form control to handle accural parameter */
@@ -20,14 +21,18 @@ export class TransactionsTabComponent implements OnInit {
   /** Stores the status of the loan account */
   status: string;
   /** Columns to be displayed in original schedule table. */
-  displayedColumns: string[] = ['id', 'office', 'externalId', 'transactionDate', 'transactionType', 'amount', 'principal', 'interest', 'fee', 'penalties', 'loanBalance', 'actions'];
+  displayedColumns: string[] = ['id', 'office', 'externalId', 'date', 'transactionType', 'amount', 'principal', 'interest', 'fee', 'penalties', 'loanBalance', 'actions'];
+
+  dataSource: MatTableDataSource<any>;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the loans with associations data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute,
-              private router: Router) {
+    private router: Router) {
     this.route.parent.parent.data.subscribe((data: { loanDetailsData: any }) => {
       this.transactions = data.loanDetailsData.transactions;
       this.tempTransaction = data.loanDetailsData.transactions;
@@ -37,12 +42,14 @@ export class TransactionsTabComponent implements OnInit {
 
   ngOnInit() {
     this.hideAccrualsParam = new FormControl(false);
+    this.dataSource = new MatTableDataSource(this.transactions);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     this.tempTransaction.forEach((element: any) => {
-      if (element.type.accrual) {
+      if (this.isAccrual(element.type)) {
         this.tempTransaction = this.removeItem(this.tempTransaction, element);
       }
     });
-    this.showTransactionsData = this.transactions;
   }
 
   /**
@@ -56,17 +63,21 @@ export class TransactionsTabComponent implements OnInit {
     return false;
   }
 
-  hideAccruals()  {
+  hideAccruals() {
     if (!this.hideAccrualsParam.value) {
-      this.showTransactionsData = this.tempTransaction;
+      this.dataSource = new MatTableDataSource(this.tempTransaction);
     } else {
-      this.showTransactionsData = this.transactions;
+      this.dataSource = new MatTableDataSource(this.transactions);
     }
   }
 
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
   removeItem(arr: any, item: any) {
     return arr.filter((f: any) => f !== item);
-   }
+  }
 
   /**
    * Show Transactions Details
@@ -94,6 +105,9 @@ export class TransactionsTabComponent implements OnInit {
     if (loanTransaction.transactionRelations && loanTransaction.transactionRelations.length > 0) {
       return 'linked';
     }
+    if (this.isAccrual(loanTransaction.type)) {
+      return 'accrual';
+    }
     return '';
   }
 
@@ -105,4 +119,8 @@ export class TransactionsTabComponent implements OnInit {
     $event.stopPropagation();
   }
 
+  private isAccrual(transactionType: any): boolean  {
+    return (transactionType.accrual || transactionType.code === 'loanTransactionType.overdueCharge');
+  }
+
 }

src/app/loans/loans.service.ts

@@ -35,7 +35,7 @@ export class LoansService {
       .set('command', 'foreclosure')
       .set('locale', this.settingsService.language.code)
       .set('dateFormat', this.settingsService.dateFormat)
-      .set('transactionDate', this.dateUtils.formatDate(this.settingsService.businessDate, this.settingsService.dateFormat))
+      .set('transactionDate', this.dateUtils.formatDate(this.settingsService.businessDate, this.settingsService.dateFormat));
     return this.http.get(`/loans/${loanId}/transactions/template`, { params: httpParams });
   }
 

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">
+      <ng-container matColumnDef="date">
-        <th mat-header-cell class="center" *matHeaderCellDef> Transaction Date </th>
+        <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;
   }
 
   /**