cbsnexora/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html

<div class="container">

  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
    <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
      {{"labels.inputs.Hide Accruals" | translate }}</mat-checkbox>
    <button mat-raised-button color="primary" class="transaction-button" [routerLink]="['export']">
      {{"labels.buttons.Export" | translate }}
    </button>
    <button mat-raised-button color="primary" class="transaction-button">
      {{"labels.buttons.View Journal Entries" | translate }}
    </button>
  </div>

  <table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id" | translate }} </th>
      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.id }}
      </td>
    </ng-container>

    <ng-container matColumnDef="office">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate }} </th>
      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
        transaction.officeName }} </td>
    </ng-container>

    <ng-container matColumnDef="externalId">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate }} </th>
      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">
        <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
      </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate }} </th>
      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
    </ng-container>

    <ng-container matColumnDef="transactionType">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate }} </th>
      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
        transaction.type.value }} </td>
    </ng-container>

    <ng-container matColumnDef="amount">
      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | formatNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="principal">
      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Breakdown" | translate }} </th>
      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | formatNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="interest">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | formatNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="fee">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | formatNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="penalties">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | formatNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="loanBalance">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate }} </th>
      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | formatNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
      <td mat-cell *matCellDef="let transaction" class="center td-min-space">
        <button class="account-action-button" *ngIf="allowUndoTransaction(transaction)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Undo Transaction' | translate }}"
          matTooltipPosition="left" (click)="undoTransaction(transaction, $event)">
          <i class="fa fa-undo"></i>
        </button>
        <button class="account-action-button" *ngIf="!transaction.manuallyReversed" mat-raised-button color="primary"
          (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']" matTooltip="{{ 'tooltips.View Receipts' | translate }}">
          <i class="fa fa-file-text"></i>
        </button>
        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate }}"
          matTooltipPosition="left" (click)="routeEdit($event)"
          [routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
          <i class="fa fa-arrow-circle-right"></i>
        </button>
      </td>
    </ng-container>

    <!-- Sub header -->
    <ng-container matColumnDef="header">
      <th mat-header-cell *matHeaderCellDef [attr.colspan]="6"> </th>
    </ng-container>

    <ng-container matColumnDef="header-principal">
      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Principal" | translate }} </th>
    </ng-container>

    <ng-container matColumnDef="header-interest">
      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Interest" | translate }} </th>
    </ng-container>

    <ng-container matColumnDef="header-fees">
      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Fees" | translate }} </th>
    </ng-container>

    <ng-container matColumnDef="header-penalties">
      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Penalties" | translate }} </th>
    </ng-container>

    <ng-container matColumnDef="header-action">
      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> </th>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-header-row
      *matHeaderRowDef="['header', 'header-principal', 'header-interest', 'header-fees', 'header-penalties', 'header-action']">
    </tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)">
    </tr>

  </table>

  <mat-paginator [pageSize]="100" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>

</div>