78 lines
3.5 KiB
HTML
78 lines
3.5 KiB
HTML
<div class="container">
|
|
|
|
<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="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="dueasof">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
|
|
<td mat-cell *matCellDef="let charge"> {{ charge.dueDate| date }} </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 *matHeaderCellDef mat-sort-header> Due </th>
|
|
<td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amount| number }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="paid">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Paid </th>
|
|
<td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="waived">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Waived </th>
|
|
<td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="outstanding">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
|
|
<td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
|
|
<td mat-cell *matCellDef="let charge">
|
|
<button class="charges-action-button" mat-raised-button color="primary" *ngIf="status === 'Submitted and pending approval'">
|
|
<i class="fa fa-edit" matTooltip="edit"></i>
|
|
</button>
|
|
<button class="charges-action-button" mat-raised-button color="warning" *ngIf="status === 'Submitted and pending approval'">
|
|
<i class="fa fa-trash-o" matTooltip="delete"></i>
|
|
</button>
|
|
<button class="charges-action-button" mat-raised-button color="primary" *ngIf="!charge.actionFlag">
|
|
<i class="fa fa-flag"></i>
|
|
</button>
|
|
<button class="charges-action-button" mat-raised-button color="success" *ngIf="charge.chargePayable && status=='Active'">
|
|
Pay
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
|
|
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
|
|
|
</div>
|