cbsnexora/src/app/loans/loans-view/charges-tab/charges-tab.component.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="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">
          <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 && 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>