update input

This commit is contained in:
2026-06-02 13:45:57 +03:30
parent 1f9166bed3
commit 8d6fa8860b
8 changed files with 69 additions and 31 deletions
@@ -97,13 +97,15 @@ export class AmountPercentageInputComponent {
private lastValidAmount = 0;
private lastValidPercentage = 0;
private toEnglishDigits(value: string): string {
return value
private toEnglishDigits(value: Maybe<string | number>): string {
const normalizedValue = value === null || value === undefined ? '' : String(value);
return normalizedValue
.replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
.replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632));
}
private sanitizeNumericValue(value: string, allowDecimal: boolean): string {
private sanitizeNumericValue(value: string = '', allowDecimal: boolean): string {
const normalized = this.toEnglishDigits(value).replace(/,/g, '');
const cleaned = normalized.replace(allowDecimal ? /[^0-9.]/g : /[^0-9]/g, '');
@@ -114,15 +116,25 @@ export class AmountPercentageInputComponent {
return decimalParts.length ? `${integerPart}.${mergedDecimals}` : integerPart;
}
private parseValue(value: Maybe<string>) {
const cleanedValue = this.sanitizeNumericValue(
value || '',
this.selectedType.value === 'percentage'
);
private normalizeLeadingZeros(value: string, allowDecimal: boolean): string {
if (!value) return value;
if (!allowDecimal) return value.replace(/^0+(?=\d)/, '');
console.log('cleaned', cleanedValue);
if (value.includes('.')) {
const [integerPart = '0', decimalPart = ''] = value.split('.');
const normalizedInteger = integerPart.replace(/^0+(?=\d)/, '') || '0';
return `${normalizedInteger}.${decimalPart}`;
}
return Number.isFinite(cleanedValue) ? Number(cleanedValue) : 0;
return value.replace(/^0+(?=\d)/, '');
}
private makeCleanValue(value: Maybe<string>) {
const allowDecimal = this.selectedType.value === 'percentage';
const cleanedValue = this.sanitizeNumericValue(value || '', allowDecimal);
const normalizedValue = this.normalizeLeadingZeros(cleanedValue, allowDecimal);
return !Number.isNaN(normalizedValue) ? normalizedValue : '0';
}
private getRangeLabel(value: number, isPercentageType: boolean) {
@@ -157,7 +169,7 @@ export class AmountPercentageInputComponent {
inputEl.value = value ? value.toLocaleString('en-US') : '0';
}
private resetPercentageInputView(value: number) {
private resetPercentageInputView(value: string) {
const inputEl = this.percentageInput?.nativeElement;
if (!inputEl) return;
inputEl.value = `${value}`;
@@ -178,26 +190,28 @@ export class AmountPercentageInputComponent {
private syncFromPercentage(rawValue: Maybe<any>) {
const { min, max } = this.getPercentageRange();
const percentageValue = this.parseValue(rawValue);
if (!this.isInRange(percentageValue, min, max)) {
this.showOutOfRangeToast(percentageValue, true, min, max);
const percentageValue = this.makeCleanValue(rawValue);
if (!this.isInRange(Number(percentageValue), min, max)) {
this.showOutOfRangeToast(Number(percentageValue), true, min, max);
this.percentageControl.setValue(this.lastValidPercentage);
this.resetPercentageInputView(this.lastValidPercentage);
this.resetPercentageInputView(this.lastValidPercentage.toString());
return;
}
this.lastValidPercentage = percentageValue;
const amountValue = (this.baseAmount * percentageValue) / 100;
this.lastValidPercentage = Number(percentageValue);
const amountValue = (this.baseAmount * Number(percentageValue)) / 100;
this.lastValidAmount = Number.isFinite(amountValue) ? amountValue : 0;
this.percentageControl.setValue(this.lastValidPercentage, { emitEvent: false });
this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
this.preparedLabel.set(this.prepareLabel(true));
this.resetPercentageInputView(percentageValue);
}
private syncFromAmount(rawValue: Maybe<any>) {
const { min, max } = this.getAmountRange();
const amountValue = this.parseValue(rawValue);
const amountValue = Number(this.makeCleanValue(rawValue));
if (!this.isInRange(amountValue, min, max)) {
this.showOutOfRangeToast(amountValue, false, min, max);
this.amountControl.setValue(this.lastValidAmount);
@@ -209,7 +223,7 @@ export class AmountPercentageInputComponent {
const percentageValue = this.baseAmount
? ((amountValue / this.baseAmount) * 100).toFixed(2)
: '0';
this.lastValidPercentage = this.parseValue(percentageValue);
this.lastValidPercentage = Number(this.makeCleanValue(percentageValue));
this.amountControl.setValue(this.lastValidAmount, { emitEvent: false });
this.percentageControl.setValue(percentageValue, { emitEvent: false });
@@ -244,8 +258,8 @@ export class AmountPercentageInputComponent {
}
});
this.lastValidAmount = this.parseValue(this.amountControl.value);
this.lastValidPercentage = this.parseValue(this.percentageControl.value);
this.lastValidAmount = Number(this.makeCleanValue(this.amountControl.value));
this.lastValidPercentage = Number(this.makeCleanValue(this.percentageControl.value));
if (isPercentageType) {
this.syncFromPercentage(this.percentageControl.value);
} else {
@@ -268,6 +268,7 @@ export class InputComponent {
private writeControlAndViewValue(target: HTMLInputElement, value: string, numericValue: number) {
const isIdentifierField = this.isIdentifierField();
const controlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
this.control.setValue(controlValue);
target.value = value;
@@ -289,6 +290,7 @@ export class InputComponent {
value = this.enforceMaxLength(value);
let numericValue = this.parseNumericValue(value);
const range = this.isOutOfRange(numericValue);
if (value !== '' && (range.min || range.max)) {
this.notifyRangeError(range);
@@ -62,8 +62,6 @@ export class PriceInputComponent {
}
onInput(event: InputNumberInputEvent) {
console.log('event', event);
const eventValue = Number(event.value ?? 0);
const min = this.min ?? undefined;
const max = this.max ?? undefined;
@@ -181,8 +181,6 @@ export class PageDataListComponent<I = any> {
};
onPage = ($event: any) => {
console.log('$event', $event);
this.onChangePage.emit($event);
};