From 480809c4cc88c907caefeec3da6051beaeab3002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Alberto=20Hern=C3=A1ndez?= <44206706+josehernandezfintecheandomx@users.noreply.github.com> Date: Fri, 27 Jan 2023 21:32:47 -0600 Subject: [PATCH] Enhancement loan transactions tab for sort and pagination (#1658) Co-authored-by: Jose Alberto Hernandez --- .../client-general-step.component.html | 2 +- .../general-tab/general-tab.component.html | 4 +- .../disburse/disburse.component.html | 2 +- .../make-repayment.component.html | 2 +- .../make-repayment.component.ts | 1 + .../prepay-loan/prepay-loan.component.html | 2 +- .../recovery-repayment.component.html | 2 +- .../undo-approval.component.html | 22 ++++++---- .../loans/loans-view/loans-view.component.ts | 1 - .../transactions-tab.component.html | 14 ++++--- .../transactions-tab.component.scss | 13 +++++- .../transactions-tab.component.ts | 42 +++++++++++++------ src/app/loans/loans.service.ts | 2 +- .../close-savings-account.component.html | 2 +- ...avings-account-transactions.component.html | 2 +- .../transactions-tab.component.html | 10 +++-- .../transactions-tab.component.ts | 8 +++- 17 files changed, 87 insertions(+), 44 deletions(-) diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html index 781ec6bb1..9e100372c 100644 --- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html +++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html @@ -184,7 +184,7 @@ Activation Date - diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.html b/src/app/loans/loans-view/general-tab/general-tab.component.html index 88bdef17f..4140945b2 100644 --- a/src/app/loans/loans-view/general-tab/general-tab.component.html +++ b/src/app/loans/loans-view/general-tab/general-tab.component.html @@ -4,10 +4,10 @@

Performance History

- # of Repayments :{{loanDetails?.numberOfRepayments}} + Repayments : {{loanDetails?.numberOfRepayments | number}}

- Maturity Date :{{loanDetails?.timeline.expectedMaturityDate | dateFormat}} + Maturity Date : {{loanDetails?.timeline.expectedMaturityDate | dateFormat}}

diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html index 4b78b5e36..189991113 100644 --- a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html +++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html @@ -43,7 +43,7 @@
- +
Show Payment Details
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html index 1e20fcb46..6549c0435 100644 --- a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html +++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html @@ -77,7 +77,7 @@
- +
Show Payment Details
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts index a679b44f1..43a85cd10 100644 --- a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts +++ b/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('')); diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html index fa5dec7b0..af4a38e3d 100644 --- a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html +++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html @@ -77,7 +77,7 @@
- +
Show Payment Details
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html index 2dfd57d62..9cc0c2aca 100644 --- a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html +++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html @@ -38,7 +38,7 @@
- +
Show Payment Details
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html index 1fbdbc5bb..483a56ee0 100644 --- a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html +++ b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html @@ -4,16 +4,20 @@ - - Note - - +
- - - - + + Note + + + + + + + + +
diff --git a/src/app/loans/loans-view/loans-view.component.ts b/src/app/loans/loans-view/loans-view.component.ts index a6a02dfe7..014179e6d 100644 --- a/src/app/loans/loans-view/loans-view.component.ts +++ b/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; diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html index 78d86b393..5a6773bdb 100644 --- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html +++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html @@ -2,18 +2,18 @@
Hide Accruals - -
- +
- + @@ -29,8 +29,8 @@ - - + + @@ -114,4 +114,6 @@
Id Id {{ transaction.id }} Transaction Date Transaction Date {{ transaction.date | dateFormat }}
+ +
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss index 44b53b44d..4433e9c4d 100644 --- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss +++ b/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; +} diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts index 8a10ab528..58eeb90f0 100644 --- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts +++ b/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; + @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'); + } + } diff --git a/src/app/loans/loans.service.ts b/src/app/loans/loans.service.ts index 831c096e9..059670322 100644 --- a/src/app/loans/loans.service.ts +++ b/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 }); } diff --git a/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html b/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html index 9a60f9be1..469ff8b78 100644 --- a/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html +++ b/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html @@ -45,7 +45,7 @@
- +
Show Payment Details
diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html index 6643fe023..442d593ea 100644 --- a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html +++ b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html @@ -39,7 +39,7 @@
- +
Show Payment Details
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html index 3835975c9..dd689088f 100644 --- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html +++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html @@ -12,15 +12,15 @@
- +
- + - - + + @@ -58,6 +58,8 @@
ID Id {{ transaction.id }} Transaction Date Transaction Date {{ transaction.date | dateFormat }}
+ +
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts index 3c9439bab..5fd9f8715 100644 --- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts +++ b/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; + @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; } /**