Skip to content

Commit bd48f54

Browse files
JaySoni1JaySoni1
authored
WEB-916 Align Loan Product Currency Form with Product Form (#3493)
1 parent ff7a5ab commit bd48f54

2 files changed

Lines changed: 114 additions & 39 deletions

File tree

‎src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html‎

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -51,33 +51,55 @@
5151
}
5252
</mat-form-field>
5353

54-
<mat-form-field class="flex-48">
55-
<mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
56-
<input
57-
type="number"
58-
min="1"
59-
matInput
60-
matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
61-
formControlName="inMultiplesOf"
62-
/>
63-
@if (loanProductCurrencyForm.get('inMultiplesOf')?.hasError('min')) {
64-
<mat-error>
65-
{{ 'labels.inputs.Currency in multiples of' | translate }}
66-
{{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
67-
</mat-error>
68-
}
69-
</mat-form-field>
54+
<mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t checkbox-align-center">
55+
{{ 'labels.inputs.Set the multiples of the loan and its installment' | translate }}
56+
</mat-checkbox>
57+
58+
@if (loanProductCurrencyForm.value.setMultiples) {
59+
<mat-form-field class="flex-48">
60+
<mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
61+
<input
62+
type="number"
63+
min="1"
64+
matInput
65+
matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
66+
formControlName="inMultiplesOf"
67+
/>
68+
@if (loanProductCurrencyForm.get('inMultiplesOf')?.hasError('min')) {
69+
<mat-error>
70+
{{ 'labels.inputs.Currency in multiples of' | translate }}
71+
{{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
72+
</mat-error>
73+
}
74+
@if (loanProductCurrencyForm.get('inMultiplesOf')?.hasError('required')) {
75+
<mat-error>
76+
{{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
77+
<strong>{{ 'labels.commons.required' | translate }}</strong>
78+
</mat-error>
79+
}
80+
</mat-form-field>
7081

71-
@if (loanProductService.isLoanProduct) {
7282
<mat-form-field class="flex-48">
7383
<mat-label>{{ 'labels.inputs.Installment in multiples of' | translate }}</mat-label>
74-
<input type="number" min="1" matInput formControlName="installmentAmountInMultiplesOf" />
75-
@if (loanProductCurrencyForm.get('installmentAmountInMultiplesOf')?.hasError('min')) {
84+
<input
85+
type="number"
86+
min="1"
87+
matInput
88+
matTooltip="{{ 'tooltips.Enter multiples of installment value' | translate }}"
89+
formControlName="installmentInMultiplesOf"
90+
/>
91+
@if (loanProductCurrencyForm.get('installmentInMultiplesOf')?.hasError('min')) {
7692
<mat-error>
7793
{{ 'labels.inputs.Installment in multiples of' | translate }}
7894
{{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
7995
</mat-error>
8096
}
97+
@if (loanProductCurrencyForm.get('installmentInMultiplesOf')?.hasError('required')) {
98+
<mat-error>
99+
{{ 'labels.inputs.Installment in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
100+
<strong>{{ 'labels.commons.required' | translate }}</strong>
101+
</mat-error>
102+
}
81103
</mat-form-field>
82104
}
83105
</div>

‎src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.ts‎

Lines changed: 73 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@
66
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
77
*/
88

9-
import { Component, OnInit, Input, inject } from '@angular/core';
9+
import { Component, OnInit, Input, inject, DestroyRef } from '@angular/core';
10+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
1011
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
1112
import { MatTooltip } from '@angular/material/tooltip';
1213
import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
14+
import { MatCheckbox } from '@angular/material/checkbox';
1315
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
1416
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
1517
import { LoanProductService } from '../../services/loan-product.service';
@@ -23,16 +25,18 @@ import { LoanProductService } from '../../services/loan-product.service';
2325
MatTooltip,
2426
MatStepperPrevious,
2527
FaIconComponent,
26-
MatStepperNext
28+
MatStepperNext,
29+
MatCheckbox
2730
]
2831
})
2932
export class LoanProductCurrencyStepComponent implements OnInit {
3033
private formBuilder = inject(UntypedFormBuilder);
3134
protected loanProductService = inject(LoanProductService);
35+
private destroyRef = inject(DestroyRef);
3236

3337
@Input() loanProductsTemplate: any;
3438

35-
loanProductCurrencyForm: UntypedFormGroup;
39+
loanProductCurrencyForm!: UntypedFormGroup;
3640

3741
currencyData: any;
3842

@@ -45,27 +49,21 @@ export class LoanProductCurrencyStepComponent implements OnInit {
4549
const currency = this.loanProductsTemplate.currency ? this.loanProductsTemplate.currency : this.currencyData[0];
4650

4751
let decimalPlacesValue = '';
48-
if (this.loanProductService.isWorkingCapital && !this.loanProductsTemplate.id) {
49-
decimalPlacesValue = '';
50-
} else {
52+
// Only populate decimal places for existing products (when editing)
53+
if (this.loanProductsTemplate.id) {
5154
decimalPlacesValue =
5255
currency.decimalPlaces === undefined || currency.decimalPlaces === null ? '' : currency.decimalPlaces;
5356
}
5457

5558
this.loanProductCurrencyForm.patchValue({
5659
currencyCode: currency.code,
5760
digitsAfterDecimal: decimalPlacesValue,
58-
inMultiplesOf:
59-
currency.inMultiplesOf === 0 || currency.inMultiplesOf === undefined || currency.inMultiplesOf === null
60-
? ''
61-
: currency.inMultiplesOf,
62-
installmentAmountInMultiplesOf:
63-
this.loanProductsTemplate.installmentAmountInMultiplesOf === 0 ||
64-
this.loanProductsTemplate.installmentAmountInMultiplesOf === undefined ||
65-
this.loanProductsTemplate.installmentAmountInMultiplesOf === null
66-
? ''
67-
: this.loanProductsTemplate.installmentAmountInMultiplesOf
61+
setMultiples: !!(this.loanProductsTemplate.inMultiplesOf || this.loanProductsTemplate.installmentInMultiplesOf),
62+
inMultiplesOf: this.loanProductsTemplate.inMultiplesOf ?? '',
63+
installmentInMultiplesOf: this.loanProductsTemplate.installmentInMultiplesOf ?? ''
6864
});
65+
66+
this.setupConditionalValidation();
6967
}
7068

7169
createLoanProductCurrencyForm() {
@@ -81,20 +79,75 @@ export class LoanProductCurrencyStepComponent implements OnInit {
8179
Validators.min(0)
8280
]
8381
],
84-
inMultiplesOf: ['']
82+
setMultiples: [false],
83+
inMultiplesOf: [''],
84+
installmentInMultiplesOf: ['']
8585
});
86+
}
8687

87-
if (this.loanProductService.isLoanProduct) {
88-
this.loanProductCurrencyForm.addControl('installmentAmountInMultiplesOf', new UntypedFormControl(''));
88+
setupConditionalValidation() {
89+
const inMultiplesOfControl = this.loanProductCurrencyForm.get('inMultiplesOf');
90+
const installmentInMultiplesOfControl = this.loanProductCurrencyForm.get('installmentInMultiplesOf');
91+
const setMultiplesControl = this.loanProductCurrencyForm.get('setMultiples');
92+
93+
if (setMultiplesControl?.value) {
94+
inMultiplesOfControl?.setValidators([
95+
Validators.required,
96+
Validators.min(1)
97+
]);
98+
inMultiplesOfControl?.updateValueAndValidity();
99+
installmentInMultiplesOfControl?.setValidators([
100+
Validators.required,
101+
Validators.min(1)
102+
]);
103+
installmentInMultiplesOfControl?.updateValueAndValidity();
89104
}
105+
106+
setMultiplesControl?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((checked) => {
107+
if (checked) {
108+
inMultiplesOfControl?.setValidators([
109+
Validators.required,
110+
Validators.min(1)
111+
]);
112+
installmentInMultiplesOfControl?.setValidators([
113+
Validators.required,
114+
Validators.min(1)
115+
]);
116+
} else {
117+
inMultiplesOfControl?.clearValidators();
118+
inMultiplesOfControl?.setValue('');
119+
installmentInMultiplesOfControl?.clearValidators();
120+
installmentInMultiplesOfControl?.setValue('');
121+
}
122+
inMultiplesOfControl?.updateValueAndValidity();
123+
installmentInMultiplesOfControl?.updateValueAndValidity();
124+
});
90125
}
91126

92127
get loanProductCurrency() {
93128
const formValue = this.loanProductCurrencyForm.value;
94129
const result: any = {
95-
...formValue
130+
currencyCode: formValue.currencyCode,
131+
digitsAfterDecimal: formValue.digitsAfterDecimal
96132
};
97133

134+
// Always include inMultiplesOf: null when unchecked to explicitly clear server value
135+
if (formValue.setMultiples) {
136+
result.inMultiplesOf =
137+
formValue.inMultiplesOf !== '' && formValue.inMultiplesOf !== null && formValue.inMultiplesOf !== undefined
138+
? formValue.inMultiplesOf
139+
: null;
140+
result.installmentInMultiplesOf =
141+
formValue.installmentInMultiplesOf !== '' &&
142+
formValue.installmentInMultiplesOf !== null &&
143+
formValue.installmentInMultiplesOf !== undefined
144+
? formValue.installmentInMultiplesOf
145+
: null;
146+
} else {
147+
result.inMultiplesOf = null;
148+
result.installmentInMultiplesOf = null;
149+
}
150+
98151
return result;
99152
}
100153
}

0 commit comments

Comments
 (0)