Enhancement in loan and savings account views (#1690)
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
co-authored by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
c0185627f7
commit
6ef53c6462
@@ -1,83 +1,93 @@
|
||||
<div class="tab-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="feepenalty">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Fee/Penalty </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<span *ngIf="charge.penalty">Penalty</span>
|
||||
<span *ngIf="!charge.penalty">Fee</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="feepenalty">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Fee/Penalty </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<span *ngIf="charge.penalty">Penalty</span>
|
||||
<span *ngIf="!charge.penalty">Fee</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="paymentdueat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Payment due at </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="paymentdueat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Payment due at </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="dueDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="dueDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="calculationtype">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Calculation Type </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="calculationtype">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Calculation Type </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="due">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }} {{ charge.amount| number }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="due">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }} {{ charge.amount|
|
||||
number }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="paid">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="paid">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid|
|
||||
number }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="waived">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="waived">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived|
|
||||
number }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="outstanding">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="outstanding">
|
||||
<th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
|
||||
<td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{
|
||||
charge.amountOutstanding| number }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
|
||||
<td mat-cell class="center" *matCellDef="let charge">
|
||||
<span *ngIf="status === 'Submitted and pending approval'">
|
||||
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
|
||||
(click)="routeEdit($event); editCharge(charge)">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
<button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
|
||||
(click)="routeEdit($event); deleteCharge(charge.id)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</span>
|
||||
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge" *ngIf="charge.chargePayable && !charge.paid && status=='Active'"
|
||||
(click)="routeEdit($event); payCharge(charge.id)">
|
||||
<i class="fa fa-dollar"></i>
|
||||
</button>
|
||||
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge" *ngIf="!charge.actionFlag"
|
||||
(click)="routeEdit($event); waiveCharge(charge.id)">
|
||||
<i class="fa fa-flag"></i>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
|
||||
<td mat-cell class="center" *matCellDef="let charge">
|
||||
<span *ngIf="status === 'Submitted and pending approval'">
|
||||
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
|
||||
(click)="routeEdit($event); editCharge(charge)">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
<button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
|
||||
(click)="routeEdit($event); deleteCharge(charge.id)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</span>
|
||||
<button class="account-action-button" mat-raised-button color="accent" matTooltip="Adjust Charge"
|
||||
*ngIf="!charge.paid && status=='Active'"
|
||||
(click)="routeEdit($event); adjustCharge(charge.id)">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
|
||||
*ngIf="charge.chargePayable && !charge.paid && status=='Active'"
|
||||
(click)="routeEdit($event); payCharge(charge.id)">
|
||||
<i class="fa fa-dollar"></i>
|
||||
</button>
|
||||
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
|
||||
*ngIf="!charge.actionFlag" (click)="routeEdit($event); waiveCharge(charge.id)">
|
||||
<i class="fa fa-flag"></i>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
|
||||
</table>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user