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,14 @@
|
||||
<p-dialog header="فرم تامینکننده" [(visible)]="visible" [modal]="true" [style]="{ width: '600px' }" [closable]="true">
|
||||
<form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
|
||||
<app-input label="نام" [control]="form.controls.firstName" name="firstName" />
|
||||
<app-input label="نام خانوادگی" [control]="form.controls.lastName" name="lastName" />
|
||||
<app-input label="ایمیل" [control]="form.controls.email" name="email" type="email" />
|
||||
<app-input label="شماره موبایل" [control]="form.controls.mobileNumber" name="mobileNumber" type="mobile" />
|
||||
<app-input label="آدرس" [control]="form.controls.address" name="address" />
|
||||
<app-input label="شهر" [control]="form.controls.city" name="city" />
|
||||
<app-input label="استان" [control]="form.controls.state" name="state" />
|
||||
<app-input label="کشور" [control]="form.controls.country" name="country" />
|
||||
<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,74 @@
|
||||
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 { ISupplierRequest, ISupplierResponse } from '../models';
|
||||
import { SuppliersService } from '../services/main.service';
|
||||
|
||||
@Component({
|
||||
selector: 'supplier-form',
|
||||
templateUrl: './form.component.html',
|
||||
imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
|
||||
})
|
||||
export class SupplierFormComponent {
|
||||
@Input() initialValues?: ISupplierResponse;
|
||||
|
||||
@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<ISupplierResponse>();
|
||||
|
||||
private fb = inject(FormBuilder);
|
||||
constructor(private service: SuppliersService) {
|
||||
effect(() => {
|
||||
const v = this.visibleSignal();
|
||||
if (!v) this.form.reset();
|
||||
});
|
||||
}
|
||||
|
||||
form = this.fb.group({
|
||||
firstName: [this.initialValues?.firstName || null, [Validators.required]],
|
||||
lastName: [this.initialValues?.lastName || null, [Validators.required]],
|
||||
email: [this.initialValues?.email || null, [Validators.required, Validators.email]],
|
||||
mobileNumber: [this.initialValues?.mobileNumber || null, [Validators.required]],
|
||||
address: [this.initialValues?.address || null, [Validators.required]],
|
||||
city: [this.initialValues?.city || null, [Validators.required]],
|
||||
state: [this.initialValues?.state || null, [Validators.required]],
|
||||
country: [this.initialValues?.country || 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 ISupplierRequest).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/suppliers';
|
||||
|
||||
export const SUPPLIERS_API_ROUTES = {
|
||||
list: () => `${baseUrl}`,
|
||||
single: (supplierId: string) => `${baseUrl}/${supplierId}`,
|
||||
};
|
||||
@@ -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 TSuppliersRouteNames = 'suppliers' | 'supplier';
|
||||
|
||||
export const suppliersNamedRoutes: NamedRoutes<TSuppliersRouteNames> = {
|
||||
suppliers: {
|
||||
path: 'suppliers',
|
||||
loadComponent: () => import('../../views/list.component').then((m) => m.SuppliersComponent),
|
||||
meta: {
|
||||
title: 'تامینکنندگان',
|
||||
pagePath: () => '/suppliers',
|
||||
},
|
||||
},
|
||||
supplier: {
|
||||
path: 'suppliers/:supplierId',
|
||||
loadComponent: () => import('../../views/single.component').then((m) => m.SupplierComponent),
|
||||
meta: {
|
||||
title: 'تامینکننده',
|
||||
pagePath: () => '/suppliers/:supplierId',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const SUPPLIERS_ROUTES: Routes = Object.values(suppliersNamedRoutes);
|
||||
@@ -0,0 +1 @@
|
||||
export * from './io';
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
export interface ISupplierRawResponse {
|
||||
id: number;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
mobileNumber: string;
|
||||
address: string;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
isActive: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
deletedAt: Date;
|
||||
}
|
||||
|
||||
export interface ISupplierResponse extends ISupplierRawResponse {}
|
||||
|
||||
export interface ISupplierRequest {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
mobileNumber: string;
|
||||
address: string;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { SUPPLIERS_API_ROUTES } from '../constants';
|
||||
import { ISupplierRawResponse, ISupplierRequest, ISupplierResponse } from '../models';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class SuppliersService {
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
private apiRoutes = SUPPLIERS_API_ROUTES;
|
||||
|
||||
getAll(): Observable<ISupplierResponse[]> {
|
||||
return this.http.get<ISupplierRawResponse[]>(this.apiRoutes.list());
|
||||
}
|
||||
|
||||
getSingle(supplierId: string): Observable<ISupplierResponse> {
|
||||
return this.http.get<ISupplierRawResponse>(this.apiRoutes.single(supplierId));
|
||||
}
|
||||
|
||||
create(data: ISupplierRequest): Observable<ISupplierResponse> {
|
||||
return this.http.post<ISupplierRawResponse>(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,45 @@
|
||||
import {
|
||||
IColumn,
|
||||
PageDataListComponent,
|
||||
} from '@/shared/components/pageDataList/page-data-list.component';
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { ISupplierResponse } from '../models';
|
||||
import { SuppliersService } from '../services/main.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-suppliers',
|
||||
templateUrl: './list.component.html',
|
||||
imports: [PageDataListComponent],
|
||||
})
|
||||
export class SuppliersComponent {
|
||||
constructor(private supplierService: SuppliersService) {
|
||||
this.getData();
|
||||
}
|
||||
|
||||
columns = [
|
||||
{ field: 'id', header: 'شناسه' },
|
||||
{ field: 'firstName', header: 'نام' },
|
||||
{ field: 'lastName', header: 'نام خانوادگی' },
|
||||
{ field: 'email', header: 'ایمیل' },
|
||||
{ field: 'mobileNumber', header: 'شماره موبایل' },
|
||||
{ field: 'address', header: 'آدرس' },
|
||||
{ field: 'city', header: 'شهر' },
|
||||
{ field: 'state', header: 'استان' },
|
||||
{ field: 'country', header: 'کشور' },
|
||||
{ field: 'isActive', header: 'فعال' },
|
||||
{ field: 'createdAt', header: 'تاریخ ایجاد' },
|
||||
{ field: 'updatedAt', header: 'تاریخ بهروزرسانی' },
|
||||
{ field: 'actions' },
|
||||
] as IColumn[];
|
||||
|
||||
loading = signal(false);
|
||||
items = signal<ISupplierResponse[]>([]);
|
||||
|
||||
getData() {
|
||||
this.loading.set(true);
|
||||
this.supplierService.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-supplier',
|
||||
templateUrl: './single.component.html',
|
||||
})
|
||||
export class SupplierComponent {
|
||||
constructor() {}
|
||||
}
|
||||
Reference in New Issue
Block a user