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

Styling table with amounts

Browse Source
This commit is contained in:
Jose Alberto Hernandez
2022-12-15 09:14:43 -06:00
parent 01135bce3e
commit c5ece8d95d
5 changed files with 111 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/savings/savings-account-view/savings-account-view.component.html
+26 -25
View File
@@ -23,8 +23,8 @@
<p>
Account #: {{savingsAccountData.accountNo}} | {{entityType}} Name: {{savingsAccountData.clientName || savingsAccountData.groupName}}<br/>
<span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
Current Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.accountBalance}}<br/>
Available Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.availableBalance}}<br/>
Current Balances: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.accountBalance | number}}<br/>
Available Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.availableBalance | number}}<br/>
</span>
</p>
</mat-card-subtitle>
@@ -36,9 +36,9 @@
<ng-container *ngFor="let button of buttonConfig.singleButtons">
<button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
<i class="{{button.icon}}"></i> {{button.name}}</button>
<i ngClass="{{button.icon}}"></i> {{button.name}}</button>
</ng-container>
<ng-container *ngIf="buttonConfig.options">
<button mat-raised-button [matMenuTriggerFor]="More">More</button>
<mat-menu #More="matMenu">
@@ -47,7 +47,7 @@
</span>
</mat-menu>
</ng-container>
</mat-card-actions>
</mat-card-header>
@@ -62,39 +62,39 @@
<tbody>
<tr *ngIf="savingsAccountData.summary.totalWithdrawals">
<td>Total Withdrawls</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawals}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawals | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
<td>Withdrawals Fees</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawalFees}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawalFees | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.totalAnnualFees">
<td>Annual Fees</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalAnnualFees}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalAnnualFees | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
<td>Interest Earned</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.totalInterestPosted">
<td>Interest Posted</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestPosted}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestPosted | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
<td>Interest Earned Not Posted</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
<td>Interest On Overdraft</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
<td>Overdraft Interest Not Posted</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted | number}}</td>
</tr>
<tr>
<td>Nominal Interest Rate</td>
<td>{{savingsAccountData.nominalAnnualInterestRate}}%</td>
<td>{{savingsAccountData.nominalAnnualInterestRate | number}} %</td>
</tr>
<tr>
<td>Interest Compounding Period</td>
@@ -114,7 +114,7 @@
</tr>
<tr *ngIf="savingsAccountData.withdrawalFee">
<td>Withdrawal Fee</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.withdrawalFee.amount}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.withdrawalFee.amount | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.lastActiveTransactionDate">
<td>Last Active Transaction Date</td>
@@ -138,27 +138,27 @@
</tr>
<tr *ngIf="savingsAccountData.annualFee">
<td>Annual Fee</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.allowOverdraft">
<td>Over Draft Limit</td>
<td>{{savingsAccountData.overdraftLimit}}</td>
<td>{{savingsAccountData.overdraftLimit | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.allowOverdraft">
<td>Min Overdraft Required for Interest Calculation</td>
<td>{{savingsAccountData.minOverdraftForInterestCalculation}}</td>
<td>{{savingsAccountData.minOverdraftForInterestCalculation | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
<td>Min Balance Required for Interest Calculation</td>
<td>{{savingsAccountData.minBalanceForInterestCalculation}}</td>
<td>{{savingsAccountData.minBalanceForInterestCalculation | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.minRequiredBalance">
<td>Minimum Required Balance</td>
<td>{{savingsAccountData.minRequiredBalance}}</td>
<td>{{savingsAccountData.minRequiredBalance | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
<td>Enforce Minimum Required Balance</td>
<td>{{savingsAccountData.enforceMinRequiredBalance}}</td>
<td>{{savingsAccountData.enforceMinRequiredBalance | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
<td>Interest Recalculation Date</td>
@@ -166,7 +166,7 @@
</tr>
<tr *ngIf="savingsAccountData.onHoldFunds">
<td>On Hold Funds</td>
<td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds}}</a></td>
<td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | number}}</a></td>
</tr>
<tr *ngIf="savingsAccountData.withHoldTax">
<td>Withhold Tax Group</td>
@@ -222,7 +222,7 @@
</tr>
<tr>
<td>Nominal Interest Rate</td>
<td>{{savingsAccountData.nominalAnnualInterestRate}}%</td>
<td>{{savingsAccountData.nominalAnnualInterestRate | number}} %</td>
</tr>
</tbody>
</table>
@@ -252,12 +252,13 @@
<tbody>
<tr *ngIf="savingsAccountData.summary.totalDeposits">
<td>Total Deposits</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits | number}}</td>
</tr>
<tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
<td>Total Interest Earned</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned}}</td>
<td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned | number}}</td>
</tr>
</tbody>
</table>
</div>
src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
+10 -10
View File
@@ -20,33 +20,33 @@
</ng-container>
<ng-container matColumnDef="transactionDate">
<th mat-header-cell *matHeaderCellDef> Transaction Date </th>
<th mat-header-cell class="center" *matHeaderCellDef> Transaction Date </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.date | dateFormat }} </td>
</ng-container>
<ng-container matColumnDef="transactionType">
<th mat-header-cell *matHeaderCellDef> Transaction Type </th>
<th mat-header-cell class="center" *matHeaderCellDef> Transaction Type </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.transactionType.value }} </td>
</ng-container>
<ng-container matColumnDef="debit">
<th mat-header-cell *matHeaderCellDef> Debit </th>
<td mat-cell *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
<th mat-header-cell class="r-amount" *matHeaderCellDef> Debit </th>
<td mat-cell class="r-amount" *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? (transaction.amount | number) : 'N/A'}} </td>
</ng-container>
<ng-container matColumnDef="credit">
<th mat-header-cell *matHeaderCellDef> Credit </th>
<td mat-cell *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
<th mat-header-cell class="r-amount" *matHeaderCellDef> Credit </th>
<td mat-cell class="r-amount" *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | number) : 'N/A' }} </td>
</ng-container>
<ng-container matColumnDef="balance">
<th mat-header-cell *matHeaderCellDef> Balance </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </td>
<th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
<td mat-cell class="r-amount" *matCellDef="let transaction"> {{ transaction.runningBalance | number }} </td>
</ng-container>
<ng-container matColumnDef="viewReciept">
<th mat-header-cell *matHeaderCellDef> View Reciept </th>
<td mat-cell *matCellDef="let transaction">
<th mat-header-cell class="center" *matHeaderCellDef> View Reciept </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>