feat: Implement product categories, stores, suppliers, and users management features
- Added ProductCategoriesService for handling product category API interactions. - Created components for listing and viewing product categories. - Implemented UI for managing product categories with a data list component. - Developed StoresService for managing store-related API calls. - Created components for listing and viewing stores with appropriate UI. - Added SuppliersService for handling supplier API interactions. - Implemented components for managing suppliers with a data list component. - Developed UsersService for managing user-related API calls. - Created components for listing and viewing users with appropriate UI. - Enhanced not found page with improved layout and navigation options.
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
<p-dialog header="فرم فروشگاه" [(visible)]="visible" [modal]="true" [style]="{ width: '500px' }" [closable]="true">
|
||||
<form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
|
||||
<app-input label="نام" [control]="form.controls.name" name="name" />
|
||||
<app-input label="موقعیت" [control]="form.controls.location" name="location" />
|
||||
<app-input label="فعال" [control]="form.controls.isActive" name="isActive" type="switch" />
|
||||
<app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
|
||||
</form>
|
||||
</p-dialog>
|
||||
@@ -0,0 +1,68 @@
|
||||
import { InputComponent } from '@/shared/components';
|
||||
import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
|
||||
import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
|
||||
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { Dialog } from 'primeng/dialog';
|
||||
import { IStoreRequest, IStoreResponse } from '../models';
|
||||
import { StoresService } from '../services/main.service';
|
||||
|
||||
@Component({
|
||||
selector: 'store-form',
|
||||
templateUrl: './form.component.html',
|
||||
imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
|
||||
})
|
||||
export class StoreFormComponent {
|
||||
@Input() initialValues?: IStoreResponse;
|
||||
|
||||
@Input()
|
||||
set visible(v: boolean) {
|
||||
this.visibleSignal.set(!!v);
|
||||
}
|
||||
get visible() {
|
||||
return this.visibleSignal();
|
||||
}
|
||||
private visibleSignal = signal(false);
|
||||
|
||||
@Output() visibleChange = new EventEmitter<boolean>();
|
||||
@Output() onSubmit = new EventEmitter<IStoreResponse>();
|
||||
|
||||
private fb = inject(FormBuilder);
|
||||
constructor(private service: StoresService) {
|
||||
effect(() => {
|
||||
const v = this.visibleSignal();
|
||||
if (!v) this.form.reset();
|
||||
});
|
||||
}
|
||||
|
||||
form = this.fb.group({
|
||||
name: [this.initialValues?.name || null, [Validators.required]],
|
||||
location: [this.initialValues?.location || null, [Validators.required]],
|
||||
isActive: [this.initialValues?.isActive || false, [Validators.required]],
|
||||
});
|
||||
|
||||
submitLoading = signal(false);
|
||||
|
||||
submit() {
|
||||
this.form.markAllAsTouched();
|
||||
if (this.form.valid) {
|
||||
this.form.disable();
|
||||
this.submitLoading.set(true);
|
||||
this.service.create(this.form.value as IStoreRequest).subscribe({
|
||||
next: (res) => {
|
||||
this.submitLoading.set(false);
|
||||
this.form.enable();
|
||||
this.form.reset();
|
||||
this.onSubmit.emit(res);
|
||||
},
|
||||
error: () => {
|
||||
this.submitLoading.set(false);
|
||||
this.form.enable();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.visibleChange.emit(false);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
const baseUrl = '/api/v1/stores';
|
||||
|
||||
export const STORES_API_ROUTES = {
|
||||
list: () => `${baseUrl}`,
|
||||
single: (storeId: string) => `${baseUrl}/${storeId}`,
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './apiRoutes';
|
||||
export * from './routes';
|
||||
@@ -0,0 +1,25 @@
|
||||
import { NamedRoutes } from '@/core';
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export type TStoresRouteNames = 'stores' | 'store';
|
||||
|
||||
export const storesNamedRoutes: NamedRoutes<TStoresRouteNames> = {
|
||||
stores: {
|
||||
path: 'stores',
|
||||
loadComponent: () => import('../../views/list.component').then((m) => m.StoresComponent),
|
||||
meta: {
|
||||
title: 'فروشگاهها',
|
||||
pagePath: () => '/stores',
|
||||
},
|
||||
},
|
||||
store: {
|
||||
path: 'stores/:storeId',
|
||||
loadComponent: () => import('../../views/single.component').then((m) => m.StoreComponent),
|
||||
meta: {
|
||||
title: 'فروشگاه',
|
||||
pagePath: () => '/stores/:storeId',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const STORES_ROUTES: Routes = Object.values(storesNamedRoutes);
|
||||
@@ -0,0 +1 @@
|
||||
export * from './io';
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
export interface IStoreRawResponse {
|
||||
id: number;
|
||||
name: string;
|
||||
location: string;
|
||||
isActive: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
export interface IStoreResponse extends IStoreRawResponse {}
|
||||
|
||||
export interface IStoreRequest {
|
||||
name: string;
|
||||
location: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { STORES_API_ROUTES } from '../constants';
|
||||
import { IStoreRawResponse, IStoreRequest, IStoreResponse } from '../models';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class StoresService {
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
private apiRoutes = STORES_API_ROUTES;
|
||||
|
||||
getAll(): Observable<IStoreResponse[]> {
|
||||
return this.http.get<IStoreRawResponse[]>(this.apiRoutes.list());
|
||||
}
|
||||
|
||||
getSingle(storeId: string): Observable<IStoreResponse> {
|
||||
return this.http.get<IStoreRawResponse>(this.apiRoutes.single(storeId));
|
||||
}
|
||||
|
||||
create(data: IStoreRequest): Observable<IStoreResponse> {
|
||||
return this.http.post<IStoreRawResponse>(this.apiRoutes.list(), data);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './list.component';
|
||||
export * from './single.component';
|
||||
@@ -0,0 +1,12 @@
|
||||
<app-page-data-list
|
||||
[pageTitle]="'مدیریت فروشگاهها'"
|
||||
[addNewCtaLabel]="'افزودن فروشگاه جدید'"
|
||||
[columns]="columns"
|
||||
[showAdd]="true"
|
||||
emptyPlaceholderTitle="فروشگاهی یافت نشد"
|
||||
emptyPlaceholderDescription="برای افزودن فروشگاه جدید، روی دکمهٔ بالا کلیک کنید."
|
||||
[items]="items()"
|
||||
[loading]="loading()"
|
||||
[showDetails]="true"
|
||||
>
|
||||
</app-page-data-list>
|
||||
@@ -0,0 +1,39 @@
|
||||
import {
|
||||
IColumn,
|
||||
PageDataListComponent,
|
||||
} from '@/shared/components/pageDataList/page-data-list.component';
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { IStoreResponse } from '../models';
|
||||
import { StoresService } from '../services/main.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stores',
|
||||
templateUrl: './list.component.html',
|
||||
imports: [PageDataListComponent],
|
||||
})
|
||||
export class StoresComponent {
|
||||
constructor(private storeService: StoresService) {
|
||||
this.getData();
|
||||
}
|
||||
|
||||
columns = [
|
||||
{ field: 'id', header: 'شناسه' },
|
||||
{ field: 'name', header: 'نام' },
|
||||
{ field: 'location', header: 'موقعیت' },
|
||||
{ field: 'isActive', header: 'فعال' },
|
||||
{ field: 'createdAt', header: 'تاریخ ایجاد' },
|
||||
{ field: 'updatedAt', header: 'تاریخ بهروزرسانی' },
|
||||
{ field: 'actions' },
|
||||
] as IColumn[];
|
||||
|
||||
loading = signal(false);
|
||||
items = signal<IStoreResponse[]>([]);
|
||||
|
||||
getData() {
|
||||
this.loading.set(true);
|
||||
this.storeService.getAll().subscribe((res) => {
|
||||
this.loading.set(false);
|
||||
this.items.set(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<div class=""></div>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-store',
|
||||
templateUrl: './single.component.html',
|
||||
})
|
||||
export class StoreComponent {
|
||||
constructor() {}
|
||||
}
|
||||
Reference in New Issue
Block a user