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

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[]> {
-    return this.http.get<IStoreRawResponse[]>(this.apiRoutes.list());
+  getAll(): Observable<IPaginatedResponse<IStoreResponse>> {
+    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"
->
-</app-page-data-list>
+  (onAdd)="openAddForm()"
+/>
+
+<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);
+  }
 }