437 lines
19 KiB
HTML
437 lines
19 KiB
HTML
<form [formGroup]="loansAccountTermsForm">
|
|
|
|
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Principal {{currencyDisplaySymbol}}</mat-label>
|
|
<input type="number" matInput formControlName="principalAmount">
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.principalAmount.hasError('required')">
|
|
Principal is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<h4 fxFlex="98%" class="mat-h4">Term Options</h4>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Loan Term</mat-label>
|
|
<input matInput required formControlName="loanTermFrequency">
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
|
|
Loan Term is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Frequency</mat-label>
|
|
<mat-select required formControlName="loanTermFrequencyType">
|
|
<mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
|
|
{{ type.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
|
|
Frequency is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Number of repayments</mat-label>
|
|
<input type="number" matInput formControlName="numberOfRepayments">
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
|
|
Number of repayments is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
|
|
<mat-label>First repayment on</mat-label>
|
|
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
|
|
formControlName="repaymentsStartingFromDate">
|
|
<mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #repaymentsPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Repaid every</mat-label>
|
|
<input matInput required formControlName="repaymentEvery">
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
|
|
Repaid every is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Frequency</mat-label>
|
|
<mat-select formControlName="repaymentFrequencyType" required>
|
|
<mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
|
|
{{ repaymentFrequencyType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
|
|
<mat-label>Select On</mat-label>
|
|
<mat-select formControlName="repaymentFrequencyNthDayType">
|
|
<mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
|
|
[value]="repaymentFrequencyNthDayType.id">
|
|
{{ repaymentFrequencyNthDayType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
|
|
<mat-label>Select Day</mat-label>
|
|
<mat-select formControlName="repaymentFrequencyDayOfWeekType">
|
|
<mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
|
|
[value]="repaymentFrequencyDayOfWeekType.id">
|
|
{{ repaymentFrequencyDayOfWeekType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%" (click)="interestPicker.open()">
|
|
<mat-label>Interest charged from</mat-label>
|
|
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
|
|
formControlName="interestChargedFromDate">
|
|
<mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #interestPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<ng-container *ngIf="!loansAccountTemplate?.isLoanProductLinkedToFloatingRate">
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Nominal interest rate</mat-label>
|
|
<input type="number" matInput formControlName="interestRatePerPeriod">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Interest method</mat-label>
|
|
<mat-select formControlName="interestType">
|
|
<mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
|
|
{{ interestType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-checkbox fxFlex="48%" formControlName="isEqualAmortization"
|
|
[checked]="loansAccountTemplate?.isEqualAmortization">
|
|
<p>Is Equal Amortization</p>
|
|
</mat-checkbox>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="loansAccountTemplate?.isLoanProductLinkedToFloatingRate">
|
|
|
|
<div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Interest Method</mat-label>
|
|
<mat-select formControlName="interestType">
|
|
<mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
|
|
{{ interestType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
|
|
<p>Is Floating Rate?</p>
|
|
</mat-checkbox>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Amortization</mat-label>
|
|
<mat-select required formControlName="amortizationType">
|
|
<mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
|
|
{{ amortizationType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
|
|
Amortization Type is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<h4 fxFlex="98%" class="mat-h4">Interest Calculations</h4>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Interest calculation period</mat-label>
|
|
<mat-select formControlName="interestCalculationPeriodType">
|
|
<mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
|
|
[value]="interestCalculationPeriodType.id">
|
|
{{ interestCalculationPeriodType.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<!-- <mat-checkbox *ngIf="interestCalculationPeriodType != 0" fxFlex="48%" -->
|
|
<mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion">
|
|
<p>Calculate interest for exact days in partial period</p>
|
|
</mat-checkbox>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Arrears tolerance {{currencyDisplaySymbol}}</mat-label>
|
|
<input matInput type="number" formControlName="inArrearsTolerance">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Interest free period</mat-label>
|
|
<input matInput formControlName="graceOnInterestCharged">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Repayment strategy</mat-label>
|
|
<mat-select formControlName="transactionProcessingStrategyCode">
|
|
<mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
|
|
{{ transactionProcessingStrategy.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
|
|
Repayment Strategy is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
|
|
|
|
<mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnPrincipalPayment" class="margin-v">
|
|
On Principal Payment
|
|
</mat-checkbox>
|
|
|
|
<mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnInterestPayment" class="margin-v">
|
|
On Interest Payment
|
|
</mat-checkbox>
|
|
|
|
<mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v">
|
|
On Arreas Aging
|
|
</mat-checkbox>
|
|
|
|
<mat-form-field fxFlex="48%" *ngIf="loansAccountTemplate?.canDefineInstallmentAmount">
|
|
<mat-label>Installment Amount</mat-label>
|
|
<input type="number" matInput formControlName="fixedEmiAmount">
|
|
</mat-form-field>
|
|
|
|
<ng-container *ngIf="loansAccountTemplate?.canUseForTopup">
|
|
|
|
<mat-checkbox fxFlex="48%" formControlName="isTopup">
|
|
<p>Is Topup Loan?</p>
|
|
</mat-checkbox>
|
|
|
|
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.isTopup.value">
|
|
<mat-label>Loan closed with Topup</mat-label>
|
|
<mat-select formControlName="loanIdToClose">
|
|
<mat-option *ngFor="let clientActiveLoan of clientActiveLoanData" [value]="clientActiveLoan.id">
|
|
{{ clientActiveLoan.accountNo }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
</ng-container>
|
|
|
|
<mat-divider fxFlex="98%"></mat-divider>
|
|
|
|
<div fxFlexFill>
|
|
<span fxFlex="40%">Recalculate Interest</span>
|
|
<span fxFlex="60%">{{ loansAccountTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
|
|
</div>
|
|
|
|
<div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
|
|
<span fxFlex="40%">Days in year</span>
|
|
<span fxFlex="60%">{{ loansAccountTemplate?.daysInYearType.value}}</span>
|
|
</div>
|
|
|
|
<ng-container *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
|
|
|
|
<div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
|
|
<span fxFlex="40%">Advance payments adjustment type</span>
|
|
<span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.rescheduleStrategyType.value }}</span>
|
|
</div>
|
|
|
|
<div fxFlexFill *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
|
|
<span fxFlex="40%">Days in month</span>
|
|
<span fxFlex="60%">{{ loansAccountTemplate?.daysInMonthType.value }}</span>
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="loansAccountTemplate?.isInterestRecalculationEnabled">
|
|
|
|
<div fxFlexFill>
|
|
<span fxFlex="40%">Interest recalculation compounding on</span>
|
|
<span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.interestRecalculationCompoundingType.value
|
|
}}</span>
|
|
</div>
|
|
|
|
<div fxFlexFill>
|
|
<span fxFlex="40%">Frequency Interval for recalculation</span>
|
|
<span fxFlex="60%">
|
|
<span>{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
|
|
<span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday != null">
|
|
on {{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
|
|
<span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay != null">on day
|
|
{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay}}</span>
|
|
<span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay == null &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay != null">on
|
|
{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
|
|
{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
|
|
</span>
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<div fxFlexFill
|
|
*ngIf="loansAccountTemplate?.isInterestRecalculationEnabled && loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyType.id != 1">
|
|
<span fxFlex="40%">Frequency Interval for recalculation</span>
|
|
<span fxFlex="60%">{{ loansAccountTemplate?.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
|
|
</div>
|
|
|
|
<ng-container *ngIf="multiDisburseLoan">
|
|
<mat-divider fxFlex="98%"></mat-divider>
|
|
<div fxFlexFill *ngIf="allowAddDisbursementDetails()">
|
|
<h4 fxFlex="98%" class="mat-h4">Loan Tranche Details</h4>
|
|
<mat-form-field fxFlex="48%">
|
|
<mat-label>Maximum allowed outstanding balance</mat-label>
|
|
<input matInput required formControlName="maxOutstandingLoanBalance">
|
|
</mat-form-field>
|
|
<span fxFlex>
|
|
<button type="button" mat-icon-button color="primary" (click)="addDisbursementDataEntry(disbursementData)"
|
|
[disabled]="isMultiDisbursedCompleted">
|
|
<fa-icon icon="plus-circle" size="lg"></fa-icon>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div fxFlexFill *ngIf="!allowAddDisbursementDetails()">
|
|
<h4 fxFlex="98%" class="mat-h4">Loan Tranche Details are not allowed for this Loan Product</h4>
|
|
</div>
|
|
|
|
<table mat-table [dataSource]="disbursementDataSource" [hidden]="disbursementDataSource.length === 0">
|
|
|
|
<ng-container matColumnDef="expectedDisbursementDate">
|
|
<th mat-header-cell *matHeaderCellDef> Eexpected Disbursement Date </th>
|
|
<td mat-cell *matCellDef="let row">
|
|
{{ row.expectedDisbursementDate | dateFormat }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="principal">
|
|
<th mat-header-cell *matHeaderCellDef> Principal </th>
|
|
<td mat-cell *matCellDef="let row">
|
|
{{ row.principal }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef> Actions </th>
|
|
<td mat-cell *matCellDef="let row; let rowIndex = index">
|
|
<button type="button" mat-icon-button color="warn" (click)="removeDisbursementDataEntry(rowIndex)"
|
|
matTooltip="Delete" matTooltipPosition="left">
|
|
<fa-icon icon="trash"></fa-icon>
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="disbursementDisplayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: disbursementDisplayedColumns;"></tr>
|
|
|
|
</table>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="loansAccountTemplate?.isInterestRecalculationEnabled && loansAccountTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
|
|
|
|
<div fxFlexFill>
|
|
<span fxFlex="40%">Frequency for compounding</span>
|
|
<span fxFlex="60%">{{
|
|
loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
|
|
<span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null">
|
|
on {{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
|
|
</span>
|
|
<span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay != null">on day
|
|
{{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
|
|
</span>
|
|
<span *ngIf="loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay == null &&
|
|
loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on
|
|
{{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
|
|
{{ loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<div fxFlexFill
|
|
*ngIf="loansAccountTemplate?.isInterestRecalculationEnabled && loansAccountTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
|
|
<span fxFlex="40%">Frequency Interval for compounding</span>
|
|
<span fxFlex="60%">{{
|
|
loansAccountTemplate?.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
|
|
</div>
|
|
|
|
<mat-divider fxFlex="98%"></mat-divider>
|
|
|
|
<div fxFlex="50%">
|
|
<div fxLayout="column" fxFlex="50%" class="table_name">
|
|
<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> Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
|
|
|
|
<ng-container matColumnDef="type">
|
|
<th mat-header-cell *matHeaderCellDef> Name </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="value">
|
|
<th mat-header-cell *matHeaderCellDef> Quantity </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="totalValue">
|
|
<th mat-header-cell *matHeaderCellDef> Total Value </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="totalCollateralValue">
|
|
<th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
|
|
<td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </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>
|
|
Previous
|
|
</button>
|
|
<button mat-raised-button matStepperNext>
|
|
Next
|
|
<fa-icon icon="arrow-right"></fa-icon>
|
|
</button>
|
|
<button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|