feat: Implement product management features including CRUD operations and UI components

src/app/core/constants/defaultData.const.ts

@@ -1,6 +1,6 @@
 import { IPaginatedQuery } from '../models/service.model';
 
 export const PAGINATED_QUERY_DEFAULT_VALUES: IPaginatedQuery = {
-  lastSeen: '',
+  page: 1,
-  pageSize: 10,
+  pageSize: 50,
 };

src/app/core/models/service.model.ts

@@ -1,10 +1,16 @@
-export interface IPaginatedQuery<LastSeen = string> {
+export interface IPaginatedQuery {
-  lastSeen: LastSeen;
+  page: number;
   pageSize: number;
 }
 
-export interface IPaginatedResponse<T, LastSeen = string> {
+export interface IPaginatedResponse<T> {
-  lastSeen: LastSeen;
+  meta: IResponseMetadata;
-  totalCount: number;
+  data: T[];
-  items: T[];
+}
+
+export interface IResponseMetadata {
+  page: number;
+  perPage: number;
+  totalPages: number;
+  totalRecords: number;
 }

src/app/modules/customers/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,8 +11,8 @@ export class CustomersService {
 
   private apiRoutes = CUSTOMERS_API_ROUTES;
 
-  getAll(): Observable<ICustomerResponse[]> {
+  getAll(): Observable<IPaginatedResponse<ICustomerResponse>> {
-    return this.http.get<ICustomerRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<ICustomerRawResponse>>(this.apiRoutes.list());
   }
 
   getSingle(customerId: string): Observable<ICustomerResponse> {

src/app/modules/customers/views/list.component.html

@@ -8,5 +8,7 @@
   [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
->
+  (onAdd)="openAddForm()"
-</app-page-data-list>
+/>
+
+<customer-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/customers/views/list.component.ts

@@ -3,13 +3,14 @@ import {
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, signal } from '@angular/core';
+import { CustomerFormComponent } from '../components/form.component';
 import { ICustomerResponse } from '../models';
 import { CustomersService } from '../services/main.service';
 
 @Component({
   selector: 'app-customers',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent],
+  imports: [PageDataListComponent, CustomerFormComponent],
 })
 export class CustomersComponent {
   constructor(private customerService: CustomersService) {
@@ -34,12 +35,21 @@ export class CustomersComponent {
 
   loading = signal(false);
   items = signal<ICustomerResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
 
   getData() {
     this.loading.set(true);
     this.customerService.getAll().subscribe((res) => {
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
 }

src/app/modules/inventories/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,8 +11,8 @@ export class InventoriesService {
 
   private apiRoutes = INVENTORIES_API_ROUTES;
 
-  getAll(): Observable<IInventoryResponse[]> {
+  getAll(): Observable<IPaginatedResponse<IInventoryResponse>> {
-    return this.http.get<IInventoryRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<IInventoryRawResponse>>(this.apiRoutes.list());
   }
 
   getSingle(inventoryId: string): Observable<IInventoryResponse> {

src/app/modules/inventories/views/list.component.html

@@ -8,5 +8,7 @@
   [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
->
+  (onAdd)="openAddForm()"
-</app-page-data-list>
+/>
+
+<inventory-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/inventories/views/list.component.ts

@@ -3,13 +3,14 @@ import {
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, signal } from '@angular/core';
+import { InventoryFormComponent } from '../components/form.component';
 import { IInventoryResponse } from '../models';
 import { InventoriesService } from '../services/main.service';
 
 @Component({
   selector: 'app-inventories',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent],
+  imports: [PageDataListComponent, InventoryFormComponent],
 })
 export class InventoriesComponent {
   constructor(private inventoryService: InventoriesService) {
@@ -26,12 +27,21 @@ export class InventoriesComponent {
 
   loading = signal(false);
   items = signal<IInventoryResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
 
   getData() {
     this.loading.set(true);
     this.inventoryService.getAll().subscribe((res) => {
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
 }

src/app/modules/productBrands/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,8 +11,8 @@ export class ProductBrandsService {
 
   private apiRoutes = PRODUCT_BRANDS_API_ROUTES;
 
-  getAll(): Observable<IProductBrandResponse[]> {
+  getAll(): Observable<IPaginatedResponse<IProductBrandResponse>> {
-    return this.http.get<IProductBrandRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<IProductBrandRawResponse>>(this.apiRoutes.list());
   }
 
   getSingle(brandId: string): Observable<IProductBrandResponse> {

src/app/modules/productBrands/views/list.component.html

@@ -8,5 +8,7 @@
   [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
->
+  (onAdd)="openAddForm()"
-</app-page-data-list>
+/>
+
+<product-brand-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/productBrands/views/list.component.ts

@@ -3,13 +3,14 @@ import {
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, signal } from '@angular/core';
+import { ProductBrandFormComponent } from '../components/form.component';
 import { IProductBrandResponse } from '../models';
 import { ProductBrandsService } from '../services/main.service';
 
 @Component({
   selector: 'app-product-brands',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent],
+  imports: [PageDataListComponent, ProductBrandFormComponent],
 })
 export class ProductBrandsComponent {
   constructor(private productBrandService: ProductBrandsService) {
@@ -28,12 +29,21 @@ export class ProductBrandsComponent {
 
   loading = signal(false);
   items = signal<IProductBrandResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
 
   getData() {
     this.loading.set(true);
     this.productBrandService.getAll().subscribe((res) => {
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
 }

src/app/modules/productCategories/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -14,8 +15,8 @@ export class ProductCategoriesService {
 
   private apiRoutes = PRODUCT_CATEGORIES_API_ROUTES;
 
-  getAll(): Observable<IProductCategoryResponse[]> {
+  getAll(): Observable<IPaginatedResponse<IProductCategoryResponse>> {
-    return this.http.get<IProductCategoryRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<IProductCategoryRawResponse>>(this.apiRoutes.list());
   }
 
   getSingle(categoryId: string): Observable<IProductCategoryResponse> {

src/app/modules/productCategories/views/list.component.html

@@ -8,5 +8,7 @@
   [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
->
+  (onAdd)="openAddForm()"
-</app-page-data-list>
+/>
+
+<product-category-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/productCategories/views/list.component.ts

@@ -3,13 +3,14 @@ import {
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, signal } from '@angular/core';
+import { ProductCategoryFormComponent } from '../components/form.component';
 import { IProductCategoryResponse } from '../models';
 import { ProductCategoriesService } from '../services/main.service';
 
 @Component({
   selector: 'app-product-categories',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent],
+  imports: [PageDataListComponent, ProductCategoryFormComponent],
 })
 export class ProductCategoriesComponent {
   constructor(private productCategoryService: ProductCategoriesService) {
@@ -27,12 +28,21 @@ export class ProductCategoriesComponent {
 
   loading = signal(false);
   items = signal<IProductCategoryResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
 
   getData() {
     this.loading.set(true);
     this.productCategoryService.getAll().subscribe((res) => {
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
 }

src/app/modules/products/components/form.component.html

@@ -0,0 +1,11 @@
+<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.name" name="name" />
+    <app-input label="توضیحات" [control]="form.controls.description" name="description" />
+    <app-input label="نوع محصول" [control]="form.controls.productType" name="productType" />
+    <!-- <app-input label="برند" [control]="form.controls.brandId" name="brandId" type="" />
+    <app-input label="دسته‌بندی" [control]="form.controls.categoryId" name="categoryId" type="number" />
+    <app-input label="تامین‌کننده" [control]="form.controls.supplierId" name="supplierId" type="number" /> -->
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

src/app/modules/products/components/form.component.ts

@@ -0,0 +1,71 @@
+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 { IProductRequest, IProductResponse } from '../models';
+import { ProductsService } from '../services/main.service';
+
+@Component({
+  selector: 'product-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class ProductFormComponent {
+  @Input() initialValues?: IProductResponse;
+
+  @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<IProductResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: ProductsService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    name: [this.initialValues?.name || null, [Validators.required]],
+    description: [this.initialValues?.description || null, [Validators.required]],
+    productType: [this.initialValues?.productType || null, [Validators.required]],
+    brandId: [this.initialValues?.brandId || null, [Validators.required]],
+    categoryId: [this.initialValues?.categoryId || null, [Validators.required]],
+    supplierId: [this.initialValues?.supplierId || null, [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 IProductRequest).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);
+  }
+}

src/app/modules/products/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/products';
+
+export const PRODUCTS_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (productId: string) => `${baseUrl}/${productId}`,
+};

src/app/modules/products/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './apiRoutes';
+export * from './routes';

src/app/modules/products/constants/routes/index.ts

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TProductsRouteNames = 'products' | 'product';
+
+export const productsNamedRoutes: NamedRoutes<TProductsRouteNames> = {
+  products: {
+    path: 'products',
+    loadComponent: () => import('../../views/list.component').then((m) => m.ProductsComponent),
+    meta: {
+      title: 'محصولات',
+      pagePath: () => '/products',
+    },
+  },
+  product: {
+    path: 'products/:productId',
+    loadComponent: () => import('../../views/single.component').then((m) => m.ProductComponent),
+    meta: {
+      title: 'محصول',
+      pagePath: () => '/products/:productId',
+    },
+  },
+};
+
+export const PRODUCTS_ROUTES: Routes = Object.values(productsNamedRoutes);

src/app/modules/products/models/index.ts

@@ -0,0 +1 @@
+export * from './io';

src/app/modules/products/models/io.d.ts

@@ -0,0 +1,23 @@
+export interface IProductRawResponse {
+  id: number;
+  name: string;
+  description: string;
+  productType: string;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date;
+  brandId: number;
+  categoryId: number;
+  supplierId: number;
+}
+
+export interface IProductResponse extends IProductRawResponse {}
+
+export interface IProductRequest {
+  name: string;
+  description: string;
+  productType: string;
+  brandId: number;
+  categoryId: number;
+  supplierId: number;
+}

src/app/modules/products/services/main.service.ts

@@ -0,0 +1,25 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PRODUCTS_API_ROUTES } from '../constants';
+import { IProductRawResponse, IProductRequest, IProductResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class ProductsService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = PRODUCTS_API_ROUTES;
+
+  getAll(): Observable<IPaginatedResponse<IProductResponse>> {
+    return this.http.get<IPaginatedResponse<IProductRawResponse>>(this.apiRoutes.list());
+  }
+
+  getSingle(productId: string): Observable<IProductResponse> {
+    return this.http.get<IProductRawResponse>(this.apiRoutes.single(productId));
+  }
+
+  create(data: IProductRequest): Observable<IProductResponse> {
+    return this.http.post<IProductRawResponse>(this.apiRoutes.list(), data);
+  }
+}

src/app/modules/products/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

src/app/modules/products/views/list.component.html

@@ -0,0 +1,14 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت محصولات'"
+  [addNewCtaLabel]="'افزودن محصول جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="محصولی یافت نشد"
+  emptyPlaceholderDescription="برای افزودن محصول جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+  (onAdd)="openAddForm()"
+/>
+
+<product-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/products/views/list.component.ts

@@ -0,0 +1,52 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { ProductFormComponent } from '../components/form.component';
+import { IProductResponse } from '../models';
+import { ProductsService } from '../services/main.service';
+
+@Component({
+  selector: 'app-products',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent, ProductFormComponent],
+})
+export class ProductsComponent {
+  constructor(private productService: ProductsService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'name', header: 'نام' },
+    { field: 'description', header: 'توضیحات' },
+    { field: 'productType', header: 'نوع محصول' },
+    { field: 'brandId', header: 'برند' },
+    { field: 'categoryId', header: 'دسته‌بندی' },
+    { field: 'supplierId', header: 'تامین‌کننده' },
+    { field: 'createdAt', header: 'تاریخ ایجاد' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IProductResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.productService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res.data);
+    });
+  }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
+}

src/app/modules/products/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

src/app/modules/products/views/single.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product',
+  templateUrl: './single.component.html',
+})
+export class ProductComponent {
+  constructor() {}
+}

src/app/modules/stores/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,8 +11,8 @@ export class StoresService {
 
   private apiRoutes = STORES_API_ROUTES;
 
-  getAll(): Observable<IStoreResponse[]> {
+  getAll(): Observable<IPaginatedResponse<IStoreResponse>> {
-    return this.http.get<IStoreRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<IStoreRawResponse>>(this.apiRoutes.list());
   }
 
   getSingle(storeId: string): Observable<IStoreResponse> {

src/app/modules/stores/views/list.component.html

@@ -8,5 +8,7 @@
   [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
->
+  (onAdd)="openAddForm()"
-</app-page-data-list>
+/>
+
+<store-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/stores/views/list.component.ts

@@ -3,13 +3,14 @@ import {
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, signal } from '@angular/core';
+import { StoreFormComponent } from '../components/form.component';
 import { IStoreResponse } from '../models';
 import { StoresService } from '../services/main.service';
 
 @Component({
   selector: 'app-stores',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent],
+  imports: [PageDataListComponent, StoreFormComponent],
 })
 export class StoresComponent {
   constructor(private storeService: StoresService) {
@@ -28,12 +29,21 @@ export class StoresComponent {
 
   loading = signal(false);
   items = signal<IStoreResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
 
   getData() {
     this.loading.set(true);
     this.storeService.getAll().subscribe((res) => {
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
 }

src/app/modules/suppliers/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,8 +11,8 @@ export class SuppliersService {
 
   private apiRoutes = SUPPLIERS_API_ROUTES;
 
-  getAll(): Observable<ISupplierResponse[]> {
+  getAll(): Observable<IPaginatedResponse<ISupplierResponse>> {
-    return this.http.get<ISupplierRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<ISupplierRawResponse>>(this.apiRoutes.list());
   }
 
   getSingle(supplierId: string): Observable<ISupplierResponse> {

src/app/modules/suppliers/views/list.component.html

@@ -8,5 +8,7 @@
   [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
->
+  (onAdd)="openAddForm()"
-</app-page-data-list>
+/>
+
+<supplier-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/suppliers/views/list.component.ts

@@ -3,13 +3,14 @@ import {
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, signal } from '@angular/core';
+import { SupplierFormComponent } from '../components/form.component';
 import { ISupplierResponse } from '../models';
 import { SuppliersService } from '../services/main.service';
 
 @Component({
   selector: 'app-suppliers',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent],
+  imports: [PageDataListComponent, SupplierFormComponent],
 })
 export class SuppliersComponent {
   constructor(private supplierService: SuppliersService) {
@@ -34,12 +35,21 @@ export class SuppliersComponent {
 
   loading = signal(false);
   items = signal<ISupplierResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
 
   getData() {
     this.loading.set(true);
     this.supplierService.getAll().subscribe((res) => {
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
 }

src/app/modules/users/services/main.service.ts

@@ -1,3 +1,4 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,8 +11,8 @@ export class UsersService {
 
   private apiRoutes = USERS_API_ROUTES;
 
-  getAll(): Observable<IUserResponse[]> {
+  getAll(): Observable<IPaginatedResponse<IUserResponse>> {
-    return this.http.get<IUserRawResponse[]>(this.apiRoutes.list());
+    return this.http.get<IPaginatedResponse<IUserRawResponse>>(this.apiRoutes.list());
   }
   getSingle(userId: string): Observable<IUserResponse> {
     return this.http.get<IUserRawResponse>(this.apiRoutes.single(userId));

src/app/modules/users/views/list.component.html

@@ -5,7 +5,7 @@
   [showAdd]="true"
   emptyPlaceholderTitle="کاربری یافت نشد"
   emptyPlaceholderDescription="برای افزودن کاربر جدید، روی دکمهٔ بالا کلیک کنید."
-  [items]="[]"
+  [items]="items()"
   [loading]="loading()"
   [showDetails]="true"
   [showAdd]="true"

src/app/modules/users/views/list.component.ts

@@ -37,8 +37,10 @@ export class UsersComponent {
   getData() {
     this.loading.set(true);
     this.userService.getAll().subscribe((res) => {
+      console.log(res);
+
       this.loading.set(false);
-      this.items.set(res);
+      this.items.set(res.data);
     });
   }