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,