ahasani/psp_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some ui fix and debug input field, separate price field

Browse Source
This commit is contained in:
ahasani194
2026-06-02 12:22:32 +03:30
parent ae963a60ce
commit 1f9166bed3
34 changed files with 335 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/core/services/toast.service.ts
+8
View File
@@ -10,10 +10,18 @@ interface IToast extends Pick<ToastMessageOptions, 'sticky' | 'life'> {
providedIn: 'root',
})
export class ToastService {
private readonly dedupeWindowMs = 2000;
private readonly recentMessages = new Map<string, number>();
constructor(private messageService: MessageService) {}
add(message: ToastMessageOptions) {
if (!message.detail) return;
const dedupeKey = `${message.severity ?? ''}|${message.summary ?? ''}|${message.detail}`;
const now = Date.now();
const lastShownAt = this.recentMessages.get(dedupeKey);
if (lastShownAt && now - lastShownAt < this.dedupeWindowMs) return;
this.recentMessages.set(dedupeKey, now);
this.messageService.add(message);
}
src/app/domains/pos/modules/configs/components/goldPrice/form.component.html
+1 -2
View File
@@ -1,7 +1,6 @@
<app-input
<app-price-input
[control]="goldPrice"
label="قیمت پیش‌فرض هر گرم طلا"
name="goldBasePrice"
type="price"
[min]="0"
hint="در این بخش می‌توانید قیمت پیش‌فرض هر گرم طلا را وارد کنید." />
src/app/domains/pos/modules/configs/components/goldPrice/form.component.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { InputComponent } from '@/shared/components';
import { PriceInputComponent } from '@/shared/components/input/price-input.component';
import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { debounce, timer } from 'rxjs';
@@ -7,7 +7,7 @@ import { PosConfigGoldPriceService } from './services/main.service';
@Component({
selector: 'pos-config-gold-price-form',
templateUrl: 'form.component.html',
imports: [ReactiveFormsModule, InputComponent],
imports: [ReactiveFormsModule, PriceInputComponent],
})
export class PosConfigGoldPriceFormComponent {
private readonly service = inject(PosConfigGoldPriceService);
src/app/domains/pos/modules/saleInvoices/components/filter-drawer.component.html
+2 -2
View File
@@ -48,8 +48,8 @@
</div> -->
<div class="grid grid-cols-2 gap-2">
<app-input label="از مبلغ" [control]="form.controls.total_amount_from" name="total_amount_from" type="price" />
<app-input label="تا مبلغ" [control]="form.controls.total_amount_to" name="total_amount_to" type="price" />
<app-price-input label="از مبلغ" [control]="form.controls.total_amount_from" name="total_amount_from" />
<app-price-input label="تا مبلغ" [control]="form.controls.total_amount_to" name="total_amount_to" />
</div>
</form>
<div class="bg-surface-card mt-auto shrink-0 pb-4">
src/app/domains/pos/modules/saleInvoices/components/filter-drawer.component.ts
+2
View File
@@ -2,6 +2,7 @@ import { Maybe } from '@/core';
import { EnumSelectComponent } from '@/shared/apiEnum/select.component';
import { TspProviderResponseStatus } from '@/shared/catalog';
import { InputComponent } from '@/shared/components';
import { PriceInputComponent } from '@/shared/components/input/price-input.component';
import { DatepickerComponent } from '@/uikit';
import { nowGregorian } from '@/utils';
import {
@@ -32,6 +33,7 @@ import { IPosSaleInvoicesFilterDto } from '../models';
EnumSelectComponent,
InputComponent,
DatepickerComponent,
PriceInputComponent,
],
})
export class PosSaleInvoicesFilterDrawerComponent implements OnChanges {
src/app/domains/pos/modules/saleInvoices/components/list.component.html
+1 -1
View File
@@ -54,4 +54,4 @@
[visible]="filterVisible()"
[value]="filters()"
(visibleChange)="filterVisible.set($event)"
(apply)="onFilterApply($event)" />
(apply)="changeFilter($event)" />
src/app/domains/pos/modules/saleInvoices/components/list.component.ts
+11 -1
View File
@@ -112,6 +112,12 @@ export class PosSaleInvoiceListComponent {
this.filterVisible.update((v) => !v);
}
changeFilter(query: IPosSaleInvoicesFilterDto) {
const { page, ...rest } = query;
this.resetPage();
this.onFilterApply(rest);
}
onFilterApply(query: IPosSaleInvoicesFilterDto) {
this.filters.set(query);
this.syncFiltersToQueryParams();
@@ -119,6 +125,7 @@ export class PosSaleInvoiceListComponent {
}
removeFilter(key: keyof IPosSaleInvoicesFilterDto) {
this.resetPage();
const next = { ...this.filters() };
delete next[key];
this.filters.set(next);
@@ -126,6 +133,10 @@ export class PosSaleInvoiceListComponent {
this.getData();
}
resetPage() {
this.filters.update((val) => ({ ...val, page: 1 }));
}
toSinglePage(item: IPosSaleInvoicesResponse) {
this.router.navigateByUrl(posSaleInvoicesNamedRoutes.saleInvoice.meta.pagePath!(item.id));
}
@@ -160,7 +171,6 @@ export class PosSaleInvoiceListComponent {
}
private syncFiltersToQueryParams() {
this.filters.update((val) => ({ ...val, page: 1 }));
const queryParams = Object.entries(this.filters()).reduce<Record<string, string>>(
(acc, [key, value]) => {
if (value !== undefined && value !== null && value !== '') {
src/app/domains/pos/modules/shop/components/customers/unknown/form.component.html
+1 -1
View File
@@ -1,5 +1,5 @@
<form [formGroup]="form" (submit)="submit()">
<app-input [control]="form.controls.name" name="name" label="نام مشتری" />
<app-input [control]="form.controls.national_id" name="national_id" label="شماره ملی" type="nationalId" />
<app-form-footer-actions submitLabel="ثبت بدون اطلاعات خریدار و ادامه" (onCancel)="close()" />
<app-form-footer-actions submitLabel="ثبت مشتری و ادامه" (onCancel)="close()" />
</form>
src/app/domains/pos/modules/shop/components/payment/form-dialog.component.html
+6 -7
View File
@@ -36,7 +36,7 @@
(onChange)="changePayByTerminalSteps($event.value)" />
</uikit-field>
@for (terminalControl of terminalControls; track $index) {
<app-input
<app-price-input
[control]="terminalControl"
[name]="'terminal_' + $index"
[label]="$index === 0 ? 'پرداخت با پوز' : 'پرداخت با پوز - مرحله ' + ($index + 1)"
@@ -53,30 +53,29 @@
باقی‌مانده مبلغ
</button>
</ng-template>
</app-input>
</app-price-input>
}
</div>
<form [formGroup]="form" (submit)="submit()">
<app-input
<app-price-input
[control]="form.controls.cash"
name="cash"
label="نقدی/ کارت‌خوان دیگر/ کارت به کارت"
type="price"
[max]="cashMax()">
<ng-template #suffixTemp>
<button pButton size="small" type="button" [disabled]="!remainedAmount()" (click)="fillRemained('CASH')">
باقی‌مانده مبلغ
</button>
</ng-template>
</app-input>
</app-price-input>
@if (isGoldGuild()) {
<app-input [control]="form.controls.set_off" name="setOff" label="تهاتر" type="price" [max]="setOffMax()">
<app-price-input [control]="form.controls.set_off" name="setOff" label="تهاتر" [max]="setOffMax()">
<ng-template #suffixTemp>
<button pButton size="small" type="button" [disabled]="!remainedAmount()" (click)="fillRemained('SET_OFF')">
باقی‌مانده مبلغ
</button>
</ng-template>
</app-input>
</app-price-input>
}
<app-form-footer-actions
src/app/domains/pos/modules/shop/components/payment/form-dialog.component.ts
+3 -2
View File
@@ -3,9 +3,10 @@ import { NativeBridgeService } from '@/core/services';
import { ToastService } from '@/core/services/toast.service';
import { PosInfoStore } from '@/domains/pos/store';
import { AbstractFormDialog } from '@/shared/abstractClasses';
import { InputComponent, KeyValueComponent } from '@/shared/components';
import { KeyValueComponent } from '@/shared/components';
import { SharedLightBottomsheetComponent } from '@/shared/components/dialog/light-bottomsheet.component';
import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
import { PriceInputComponent } from '@/shared/components/input/price-input.component';
import { UikitFieldComponent, UikitLabelComponent } from '@/uikit';
import { Component, computed, inject, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -31,7 +32,6 @@ import { PosLandingStore } from '../../store/main.store';
imports: [
FormsModule,
ReactiveFormsModule,
InputComponent,
FormFooterActionsComponent,
KeyValueComponent,
ButtonDirective,
@@ -40,6 +40,7 @@ import { PosLandingStore } from '../../store/main.store';
UikitFieldComponent,
SelectButton,
UikitLabelComponent,
PriceInputComponent,
],
providers: [{ provide: PosPaymentBridgeAbstract, useExisting: PosPaymentBridgeService }],
})
src/app/domains/pos/modules/shop/components/views/grid-view.component.html
+6 -4
View File
@@ -7,7 +7,12 @@
}
} @else {
@for (good of visibleGoods(); track good.id) {
<div class="bg-surface-card border-surface-border flex flex-1 flex-col rounded-lg border p-1">
<div class="bg-surface-card border-surface-border relative flex flex-1 flex-col rounded-lg border p-1">
@if (!good.is_default_guild_good) {
<div class="absolute inset-e-2 top-2">
<p-tag severity="contrast" value="شخصی" />
</div>
}
<img
[src]="good.image_url || goodPlaceholder"
loading="lazy"
@@ -16,9 +21,6 @@
<div class="mt-2 flex grow flex-col justify-between text-center">
<span class="flex w-full grow items-center justify-center text-center text-lg font-bold">
{{ good.name }}
@if (!good.is_default_guild_good) {
<small class="text-muted-color text-xs">*</small>
}
</span>
<div class="my-2 mt-1 flex w-full shrink-0 items-center justify-between gap-1 px-2">
<button pButton type="button" label="انتخاب" class="w-full grow" (click)="addProduct(good)"></button>
src/app/domains/pos/modules/shop/components/views/grid-view.component.ts
+2 -1
View File
@@ -11,6 +11,7 @@ import {
} from '@angular/core';
import { ButtonDirective } from 'primeng/button';
import { Skeleton } from 'primeng/skeleton';
import { Tag } from 'primeng/tag';
import images from 'src/assets/images';
import { PosLandingStore } from '../../store/main.store';
import { FavoriteCTAComponent } from './favorite-CTA.component';
@@ -19,7 +20,7 @@ import { FavoriteCTAComponent } from './favorite-CTA.component';
selector: 'pos-good-grid-view',
templateUrl: './grid-view.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ButtonDirective, Skeleton, FavoriteCTAComponent],
imports: [ButtonDirective, Skeleton, FavoriteCTAComponent, Tag],
})
export class PosGoodsGridViewComponent {
@Output() onAdd = new EventEmitter<IGoodResponse>();
src/app/domains/pos/modules/shop/components/views/list-view.component.html
+3 -3
View File
@@ -17,9 +17,9 @@
<div class="flex flex-col gap-2">
<span class="text-base font-bold">
{{ good.name }}
@if (!good.is_default_guild_good) {
<small class="text-muted-color text-xs">*</small>
}
<!-- @if (!good.is_default_guild_good) {
<p-tag severity="contrast" value="شخصی" />
} -->
</span>
<span class="text-muted-color text-sm">
{{ good.sku.code }}
src/app/domains/pos/modules/shop/components/views/list-view.component.ts
+2 -1
View File
@@ -11,6 +11,7 @@ import {
} from '@angular/core';
import { ButtonDirective } from 'primeng/button';
import { Skeleton } from 'primeng/skeleton';
import { Tag } from 'primeng/tag';
import images from 'src/assets/images';
import { PosLandingStore } from '../../store/main.store';
import { FavoriteCTAComponent } from './favorite-CTA.component';
@@ -19,7 +20,7 @@ import { FavoriteCTAComponent } from './favorite-CTA.component';
selector: 'pos-goods-list-view',
templateUrl: './list-view.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ButtonDirective, Skeleton, FavoriteCTAComponent],
imports: [ButtonDirective, Skeleton, FavoriteCTAComponent, Tag],
})
export class PosGoodsListViewComponent {
private readonly store = inject(PosLandingStore);
src/app/shared/components/amountPercentageInput/amount-percentage-input.component.html
+7 -11
View File
@@ -3,10 +3,9 @@
[name]="name"
[control]="selectedType.value === 'amount' ? amountControl : percentageControl"
[showLabel]="!!label"
[showErrors]="showErrors"
>
[showErrors]="showErrors">
<ng-template #labelView>
<div class="flex gap-1 items-center justify-between">
<div class="flex items-center justify-between gap-1">
<uikit-label [name]="name">
{{ preparedLabel() }}
</uikit-label>
@@ -17,7 +16,7 @@
</ng-template>
<p-inputgroup>
@if (selectedType.value === "amount") {
@if (selectedType.value === 'amount') {
<p-inputnumber
#amountInput
[attr.id]="name"
@@ -25,11 +24,11 @@
[attr.name]="name"
[attr.placeholder]="placeholder"
[attr.autocomplete]="autocomplete"
[attr.inputmode]="'numeric'"
[inputStyle]="{ direction: 'ltr' }"
[inputStyleClass]="` w-full hasSuffix text-left ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
[required]="required"
[invalid]="amountControl.invalid && (amountControl.touched || amountControl.dirty)"
/>
[invalid]="amountControl.invalid && (amountControl.touched || amountControl.dirty)" />
} @else {
<input
#percentageInput
@@ -39,7 +38,6 @@
[attr.name]="name"
[attr.placeholder]="placeholder"
[attr.inputmode]="'numeric'"
[attr.type]="'number'"
dir="ltr"
[attr.autocomplete]="autocomplete"
[classList]="
@@ -49,8 +47,7 @@
].join(' ')
"
[required]="required"
[invalid]="percentageControl.invalid && (percentageControl.touched || percentageControl.dirty)"
/>
[invalid]="percentageControl.invalid && (percentageControl.touched || percentageControl.dirty)" />
}
<p-inputgroup-addon class="py-0!">
@@ -60,8 +57,7 @@
tabindex="-1"
optionValue="value"
size="small"
class="border-none! shadow-none! w-full!"
/>
class="w-full! border-none! shadow-none!" />
</p-inputgroup-addon>
</p-inputgroup>
@if (hint) {
src/app/shared/components/amountPercentageInput/amount-percentage-input.component.ts
+27 -5
View File
@@ -97,10 +97,32 @@ export class AmountPercentageInputComponent {
private lastValidAmount = 0;
private lastValidPercentage = 0;
private parseValue(value: Maybe<any>) {
const normalized = `${value ?? ''}`.replace(/,/g, '');
const parsed = parseFloat(normalized);
return Number.isFinite(parsed) ? parsed : 0;
private toEnglishDigits(value: string): string {
return value
.replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
.replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632));
}
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, '');
if (!allowDecimal) return cleaned;
const [integerPart = '', ...decimalParts] = cleaned.split('.');
const mergedDecimals = decimalParts.join('');
return decimalParts.length ? `${integerPart}.${mergedDecimals}` : integerPart;
}
private parseValue(value: Maybe<string>) {
const cleanedValue = this.sanitizeNumericValue(
value || '',
this.selectedType.value === 'percentage'
);
console.log('cleaned', cleanedValue);
return Number.isFinite(cleanedValue) ? Number(cleanedValue) : 0;
}
private getRangeLabel(value: number, isPercentageType: boolean) {
@@ -115,7 +137,7 @@ export class AmountPercentageInputComponent {
value: number,
isPercentageType: boolean,
min = 0,
max = Number.MAX_SAFE_INTEGER,
max = Number.MAX_SAFE_INTEGER
) {
if (value < min) {
this.toastService.warn({
src/app/shared/components/fields/cash.component.ts
-13
View File
@@ -1,13 +0,0 @@
import { Component, Input } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { InputComponent } from '../input/input.component';
@Component({
selector: 'field-cash',
template: `<app-input label="نقدی" [control]="control" [name]="name" type="price" />`,
imports: [ReactiveFormsModule, InputComponent],
})
export class CashComponent {
@Input({ required: true }) control = new FormControl<string>('');
@Input() name = 'cash';
}
src/app/shared/components/fields/index.ts
-4
View File
@@ -1,6 +1,5 @@
export * from './address.component';
export * from './branch_code.component';
export * from './cash.component';
export * from './code.component';
export * from './company_name.component';
export * from './description.component';
@@ -28,10 +27,7 @@ export * from './quantity.component';
export * from './registration_code.component';
export * from './registration_number.component';
export * from './serial_number.component';
export * from './set_off.component';
export * from './sku.component';
export * from './sku_type.component';
export * from './terminal.component';
export * from './unit_price.component';
export * from './username.component';
export * from './vat.component';
src/app/shared/components/fields/set_off.component.ts
-13
View File
@@ -1,13 +0,0 @@
import { Component, Input } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { InputComponent } from '../input/input.component';
@Component({
selector: 'field-set-off',
template: `<app-input label="تهاتر" [control]="control" [name]="name" type="price" />`,
imports: [ReactiveFormsModule, InputComponent],
})
export class SetOffComponent {
@Input({ required: true }) control = new FormControl<string>('');
@Input() name = 'set_off';
}
src/app/shared/components/fields/terminal.component.ts
-13
View File
@@ -1,13 +0,0 @@
import { Component, Input } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { InputComponent } from '../input/input.component';
@Component({
selector: 'field-terminal',
template: `<app-input label="پرداخت با پوز" [control]="control" [name]="name" type="price" />`,
imports: [ReactiveFormsModule, InputComponent],
})
export class TerminalComponent {
@Input({ required: true }) control = new FormControl<string>('');
@Input() name = 'terminal';
}
src/app/shared/components/fields/unit_price.component.ts
-20
View File
@@ -1,20 +0,0 @@
import { Component, Input } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { InputComponent } from '../input/input.component';
@Component({
selector: 'field-unit-price',
template: `<app-input
label="مبلغ واحد"
[control]="control"
[name]="name"
[hint]="hint"
type="price"
/>`,
imports: [ReactiveFormsModule, InputComponent],
})
export class UnitPriceComponent {
@Input({ required: true }) control = new FormControl<string>('');
@Input() name = 'unit_price';
@Input() hint = '';
}
src/app/shared/components/formFooterActions/form-footer-actions.component.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="flex justify-end gap-2">
<button pButton [label]="cancelLabel" severity="secondary" (click)="cancel()"></button>
<button pButton [label]="cancelLabel" severity="secondary" type="button" (click)="cancel()"></button>
<button
pButton
[label]="submitLabel"
src/app/shared/components/input/input.component.html
+22 -42
View File
@@ -17,48 +17,28 @@
<p-toggleSwitch [attr.disabled]="disabled" [formControl]="control" />
} @else {
<p-inputgroup>
<!-- [minlength]="minlength || null" -->
@if (type === 'price') {
<p-inputnumber
[attr.id]="name"
[formControl]="control"
[maxlength]="preparedMaxLength || null"
[attr.name]="name"
[attr.placeholder]="preparedPlaceholder"
[attr.type]="htmlType"
[attr.autocomplete]="autocomplete"
[attr.disabled]="disabled"
[class]="`w-full ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
[required]="isRequired"
[invalid]="control.invalid && (control.touched || control.dirty)"
(onInput)="onPriceInput($event)"
(onBlur)="blur.emit()" />
<!-- (input)="onInput($event)" -->
} @else {
<input
pInputText
[attr.id]="name"
[formControl]="control"
[attr.name]="name"
[attr.placeholder]="preparedPlaceholder"
[attr.inputmode]="inputMode"
[attr.maxlength]="preparedMaxLength || null"
[attr.type]="htmlType"
[attr.disabled]="disabled"
[attr.autocomplete]="autocomplete"
[classList]="
[
inputClass,
'w-full',
`${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`,
suffixTemp || preparedSuffix() ? 'hasSuffix' : '',
].join(' ')
"
[required]="isRequired"
[invalid]="control.invalid && (control.touched || control.dirty)"
(onBlur)="blur.emit()"
(input)="onInput($event)" />
}
<input
pInputText
[attr.id]="name"
[formControl]="control"
[attr.name]="name"
[attr.placeholder]="preparedPlaceholder"
[attr.inputmode]="inputMode"
[attr.maxlength]="preparedMaxLength || null"
[attr.disabled]="disabled"
[attr.autocomplete]="autocomplete"
[classList]="
[
inputClass,
'w-full',
`${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`,
suffixTemp || preparedSuffix() ? 'hasSuffix' : '',
].join(' ')
"
[required]="isRequired"
[invalid]="control.invalid && (control.touched || control.dirty)"
(onBlur)="blur.emit()"
(input)="onInput($event)" />
@if (suffixTemp) {
<ng-container [ngTemplateOutlet]="suffixTemp" />
} @else if (preparedSuffix()) {
src/app/shared/components/input/input.component.ts
+80 -86
View File
@@ -17,7 +17,7 @@ import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddon } from 'primeng/inputgroupaddon';
import { InputMaskModule } from 'primeng/inputmask';
import { InputNumberInputEvent, InputNumberModule } from 'primeng/inputnumber';
import { InputNumberModule } from 'primeng/inputnumber';
import { InputTextModule } from 'primeng/inputtext';
import { KeyFilterModule } from 'primeng/keyfilter';
import { ToggleSwitch } from 'primeng/toggleswitch';
@@ -51,8 +51,7 @@ export class InputComponent {
| 'email'
| 'checkbox'
| 'switch'
| 'number'
| 'price' = 'simple';
| 'number' = 'simple';
@Input() control!: FormControl<Maybe<any>>;
@Input() name!: string;
@Input() label: string = '';
@@ -80,17 +79,8 @@ export class InputComponent {
private readonly toastService = inject(ToastService);
// onInput(ev: Event) {
// const v = (ev.target as HTMLInputElement).value;
// const newLocal = v || v == '0';
// // this.valueChange.emit(this.type === 'price' && newLocal ? parseFloat(v) : v);
// }
preparedSuffix = computed(() => {
if (this.type === 'price') {
return 'ریال';
} else return this.suffix;
return this.suffix;
});
get preparedPlaceholder(): string | null {
@@ -106,30 +96,34 @@ export class InputComponent {
return 'شماره تلفن';
case 'email':
return 'آدرس ایمیل خود را وارد کنید';
case 'price':
return 'مبلغ';
default:
return '';
}
}
get inputMode(): string | null {
get inputMode(): string {
switch (this.type) {
case 'price':
return 'decimal';
case 'number':
case 'mobile':
case 'phone':
return 'decimal';
case 'postalCode':
case 'nationalId':
return 'numeric';
case 'mobile':
case 'phone':
return 'tel';
case 'email':
return 'email';
case 'checkbox':
return 'checkbox';
case 'switch':
return 'radio';
default:
return 'text';
}
}
get isNumeric(): boolean {
return this.inputMode === 'numeric';
return ['number', 'decimal'].includes(this.inputMode);
}
get preparedMaxLength(): number | null {
@@ -153,7 +147,6 @@ export class InputComponent {
switch (this.type) {
case 'mobile':
case 'phone':
case 'price':
case 'number':
inputClass.push('ltrInput');
break;
@@ -174,14 +167,12 @@ export class InputComponent {
switch (this.type) {
case 'email':
return 'email';
case 'mobile':
case 'phone':
case 'postalCode':
case 'nationalId':
return 'number';
case 'price':
// case 'mobile':
// case 'phone':
// case 'postalCode':
// case 'nationalId':
case 'number':
return 'text';
return 'number';
case 'checkbox':
return 'checkbox';
case 'switch':
@@ -195,10 +186,6 @@ export class InputComponent {
return this.required || this.control.hasValidator(Validators.required);
}
onPriceInput($event: InputNumberInputEvent) {
this.onInput($event.originalEvent, true);
}
private toEnglishDigits(value: string): string {
return value
.replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
@@ -207,6 +194,7 @@ export class InputComponent {
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, '');
if (!allowDecimal) return cleaned;
@@ -245,76 +233,82 @@ export class InputComponent {
return value.replace(/^0+(?=\d)/, '');
}
onInput($event: Event, isPriceFormat?: boolean) {
if (this.type !== 'price' && this.type !== 'number') {
return;
private enforceMaxLength(value: string): string {
if (!this.preparedMaxLength || value.length <= this.preparedMaxLength) return value;
return value.slice(0, this.preparedMaxLength);
}
private parseNumericValue(value: string): number {
return Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
}
private isOutOfRange(numericValue: number): { min: boolean; max: boolean } {
return {
min: !!((this.min || this.min === 0) && numericValue < this.min),
max: !!((this.max || this.max === 0) && numericValue > this.max),
};
}
private notifyRangeError(range: { min: boolean; max: boolean }) {
if (range.max) {
this.toastService.warn({
text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.max} باشد.`,
});
}
if (range.min) {
this.toastService.warn({
text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.min} باشد.`,
});
}
}
private isIdentifierField(): boolean {
return ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
}
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;
}
onInput($event: Event) {
const target = $event.target as HTMLInputElement | null;
if (!target) return;
let value = target.value ?? '';
const allowDecimal = this.type === 'price' || this.type === 'number';
const allowDecimal = this.type === 'number';
const isNumericMode = this.isNumeric;
if (this.inputMode === 'numeric' || this.inputMode === 'decimal' || isPriceFormat) {
if (isNumericMode) {
value = this.sanitizeNumericValue(value, allowDecimal);
value = this.applyFixed(value);
value = this.normalizeLeadingZeros(value, allowDecimal);
}
if (this.preparedMaxLength && value.length > this.preparedMaxLength) {
value = value.slice(0, this.preparedMaxLength);
}
value = this.enforceMaxLength(value);
let numericValue = Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
const minValidator = (this.min || this.min === 0) && numericValue < this.min!;
const maxValidator = (this.max || this.max === 0) && numericValue > this.max!;
if (
(this.inputMode === 'numeric' || this.inputMode === 'decimal') &&
value !== '' &&
(minValidator || maxValidator)
) {
if (maxValidator) {
this.toastService.warn({
text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.max} باشد.`,
});
let numericValue = this.parseNumericValue(value);
const range = this.isOutOfRange(numericValue);
if (value !== '' && (range.min || range.max)) {
this.notifyRangeError(range);
value = this.lastValidNumericValue;
numericValue = this.parseNumericValue(value);
this.writeControlAndViewValue(target, value, numericValue);
return;
} else {
this.lastValidNumericValue = value;
}
if (minValidator) {
this.toastService.warn({
text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.min} باشد.`,
});
this.writeControlAndViewValue(target, value, numericValue);
if (this.valueChange.observed) {
this.valueChange.emit(this.isIdentifierField() ? value : numericValue);
}
value = this.lastValidNumericValue;
numericValue = Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
// const isIdentifierField = ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
const isIdentifierField = !this.numericValue;
const restoredControlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
this.control.setValue(restoredControlValue);
target.value = isPriceFormat && value !== '' ? numericValue.toLocaleString('en-US') : value;
return;
} else if (this.inputMode === 'numeric' || this.inputMode === 'decimal') {
this.lastValidNumericValue = value;
}
const isIdentifierField = ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
const controlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
this.control.setValue(controlValue);
const viewValue = isPriceFormat && value !== '' ? numericValue.toLocaleString('en-US') : value;
target.value = viewValue;
if (
(this.inputMode === 'numeric' || this.inputMode === 'decimal') &&
this.valueChange.observed
) {
this.valueChange.emit(isIdentifierField ? value : numericValue);
}
}
ngOnInit() {
const allowDecimal = this.type === 'price' || this.type === 'number';
const allowDecimal = this.type === 'number';
const initial = this.sanitizeNumericValue(`${this.control?.value ?? ''}`, allowDecimal);
this.lastValidNumericValue = initial;
}
src/app/shared/components/input/price-input.component.html
+28
View File
@@ -0,0 +1,28 @@
<uikit-field [label]="label" [name]="name" [control]="control" [showLabel]="!!label" [showErrors]="showErrors">
<p-inputgroup>
<p-inputnumber
[attr.id]="name"
[formControl]="control"
[attr.name]="name"
[attr.placeholder]="preparedPlaceholder"
[attr.type]="'text'"
[attr.autocomplete]="autocomplete"
[attr.disabled]="disabled"
[class]="`ltrInput rtlPlaceholder hasSuffix w-full ${sizeClass}`"
inputStyleClass="hasSuffix"
[required]="isRequired"
[invalid]="control.invalid && (control.touched || control.dirty)"
(onInput)="onInput($event)"
(onBlur)="blur.emit()" />
@if (suffixTemp) {
<ng-container [ngTemplateOutlet]="suffixTemp" />
} @else {
<p-inputgroup-addon [ngClass]="{ 'border-red-400!': (control.touched || control.dirty) && control.invalid }">
ریال
</p-inputgroup-addon>
}
</p-inputgroup>
@if (hint) {
<small [attr.id]="name + '-help'" class="text-muted-color">{{ hint }}</small>
}
</uikit-field>
src/app/shared/components/input/price-input.component.ts
+107
View File
@@ -0,0 +1,107 @@
import { Maybe } from '@/core';
import { ToastService } from '@/core/services/toast.service';
import { UikitFieldComponent } from '@/uikit/uikit-field.component';
import { CommonModule } from '@angular/common';
import {
Component,
ContentChild,
EventEmitter,
inject,
Input,
Output,
TemplateRef,
} from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddon } from 'primeng/inputgroupaddon';
import { InputNumberInputEvent, InputNumberModule } from 'primeng/inputnumber';
@Component({
selector: 'app-price-input',
standalone: true,
imports: [
ReactiveFormsModule,
InputGroupModule,
InputGroupAddon,
InputNumberModule,
UikitFieldComponent,
CommonModule,
],
templateUrl: './price-input.component.html',
})
export class PriceInputComponent {
@Input() control!: FormControl<Maybe<any>>;
@Input() name!: string;
@Input() label = '';
@Input() placeholder?: string;
@Input() disabled = false;
@Input() size?: 'small' | 'large';
@Input() autocomplete: string = 'off';
@Input() showErrors = true;
@Input() hint?: string;
@Input() min?: number = 0;
@Input() max?: number;
@Input() required = false;
@Output() inputEvent = new EventEmitter<InputNumberInputEvent>();
@Output() blur = new EventEmitter<void>();
@ContentChild('suffixTemp', { static: true }) suffixTemp!: TemplateRef<any> | null;
private readonly toastService = inject(ToastService);
get preparedPlaceholder(): string {
return this.placeholder || 'مبلغ';
}
get isRequired(): boolean {
return this.required || this.control.hasValidator(Validators.required);
}
get sizeClass(): string {
return this.size === 'large' ? 'p-inputtext-lg' : this.size === 'small' ? 'p-inputtext-sm' : '';
}
onInput(event: InputNumberInputEvent) {
console.log('event', event);
const eventValue = Number(event.value ?? 0);
const min = this.min ?? undefined;
const max = this.max ?? undefined;
const minValidator = min !== undefined && eventValue < min;
const maxValidator = max !== undefined && eventValue > max;
if (maxValidator) {
this.toastService.warn({
text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.max!.toLocaleString('en-US')} باشد.`,
});
}
if (minValidator) {
this.toastService.warn({
text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.min!.toLocaleString('en-US')} باشد.`,
});
}
if (minValidator || maxValidator) {
const normalizedValue = parseFloat(
eventValue.toString().slice(0, eventValue.toString().length - 1) || '0'
);
this.control.setValue(normalizedValue);
// @ts-ignore
event.originalEvent.target.value = normalizedValue
? normalizedValue.toLocaleString('en-US')
: normalizedValue;
} else {
// @ts-ignore
event.originalEvent.target.value = eventValue
? eventValue.toLocaleString('en-US')
: eventValue;
}
this.inputEvent.emit({
...event,
value: eventValue,
});
}
}
src/app/shared/components/posPayment/gold-form.component.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="form-group">
<form [formGroup]="form">
<app-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" type="price" />
<app-price-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" />
<app-input [control]="form.controls.quantity" name="quantity" label="مقدار" type="number" suffix="گرم" />
<app-enum-select [control]="form.controls.payload.controls.karat" type="goldKarat" name="karat" />
src/app/shared/components/posPayment/gold-form.component.ts
+2
View File
@@ -17,6 +17,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonDirective } from 'primeng/button';
import { SelectButton, SelectButtonChangeEvent } from 'primeng/selectbutton';
import { PriceInputComponent } from '../input/price-input.component';
import goldAmountCalculationUtil from './gold-amount-calculation.util';
@Component({
@@ -31,6 +32,7 @@ import goldAmountCalculationUtil from './gold-amount-calculation.util';
AmountPercentageInputComponent,
ButtonDirective,
CalculatedAmountCardComponent,
PriceInputComponent,
],
})
export class SharedGoldPayloadFormComponent extends AbstractForm<
src/app/shared/components/posPayment/standard-form.component.html
+1 -1
View File
@@ -1,5 +1,5 @@
<form [formGroup]="form" (submit)="submit()">
<app-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" type="price" />
<app-price-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" />
<app-input
[control]="form.controls.quantity"
name="quantity"
src/app/shared/components/posPayment/standard-form.component.ts
+2
View File
@@ -12,6 +12,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonDirective } from 'primeng/button';
import { IPosOrderItem } from '../../../domains/pos/modules/shop/models';
import { PriceInputComponent } from '../input/price-input.component';
@Component({
selector: 'shared-standard-payload-form',
@@ -22,6 +23,7 @@ import { IPosOrderItem } from '../../../domains/pos/modules/shop/models';
AmountPercentageInputComponent,
ButtonDirective,
CalculatedAmountCardComponent,
PriceInputComponent,
],
})
export class SharedStandardPayloadFormComponent extends AbstractForm<
src/app/shared/components/seasonPicker/season-picker-dialog.component.html
+2 -9
View File
@@ -17,19 +17,12 @@
<button
pButton
type="button"
size="large"
[label]="seasonItem.label"
[severity]="seasonItem.severity"
outlined
(click)="selectedSeasonDraft.set(seasonItem.key)"></button>
(click)="selectSeason(seasonItem)"></button>
}
<!-- [disabled]="selectedYear <= selectedYearDraft() && selectedSeason <= selectedSeasonDraft()" -->
</div>
<div class="mt-4">
<app-form-footer-actions
submitLabel="تایید"
cancelLabel="انصراف"
(onCancel)="visibleChange.emit(false)"
(onSubmit)="onSubmit()" />
</div>
</shared-light-bottomsheet>
src/app/shared/components/seasonPicker/season-picker-dialog.component.ts
+3 -4
View File
@@ -5,7 +5,6 @@ import { Component, computed, EventEmitter, Input, Output, signal } from '@angul
import { FormsModule } from '@angular/forms';
import { ButtonDirective, ButtonSeverity } from 'primeng/button';
import { SharedLightBottomsheetComponent } from '../dialog/light-bottomsheet.component';
import { FormFooterActionsComponent } from '../formFooterActions/form-footer-actions.component';
type SeasonKey = 0 | 1 | 2 | 3;
@@ -22,7 +21,6 @@ interface SeasonItem {
CommonModule,
FormsModule,
SharedLightBottomsheetComponent,
FormFooterActionsComponent,
ButtonDirective,
UikitLabelComponent,
],
@@ -40,10 +38,11 @@ export class SeasonPickerDialogComponent extends AbstractDialog {
isSeasonDisabled = computed(() => this.selectedYear >= this.selectedYearDraft());
onSubmit(): void {
selectSeason(season: SeasonItem) {
this.selectedSeasonDraft.set(season.key);
this.submit.emit({
year: this.selectedYearDraft(),
season: this.selectedSeasonDraft(),
season: season.key,
});
this.close();
}