cbsnexora/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html

<div class="container">

  <div fxFlexFill>
    <span fxFlex="40%">{{"labels.inputs.Maximum allowed outstanding balance"  |translate}}:</span>
    <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | formatNumber }}</span>
  </div>

  <h3>{{"labels.heading.Loan Tranche Details"  |translate}}</h3>

  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="flex-end" fxLayoutGap="2%">
    <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()"
      (click)="addDisbursementDataEntry()">
      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add"  |translate}}
    </button>
    <button mat-raised-button color="primary" *ngIf="!pristine"
      (click)="editDisbursementData()">
      {{"labels.buttons.Apply Changes"  |translate}}
    </button>
  </div>

  <table mat-table [dataSource]="disbursementDataSource" *ngIf="disbursementDataSource.length > 0">

    <ng-container matColumnDef="expected disbursement on">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Expected Disbursement On"  |translate}} </th>
      <td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate | dateFormat}} </td>
    </ng-container>

    <ng-container matColumnDef="disbursed on">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Disbursed On"  |translate}} </th>
      <td mat-cell *matCellDef="let ele">
        <span *ngIf="ele.actualDisbursementDate">
          {{ ele.actualDisbursementDate | dateFormat }}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="principal">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal"  |translate}} </th>
      <td mat-cell *matCellDef="let ele"> {{ ele.principal }} </td>
    </ng-container>

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
      <td mat-cell *matCellDef="let ele; let rowIndex = index">
        <span *ngIf="ele.actualDisbursementDate">
          <i class="fa fa-check "></i>
        </span>
        <button type="button" mat-icon-button color="primary"
          (click)="editDisbursementDataEntry(rowIndex)" matTooltip="{{ 'tooltips.Edit' | translate }}"
          matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()">
          <fa-icon icon="edit"></fa-icon>
        </button>
        <button type="button" mat-icon-button color="warn"
          (click)="removeDisbursementDataEntry(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate }}"
          matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()">
          <fa-icon icon="trash"></fa-icon>
        </button>
      </td>
    </ng-container>

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

  <div *ngIf="loanDetails.emiAmountVariations.length > 0">

    <h3>{{"labels.heading.Installment Amount Variations"  |translate}}: </h3>

    <table mat-table [dataSource]="loanDetails.emiAmountVariations">

      <ng-container matColumnDef="emi amount variation from">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Applicable From Date"  |translate}} </th>
        <td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom | dateFormat}} </td>
      </ng-container>

      <ng-container matColumnDef="fixed emi amount">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Installment Amount"  |translate}} </th>
        <td mat-cell *matCellDef="let ele"> {{ ele.termValue }} </td>
      </ng-container>

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