some ui fix

This commit is contained in:
2026-05-30 19:05:23 +03:30
parent d678b6c699
commit 90c51edad4
25 changed files with 309 additions and 250 deletions
@@ -1,2 +1,3 @@
export * from './tax-provider-status-tag.component';
export * from './tax-provider-status-translator.util';
export * from './type';
@@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core';
import { Tag } from 'primeng/tag';
import taxProviderStatusTranslatorUtil from './tax-provider-status-translator.util';
import { TspProviderResponseStatus } from './type';
@Component({
@@ -29,21 +30,6 @@ export class CatalogTaxProviderStatusTagComponent {
}
get label() {
switch (this.status) {
case 'SUCCESS':
return 'موفق';
case 'FAILURE':
return 'ناموفق';
case 'NOT_SEND':
return 'ارسال نشده';
case 'QUEUED':
return 'در صف ارسال';
case 'FISCAL_QUEUED':
return 'در انتظار تایید سازمان';
case 'SEND_FAILURE':
return 'خطا در ارسال';
default:
return 'نامشخص';
}
return taxProviderStatusTranslatorUtil(this.status);
}
}
@@ -0,0 +1,20 @@
import { TspProviderResponseStatus } from './type';
export default (status: TspProviderResponseStatus) => {
switch (status) {
case 'SUCCESS':
return 'موفق';
case 'FAILURE':
return 'ناموفق';
case 'NOT_SEND':
return 'ارسال نشده';
case 'QUEUED':
return 'در صف ارسال';
case 'FISCAL_QUEUED':
return 'در انتظار تایید سازمان';
case 'SEND_FAILURE':
return 'خطا در ارسال';
default:
return 'نامشخص';
}
};
@@ -1,17 +1,21 @@
<p-confirmdialog #cd>
<ng-template #headless let-message let-onAccept="onAccept" let-onReject="onReject">
@if (message) {
<div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
<div class="bg-surface-0 dark:bg-surface-900 flex flex-col items-center rounded p-8">
<div
class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20"
>
class="bg-primary text-primary-contrast -mt-20 inline-flex h-24 w-24 items-center justify-center rounded-full">
<i class="pi pi-question text-5xl!"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
<span class="mt-6 mb-2 block text-2xl font-bold">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex items-center gap-2 mt-6">
<p-button label="{{ acceptLabel }}" (onClick)="onAccept()" styleClass="w-32"></p-button>
<p-button label="{{ rejectLabel }}" [outlined]="true" (onClick)="onReject()" styleClass="w-32"></p-button>
<div class="mt-6 flex items-center gap-2">
<p-button [label]="message.acceptLabel" type="button" (onClick)="onAccept()" styleClass="w-32"></p-button>
<p-button
[label]="message.rejectLabel"
type="button"
[outlined]="true"
(onClick)="onReject()"
styleClass="w-32"></p-button>
</div>
</div>
}
@@ -1,48 +1,11 @@
import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { ConfirmationService } from 'primeng/api';
import { Component } from '@angular/core';
import { Button } from 'primeng/button';
import { ConfirmDialog } from 'primeng/confirmdialog';
@Component({
selector: 'app-shared-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
providers: [ConfirmationService],
standalone: true,
imports: [ConfirmDialog, Button],
})
export class ConfirmationDialogComponent implements OnDestroy {
@Input() message!: string;
@Input() header: string = 'تأیید عملیات';
@Input() acceptLabel: string = 'بله';
@Input() rejectLabel: string = 'خیر';
@Output() onAccept = new EventEmitter<void>();
@Output() onReject = new EventEmitter<void>();
constructor(private confirmationService: ConfirmationService) {}
show() {
this.confirmationService.confirm({
header: this.header,
message: this.message,
acceptLabel: this.acceptLabel,
rejectLabel: this.rejectLabel,
accept: () => {
this.accept();
},
reject: () => {
this.reject();
},
});
}
accept() {
this.onAccept.emit();
}
reject() {
this.onReject.emit();
}
ngOnDestroy() {
// Cleanup if needed
}
}
export class ConfirmationDialogComponent {}
@@ -1,78 +1,32 @@
import {
ApplicationRef,
ComponentFactoryResolver,
ComponentRef,
Injectable,
Injector,
} from '@angular/core';
import { ConfirmationDialogComponent } from './confirmation-dialog.component';
import { Injectable, inject } from '@angular/core';
import { Confirmation, ConfirmationService } from 'primeng/api';
export interface AppConfirmOptions {
header: string;
message: string;
acceptLabel?: string;
rejectLabel?: string;
accept?: () => void;
reject?: () => void;
}
@Injectable({
providedIn: 'root',
})
export class ConfirmationDialogService {
private componentRef: ComponentRef<ConfirmationDialogComponent> | null = null;
export class AppConfirmationService {
private confirmationService = inject(ConfirmationService);
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private appRef: ApplicationRef,
private injector: Injector,
) {}
confirm(options: {
message: string;
header?: string;
acceptLabel?: string;
rejectLabel?: string;
accept?: () => void;
reject?: () => void;
}) {
// Create the component dynamically
const factory = this.componentFactoryResolver.resolveComponentFactory(
ConfirmationDialogComponent,
);
this.componentRef = factory.create(this.injector);
// Set inputs
this.componentRef.instance.message = options.message;
if (options.header) this.componentRef.instance.header = options.header;
if (options.acceptLabel) this.componentRef.instance.acceptLabel = options.acceptLabel;
if (options.rejectLabel) this.componentRef.instance.rejectLabel = options.rejectLabel;
// Subscribe to outputs and close after
if (options.accept) {
this.componentRef.instance.onAccept.subscribe(() => {
options.accept!();
this.close();
ask(options: Confirmation): Promise<boolean> {
return new Promise((resolve) => {
this.confirmationService.confirm({
position: 'bottom',
acceptLabel: 'تایید',
rejectLabel: 'لغو',
...options,
closeOnEscape: true,
accept: () => options.accept?.() || resolve(true),
reject: () => resolve(false),
});
} else {
this.componentRef.instance.onAccept.subscribe(() => this.close());
}
if (options.reject) {
this.componentRef.instance.onReject.subscribe(() => {
options.reject!();
this.close();
});
} else {
this.componentRef.instance.onReject.subscribe(() => this.close());
}
// Attach to the app
this.appRef.attachView(this.componentRef.hostView);
// Append to body
document.body.appendChild(this.componentRef.location.nativeElement);
// Trigger change detection and show
this.componentRef.changeDetectorRef.detectChanges();
this.componentRef.instance.show();
}
close() {
if (this.componentRef) {
this.appRef.detachView(this.componentRef.hostView);
this.componentRef.destroy();
this.componentRef = null;
}
});
}
}
@@ -6,14 +6,10 @@
<div class="flex flex-col gap-6">
<app-card-data cardTitle="اطلاعات فاکتور" [editable]="false" [backRoute]="backRoute">
<ng-template #moreActions>
<button
pButton
type="button"
label="چاپ"
icon="pi pi-print"
outlined
size="small"
(click)="printInvoice()"></button>
<div class="">
<p-menu #menu [model]="moreActionMenuItems()" [popup]="true" appendTo="body" />
<p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v" outlined size="small" />
</div>
</ng-template>
<div class="flex flex-col gap-4">
<div class="listKeyValue">
@@ -35,6 +31,7 @@
<app-key-value label="مجموع قابل پرداخت" [value]="invoice.total_amount" type="price" />
<app-key-value label="مبلغ تخفیف" [value]="invoice.discount_amount" type="price" />
<app-key-value label="مبلغ مالیات" [value]="invoice.tax_amount" type="price" />
@for (payment of invoice.payments; track $index) {
<app-key-value
[label]="`${payment.payment_method === 'SET_OFF' ? 'تهاتر' : payment.payment_method === 'TERMINAL' ? 'پوز' : 'نقدی/ کارت‌خوان دیگر/ کارت به کارت'}`"
@@ -24,13 +24,18 @@ import {
inject,
Input,
Output,
signal,
SimpleChanges,
TemplateRef,
ViewChild,
} from '@angular/core';
import { UrlTree } from '@angular/router';
import { ButtonDirective } from 'primeng/button';
import { MenuItem } from 'primeng/api';
import { Button } from 'primeng/button';
import { Divider } from 'primeng/divider';
import { Menu } from 'primeng/menu';
import { TableModule } from 'primeng/table';
import { AppConfirmationService } from '../confirmationDialog/confirmation-dialog.service';
export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
@@ -41,7 +46,6 @@ export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
AppCardComponent,
KeyValueComponent,
Divider,
ButtonDirective,
PageDataListComponent,
TableModule,
PageLoadingComponent,
@@ -49,6 +53,8 @@ export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
PriceMaskDirective,
CatalogTaxProviderStatusTagComponent,
CatalogInvoiceTypeTagComponent,
Menu,
Button,
],
})
export class SharedSaleInvoiceSingleViewComponent {
@@ -57,6 +63,7 @@ export class SharedSaleInvoiceSingleViewComponent {
private readonly toastService = inject(ToastService);
//TODO: below service Must be transform from pos to shared.
private readonly service = inject(PosConfigPrintService);
private readonly confirmationService = inject(AppConfirmationService);
@Input({ required: true }) loading!: boolean;
@Input() invoice!: Maybe<ISaleInvoiceFullResponse>;
@@ -67,6 +74,88 @@ export class SharedSaleInvoiceSingleViewComponent {
@ViewChild('totalAmount', { static: false }) totalAmount!: TemplateRef<any>;
moreActionMenuItems = signal<MenuItem[]>([]);
constructor() {
this.showErrors = this.showErrors.bind(this);
this.showRevokeConfirmation = this.showRevokeConfirmation.bind(this);
this.showCorrection = this.showCorrection.bind(this);
this.showBackFromSale = this.showBackFromSale.bind(this);
this.printInvoice = this.printInvoice.bind(this);
}
showErrors() {}
showRevokeConfirmation() {
console.log('this.confirmationService', this.confirmationService);
this.confirmationService.ask({
header: `ابطال فاکتور شماره ${this.invoice!.invoice_number}`,
message: `در صورت تایید ابطال فاکتور شماره ${this.invoice!.invoice_number} بر روی دکمه‌ی ابطال کلیک کنید.`,
acceptLabel: 'ابطال',
acceptButtonProps: {
severity: 'dangerdock',
},
accept: () => {
console.log('here');
// this.deferredInstallPrompt.prompt();
// this.deferredInstallPrompt.userChoice.finally(() => {
// this.deferredInstallPrompt = null;
// this.canInstall.set(false);
// window.location.reload();
// });
// },
},
});
}
showCorrection() {}
showBackFromSale() {}
ngOnChanges(changes: SimpleChanges) {
if (changes['invoice'] && this.invoice) {
const invoiceStatus = this.invoice.status.value;
const actions: MenuItem[] = [
{
label: 'دلایل خطا',
icon: 'pi pi-question',
neededStatus: 'FAILURE',
command: this.showErrors,
},
{
label: 'ابطال',
icon: 'pi pi-eraser',
neededStatus: 'SUCCESS',
command: this.showRevokeConfirmation,
},
{
label: 'اصلاح',
icon: 'pi pi-file-edit',
neededStatus: 'SUCCESS',
command: this.showCorrection,
},
{
label: 'برگشت از فروش',
icon: 'pi pi-cart-minus',
neededStatus: 'SUCCESS',
command: this.showBackFromSale,
},
{
label: 'چاپ',
icon: 'pi pi-print',
neededStatus: '',
command: this.printInvoice,
},
];
this.moreActionMenuItems.set(
actions.filter(
// @ts-ignore
(action) => !action.neededStatus || action.neededStatus === invoiceStatus
)
);
}
}
readonly posName = computed(() => {
if (this.posInfoStore.entity()) {
const { name, businessActivity, complex } = this.posInfoStore.entity()!;
@@ -280,7 +369,7 @@ export class SharedSaleInvoiceSingleViewComponent {
nestedOption: {
path: 'payload.commission',
type: 'price',
}
},
},
{
field: 'wages',
@@ -289,7 +378,7 @@ export class SharedSaleInvoiceSingleViewComponent {
nestedOption: {
path: 'payload.wages',
type: 'price',
}
},
},
{
field: 'profit',
@@ -298,7 +387,7 @@ export class SharedSaleInvoiceSingleViewComponent {
nestedOption: {
path: 'payload.profit',
type: 'price',
}
},
},
{
field: 'discount_amount',
@@ -315,7 +404,6 @@ export class SharedSaleInvoiceSingleViewComponent {
header: 'مبلغ قابل پرداخت',
type: 'price',
},
];
refresh() {
@@ -59,7 +59,7 @@
<ng-template #paginatorTemplate>
<app-paginator
[currentPage]="currentPage || 1"
[totalRecords]="totalRecords"
[totalPages]="totalPages || 1"
[perPage]="perPage || 10"
[loading]="loading"
(onChange)="onPage($event)" />
@@ -104,7 +104,7 @@ export class PageDataListComponent<I = any> {
@Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
@Input() emptyPlaceholderDescription?: string = '';
@Input() emptyPlaceholderCtaLabel?: string;
@Input() totalRecords!: number;
@Input() totalPages?: number = 1;
@Input() perPage?: number = 10;
@Input() currentPage?: number = 1;
@Input() showEdit: boolean = false;
@@ -191,7 +191,7 @@ export class PageDataListComponent<I = any> {
};
get showPaginator() {
return !!(this.totalRecords && this.perPage && this.totalRecords > this.perPage);
return !!(this.totalPages && this.perPage && this.totalPages > this.perPage);
}
getPreviewClasses(item: Record<string, any>, column: IColumn): any {