CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Loan account transaction tab enhacements

Browse Source
This commit is contained in:
Jose Alberto Hernandez
2024-03-20 21:18:11 -06:00
committed by Jose Alberto Hernandez
parent 2f863c42a1
commit bb7f084138
30 changed files with 395 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
+101 -45
View File
@@ -1,139 +1,195 @@
<div class="container">
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
<mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
{{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
<mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
{{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
<button mat-raised-button color="primary" class="transaction-button" [routerLink]="['export']">
{{"labels.buttons.Export" | translate}}
</button>
<!--
<button mat-raised-button color="primary" class="transaction-button">
{{"labels.buttons.View Journal Entries" | translate}}
</button>
-->
</div>
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="row">
<th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
<td mat-cell *matCellDef="let idx = index;">{{(idx + 1)}}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id" | translate}} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.id }}
</td>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)" (click)="showTransactions(transaction)">{{ transaction.id }}</td>
</ng-container>
<ng-container matColumnDef="office">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate}} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
transaction.officeName }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">{{ transaction.officeName }}</td>
</ng-container>
<ng-container matColumnDef="externalId">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">
<mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
</ng-container>
<ng-container matColumnDef="transactionType">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
transaction.type.value }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.type.value }} </td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
<td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
[ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="principal">
<th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Breakdown" | translate}} </th>
<td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
[ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="interest">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
[ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="fee">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
[ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="penalties">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
[ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="loanBalance">
<th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
<td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
[ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
<td mat-cell *matCellDef="let transaction" class="center td-min-space">
<button class="account-action-button" *ngIf="allowUndoTransaction(transaction)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Undo Transaction' | translate}}"
matTooltipPosition="left" (click)="undoTransaction(transaction, $event)">
<i class="fa fa-undo"></i>
</button>
<button class="account-action-button" *ngIf="!transaction.manuallyReversed" mat-raised-button color="primary"
(click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']" matTooltip="{{ 'tooltips.View Receipts' | translate}}">
<i class="fa fa-file-text"></i>
</button>
<button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate}}"
matTooltipPosition="left" (click)="routeEdit($event)"
[routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
<i class="fa fa-arrow-circle-right"></i>
<td mat-cell *matCellDef="let transaction" class="center">
<button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button" *ngIf="displaySubMenu(transaction)">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #transactionMenu="matMenu">
<span *ngIf="!isReAgoeOrReAmortize(transaction.type)">
<button mat-menu-item (click)="showTransactions(transaction)">
<mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
<span>{{ 'labels.text.View Transaction' | translate}}</span>
</button>
</span>
<span *ngIf="allowUndoTransaction(transaction)">
<button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.Undo Transaction' | translate}}</span>
</button>
<button mat-menu-item class="account-action-button" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
<mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.View Receipts' | translate}}</span>
</button>
</span>
<span *ngIf="isReAge(transaction.type) && !transaction.manuallyReversed">
<button mat-menu-item *mifosxHasPermission="'UNDO_REAGE_LOAN'" (click)="undoReAgeOrReAmortize(transaction, $event)">
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
<span>{{ 'labels.menus.Undo Re-Age' | translate}}</span>
</button>
</span>
<span *ngIf="isReAmortize(transaction.type) && !transaction.manuallyReversed">
<button mat-menu-item *mifosxHasPermission="'UNDO_REAMORTIZE_LOAN'" (click)="undoReAgeOrReAmortize(transaction, $event)">
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
<span>{{ 'labels.menus.Undo Re-Amortize' | translate}}</span>
</button>
</span>
<span *ngIf="viewJournalEntry(transaction.type)">
<button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
<mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.View Journal Entries' | translate}}</span>
</button>
</span>
</mat-menu>
</td>
</ng-container>
<!-- Sub header -->
<ng-container matColumnDef="header">
<ng-container matColumnDef="h1-row">
<th mat-header-cell *matHeaderCellDef> # </th>
</ng-container>
<ng-container matColumnDef="h1-id">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Id" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-office">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-external-id">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-transaction-date">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-transaction-type">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-space">
<th mat-header-cell *matHeaderCellDef> </th>
</ng-container>
<ng-container matColumnDef="h1-breakdown">
<th mat-header-cell *matHeaderCellDef class="center" [attr.colspan]="4"> {{"labels.inputs.Breakdown" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-loan-balance">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h1-actions">
<th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Actions" | translate}} </th>
</ng-container>
<!-- Sub header -->
<ng-container matColumnDef="h2-space">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="6"> </th>
</ng-container>
<ng-container matColumnDef="header-principal">
<ng-container matColumnDef="h2-amount">
<th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Amount" | translate}} </th>
</ng-container>
<ng-container matColumnDef="h2-principal">
<th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Principal" | translate}} </th>
</ng-container>
<ng-container matColumnDef="header-interest">
<ng-container matColumnDef="h2-interest">
<th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Interest" | translate}} </th>
</ng-container>
<ng-container matColumnDef="header-fees">
<ng-container matColumnDef="h2-fees">
<th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Fees" | translate}} </th>
</ng-container>
<ng-container matColumnDef="header-penalties">
<ng-container matColumnDef="h2-penalties">
<th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Penalties" | translate}} </th>
</ng-container>
<ng-container matColumnDef="header-action">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> </th>
<ng-container matColumnDef="h2-action">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> </th>
</ng-container>
<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;" class="select-row" (click)="showTransactions(row)">
</tr>
<tr mat-header-row *matHeaderRowDef="displayedHeader1Columns"></tr>
<tr mat-header-row *matHeaderRowDef="displayedHeader2Columns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
</table>
src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
+5
View File
@@ -58,3 +58,8 @@
.transaction-button {
min-width: 180px;
}
.action-button {
width: 100%;
height: 100%;
}
src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
+78 -16
View File
@@ -10,6 +10,8 @@ import { MatDialog } from '@angular/material/dialog';
import { SettingsService } from 'app/settings/settings.service';
import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { LoanTransaction } from 'app/products/loan-products/models/loan-account.model';
import { LoanTransactionType } from 'app/loans/models/loan-transaction-type.model';
@Component({
selector: 'mifosx-transactions-tab',
@@ -24,15 +26,19 @@ export class TransactionsTabComponent implements OnInit {
tempTransaction: any;
/** Form control to handle accural parameter */
hideAccrualsParam: UntypedFormControl;
hideReversedParam: UntypedFormControl;
/** Stores the status of the loan account */
status: string;
/** Columns to be displayed in original schedule table. */
displayedColumns: string[] = ['row', 'id', 'office', 'externalId', 'date', 'transactionType', 'amount', 'principal', 'interest', 'fee', 'penalties', 'loanBalance', 'actions'];
displayedHeader1Columns: string[] = ['h1-row', 'h1-id', 'h1-office', 'h1-external-id', 'h1-transaction-date', 'h1-transaction-type', 'h1-space', 'h1-breakdown', 'h1-loan-balance', 'h1-actions'];
displayedHeader2Columns: string[] = ['h2-space', 'h2-amount', 'h2-principal', 'h2-interest', 'h2-fees', 'h2-penalties', 'h2-action'];
dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
loanId: number;
/**
* Retrieves the loans with associations data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
@@ -49,10 +55,12 @@ export class TransactionsTabComponent implements OnInit {
this.tempTransaction = data.loanDetailsData.transactions;
this.status = data.loanDetailsData.status.value;
});
this.loanId = this.route.parent.parent.snapshot.params['loanId'];
}
ngOnInit() {
this.hideAccrualsParam = new UntypedFormControl(false);
this.hideReversedParam = new UntypedFormControl(false);
this.setLoanTransactions(this.transactions);
}
@@ -65,8 +73,8 @@ export class TransactionsTabComponent implements OnInit {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
if (this.tempTransaction) {
this.tempTransaction.forEach((element: any) => {
if (this.isAccrual(element.transactionType)) {
this.tempTransaction.forEach((element: LoanTransaction) => {
if (this.isAccrual(element.type)) {
this.tempTransaction = this.removeItem(this.tempTransaction, element);
}
});
@@ -108,29 +116,36 @@ export class TransactionsTabComponent implements OnInit {
* WAIVE_INTEREST:4
* WAIVE_CHARGES:9
* ACCRUAL:10
* REFUND:16
* CHARGE_PAYMENT:17
* REFUND_FOR_ACTIVE_LOAN:18
* INCOME_POSTING: 19
* CREDIT_BALANCE_REFUND:20
* MERCHANT_ISSUED_REFUND:21
* PAYOUT_REFUND:22
* GOODWILL_CREDIT:23
* CHARGE_REFUND:24
* CHARGEBACK:25
* CHARGE_ADJUSTMENT:26
* CHARGE_OFF:27
* DOWN_PAYMENT:28
* REAGE:29
* REAMORTIZE:30
*/
showTransactions(transactionsData: any) {
showTransactions(transactionsData: LoanTransaction) {
if ([1, 2, 4, 9, 20, 21, 22, 23, 26, 28, 29, 30].includes(transactionsData.type.id)) {
this.router.navigate([transactionsData.id], { relativeTo: this.route });
}
}
allowUndoTransaction(transaction: any) {
allowUndoTransaction(transaction: LoanTransaction) {
if (transaction.manuallyReversed) {
return false;
}
return ([27].includes(transaction.type.id));
return !(transaction.type.disbursement || transaction.type.chargeoff || this.isReAgoeOrReAmortize(transaction.type) );
}
loanTransactionColor(transaction: any): string {
loanTransactionColor(transaction: LoanTransaction): string {
if (transaction.manuallyReversed) {
return 'strike';
}
@@ -167,13 +182,13 @@ export class TransactionsTabComponent implements OnInit {
* Stops the propagation to view pages.
* @param $event Mouse Event
*/
undoTransaction(transaction: any, $event: MouseEvent) {
undoTransaction(transaction: LoanTransaction, $event: MouseEvent) {
$event.stopPropagation();
const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat;
const loanId = this.route.parent.parent.snapshot.params['loanId'];
let command = 'undo';
let operationDate = transaction.date;
let operationDate = this.dateUtils.parseDate(transaction.date);
let payload = {};
if (this.isChargeOff(transaction.type)) {
command = 'undo-charge-off';
@@ -207,31 +222,78 @@ export class TransactionsTabComponent implements OnInit {
});
}
private isAccrual(transactionType: any): boolean {
undoReAgeOrReAmortize(transaction: LoanTransaction): void {
const actionName = transaction.type.reAmortize ? 'Re-Amortize' : 'Re-Age';
const undoTransactionAccountDialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: {
heading: this.translateService.instant('labels.heading.Undo Transaction'),
dialogContext: this.translateService.instant('labels.dialogContext.Are you sure you want undo the transaction type') + ' ' + this.translateService.instant('labels.menus.' + actionName)
}
});
undoTransactionAccountDialogRef.afterClosed().subscribe((response: any) => {
if (response.confirm) {
const undoCommand = actionName === 'Re-Age' ? 'undoReAge' : 'undoReAmortize';
this.loansService.executeLoansAccountTransactionsCommand(String(this.loanId), undoCommand, {}).subscribe(() => {
this.reload();
});
}
});
}
private isAccrual(transactionType: LoanTransactionType): boolean {
return (transactionType.accrual || transactionType.code === 'loanTransactionType.overdueCharge');
}
private isChargeOff(transactionType: any): boolean {
private isChargeOff(transactionType: LoanTransactionType): boolean {
return (transactionType.chargeoff || transactionType.code === 'loanTransactionType.chargeOff');
}
private isDownPayment(transactionType: any): boolean {
private isDownPayment(transactionType: LoanTransactionType): boolean {
return (transactionType.downPayment || transactionType.code === 'loanTransactionType.downPayment');
}
private isReAge(transactionType: any): boolean {
return (transactionType.code === 'loanTransactionType.reAge');
private isReAge(transactionType: LoanTransactionType): boolean {
return (transactionType.reAge || transactionType.code === 'loanTransactionType.reAge');
}
private isReAmortize(transactionType: any): boolean {
return (transactionType.code === 'loanTransactionType.reAmortize');
private isReAmortize(transactionType: LoanTransactionType): boolean {
return (transactionType.reAmortize || transactionType.code === 'loanTransactionType.reAmortize');
}
private isReAgoeOrReAmortize(transactionType: LoanTransactionType): boolean {
return this.isReAmortize(transactionType) || this.isReAge(transactionType);
}
viewJournalEntry(transactionType: LoanTransactionType): boolean {
return !(this.isReAmortize(transactionType) || this.isReAge(transactionType));
}
private reload() {
const clientId = this.route.parent.parent.snapshot.params['clientId'];
const loanId = this.route.parent.parent.snapshot.params['loanId'];
const url: string = this.router.url;
this.router.navigateByUrl(`/clients/${clientId}/loans-accounts`, { skipLocationChange: true })
.then(() => this.router.navigate([url]));
}
hideReversed() {
let transactions: LoanTransaction[] = this.transactions;
if (!this.hideReversedParam.value) {
transactions = [];
this.transactions.forEach((t: LoanTransaction) => {
if (!t.manuallyReversed) {
transactions.push(t);
}
});
}
this.dataSource = new MatTableDataSource(transactions);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
displaySubMenu(transaction: LoanTransaction): boolean {
if (this.isReAgoeOrReAmortize(transaction.type) && transaction.manuallyReversed) {
return false;
}
return true;
}
}