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

create light bottomsheet drawer for gold payload

Browse Source
This commit is contained in:
ahasani194
2026-05-13 10:39:43 +03:30
parent ebd2aa46dc
commit d9e74da0e2
9 changed files with 216 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/domains/pos/modules/landing/components/payload-form.component.html
+3 -3
View File
@@ -1,8 +1,8 @@
<shared-dialog
<shared-light-bottomsheet
[(visible)]="visible"
[header]="preparedTitle()"
[modal]="true"
[style]="{ width: '500px' }"
[style]="{ 'max-height': '90svh', height: 'auto' }"
[closable]="true"
(onHide)="close()"
>
@@ -18,4 +18,4 @@
/>
}
}
</shared-dialog>
</shared-light-bottomsheet>
src/app/domains/pos/modules/landing/components/payload-form.component.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { IGoodResponse } from '@/domains/pos/models/good.io';
import { AbstractDialog } from '@/shared/abstractClasses/abstract-dialog';
import { SharedDialogComponent } from '@/shared/components/dialog/dialog.component';
import { SharedLightBottomsheetComponent } from '@/shared/components/dialog/light-bottomsheet.component';
import { Component, computed, EventEmitter, inject, Input, Output, signal } from '@angular/core';
import { IGoldPayload, IPosOrderItem, IStandardPayload, TPosOrderGoodPayload } from '../models';
import { PosLandingStore } from '../store/main.store';
@@ -10,7 +10,7 @@ import { PosStandardPayloadFormComponent } from './payloads/standard/form.compon
@Component({
selector: 'pos-payload-form-dialog',
templateUrl: './payload-form.component.html',
imports: [PosGoldPayloadFormComponent, SharedDialogComponent, PosStandardPayloadFormComponent],
imports: [PosGoldPayloadFormComponent, SharedLightBottomsheetComponent, PosStandardPayloadFormComponent],
})
export class PayloadFormDialogComponent extends AbstractDialog {
@Input({ required: true }) good!: IGoodResponse;
src/app/domains/pos/modules/landing/components/payloads/gold/form.component.html
+61 -63
View File
@@ -1,69 +1,67 @@
@if (formVisible()) {
<div class="form-group">
<form [formGroup]="form">
<app-input [control]="form.controls.unit_price" name="unit_price" label="قیمت پایه هر گرم" type="price" />
<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
[percentageControl]="form.controls.payload.controls.wages_percentage"
[amountControl]="form.controls.payload.controls.wages_amount"
[baseAmount]="unitWithQuantity()"
[minAmount]="0"
[maxAmount]="unitWithQuantity()"
name="wages"
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>
<div class="form-group">
<form [formGroup]="form">
<app-input [control]="form.controls.unit_price" name="unit_price" label="قیمت پایه هر گرم" type="price" />
<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
[percentageControl]="form.controls.discount_percentage"
[amountControl]="form.controls.discount_amount"
[baseAmount]="baseAmountForDiscountCalculation()"
[percentageControl]="form.controls.payload.controls.wages_percentage"
[amountControl]="form.controls.payload.controls.wages_amount"
[baseAmount]="unitWithQuantity()"
[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>
[maxAmount]="unitWithQuantity()"
name="wages"
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>
<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()"
<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)"
/>
<button pButton class="sm:w-auto w-full" (click)="submit()">{{ preparedCTAText() }}</button>
</div>
</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>
src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts
-11
View File
@@ -52,7 +52,6 @@ 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,16 +94,6 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
form = this.initialForm();
override ngAfterViewInit(): void {
setTimeout(() => {
this.formVisible.set(true);
if (this.editMode) {
this.form.patchValue(this.initialValues || {}, { emitEvent: false });
this.updateCalculateAmount(this.form.value as any);
}
}, 200);
}
override submitForm(payload: IPosOrderItem) {
this.onSubmit.emit({
...payload,
src/app/domains/pos/modules/landing/views/root.component.html
+1 -1
View File
@@ -19,7 +19,7 @@
type="button"
pButton
class="sticky! bottom-0 inset-x-0 w-full right-0 z-1200 border-t border-surface-border bg-surface-0 px-4 py-3 shadow-[0_-4px_16px_rgba(0,0,0,0.08)] md:hidden! rounded-b-none!"
[style.paddingBottom]="'calc(0.75rem + env(safe-area-inset-bottom))'"
[style.paddingBottom]="'calc(0.75rem + {{env(safe-area-inset-bottom)}})'"
(click)="openInvoiceBottomSheet()"
>
<div class="mx-auto flex w-full max-w-3xl items-center justify-between">