cbsnexora/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

<div class="container">

  <table mat-table [dataSource]="repaymentScheduleDetails.periods" *ngIf="!forEditing">

    <ng-container matColumnDef="number">
      <th mat-header-cell class="center" *matHeaderCellDef> # </th>
      <td mat-cell class="right" *matCellDef="let ele"> {{ ele.period }} </td>
      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
    </ng-container>

    <ng-container matColumnDef="days">
      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Days"  |translate}} </th>
      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.daysInPeriod }} </td>
      <td mat-footer-cell class="center" *matFooterCellDef> <b> Total</b> </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
      <td mat-cell class="m-r-5" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.dueDate  | dateFormat}} </td>
      <td mat-footer-cell *matFooterCellDef>  </td>
    </ng-container>

    <ng-container matColumnDef="paiddate">
      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Paid Date"  |translate}} </th>
      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.obligationsMetOnDate  | dateFormat}} </td>
      <td mat-footer-cell *matFooterCellDef>  </td>
    </ng-container>

    <ng-container matColumnDef="check">
      <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
        <span *ngIf="ele.obligationsMetOnDate"> <i class="fa fa-check"></i> </span>
      </td>
      <td mat-footer-cell *matFooterCellDef> </td>
    </ng-container>

    <ng-container matColumnDef="balanceOfLoan">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
    </ng-container>

    <ng-container matColumnDef="principalDue">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due"  |translate}} </th>
      <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue | formatNumber }} </td>
      <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b>  </td>
    </ng-container>

    <ng-container matColumnDef="interest">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container matColumnDef="fees">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container matColumnDef="penalties">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Penalties"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container matColumnDef="due">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Due"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container matColumnDef="paid">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container matColumnDef="inadvance">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.In advance"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidInAdvanceForPeriod | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container matColumnDef="late">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Late"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidLateForPeriod | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

    <ng-container *ngIf="isWaived">
      <ng-container matColumnDef="waived">
        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived"  |translate}} </th>
        <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalWaivedForPeriod | formatNumber}} </td>
        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
      </ng-container>
    </ng-container>

    <ng-container *ngIf="!isWaived">
      <ng-container matColumnDef="waived">
        <th mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let ele"> </td>
        <td mat-footer-cell *matFooterCellDef> <b> </b> </td>
      </ng-container>
    </ng-container>

    <ng-container matColumnDef="outstanding">
      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding"  |translate}} </th>
      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
    </ng-container>

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

    <ng-container matColumnDef="header-amount">
      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> {{"labels.inputs.Loan Amount and Balance"  |translate}} </th>
    </ng-container>

    <ng-container matColumnDef="header-total-cost">
      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> {{"labels.inputs.Total Cost of Loan"  |translate}} </th>
    </ng-container>

    <ng-container matColumnDef="header-installment-totals">
      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6"> {{"labels.inputs.Installment Totals"  |translate}} </th>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"></tr>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

  </table>

  <!-- Repayment Schedule to be Edited -->
  <div *ngIf="forEditing" fxLayout="column" fxFlex="100%" >

    <table mat-table [dataSource]="repaymentScheduleDetails.periods">

      <ng-container matColumnDef="number">
        <th mat-header-cell class="center" *matHeaderCellDef> # </th>
        <td mat-cell *matCellDef="let ele"> {{ ele.period }} </td>
        <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
        <td mat-cell class="m-r-10" *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>
      </ng-container>

      <ng-container matColumnDef="balanceOfLoan">
        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan"  |translate}} </th>
        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
        <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
      </ng-container>

      <ng-container matColumnDef="principalDue">
        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due"  |translate}} </th>
        <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
        <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b>  </td>
      </ng-container>

      <ng-container matColumnDef="interest">
        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest"  |translate}} </th>
        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
      </ng-container>

      <ng-container matColumnDef="fees">
        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees"  |translate}} </th>
        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
      </ng-container>

      <ng-container matColumnDef="due">
        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Installment Amount"  |translate}} </th>
        <td mat-cell class="r-amount" *matCellDef="let ele">
          <span *ngIf="!ele.changed">
            {{ ele.totalDueForPeriod | formatNumber}}
          </span>
          <span *ngIf="ele.changed" class="amount-changed">
            <b>{{ ele.totalDueForPeriod | formatNumber}}</b>
          </span>
        </td>
        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
        <td mat-cell class="center" *matCellDef="let ele">
          <button *ngIf="ele.period" type="button" color="primary" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate }}" matTooltipPosition="above" (click)="editPeriod(ele)">
            <fa-icon icon="edit" size="lg"></fa-icon>
          </button>
        </td>
        <td mat-footer-cell *matFooterCellDef>  </td>
      </ng-container>

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

    </table>

  </div>

</div>