92 lines
3.9 KiB
HTML
92 lines
3.9 KiB
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>
|