94 lines
4.3 KiB
HTML
94 lines
4.3 KiB
HTML
<div class="tab-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="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="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="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="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>
|
|
|
|
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
|
|
|
</div>
|