diff --git a/src/app/domains/pos/modules/landing/components/payload-form.component.html b/src/app/domains/pos/modules/landing/components/payload-form.component.html index 29cf5f3..098b51f 100644 --- a/src/app/domains/pos/modules/landing/components/payload-form.component.html +++ b/src/app/domains/pos/modules/landing/components/payload-form.component.html @@ -8,12 +8,18 @@ > @if (good) { @if (isGoldMode()) { - + } @else if (isStandardMode()) { } diff --git a/src/app/domains/pos/modules/landing/components/payload-form.component.ts b/src/app/domains/pos/modules/landing/components/payload-form.component.ts index 50991fe..599f442 100644 --- a/src/app/domains/pos/modules/landing/components/payload-form.component.ts +++ b/src/app/domains/pos/modules/landing/components/payload-form.component.ts @@ -22,6 +22,7 @@ export class PayloadFormDialogComponent extends AbstractDialog { totalAmount = signal(0); preparedTitle = computed(() => this.good?.name); + childFormVisible = signal(false); editMode = computed(() => Boolean(this.initialValues) && Boolean(this.orderItemId)); isGoldMode = computed(() => this.good.pricing_model === 'GOLD'); @@ -50,4 +51,14 @@ export class PayloadFormDialogComponent extends AbstractDialog { } this.close(); } + + set visible(v: boolean) { + // call base setter to maintain behavior + super.visible = v as any; + if (v) { + setTimeout(() => this.childFormVisible.set(true), 200); + } else { + this.childFormVisible.set(false); + } + } } diff --git a/src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts b/src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts index b328e9d..7f13635 100644 --- a/src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts +++ b/src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts @@ -5,11 +5,12 @@ import { InputComponent } from '@/shared/components'; import { AmountPercentageInputComponent } from '@/shared/components/amountPercentageInput/amount-percentage-input.component'; import { TGoldKarat } from '@/shared/localEnum/constants/goldKarat'; import { formatWithCurrency } from '@/utils'; -import { Component, computed, EventEmitter, Output, signal } from '@angular/core'; +import { Component, computed, EventEmitter, Input, Output, signal } from '@angular/core'; 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 { debounceTime } from 'rxjs/operators'; import { IGoldPayload, IPosOrderItem } from '../../../models'; import { PosFormDialogAmountCardTemplateComponent } from '../form-dialog-amount-card-template.component'; @@ -73,7 +74,7 @@ export class PosGoldPayloadFormComponent extends AbstractForm< }), }); - form.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => { + form.valueChanges.pipe(debounceTime(100), takeUntilDestroyed()).subscribe((value) => { this.updateCalculateAmount(value as any); }); @@ -95,15 +96,18 @@ export class PosGoldPayloadFormComponent extends AbstractForm< form = this.initialForm(); - override ngAfterViewInit(): void { - setTimeout(() => { - this.formVisible.set(true); + @Input() set visibleForm(v: boolean) { + if (v) { if (this.editMode) { this.form.patchValue(this.initialValues || {}, { emitEvent: false }); this.updateCalculateAmount(this.form.value as any); } - }, 200); + this.formVisible.set(true); + } else { + this.formVisible.set(false); + } } + // form visibility and initial patching is controlled by the parent via `visibleForm` input override submitForm(payload: IPosOrderItem) { this.onSubmit.emit({ diff --git a/src/app/domains/pos/modules/landing/components/payloads/standard/form.component.ts b/src/app/domains/pos/modules/landing/components/payloads/standard/form.component.ts index b243a90..a7b3630 100644 --- a/src/app/domains/pos/modules/landing/components/payloads/standard/form.component.ts +++ b/src/app/domains/pos/modules/landing/components/payloads/standard/form.component.ts @@ -6,6 +6,7 @@ import { Component, computed, EventEmitter, Input, Output, signal } from '@angul import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ReactiveFormsModule, Validators } from '@angular/forms'; import { Button } from 'primeng/button'; +import { debounceTime } from 'rxjs/operators'; import { IPosOrderItem, IStandardPayload } from '../../../models'; import { PosFormDialogAmountCardTemplateComponent } from '../form-dialog-amount-card-template.component'; @@ -35,7 +36,7 @@ export class PosStandardPayloadFormComponent extends AbstractForm< discount_percentage: [0, [Validators.min(0), Validators.max(100)]], }); - form.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => { + form.valueChanges.pipe(debounceTime(100), takeUntilDestroyed()).subscribe((value) => { this.updateCalculateAmount(value as Partial>); }); @@ -43,6 +44,12 @@ export class PosStandardPayloadFormComponent extends AbstractForm< }; form = this.initialForm(); + @Input() set visibleForm(v: boolean) { + if (v && this.editMode) { + this.form.patchValue(this.initialValues || {}, { emitEvent: false }); + this.updateCalculateAmount(this.form.value as Partial>); + } + } override submitForm(payload: IPosOrderItem) { this.onSubmit.emit({ ...payload,