feat: enhance gold payload form with dynamic visibility and improved discount calculations

src/app/domains/pos/modules/landing/components/payloads/gold/form.component.html

@@ -1,67 +1,69 @@
-<div class="form-group">
+@if (formVisible()) {
-  <form [formGroup]="form">
+  <div class="form-group">
-    <app-input [control]="form.controls.unit_price" name="unit_price" label="قیمت پایه هر گرم" type="price" />
+    <form [formGroup]="form">
-    <app-input [control]="form.controls.quantity" name="quantity" label="مقدار" type="number" suffix="گرم" />
+      <app-input [control]="form.controls.unit_price" name="unit_price" label="قیمت پایه هر گرم" type="price" />
-    <app-enum-select [control]="form.controls.payload.controls.karat" type="goldKarat" name="karat" />
+      <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" />
 
-    <app-amount-percentage-input
+      <app-amount-percentage-input
-      [percentageControl]="form.controls.payload.controls.wages_percentage"
+        [percentageControl]="form.controls.payload.controls.wages_percentage"
-      [amountControl]="form.controls.payload.controls.wages_amount"
+        [amountControl]="form.controls.payload.controls.wages_amount"
-      [baseAmount]="unitWithQuantity()"
+        [baseAmount]="unitWithQuantity()"
-      [minAmount]="0"
+        [minAmount]="0"
-      [maxAmount]="unitWithQuantity()"
+        [maxAmount]="unitWithQuantity()"
-      name="wages"
+        name="wages"
-      label="اجرت"
+        label="اجرت"
-    />
-    <app-amount-percentage-input
-      [percentageControl]="form.controls.payload.controls.commission_percentage"
-      [amountControl]="form.controls.payload.controls.commission_amount"
-      [baseAmount]="unitWithQuantity()"
-      [minAmount]="0"
-      [maxAmount]="unitWithQuantity()"
-      name="commission"
-      label="حق‌العمل"
-    />
-    <app-amount-percentage-input
-      [percentageControl]="form.controls.payload.controls.profit_percentage"
-      [amountControl]="form.controls.payload.controls.profit_amount"
-      [baseAmount]="totalAmountBeforeProfit()"
-      [minAmount]="0"
-      [maxAmount]="totalAmountBeforeProfit()"
-      name="profit"
-      label="سود"
-    />
-  </form>
-
-  <app-amount-percentage-input
-    [percentageControl]="form.controls.discount_percentage"
-    [amountControl]="form.controls.discount_amount"
-    [baseAmount]="baseAmountForDiscountCalculation()"
-    [minAmount]="0"
-    [maxAmount]="baseAmountForDiscountCalculation()"
-    name="discount"
-    label="تخفیف"
-  >
-    <ng-template #labelSuffix>
-      <p-selectButton
-        [options]="discountTypeItems"
-        [(ngModel)]="discountType"
-        [allowEmpty]="false"
-        optionLabel="label"
-        optionValue="value"
-        (onChange)="changeDiscountCalculation($event)"
       />
-    </ng-template>
+      <app-amount-percentage-input
-  </app-amount-percentage-input>
+        [percentageControl]="form.controls.payload.controls.commission_percentage"
+        [amountControl]="form.controls.payload.controls.commission_amount"
+        [baseAmount]="unitWithQuantity()"
+        [minAmount]="0"
+        [maxAmount]="unitWithQuantity()"
+        name="commission"
+        label="حق‌العمل"
+      />
+      <app-amount-percentage-input
+        [percentageControl]="form.controls.payload.controls.profit_percentage"
+        [amountControl]="form.controls.payload.controls.profit_amount"
+        [baseAmount]="totalAmountBeforeProfit()"
+        [minAmount]="0"
+        [maxAmount]="totalAmountBeforeProfit()"
+        name="profit"
+        label="سود"
+      />
+    </form>
 
-  <hr />
+    <app-amount-percentage-input
-  <div class="flex flex-col gap-4 justify-center w-full">
+      [percentageControl]="form.controls.discount_percentage"
-    <pos-form-dialog-amount-card-template
+      [amountControl]="form.controls.discount_amount"
-      [totalAmount]="totalAmount()"
+      [baseAmount]="baseAmountForDiscountCalculation()"
-      [baseTotalAmount]="baseTotalAmount()"
+      [minAmount]="0"
-      [discountAmount]="form.controls.discount_amount.value || 0"
+      [maxAmount]="baseAmountForDiscountCalculation()"
-      [taxAmount]="taxAmount()"
+      name="discount"
-    />
+      label="تخفیف"
-    <button pButton class="sm:w-auto w-full" (click)="submit()">{{ preparedCTAText() }}</button>
+    >
+      <ng-template #labelSuffix>
+        <p-selectButton
+          [options]="discountTypeItems"
+          [(ngModel)]="discountType"
+          [allowEmpty]="false"
+          optionLabel="label"
+          optionValue="value"
+          (onChange)="changeDiscountCalculation($event)"
+        />
+      </ng-template>
+    </app-amount-percentage-input>
+
+    <hr />
+    <div class="flex flex-col gap-4 justify-center w-full">
+      <pos-form-dialog-amount-card-template
+        [totalAmount]="totalAmount()"
+        [baseTotalAmount]="baseTotalAmount()"
+        [discountAmount]="form.controls.discount_amount.value || 0"
+        [taxAmount]="taxAmount()"
+      />
+      <button pButton class="sm:w-auto w-full" (click)="submit()">{{ preparedCTAText() }}</button>
+    </div>
   </div>
-</div>
+}

src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts

@@ -52,6 +52,7 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
   baseAmountForDiscountCalculation = signal<number>(0);
   taxAmount = signal<number>(0);
   totalAmount = signal<number>(0);
+  formVisible = signal<boolean>(false);
 
   preparedCTAText = computed(() => (this.editMode ? 'اعمال ویرایش' : 'افزودن به لیست خرید'));
 
@@ -95,10 +96,13 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
   form = this.initialForm();
 
   override ngAfterViewInit(): void {
-    if (this.editMode) {
+    setTimeout(() => {
-      this.form.patchValue(this.initialValues || {}, { emitEvent: false });
+      this.formVisible.set(true);
-      this.updateCalculateAmount(this.form.value as any);
+      if (this.editMode) {
-    }
+        this.form.patchValue(this.initialValues || {}, { emitEvent: false });
+        this.updateCalculateAmount(this.form.value as any);
+      }
+    }, 200);
   }
 
   override submitForm(payload: IPosOrderItem) {

src/assets/styles.scss

@@ -14,3 +14,18 @@ form,
   flex-direction: column;
   gap: 1rem;
 }
+
+body.tenant-tis .p-drawer {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+body.tenant-tis .p-drawer-mask {
+  will-change: opacity;
+}
+
+body.tenant-tis .p-drawer .p-drawer-content {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}

src/main.ts

@@ -4,6 +4,7 @@ import faLocales from 'flatpickr-wrap/dist/l10n/fa.js';
 import { brandingConfig } from './app/branding/branding.config';
 import { AppComponent } from './app.component';
 import { appConfig } from './app.config';
+import config from './config';
 
 flatpickr.localize(faLocales.fa!);
 
@@ -32,4 +33,8 @@ if (themeMeta) {
   themeMeta.setAttribute('content', brandingConfig.themeColor);
 }
 
+if (config.isPosApplication) {
+  document.body.classList.add('tenant-tis');
+}
+
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));