Update Loan account view to use Delinquency installment

This commit is contained in:
Jose Alberto Hernandez
2024-05-15 01:11:02 -06:00
committed by Jose Alberto Hernandez
parent 236034df41
commit 51e9e85462
5 changed files with 70 additions and 47 deletions
@@ -37,6 +37,7 @@ export class LoansAccountScheduleStepComponent implements OnInit {
const dateFormat = this.settingsService.dateFormat;
const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
delete payload['enableInstallmentLevelDelinquency'];
this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
this.repaymentScheduleDetails = response;
@@ -25,7 +25,7 @@
<mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
<mat-select required formControlName="loanTermFrequencyType">
<mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
{{ type.value }}
{{ type.value | translateCatalog }}
</mat-option>
</mat-select>
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
@@ -81,7 +81,7 @@
<mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
<mat-select formControlName="repaymentFrequencyType" disabled required>
<mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
{{ repaymentFrequencyType.value }}
{{ repaymentFrequencyType.value | translateCatalog }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -91,7 +91,7 @@
<mat-select formControlName="repaymentFrequencyNthDayType">
<mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
[value]="repaymentFrequencyNthDayType.id">
{{ repaymentFrequencyNthDayType.value }}
{{ repaymentFrequencyNthDayType.value | translateCatalog }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -101,7 +101,7 @@
<mat-select formControlName="repaymentFrequencyDayOfWeekType">
<mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
[value]="repaymentFrequencyDayOfWeekType.id">
{{ repaymentFrequencyDayOfWeekType.value }}
{{ repaymentFrequencyDayOfWeekType.value | translateCatalog }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -111,24 +111,36 @@
<ng-container *ngIf="!loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
<mat-form-field fxFlex="23%">
<mat-label>{{"labels.inputs.Nominal interest rate" | translate}}</mat-label>
<mat-label>{{"labels.inputs.Nominal interest rate" | translate}} %</mat-label>
<input type="number" matInput formControlName="interestRatePerPeriod">
</mat-form-field>
<mat-form-field fxFlex="23%">
<mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
<mat-select formControlName="interestRateFrequencyType">
<mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
{{ interestRateFrequencyType.value | translateCatalog }}
</mat-option>
</mat-select>
<mat-error>
{{'labels.inputs.Nominal interest rate frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="23%">
<mat-label>{{"labels.inputs.Interest method" | translate}}</mat-label>
<mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate}}">
<mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
{{ interestType.value }}
{{ interestType.value | translateCatalog }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="14%">
<mat-form-field fxFlex="23%">
<mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
<mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
<mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
{{ amortizationType.value }}
{{ amortizationType.value | translateCatalog }}
</mat-option>
</mat-select>
<mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
@@ -136,12 +148,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="14%" *ngIf="isEqualPrincipalPayments()">
<mat-form-field fxFlex="23%" *ngIf="isEqualPrincipalPayments()">
<mat-label>{{"labels.inputs.Principal Percentage Per Installment" | translate}}</mat-label>
<input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment">
</mat-form-field>
<mat-checkbox fxFlex="14%" formControlName="isEqualAmortization"
<mat-checkbox fxFlex="23%" formControlName="isEqualAmortization"
[checked]="loansAccountTermsData?.isEqualAmortization">
<p>{{"labels.inputs.Is Equal Amortization" | translate}}</p>
</mat-checkbox>
@@ -149,14 +161,13 @@
</ng-container>
<ng-container *ngIf="loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
<div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Interest Method" | translate}}</mat-label>
<mat-select formControlName="interestType">
<mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
{{ interestType.value }}
{{ interestType.value | translateCatalog }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -165,7 +176,7 @@
<mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
<mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
<mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
{{ amortizationType.value }}
{{ amortizationType.value | translateCatalog }}
</mat-option>
</mat-select>
<mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
@@ -176,22 +187,21 @@
<mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
<p>{{"labels.inputs.Is Floating Rate" | translate}}?</p>
</mat-checkbox>
</div>
</ng-container>
<h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Loan Schedule" | translate}}</h4>
<div fxFlex="48%" *ngIf="loanScheduleType">
<span fxFlex="40%"><p>{{"labels.inputs.Loan Schedule Type" | translate}}</p></span>
<span fxFlex="60%"><p>{{ loanScheduleType.value }}</p></span>
<span fxFlex="60%"><p>{{ loanScheduleType.value | translateCatalog }}</p></span>
</div>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Repayment Strategy" | translate}}</mat-label>
<mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate}}" [disabled]="repaymentStrategyDisabled">
<mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
{{ transactionProcessingStrategy.name }}
{{ transactionProcessingStrategy.name | translateCatalog }}
</mat-option>
</mat-select>
<mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
@@ -206,7 +216,7 @@
<mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}">
<mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
[value]="interestCalculationPeriodType.id">
{{ interestCalculationPeriodType.value }}
{{ interestCalculationPeriodType.value | translateCatalog }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -242,18 +252,18 @@
<input type="number" matInput formControlName="graceOnArrearsAgeing">
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
<mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
<input type="number" matInput formControlName="fixedEmiAmount">
</mat-form-field>
<div fxFlexFill fxFlex="48%" *ngIf="isDelinquencyEnabled()">
<p><span fxFlex="53%"><b>{{"labels.inputs.Delinquency Bucket" | translate}}</b></span>
<span fxFlex="48%">{{ loanProduct?.delinquencyBucket.name }}</span></p>
</div>
<ng-container *ngIf="isDelinquencyEnabled()">
<mat-checkbox fxFlex="48%" formControlName="enableInstallmentLevelDelinquency">
<ng-container fxFlex="48%" *ngIf="isDelinquencyEnabled()">
<mat-checkbox formControlName="enableInstallmentLevelDelinquency">
<p>{{'labels.inputs.Enable installment level Delinquency' | translate}}</p>
</mat-checkbox>
</ng-container>
<ng-container *ngIf="loansAccountTermsData?.isTopup">
<ng-container fxFlex="48%" *ngIf="loansAccountTermsData?.isTopup">
<mat-checkbox fxFlex="20%" formControlName="isTopup">
<p>{{"labels.inputs.Is Topup Loan" | translate}}?</p>
@@ -270,16 +280,21 @@
</ng-container>
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
<mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
<input type="number" matInput formControlName="fixedEmiAmount">
</mat-form-field>
<mat-divider fxFlex="98%"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate}}</span>
<span fxFlex="40%"><b>{{"labels.inputs.Recalculate Interest" | translate}}</b></span>
<span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled| yesNo }}</span>
</div>
<div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
<span fxFlex="40%">{{"labels.inputs.Days in year" | translate}}</span>
<span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value}}</span>
<span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateCatalog }}</span>
</div>
<ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
@@ -291,7 +306,7 @@
<div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
<span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}</span>
<span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value }}</span>
<span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateCatalog }}</span>
</div>
</ng-container>
@@ -300,8 +315,7 @@
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
<span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
}}</span>
<span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }}</span>
</div>
<div fxFlexFill>
@@ -89,6 +89,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
loanScheduleType: OptionData | null = null;
loanProduct: LoanProduct | null = null;
interestRateFrequencyTypeData: any[] = [];
/**
* Create Loans Account Terms Form
* @param formBuilder FormBuilder
@@ -116,6 +118,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
this.loanProduct = this.loansAccountTermsData.product;
}
this.interestRateFrequencyTypeData = this.loansAccountTermsData.interestRateFrequencyTypeOptions;
console.log(this.loansAccountTermsData);
console.log(this.loanProduct);
this.loansAccountTermsForm.patchValue({
'principalAmount': this.loansAccountTermsData.principal,
'loanTermFrequency': this.loansAccountTermsData.termFrequency,
@@ -138,7 +144,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
});
this.setAdvancedPaymentStrategyControls();
@@ -156,7 +163,6 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
});
}
if (this.isDelinquencyEnabled()) {
console.log("TEST " + this.loansAccountTermsData.enableInstallmentLevelDelinquency);
this.loansAccountTermsForm.addControl('enableInstallmentLevelDelinquency', new UntypedFormControl(this.loansAccountTermsData.enableInstallmentLevelDelinquency || this.loanProduct.enableInstallmentLevelDelinquency));
}
this.collateralDataSource = this.loansAccountTermsData.collateral || [];
@@ -230,7 +236,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
});
}
this.createloansAccountTermsForm();
@@ -349,7 +356,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
'maxOutstandingLoanBalance': [''],
'interestRateDifferential': [''],
'transactionProcessingStrategyCode': ['', Validators.required],
'multiDisburseLoan': [false]
'multiDisburseLoan': [false],
'interestRateFrequencyType': ['']
});
}
@@ -5,26 +5,26 @@
<div fxFlexFill>
<span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate}}</span>
<span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName }}</span>
<span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateCatalog }}</span>
</div>
<div fxFlexFill>
<span fxFlex="50%">{{"labels.inputs.Repayments" | translate}}</span>
<span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value}}
<span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value | translateCatalog }}
<span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0" class="m-l-10">
<span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value}}
<span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value | translateCatalog }}
</span>
</span>
</div>
<div fxFlexFill *ngIf="loanDetails.fixedLength">
<span fxFlex="50%"> {{"labels.inputs.Fixed Length" | translate}} </span>
<span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value}}</span>
<span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value | translateCatalog }}</span>
</div>
<div fxFlexFill>
<span fxFlex="50%"> {{"labels.inputs.Amortization" | translate}} </span>
<span fxFlex="50%"> {{loanDetails.amortizationType.value}} </span>
<span fxFlex="50%"> {{loanDetails.amortizationType.value | translateCatalog }} </span>
</div>
<div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
@@ -39,7 +39,7 @@
<div fxFlexFill>
<span fxFlex="50%"> {{"labels.inputs.Interest" | translate}} </span>
<span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value}}) </span>
<span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value | translateCatalog }}) </span>
</div>
<div fxFlexFill>
@@ -80,7 +80,7 @@
<div fxFlexFill>
<span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period" | translate}}</span>
<span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value}} </span>
<span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value | translateCatalog }} </span>
</div>
<div fxFlexFill>
@@ -135,22 +135,22 @@
<div fxFlexFill>
<span fxFlex="50%"> {{"labels.inputs.Days in year" | translate}}</span>
<span fxFlex="50%"> {{loanDetails.daysInYearType.value}} </span>
<span fxFlex="50%"> {{loanDetails.daysInYearType.value | translateCatalog }} </span>
</div>
<div fxFlexFill>
<span fxFlex="50%"> {{"labels.inputs.Days in month" | translate}}</span>
<span fxFlex="50%"> {{loanDetails.daysInMonthType.value }} </span>
<span fxFlex="50%"> {{loanDetails.daysInMonthType.value | translateCatalog }} </span>
</div>
<div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
<span fxFlex="50%"> {{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
<span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value}} </span>
<span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }} </span>
</div>
<div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
<span fxFlex="50%"> {{"labels.inputs.Advance payments adjustment type" | translate}}</span>
<span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value}} </span>
<span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value | translateCatalog }} </span>
</div>
<div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
@@ -81,7 +81,7 @@
<table mat-table [dataSource]="detailsDataSource">
<ng-container matColumnDef="Key">
<td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
<td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
</ng-container>
<ng-container matColumnDef="Value">
@@ -133,7 +133,7 @@
<table mat-table [dataSource]="detailsDataSource">
<ng-container matColumnDef="Key">
<td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
<td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
</ng-container>
<ng-container matColumnDef="Value">