cbsnexora/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">

  <mat-form-field fxFlex="48%">
    <mat-label>Charge</mat-label>
    <mat-select #charge>
      <mat-option *ngFor="let charge of chargeData" [value]="charge">
        {{ charge.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div fxFlex="48%" fxFlexAlign="center">
    <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
      Add
    </button>
  </div>

  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource"
    [hidden]="chargesDataSource.length === 0">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.name + ', ' + charge.currency.displaySymbol }}
      </td>
    </ng-container>

    <ng-container matColumnDef="chargeCalculationType">
      <th mat-header-cell *matHeaderCellDef> Type </th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.chargeCalculationType.value }}
      </td>
    </ng-container>

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> Amount </th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.amount }}
        <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
          <fa-icon icon="pen"></fa-icon>
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="chargeTimeType">
      <th mat-header-cell *matHeaderCellDef> Collected On </th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.chargeTimeType.value }}
      </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> Date </th>
      <td mat-cell *matCellDef="let charge">
        <span
          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
          {{(charge.dueDate | date) || 'Unassigned'}}
        </span>
        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
          {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
        </span>
        <span
          *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                      || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
          N/A
        </span>
        <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
              || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
          <fa-icon icon="pen"></fa-icon>
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef> Actions </th>
      <td mat-cell *matCellDef="let charge">
        <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
          <fa-icon icon="trash"></fa-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>

  </table>

  <mat-divider fxFlex="98%"></mat-divider>

  <h4 fxFlex="98%" class="mat-h4">Overdue Charges</h4>

  <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef> Type </th>
      <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
    </ng-container>

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> Amount </th>
      <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
    </ng-container>

    <ng-container matColumnDef="collectedon">
      <th mat-header-cell *matHeaderCellDef> Collected On </th>
      <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
  </table>

  <mat-divider fxFlex="98%"></mat-divider>

  <div fxFlex="50%">
    <div fxLayout="column" fxFlex="50%" class="tableName">
      <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
    </div>

    <div fxLayout="column" fxFlex="50%">
      <div fxLayout="row" fxLayoutAlign="flex-end">
        <button mat-raised-button color="primary" (click)="addCollateral()">
          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
        </button>
      </div>
    </div>
  </div>

  <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef> Type </th>
      <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
    </ng-container>

    <ng-container matColumnDef="value">
      <th mat-header-cell *matHeaderCellDef> Value </th>
      <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef> Description </th>
      <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
    </ng-container>

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef> Actions </th>
      <td mat-cell *matCellDef="let ele; let collateralIndex = index">
        <button mat-icon-button color="warn" (click)="deleteCollateral(collateralIndex)">
          <fa-icon icon="trash"></fa-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></tr>
  </table>

</div>

<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
  <button mat-raised-button matStepperPrevious>
    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
    Previous
  </button>
  <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
    Next&nbsp;&nbsp;
    <fa-icon icon="arrow-right"></fa-icon>
  </button>
</div>