feat: Refactor select components to use IPaginatedResponse and streamline data fetching
- Updated select components for bank accounts, bank branches, customers, inventories, product brands, product categories, products, and suppliers to extend AbstractSelectComponent with IPaginatedResponse. - Replaced getData() method with getDataService() to return observables directly from service calls. - Enhanced filters component to set default inventory and product selections. - Modified inventory component to conditionally render columns based on variant type. - Introduced InventoryStore for managing inventory state and fetching single inventory details. - Added empty state messages in cardex and other components for better user experience. - Updated inner pages header to use h4 for titles and improved layout in empty state component.
This commit is contained in:
@@ -1,9 +1,17 @@
|
||||
<form [formGroup]="form" class="flex items-end gap-4">
|
||||
<div class="grow grid grid-cols-4 gap-2">
|
||||
<inventories-select-field [control]="form.controls.inventoryId" (onChange)="onChangeInventory($event)" />
|
||||
<products-select-field [control]="form.controls.productId" (onChange)="onChangeProduct($event)" />
|
||||
<uikit-datepicker [control]="form.controls.startDate" />
|
||||
<uikit-datepicker [control]="form.controls.endDate" />
|
||||
<inventories-select-field
|
||||
[control]="form.controls.inventoryId"
|
||||
(onChange)="onChangeInventory($event)"
|
||||
(onSetDefaultDataItem)="setDefaultInventory($event)"
|
||||
/>
|
||||
<products-select-field
|
||||
[control]="form.controls.productId"
|
||||
(onChange)="onChangeProduct($event)"
|
||||
(onSetDefaultDataItem)="setDefaultProduct($event)"
|
||||
/>
|
||||
<uikit-datepicker [control]="form.controls.startDate" label="از تاریخ" />
|
||||
<uikit-datepicker [control]="form.controls.endDate" label="تا تاریخ" />
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<button pButton (click)="search()">جستجو</button>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { Maybe } from '@/core';
|
||||
import { InventoriesSelectComponent } from '@/modules/inventories/components';
|
||||
import { IInventorySummaryResponse } from '@/modules/inventories/models';
|
||||
import { ProductsSelectComponent } from '@/modules/products/components/select/select.component';
|
||||
import { IProductResponse } from '@/modules/products/models';
|
||||
import { UikitFlatpickrJalaliComponent } from '@/uikit';
|
||||
import { Component, EventEmitter, inject, Output } from '@angular/core';
|
||||
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
||||
@@ -34,6 +36,7 @@ export class CardexFiltersComponent {
|
||||
|
||||
constructor(private router: Router) {
|
||||
this.filters = this.store.filters();
|
||||
this.form.patchValue(this.filters);
|
||||
}
|
||||
|
||||
form = this.fb.group({
|
||||
@@ -55,4 +58,13 @@ export class CardexFiltersComponent {
|
||||
|
||||
this.store.getCardex();
|
||||
}
|
||||
|
||||
setDefaultInventory(inventory: IInventorySummaryResponse) {
|
||||
this.store.setDefaultInventory(inventory);
|
||||
}
|
||||
setDefaultProduct(product: IProductResponse) {
|
||||
console.log('setDefaultProduct');
|
||||
|
||||
this.store.setDefaultProduct(product);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,11 @@
|
||||
<th rowspan="2" [style]="{ textAlign: 'center', width: '12rem' }">شرح</th>
|
||||
<th rowspan="2" [style]="{ textAlign: 'center', width: '6rem' }">شماره</th>
|
||||
<th rowspan="2" [style]="{ textAlign: 'center', minWidth: '14rem', width: '14rem' }">طرف حساب</th>
|
||||
<th rowspan="2" [style]="{ textAlign: 'center', width: '12rem' }">کالا</th>
|
||||
@if (variant === "inventory") {
|
||||
<th rowspan="2" [style]="{ textAlign: 'center', width: '12rem' }">کالا</th>
|
||||
} @else if (variant === "product") {
|
||||
<th rowspan="2" [style]="{ textAlign: 'center', width: '12rem' }">انبار</th>
|
||||
}
|
||||
<th colspan="2" class="text-center!" [style]="{ width: '15rem' }">ورودی</th>
|
||||
<th colspan="2" class="text-center!" [style]="{ width: '15rem' }">خروجی</th>
|
||||
<th colspan="1" class="text-center!" [style]="{ width: '5rem' }">مانده</th>
|
||||
@@ -44,7 +48,11 @@
|
||||
<td class="text-center!">
|
||||
{{ (item.referenceType === "SALES" ? item.customer?.name : item.supplier?.name) || "-" }}
|
||||
</td>
|
||||
<td class="text-center!">{{ item.product.name || "-" }}</td>
|
||||
@if (variant === "inventory") {
|
||||
<td class="text-center!">{{ item.product.name || "-" }}</td>
|
||||
} @else if (variant === "product") {
|
||||
<td class="text-center!">{{ item.inventory.name || "-" }}</td>
|
||||
}
|
||||
<td class="text-center!">
|
||||
{{ item.type === "IN" ? item.quantity : 0 }}
|
||||
</td>
|
||||
|
||||
@@ -18,5 +18,6 @@ import { IInventoryCardex } from './types';
|
||||
export class CardexComponent {
|
||||
@Input() items: IInventoryCardex[] = [];
|
||||
@Input() loading: boolean = false;
|
||||
@Input() variant: 'inventory' | 'product' | 'general' = 'inventory';
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ export interface CardexState extends PaginatedState<ICardexResponse> {
|
||||
filters: ICardexRequestPayload;
|
||||
selectedInventory: Maybe<ICardexInventorySummary>;
|
||||
selectedProduct: Maybe<ICardexProductSummary>;
|
||||
variant: 'inventory' | 'product' | 'both';
|
||||
variant: 'inventory' | 'product' | 'general';
|
||||
canChangeVariant: boolean;
|
||||
}
|
||||
|
||||
@@ -28,17 +28,17 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
filters: {},
|
||||
selectedInventory: null,
|
||||
selectedProduct: null,
|
||||
variant: 'both',
|
||||
variant: 'general',
|
||||
canChangeVariant: true,
|
||||
};
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activeRoute: ActivatedRoute,
|
||||
private route: ActivatedRoute,
|
||||
private service: CardexService,
|
||||
private toastService: ToastService,
|
||||
) {
|
||||
const queryParams = activeRoute.snapshot.queryParams;
|
||||
const queryParams = route.snapshot.queryParams;
|
||||
|
||||
super({
|
||||
loading: false,
|
||||
@@ -52,14 +52,16 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
totalPages: 0,
|
||||
hasMore: false,
|
||||
filters: {
|
||||
inventoryId: queryParams['inventoryId'],
|
||||
productId: queryParams['productId'],
|
||||
inventoryId: queryParams['inventoryId']
|
||||
? parseInt(queryParams['inventoryId'], 10)
|
||||
: undefined,
|
||||
productId: queryParams['productId'] ? parseInt(queryParams['productId'], 10) : undefined,
|
||||
startDate: queryParams['startDate'],
|
||||
endDate: queryParams['endDate'],
|
||||
},
|
||||
selectedInventory: null,
|
||||
selectedProduct: null,
|
||||
variant: 'both',
|
||||
variant: 'general',
|
||||
canChangeVariant: true,
|
||||
});
|
||||
this.initial();
|
||||
@@ -75,7 +77,9 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
case 'inventory':
|
||||
return `کاردکس انبار ${this._state().selectedInventory?.name}`;
|
||||
default:
|
||||
return 'کاردکس';
|
||||
return `کاردکس ${this._state().selectedProduct ? 'کالای ' + this._state().selectedProduct?.name : ''} ${
|
||||
this._state().selectedInventory ? 'در انبار ' + this._state().selectedInventory?.name : ''
|
||||
}`;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -83,7 +87,7 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
* Reset state to initial values
|
||||
*/
|
||||
reset(): void {
|
||||
const queryParams = this.activeRoute.snapshot.queryParams;
|
||||
const queryParams = this.route.snapshot.queryParams;
|
||||
this.setState({
|
||||
loading: false,
|
||||
initialized: false,
|
||||
@@ -103,7 +107,7 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
},
|
||||
selectedInventory: null,
|
||||
selectedProduct: null,
|
||||
variant: 'both',
|
||||
variant: 'general',
|
||||
canChangeVariant: this.state().canChangeVariant,
|
||||
});
|
||||
}
|
||||
@@ -132,7 +136,7 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
const { productId, inventoryId, startDate, endDate } = this.filters();
|
||||
const filters = {} as Partial<ICardexRequestPayload>;
|
||||
Object.entries(this.filters()).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
if (value && value !== '0') {
|
||||
filters[key as keyof ICardexRequestPayload] = value;
|
||||
}
|
||||
});
|
||||
@@ -151,10 +155,19 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
updateFilter(filters: ICardexRequestPayload) {
|
||||
this.updateVariant();
|
||||
|
||||
this.router.navigate([], {
|
||||
queryParams: filters,
|
||||
skipLocationChange: true,
|
||||
});
|
||||
console.log('filters');
|
||||
console.log(filters);
|
||||
const cleanedFilters = this.validateFilters() || {};
|
||||
|
||||
this.router
|
||||
.navigate([], {
|
||||
relativeTo: this.route,
|
||||
queryParams: cleanedFilters,
|
||||
})
|
||||
.then((res) => console.log(res))
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
this.patchState({ filters });
|
||||
}
|
||||
|
||||
@@ -169,10 +182,18 @@ export class CardexStore extends PaginatedStore<ICardexResponse, CardexState> {
|
||||
this.patchState({ canChangeVariant: status });
|
||||
}
|
||||
|
||||
setDefaultInventory(inventory: ICardexInventorySummary) {
|
||||
this.patchState({ selectedInventory: inventory });
|
||||
}
|
||||
|
||||
setDefaultProduct(product: ICardexProductSummary) {
|
||||
this.patchState({ selectedProduct: product });
|
||||
}
|
||||
|
||||
private updateVariant() {
|
||||
const inventoryIsSelected = Boolean(this._state().selectedInventory);
|
||||
const productIsSelected = Boolean(this._state().selectedProduct);
|
||||
let variant = 'both' as 'product' | 'inventory' | 'both';
|
||||
let variant = 'general' as 'product' | 'inventory' | 'general';
|
||||
if (inventoryIsSelected) {
|
||||
if (!productIsSelected) {
|
||||
variant = 'inventory';
|
||||
|
||||
@@ -7,9 +7,8 @@
|
||||
<uikit-empty-state title="برای مشاهدهی کاردکس اطلاعات بالا را تکمیل کنید"> </uikit-empty-state>
|
||||
} @else {
|
||||
<h3 class="mb-4">{{ cardexTitle }}</h3>
|
||||
@if (variant === "inventory") {
|
||||
<cardex-templates-inventory [items]="items" [loading]="loading" />
|
||||
}
|
||||
|
||||
<cardex-templates-inventory [items]="items" [loading]="loading" [variant]="variant" />
|
||||
}
|
||||
</p-card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user