feat: add stock keeping units list component and related services
feat: implement checkbox component with label and hint support feat: create sale invoice full response model for invoice details feat: add single view component for displaying sale invoice details feat: define various list configurations for account, business activity, and consumer management feat: establish list configurations for managing devices, goods, and licenses feat: create list configurations for managing partners and their accounts feat: implement user management list configuration
This commit is contained in:
+10
-8
@@ -4,6 +4,7 @@ import { UikitFieldComponent, UikitLabelComponent } from '@/uikit';
|
||||
import { formatWithCurrency } from '@/utils';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ContentChild,
|
||||
DestroyRef,
|
||||
@@ -31,6 +32,7 @@ interface IAmountPercentageInputSelect {
|
||||
@Component({
|
||||
selector: 'app-amount-percentage-input',
|
||||
templateUrl: './amount-percentage-input.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
UikitFieldComponent,
|
||||
InputGroup,
|
||||
@@ -175,10 +177,10 @@ export class AmountPercentageInputComponent {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
const isPercentageType = this.selectedType.value === 'percentage';
|
||||
this.modifyControlsData(
|
||||
isPercentageType ? this.percentageControl.value : this.amountControl.value,
|
||||
);
|
||||
const amountValue = Number(this.amountControl.value || 0);
|
||||
const percentageValue = Number(this.percentageControl.value || 0);
|
||||
const isPercentageType = percentageValue > 0 && amountValue <= 0;
|
||||
this.preparedLabel.set(this.prepareLabel(isPercentageType));
|
||||
|
||||
this.selectedType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
|
||||
this.preparedLabel.set(this.prepareLabel(value === 'percentage'));
|
||||
@@ -186,9 +188,9 @@ export class AmountPercentageInputComponent {
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
const isPercentageType = this.selectedType.value === 'percentage';
|
||||
this.modifyControlsData(
|
||||
isPercentageType ? this.percentageControl.value : this.amountControl.value,
|
||||
);
|
||||
const amountValue = Number(this.amountControl.value || 0);
|
||||
const percentageValue = Number(this.percentageControl.value || 0);
|
||||
const isPercentageType = percentageValue > 0 && amountValue <= 0;
|
||||
this.preparedLabel.set(this.prepareLabel(isPercentageType));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<p-checkBox [formControl]="control" [name]="name" [id]="name" binary class="shrink-0"> </p-checkBox>
|
||||
<uikit-label [name]="name"> {{ label }} </uikit-label>
|
||||
</div>
|
||||
|
||||
@if (hint) {
|
||||
<small [attr.id]="name + '-help'" class="text-muted-color">{{ hint }}</small>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Maybe } from '@/core';
|
||||
import { UikitLabelComponent } from '@/uikit';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { Checkbox } from 'primeng/checkbox';
|
||||
|
||||
@Component({
|
||||
selector: 'app-checkbox',
|
||||
templateUrl: 'checkbox.component.html',
|
||||
imports: [Checkbox, UikitLabelComponent],
|
||||
})
|
||||
export class AppCheckboxComponent {
|
||||
@Input({ required: true }) control!: FormControl<Maybe<any>>;
|
||||
@Input({ required: true }) name!: string;
|
||||
@Input({ required: true }) label!: string;
|
||||
@Input() disabled = false;
|
||||
@Input() size?: 'small' | 'large';
|
||||
@Input() showErrors = true;
|
||||
@Input() hint?: string;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import ISummary from '@/core/models/summary';
|
||||
import { TspProviderResponseStatus } from '@/shared/catalog';
|
||||
import { IEnumTranslate } from '@/shared/models/enum_translate.type';
|
||||
|
||||
export interface ISaleInvoiceFullRawResponse {
|
||||
id: string;
|
||||
code: string;
|
||||
total_amount: string;
|
||||
invoice_date: string;
|
||||
consumer_account: ConsumerAccount;
|
||||
pos: Pos;
|
||||
payments: Payment[];
|
||||
items: Item[];
|
||||
created_at: string;
|
||||
notes?: string;
|
||||
customer?: Customer;
|
||||
unknown_customer?: UnknownCustomer;
|
||||
status: IEnumTranslate<TspProviderResponseStatus>;
|
||||
}
|
||||
|
||||
export interface ISaleInvoiceFullResponse extends ISaleInvoiceFullRawResponse {}
|
||||
|
||||
interface Item {
|
||||
id: string;
|
||||
good: ISummary;
|
||||
}
|
||||
|
||||
interface Payment {
|
||||
amount: string;
|
||||
payment_method: string;
|
||||
}
|
||||
|
||||
interface Customer {
|
||||
id: string;
|
||||
type: string;
|
||||
legal?: CustomerLegal;
|
||||
individual?: CustomerIndividual;
|
||||
}
|
||||
|
||||
interface CustomerIndividual {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
national_id: string;
|
||||
postal_code: string;
|
||||
economic_code: string;
|
||||
}
|
||||
|
||||
interface CustomerLegal {
|
||||
company_name: string;
|
||||
registration_number: string;
|
||||
postal_code: string;
|
||||
economic_code: string;
|
||||
}
|
||||
|
||||
interface Pos extends ISummary {
|
||||
complex: Complex;
|
||||
}
|
||||
|
||||
interface Complex extends ISummary {
|
||||
business_activity: ISummary;
|
||||
}
|
||||
|
||||
interface ConsumerAccount {
|
||||
role: string;
|
||||
account: {
|
||||
username: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface UnknownCustomer {
|
||||
name?: string;
|
||||
national_code?: string;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
@if (loading) {
|
||||
<shared-page-loading />
|
||||
} @else if (!invoice) {
|
||||
<uikit-empty-state> </uikit-empty-state>
|
||||
} @else {
|
||||
<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>
|
||||
</ng-template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="listKeyValue">
|
||||
<app-key-value label="کد رهگیری" [value]="invoice.code" />
|
||||
<app-key-value label="تاریخ فاکتور" [value]="invoice.invoice_date" type="dateTime" />
|
||||
<app-key-value label="تاریخ ایجاد فاکتور" [value]="invoice.created_at" type="dateTime" />
|
||||
<app-key-value label="وضعیت صدور به سامانهی مودیان">
|
||||
<catalog-tax-provider-status-tag [status]="invoice.status.value" [translate]="invoice.status.translate" />
|
||||
</app-key-value>
|
||||
<div class="col-span-full">
|
||||
<app-key-value label="توضیحات" [value]="invoice.notes" />
|
||||
</div>
|
||||
</div>
|
||||
<p-divider align="center"> اطلاعات پرداخت </p-divider>
|
||||
<div class="grid md:grid-cols-3 sm:grid-cols-2 sm:gap-4 gap-3 items-center">
|
||||
<app-key-value label="مجموع قابل پرداخت" [value]="invoice.total_amount" type="price" />
|
||||
@for (payment of invoice.payments; track $index) {
|
||||
<app-key-value
|
||||
[label]="`${payment.payment_method === 'SET_OF' ? 'تهاتر' : payment.payment_method === 'TERMINAL' ? 'پایانه' : 'نقدی'}`"
|
||||
[value]="payment.amount"
|
||||
type="price"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<p-divider align="center"> اطلاعات صادر کننده </p-divider>
|
||||
<div class="listKeyValue">
|
||||
<app-key-value label="کسب و کار" [value]="invoice.pos!.complex.business_activity.name" />
|
||||
<app-key-value label="مجموعه" [value]="invoice.pos!.complex.name" />
|
||||
<app-key-value label="پایانه فروش" [value]="invoice.pos!.name" />
|
||||
<app-key-value label="ایجاد کننده" [value]="invoice.consumer_account.account.username" />
|
||||
</div>
|
||||
|
||||
@if (variant !== "customer") {
|
||||
<p-divider align="center"> اطلاعات مشتری </p-divider>
|
||||
@if (invoice.customer) {
|
||||
<div class="listKeyValue">
|
||||
@if (invoice.customer.type === "INDIVIDUAL") {
|
||||
<app-key-value label="نوع مشتری" value="حقیقی" />
|
||||
<app-key-value label="نام" [value]="invoice.customer.individual?.first_name" />
|
||||
<app-key-value label="نام خانوادگی" [value]="invoice.customer.individual?.last_name" />
|
||||
<app-key-value label="کد اقتصادی" [value]="invoice.customer.individual?.economic_code" />
|
||||
<app-key-value label="کد ملی" [value]="invoice.customer.individual?.national_id" />
|
||||
<app-key-value label="کد پستی" [value]="invoice.customer.individual?.postal_code" />
|
||||
} @else {
|
||||
<app-key-value label="نوع مشتری" value="حقوقی" />
|
||||
<app-key-value label="نام شرکت" [value]="invoice.customer.legal?.company_name" />
|
||||
<app-key-value label="کد اقتصادی" [value]="invoice.customer.legal?.economic_code" />
|
||||
<app-key-value label="کد ثبتی" [value]="invoice.customer.legal?.registration_number" />
|
||||
<app-key-value label="کد پستی" [value]="invoice.customer.legal?.postal_code" />
|
||||
}
|
||||
</div>
|
||||
} @else if (invoice.unknown_customer) {
|
||||
<div class="listKeyValue">
|
||||
<app-key-value label="نوع مشتری" value="نوع دوم" />
|
||||
<app-key-value label="عنوان" [value]="invoice.unknown_customer.name" />
|
||||
<app-key-value label="کد ثبتی" [value]="invoice.unknown_customer.national_code" />
|
||||
</div>
|
||||
} @else {
|
||||
<p class="text-center text-text-color pt-3 pb-5">اطلاعات مشتری ثبت نشده است.</p>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</app-card-data>
|
||||
<app-card-data cardTitle="کالاهای خریداری شده" [editable]="false">
|
||||
<app-page-data-list
|
||||
[columns]="columns"
|
||||
[expandColumns]="expandableColumns"
|
||||
[expandable]="true"
|
||||
expandableItemKey="payload"
|
||||
[items]="invoice.items"
|
||||
[loading]="loading"
|
||||
pageTitle=""
|
||||
[showRefresh]="false"
|
||||
>
|
||||
<ng-template #totalAmount let-item>
|
||||
@if (!item.discount_amount) {
|
||||
<span [appPriceMask]="item.total_amount"></span>
|
||||
} @else {
|
||||
<!-- <div class="flex flex-col items-end">
|
||||
<span class="line-through text-muted-color text-xs" [appPriceMask]="item.total_amount"></span>
|
||||
<span [appPriceMask]="item.total_amount - item.discount_amount"></span>
|
||||
</div> -->
|
||||
}
|
||||
</ng-template>
|
||||
</app-page-data-list>
|
||||
</app-card-data>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import { Maybe } from '@/core';
|
||||
import { NativeBridgeService } from '@/core/services';
|
||||
import { PosInfoStore } from '@/domains/pos/store';
|
||||
import { CatalogTaxProviderStatusTagComponent } from '@/shared/catalog';
|
||||
import { AppCardComponent, KeyValueComponent } from '@/shared/components';
|
||||
import { ISaleInvoiceFullResponse } from '@/shared/components/invoices/sale-invoice-full-response.model';
|
||||
import { PageLoadingComponent } from '@/shared/components/page-loading.component';
|
||||
import {
|
||||
IColumn,
|
||||
PageDataListComponent,
|
||||
} from '@/shared/components/pageDataList/page-data-list.component';
|
||||
import { PriceMaskDirective } from '@/shared/directives';
|
||||
import { UikitEmptyStateComponent } from '@/uikit';
|
||||
import {
|
||||
Component,
|
||||
computed,
|
||||
EventEmitter,
|
||||
inject,
|
||||
Input,
|
||||
Output,
|
||||
TemplateRef,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { UrlTree } from '@angular/router';
|
||||
import { ButtonDirective } from 'primeng/button';
|
||||
import { Divider } from 'primeng/divider';
|
||||
import { TableModule } from 'primeng/table';
|
||||
|
||||
export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
|
||||
|
||||
@Component({
|
||||
selector: 'shared-sale-invoice-single-view',
|
||||
templateUrl: './sale-invoice-single-view.component.html',
|
||||
imports: [
|
||||
AppCardComponent,
|
||||
KeyValueComponent,
|
||||
Divider,
|
||||
ButtonDirective,
|
||||
PageDataListComponent,
|
||||
TableModule,
|
||||
PageLoadingComponent,
|
||||
UikitEmptyStateComponent,
|
||||
PriceMaskDirective,
|
||||
CatalogTaxProviderStatusTagComponent,
|
||||
],
|
||||
})
|
||||
export class SharedSaleInvoiceSingleViewComponent {
|
||||
private readonly nativeBridge = inject(NativeBridgeService);
|
||||
private readonly posInfoStore = inject(PosInfoStore);
|
||||
|
||||
@Input({ required: true }) loading!: boolean;
|
||||
@Input() invoice!: Maybe<ISaleInvoiceFullResponse>;
|
||||
@Input() variant: TSaleInvoiceSingleViewVariant = 'full';
|
||||
@Input() backRoute?: UrlTree | string | any[];
|
||||
|
||||
@Output() onRefresh = new EventEmitter<void>();
|
||||
|
||||
@ViewChild('totalAmount', { static: false }) totalAmount!: TemplateRef<any>;
|
||||
|
||||
readonly posName = computed(() => {
|
||||
if (this.posInfoStore.entity()) {
|
||||
const { name, businessActivity, complex } = this.posInfoStore.entity()!;
|
||||
return `${name} (${businessActivity.name} - ${complex.name})`;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
printInvoice = () => {
|
||||
if (this.invoice) {
|
||||
this.nativeBridge.print([
|
||||
{
|
||||
title: 'اطلاعات صورتحساب',
|
||||
items: [
|
||||
{
|
||||
label: 'شماره منحصر به فرد مالیاتی',
|
||||
value: 'this.invoice',
|
||||
},
|
||||
{
|
||||
label: 'شماره صورتحساب',
|
||||
value: this.invoice.code,
|
||||
},
|
||||
{
|
||||
label: 'موضوع صورتحساب',
|
||||
value: 'this.invoice',
|
||||
},
|
||||
{
|
||||
label: 'نوع صورتحساب',
|
||||
value: 'this.invoice',
|
||||
},
|
||||
{
|
||||
label: 'تاریخ و ساعت',
|
||||
value: this.invoice.invoice_date,
|
||||
},
|
||||
{
|
||||
label: 'وضعیت صورتحساب مالیاتی',
|
||||
value: this.invoice.status.translate,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: `اطلاعات فروشنده`,
|
||||
items: [
|
||||
{
|
||||
label: 'عنوان فروشگاه',
|
||||
value: this.invoice.pos.complex.business_activity.name,
|
||||
},
|
||||
{
|
||||
label: 'عنوان شعبه',
|
||||
value: this.invoice.pos.complex.name,
|
||||
},
|
||||
{
|
||||
label: 'عنوان پایانه فروش',
|
||||
value: this.invoice.pos.name,
|
||||
},
|
||||
{
|
||||
label: 'شماره اقتصادی',
|
||||
value: 'this.invoice.pos.complex.business_activity.economic_code',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: `اطلاعات خریدار`,
|
||||
items: [
|
||||
{
|
||||
label: 'نام خریدار',
|
||||
value:
|
||||
(this.invoice.customer
|
||||
? this.invoice.customer.type === 'LEGAL'
|
||||
? this.invoice.customer.legal?.company_name
|
||||
: `${this.invoice.customer.individual?.first_name} ${this.invoice.customer.individual?.last_name}`
|
||||
: this.invoice.unknown_customer?.name) || '-',
|
||||
},
|
||||
{
|
||||
label: 'شماره اقتصادی',
|
||||
value: this.invoice.customer
|
||||
? this.invoice.customer.type === 'LEGAL'
|
||||
? this.invoice.customer.legal?.economic_code
|
||||
: this.invoice.customer.individual?.economic_code || '-'
|
||||
: '-',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
columns: IColumn[] = [
|
||||
{
|
||||
field: 'name',
|
||||
header: 'عنوان',
|
||||
type: 'nested',
|
||||
nestedOption: {
|
||||
path: 'good.name',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'sku_code',
|
||||
header: 'شناسه کالا',
|
||||
},
|
||||
{
|
||||
field: 'unit_price',
|
||||
header: 'قیمت واحد',
|
||||
type: 'price',
|
||||
},
|
||||
{
|
||||
field: 'quantity',
|
||||
header: 'مقدار',
|
||||
customDataModel(item) {
|
||||
return `${item.quantity} ${item.measure_unit_text}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'total_amount',
|
||||
header: 'قیمت نهایی',
|
||||
type: 'price',
|
||||
},
|
||||
];
|
||||
|
||||
expandableColumns: IColumn[] = [
|
||||
{
|
||||
field: 'commission',
|
||||
header: 'کارمزد',
|
||||
type: 'price',
|
||||
},
|
||||
{
|
||||
field: 'wages',
|
||||
header: 'اجرت',
|
||||
type: 'price',
|
||||
},
|
||||
{
|
||||
field: 'profit',
|
||||
header: 'سود',
|
||||
type: 'price',
|
||||
},
|
||||
];
|
||||
|
||||
expandedRows: { [key: string]: boolean } = {};
|
||||
|
||||
refresh() {
|
||||
this.onRefresh.emit();
|
||||
}
|
||||
}
|
||||
@@ -168,7 +168,7 @@
|
||||
|
||||
<ng-template #emptymessage>
|
||||
<tr class="">
|
||||
<td [colSpan]="(columns.length + 1).toString()" class="w-full">
|
||||
<td [colSpan]="(columns.length + (showIndex ? 1 : 0) + (actionsCount() > 0 ? 1 : 0)).toString()" class="w-full">
|
||||
<ng-container [ngTemplateOutlet]="emptyMessageCard"></ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="h-full bg-surface-overlay rounded-(--p-card-border-radius) overflow-hidden">
|
||||
<div class="h-full bg-surface-overlay rounded-lg shadow border border-surface-border p-0! overflow-hidden">
|
||||
<ng-template #captionTemplate let-isMobileView="isMobileView">
|
||||
@if (pageTitle || showAdd || filter || showRefresh || moreActions) {
|
||||
<ng-container [ngTemplateOutlet]="caption">
|
||||
|
||||
Reference in New Issue
Block a user