Refactor pagination; add categories & manufacturers

Introduce PaginationMeta-driven pagination (component + initial values) and update templates to consume pagination objects. Expand category typings (responses, create/update payloads, default query) and update CategoryService to use typed payloads and query params. Make DataTable action handler optional and add category table utils. Add full manufacturers feature (page, form, styles) and wire UI changes across products and placeholder pages to use the new pagination/model shapes. Also update route for catalog categories.

Author: aledguedes

src/app/app.routes.ts

@@ -45,8 +45,9 @@ export const routes: Routes = [
       ),
   },
   {
-    path: 'catalog/:sub',
-    loadComponent: () => import('./features/placeholder').then((m) => m.PlaceholderPageComponent),
+    path: 'catalog/categories',
+    loadComponent: () =>
+      import('./features/catalog/categories/categories').then((m) => m.CategoriesPageComponent),
   },
   {
     path: 'compatibility/:sub',

src/app/core/models/catetories/categories-default-query.ts

@@ -0,0 +1,7 @@
+export interface CategoryDefaultQuery {
+  page: number | null;
+  name: string | null;
+  active: boolean | null;
+  per_page: number | null;
+  parent_id: string | null;
+}

src/app/core/models/catetories/categories.model.ts

@@ -1,13 +1,50 @@
-export interface CategoryResponse {
+// export interface CategoryResponse {
+//   id: string;
+//   parent_id: null;
+//   name: string;
+//   slug: string;
+//   description: string;
+//   display_order: number;
+//   icon: string;
+//   image: string;
+//   active: boolean;
+//   created_at: string;
+//   updated_at: string;
+// }
+
+export interface CategoryResponse extends Record<string, unknown> {
   id: string;
-  parent_id: null;
+  parent_id: string | null;
   name: string;
   slug: string;
-  description: string;
+  description: string | null;
   display_order: number;
-  icon: string;
-  image: string;
+  icon: string | null;
+  image: string | null;
   active: boolean;
   created_at: string;
   updated_at: string;
+  parent_name?: string;
+}
+
+export interface CreateCategoryPayload {
+  parent_id?: string | null;
+  name: string;
+  slug: string;
+  description?: string | null;
+  display_order?: number;
+  icon?: string | null;
+  image?: string | null;
+  active?: boolean;
+}
+
+export interface UpdateCategoryPayload {
+  parent_id?: string | null;
+  name?: string;
+  slug?: string;
+  description?: string | null;
+  display_order?: number;
+  icon?: string | null;
+  image?: string | null;
+  active?: boolean;
 }

src/app/core/models/catetories/category-options.model.ts

@@ -2,5 +2,6 @@ import { GeneralOption } from '../generals/general-options-response.model';
 
 export interface CategoryOption extends GeneralOption {
   icon: string;
+  is_parent: boolean;
   description: string;
 }

src/app/core/models/design-system/auto-complete.model.ts

@@ -3,5 +3,6 @@ import { GeneralOption } from '../generals/general-options-response.model';
 export interface AutocompleteOption extends GeneralOption {
   icon: string;
   disabled: boolean;
+  is_parent: boolean;
   description: string;
 }

src/app/core/models/generals/general-delete-response.ts

@@ -28,7 +28,7 @@ export interface TableAction<T = Record<string, unknown>> {
   colorClass?: string;
   title?: string;
   visible?: (row: T) => boolean;
-  handler: (row: T) => void;
+  handler?: (row: T) => void;
 }
 
 export interface TablePaginationConfig {

src/app/core/models/list-table/list-table.model.ts

@@ -2,11 +2,16 @@ import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { PaginatedResponse } from '../models/pagination/pagination.model';
 import { environment } from '../../../environments/environment';
-import { CategoryResponse } from '../models/catetories/categories.model';
+import {
+  CategoryResponse,
+  CreateCategoryPayload,
+  UpdateCategoryPayload,
+} from '../models/catetories/categories.model';
 import { buildHttpParams } from './build-http-params';
 import { CategoryOption } from '../models/catetories/category-options.model';
 import { GeneralOptionQuery } from '../models/generals/general-option-query.model';
 import { getAllResponse } from '../models/generals/general-responses-list.model';
+import { CategoryDefaultQuery } from '../models/catetories/categories-default-query';
 
 @Injectable({
   providedIn: 'root',
@@ -16,8 +21,11 @@ export class CategoryService {
   private api = environment.apiUrl;
   private flag = 'category';
 
-  getAll() {
-    return this.http.get<PaginatedResponse<CategoryResponse>>(`${this.api}/${this.flag}`);
+  getAll(filters: CategoryDefaultQuery) {
+    const params = buildHttpParams(filters);
+    return this.http.get<PaginatedResponse<CategoryResponse>>(`${this.api}/${this.flag}`, {
+      params,
+    });
   }
 
   getOptions(filters: GeneralOptionQuery) {
@@ -31,15 +39,15 @@ export class CategoryService {
     return this.http.get<CategoryResponse>(`${this.api}/${this.flag}/${id}`);
   }
 
-  create(data: FormData) {
-    return this.http.post<CategoryResponse>(`${this.api}/${this.flag}`, data);
+  create(data: CreateCategoryPayload) {
+    return this.http.post<getAllResponse<CategoryResponse>>(`${this.api}/${this.flag}`, data);
   }
 
-  update(id: string, data: FormData) {
-    return this.http.post<CategoryResponse>(`${this.api}/${this.flag}/${id}`, data);
+  update(id: string, data: UpdateCategoryPayload) {
+    return this.http.put<getAllResponse<CategoryResponse>>(`${this.api}/${this.flag}/${id}`, data);
   }
 
   delete(id: string) {
-    return this.http.delete<void>(`${this.api}/${this.flag}/${id}`);
+    return this.http.delete<getAllResponse<CategoryResponse>>(`${this.api}/${this.flag}/${id}`);
   }
 }

src/app/core/services/category-service.ts

@@ -31,6 +31,7 @@ export class ManufacturerStore extends OptionCacheStore<
           icon: 'chevrons-right',
           hasSubOptions: true,
           description: option.sublabel,
+          is_parent: false,
         })),
       })),
     );

src/app/core/store/manufacturer-store/manufacturer-store.ts

@@ -166,7 +166,7 @@ export class DataTableComponent<T extends Record<string, unknown>> {
 
   onActionClick(action: TableAction<T>, row: T, event: MouseEvent): void {
     event.stopPropagation();
-    if (action.id) {
+    if (action.handler) {
       action.handler(row);
     }
     console.log('[ON ACTION CLICK]', action, action.id);