86 lines
3.3 KiB
HTML
86 lines
3.3 KiB
HTML
<div class="container">
|
|
|
|
<div fxFlexFill>
|
|
<span fxFlex="40%">Maximum allowed outstanding balance:</span>
|
|
<span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | number }}</span>
|
|
</div>
|
|
|
|
<h3>Loan Tranche Details</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"></fa-icon> Add
|
|
</button>
|
|
<button mat-raised-button color="primary" *ngIf="!pristine"
|
|
(click)="editDisbursementData()">
|
|
Apply Changes
|
|
</button>
|
|
</div>
|
|
|
|
<table mat-table [dataSource]="disbursementDataSource" *ngIf="disbursementDataSource.length > 0">
|
|
|
|
<ng-container matColumnDef="expected disbursement on">
|
|
<th mat-header-cell *matHeaderCellDef> Expected Disbursement On </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate | dateFormat}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="disbursed on">
|
|
<th mat-header-cell *matHeaderCellDef> Disbursed On </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> Principal </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.principal }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="action">
|
|
<th mat-header-cell *matHeaderCellDef> Actions </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="Edit"
|
|
matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate">
|
|
<fa-icon icon="edit"></fa-icon>
|
|
</button>
|
|
<button type="button" mat-icon-button color="warn"
|
|
(click)="removeDisbursementDataEntry(rowIndex)" matTooltip="Delete"
|
|
matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate">
|
|
<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>Installment Amount Variations: </h3>
|
|
|
|
<table mat-table [dataSource]="loanDetails.emiAmountVariations">
|
|
|
|
<ng-container matColumnDef="emi amount variation from">
|
|
<th mat-header-cell *matHeaderCellDef> Applicable From Date </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom | dateFormat}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="fixed emi amount">
|
|
<th mat-header-cell *matHeaderCellDef> Installment Amount </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>
|