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

Transactions tab standarization

Browse Source
This commit is contained in:
Jose Alberto Hernandez
2024-03-30 19:04:56 -06:00
committed by Jose Alberto Hernandez
parent dab5ceec9d
commit 54dc91e0e2
54 changed files with 757 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
+21 -14
View File
@@ -6,6 +6,8 @@
<h3>{{"labels.heading.All Transactions" | translate }}</h3>
</div>
<div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *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>
</div>
@@ -20,50 +22,55 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.id }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
</ng-container>
<ng-container matColumnDef="transactionDate">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date | dateFormat }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(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]="{'strike': transaction.reversed}"> {{ transaction.transactionType.value }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ transaction.transactionType.value }} </td>
</ng-container>
<ng-container matColumnDef="debit">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
</ng-container>
<ng-container matColumnDef="credit">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
</ng-container>
<ng-container matColumnDef="balance">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.runningBalance }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ transaction.runningBalance }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
<td mat-cell class="center" *matCellDef="let transaction">
<button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
<i class="fa fa-file" matTooltip="View Reciept"></i>
</button>
<button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
matTooltipPosition="left" (click)="routeEdit($event)"
[routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
<i class="fa fa-arrow-circle-right"></i>
<button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #transactionMenu="matMenu">
<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>
<button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
<mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.View Journal Entries' | translate}}</span>
</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
</table>
src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss
-15
View File
@@ -33,18 +33,3 @@
}
}
}
.active {
background-color: $status-active;
height: 4px;
}
.linked {
background-color: $status-approved;
height: 4px;
}
.undo {
background-color: $status-active-overdue;
height: 4px;
}
src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts
+42 -32
View File
@@ -1,8 +1,12 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { SavingsAccountTransaction } from 'app/savings/models/savings-account-transaction.model';
/**
* Transactions Tab Component.
@@ -13,18 +17,19 @@ import { ActivatedRoute, Router } from '@angular/router';
styleUrls: ['./transactions-tab.component.scss']
})
export class TransactionsTabComponent implements OnInit {
accountId: string;
status: any;
/** Transactions Data */
transactionsData: any;
/** Temporary Transaction Data */
tempTransaction: any;
/** Form control to handle accural parameter */
hideAccrualsParam: UntypedFormControl;
hideReversedParam: UntypedFormControl;
/** Columns to be displayed in transactions table. */
displayedColumns: string[] = ['row', 'id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
/** Data source for transactions table. */
dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
/**
* Retrieves fixed deposits account data from `resolve`.
@@ -32,28 +37,19 @@ export class TransactionsTabComponent implements OnInit {
* @param {Router} router Router
*/
constructor(private route: ActivatedRoute,
private router: Router) {
private router: Router,
public dialog: MatDialog) {
this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
this.transactionsData = data.fixedDepositsAccountData.transactions;
this.tempTransaction = this.transactionsData;
this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
this.status = data.fixedDepositsAccountData.status.value;
});
}
ngOnInit() {
this.hideAccrualsParam = new UntypedFormControl(false);
this.hideReversedParam = new UntypedFormControl(false);
this.dataSource = new MatTableDataSource(this.transactionsData);
if (this.tempTransaction) {
this.tempTransaction.forEach((element: any) => {
if (this.isAccrual(element.transactionType)) {
this.tempTransaction = this.removeItem(this.tempTransaction, element);
}
});
}
}
private removeItem(arr: any, item: any) {
return arr.filter((f: any) => f !== item);
}
/**
@@ -88,25 +84,36 @@ export class TransactionsTabComponent implements OnInit {
}
}
transactionColor(transaction: any): string {
hideAccruals() {
this.filterTransactions(this.hideReversedParam.value, !this.hideAccrualsParam.value);
}
hideReversed() {
this.filterTransactions(!this.hideReversedParam.value, this.hideAccrualsParam.value);
}
filterTransactions(hideReversed: boolean, hideAccrual: boolean): void {
let transactions: SavingsAccountTransaction[] = this.transactionsData;
if (hideAccrual || hideReversed) {
transactions = this.transactionsData.filter((t: SavingsAccountTransaction) => {
return (!(hideReversed && t.reversed) && !(hideAccrual && t.transactionType.accrual));
});
}
this.dataSource = new MatTableDataSource(transactions);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
savingsTransactionColor(transaction: SavingsAccountTransaction): string {
if (transaction.reversed) {
return 'strike';
}
if (this.isAccrual(transaction.transactionType)) {
} else if (transaction.transfer) {
return 'transfer';
} else if (transaction.transactionType.accrual) {
return 'accrual';
}
return '';
}
private isAccrual(transactionType: any): boolean {
return (transactionType.accrual);
}
hideAccruals() {
if (!this.hideAccrualsParam.value) {
this.dataSource = new MatTableDataSource(this.tempTransaction);
} else {
this.dataSource = new MatTableDataSource(this.transactionsData);
return '';
}
}
@@ -118,4 +125,7 @@ export class TransactionsTabComponent implements OnInit {
$event.stopPropagation();
}
undoTransaction(transactionData: SavingsAccountTransaction): void {
}
}
src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
+3 -51
View File
@@ -64,57 +64,9 @@
{{ transactionData.note }}
</div>
<ng-container *ngIf="transactionData.paymentDetailData">
<div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Payment Type" | translate }}
</div>
<div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
{{ transactionData.paymentDetailData.paymentType.name }}
</div>
<div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Account No" | translate }}.
</div>
<div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.accountNumber }}
</div>
<div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Cheque Number" | translate }}
</div>
<div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.checkNumber }}
</div>
<div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Routing Code" | translate }}
</div>
<div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
{{ transactionData.paymentDetailData.routingCode }}
</div>
<div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Receipt No" | translate }}.
</div>
<div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.receiptNumber }}
</div>
<div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Bank No" | translate }}.
</div>
<div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.bankNumber }}
</div>
</ng-container>
<mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
[paymentDetailData]="transactionData.paymentDetailData">
</mifosx-transaction-payment-detail>
</div>
src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
+31 -10
View File
@@ -6,6 +6,8 @@
<h3>{{"labels.heading.All Transactions" | translate }}</h3>
</div>
<div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *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>
</div>
@@ -20,38 +22,57 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.id }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
</ng-container>
<ng-container matColumnDef="transactionDate">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date | dateFormat }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(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]="{'strike': transaction.reversed}"> {{ transaction.transactionType.value }} </td>
<td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.transactionType.value }} </td>
</ng-container>
<ng-container matColumnDef="debit">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}">
<th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Debit" | translate }} </th>
<td mat-cell *matCellDef="let transaction" class="r-amount" [ngClass]="savingsTransactionColor(transaction)">
{{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
</ng-container>
<ng-container matColumnDef="credit">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}">
<th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Credit" | translate }} </th>
<td mat-cell *matCellDef="let transaction" class="r-amount" [ngClass]="savingsTransactionColor(transaction)">
{{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
</ng-container>
<ng-container matColumnDef="balance">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
<td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.runningBalance }} </td>
<th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Balance" | translate }} </th>
<td mat-cell *matCellDef="let transaction" class="r-amount" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.runningBalance | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
<td mat-cell class="center" *matCellDef="let transaction">
<button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #transactionMenu="matMenu">
<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>
<button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
<mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.View Journal Entries' | translate}}</span>
</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" ></tr>
</table>
src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.scss
+2 -5
View File
@@ -1,3 +1,5 @@
@import "assets/styles/helper";
.tab-container {
padding: 1%;
margin: 1%;
@@ -23,8 +25,3 @@
}
}
}
.strike {
text-decoration: line-through;
color: red;
}
src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts
+37 -23
View File
@@ -1,8 +1,11 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { SavingsAccountTransaction } from 'app/savings/models/savings-account-transaction.model';
/**
* Transactions Tab Component.
@@ -18,14 +21,15 @@ export class TransactionsTabComponent implements OnInit {
status: any;
/** Transactions Data */
transactionsData: any;
/** Temporary Transaction Data */
tempTransaction: any;
/** Form control to handle accural parameter */
hideAccrualsParam: UntypedFormControl;
hideReversedParam: UntypedFormControl;
/** Columns to be displayed in transactions table. */
displayedColumns: string[] = ['row', 'id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance'];
displayedColumns: string[] = ['row', 'id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
/** Data source for transactions table. */
dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
/**
* Retrieves recurring deposits account data from `resolve`.
@@ -35,7 +39,6 @@ export class TransactionsTabComponent implements OnInit {
private router: Router) {
this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
this.transactionsData = data.recurringDepositsAccountData.transactions;
this.tempTransaction = this.transactionsData;
this.status = data.recurringDepositsAccountData.status.value;
});
}
@@ -43,17 +46,7 @@ export class TransactionsTabComponent implements OnInit {
ngOnInit() {
this.dataSource = new MatTableDataSource(this.transactionsData);
this.hideAccrualsParam = new UntypedFormControl(false);
if (this.tempTransaction) {
this.tempTransaction.forEach((element: any) => {
if (this.isAccrual(element.transactionType)) {
this.tempTransaction = this.removeItem(this.tempTransaction, element);
}
});
}
}
private removeItem(arr: any, item: any) {
return arr.filter((f: any) => f !== item);
this.hideReversedParam = new UntypedFormControl(false);
}
/**
@@ -65,15 +58,36 @@ export class TransactionsTabComponent implements OnInit {
|| transactionType.overdraftInterest === true || transactionType.withholdTax === true;
}
isAccrual(transactionType: any): boolean {
return (transactionType.accrual || transactionType.code === 'savingsAccountTransactionType.accrual');
hideAccruals() {
this.filterTransactions(this.hideReversedParam.value, !this.hideAccrualsParam.value);
}
hideAccruals() {
if (!this.hideAccrualsParam.value) {
this.dataSource = new MatTableDataSource(this.tempTransaction);
hideReversed() {
this.filterTransactions(!this.hideReversedParam.value, this.hideAccrualsParam.value);
}
filterTransactions(hideReversed: boolean, hideAccrual: boolean): void {
let transactions: SavingsAccountTransaction[] = this.transactionsData;
if (hideAccrual || hideReversed) {
transactions = this.transactionsData.filter((t: SavingsAccountTransaction) => {
return (!(hideReversed && t.reversed) && !(hideAccrual && t.transactionType.accrual));
});
}
this.dataSource = new MatTableDataSource(transactions);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
savingsTransactionColor(transaction: SavingsAccountTransaction): string {
if (transaction.reversed) {
return 'strike';
} else if (transaction.transfer) {
return 'transfer';
} else if (transaction.transactionType.accrual) {
return 'accrual';
} else {
this.dataSource = new MatTableDataSource(this.transactionsData);
return '';
}
}
@@ -92,7 +106,7 @@ export class TransactionsTabComponent implements OnInit {
* Show Transactions Details
* @param transactionsData Transactions Data
*/
showTransactions(transactionsData: any) {
showTransactions(transactionsData: SavingsAccountTransaction) {
if (transactionsData.transfer) {
this.router.navigate([`../transfer-funds/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
} else {
src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
+4 -52
View File
@@ -61,7 +61,7 @@
</div>
<div fxFlex="50%">
{{ transactionData.amount }}
{{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2'}}
</div>
<div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
@@ -72,57 +72,9 @@
{{ transactionData.note }}
</div>
<ng-container *ngIf="transactionData.paymentDetailData">
<div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Payment Type" | translate }}
</div>
<div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
{{ transactionData.paymentDetailData.paymentType.name }}
</div>
<div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Account No" | translate }}.
</div>
<div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.accountNumber }}
</div>
<div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Cheque Number" | translate }}
</div>
<div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.checkNumber }}
</div>
<div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Routing Code" | translate }}
</div>
<div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
{{ transactionData.paymentDetailData.routingCode }}
</div>
<div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Receipt No" | translate }}.
</div>
<div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.receiptNumber }}
</div>
<div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Bank No" | translate }}.
</div>
<div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
{{ transactionData.paymentDetailData.bankNumber }}
</div>
</ng-container>
<mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
[paymentDetailData]="transactionData.paymentDetailData">
</mifosx-transaction-payment-detail>
</div>
src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.scss
+22
View File
@@ -1,3 +1,5 @@
@import "assets/styles/helper";
.container {
max-width: 37rem;
@@ -6,5 +8,25 @@
margin: 1rem 0;
word-wrap: break-word;
}
mifosx-transaction-payment-detail {
width: 100%;
margin-bottom: 20px;
}
}
}
.active {
background-color: $status-active;
height: 4px;
}
.linked {
background-color: $status-approved;
height: 4px;
}
.undo {
background-color: $status-active-overdue;
height: 4px;
}
src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.ts
+1 -1
View File
@@ -73,7 +73,7 @@ export class ViewTransactionComponent {
}
transactionColor(): string {
if (this.transactionData.manuallyReversed) {
if (this.transactionData.reversed) {
return 'undo';
}
return 'active';