Add product API and data-table action/badge support

Introduce product API calls and wire up data-table actions/badges. Key changes: ProductService: use new environments import, add flag, getAll and getById. ProductResponse now extends Record<string, unknown>. Data-table: render badges and icon cells, loop actions, centralize clicks with onActionClick and emit actionClick; import BadgeComponent. ProductForm: inject ProductService, add product signal and productById() call. Products page: handle loading/meta from API and added handleProductAction. Move environment files to src/environments and add environment.prod.ts.

Author: aledguedes

src/app/core/models/products/product-response.model.ts

@@ -1,4 +1,4 @@
-export interface ProductResponse {
+export interface ProductResponse extends Record<string, unknown> {
   id: string;
   status: Status;
   category: Category;

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { environment } from '../../../environment/environment';
+import { environment } from '../../../environments/environment';
 import { MenuItem } from '../models/menu-item';
 
 export interface MenuGroup {

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

@@ -2,16 +2,21 @@ import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { PaginatedResponse } from '../models/pagination/pagination.model';
 import { ProductResponse } from '../models/products/product-response.model';
-import { environment } from '../../../environment/environment';
+import { environment } from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ProductService {
   private http = inject(HttpClient);
   private api = environment.apiUrl;
+  private flag = 'product';
 
   getAll() {
-    return this.http.get<PaginatedResponse<ProductResponse>>(`${this.api}/product`);
+    return this.http.get<PaginatedResponse<ProductResponse>>(`${this.api}/${this.flag}`);
+  }
+
+  getById(id: string) {
+    return this.http.get<ProductResponse>(`${this.api}/${this.flag}/${id}`);
   }
 }

src/app/design-system/data-table/data-table.html

@@ -58,27 +58,34 @@
             [class.text-right]="col.align === 'right'"
             class="px-4 py-3.5 font-normal"
           >
-            @if (col.cell) { {{ col.cell(row) }} } @else { {{ row[col.key] }} }
+            @if (col.type === 'badge' || col.badgeConfig) { @let bg = getBadgeConfig(row, col);
+            <app-badge [variant]="mapVariant(bg.variant)">
+              @if (bg.icon) {
+              <app-icon [name]="bg.icon" size="w-3 h-3" class="mr-1 inline" />
+              } {{ bg.text }}
+            </app-badge>
+            } @else if (col.type === 'icon' || col.iconGetter) { @let iconName = col.iconGetter ?
+            col.iconGetter(row) : 'box';
+            <div
+              class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300"
+            >
+              <app-icon [name]="iconName" size="w-4 h-4" />
+            </div>
+            } @else { {{ getFormattedValue(row, col) }} }
           </td>
           } @if (hasActions()) {
           <td class="px-4 py-3.5 text-right" (click)="$event.stopPropagation()">
             <div class="inline-flex items-center justify-end gap-1">
+              @for (act of getVisibleActions(row); track act.id) {
               <button
                 type="button"
-                (click)="onEdit(row)"
-                class="p-1 rounded text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
-                title="Editar"
-              >
-                <app-icon name="edit" size="w-4 h-4" />
-              </button>
-              <button
-                type="button"
-                (click)="onDelete(row)"
-                class="p-1 rounded text-gray-400 hover:text-[#D66A6A] hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
-                title="Excluir"
+                (click)="onActionClick(act, row, $event)"
+                [class]="'p-1.5 rounded transition-colors ' + (act.colorClass || 'text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700')"
+                [title]="act.title || act.label"
               >
-                <app-icon name="trash-2" size="w-4 h-4" />
+                <app-icon [name]="act.icon" size="w-4 h-4" />
               </button>
+              }
             </div>
           </td>
           }

src/app/design-system/data-table/data-table.ts

@@ -7,7 +7,7 @@ import {
   TableBadgeConfig,
   TableColumn,
 } from '../../core/models/list-table/list-table.model';
-import { BadgeVariant } from '../badge/badge';
+import { BadgeVariant, BadgeComponent } from '../badge/badge';
 
 export interface ColumnDef<T> {
   key: string;
@@ -21,7 +21,7 @@ export interface ColumnDef<T> {
 @Component({
   selector: 'app-data-table',
   standalone: true,
-  imports: [AppIconComponent, SkeletonComponent, EmptyStateComponent],
+  imports: [AppIconComponent, SkeletonComponent, EmptyStateComponent, BadgeComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './data-table.html',
   styleUrl: './data-table.css',
@@ -169,11 +169,12 @@ export class DataTableComponent<T extends Record<string, unknown>> {
     if (action.id) {
       action.handler(row);
     }
+    console.log('[ON ACTION CLICK]', action, action.id);
     this.actionClick.emit({ actionId: action.id, row });
-    if (action.id === 'edit') {
-      this.editRow.emit(row);
-    } else if (action.id === 'delete') {
-      this.deleteRow.emit(row);
-    }
+    // if (action.id === 'edit') {
+    //   this.editRow.emit(row);
+    // } else if (action.id === 'delete') {
+    //   this.deleteRow.emit(row);
+    // }
   }
 }

src/app/features/catalog/product-form/product-form.ts

@@ -15,6 +15,8 @@ import { ConfirmDialogComponent } from '../../../design-system/dialog/confirm-di
 import { AppIconComponent } from '../../../design-system/icon/app-icon';
 import { ToastService } from '../../../core/services/toast';
 import { ShellStateService } from '../../../core/services/shell-state';
+import { ProductService } from '../../../core/services/product-service';
+import { ProductResponse } from '../../../core/models/products/product-response.model';
 
 export type ProductFormMode = 'create' | 'edit' | 'view' | 'duplicate';
 export type FormTab = 'geral' | 'comercial' | 'compatibilidade' | 'midia' | 'administracao';
@@ -95,6 +97,7 @@ export class ProductFormComponent implements OnInit {
   readonly shellState = inject(ShellStateService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private productService = inject(ProductService);
   private toastService = inject(ToastService);
 
   readonly mode = signal<ProductFormMode>('create');
@@ -146,6 +149,66 @@ export class ProductFormComponent implements OnInit {
   readonly selectedTagIds = signal<string[]>([]);
   readonly productNotes = signal<ProductNoteItem[]>([]);
 
+  readonly product = signal<ProductResponse>({
+    id: 'p0000000-0002-0000-0000-000000000002',
+    status: {
+      id: 's0000000-0001-0000-0000-000000000001',
+      module: 'PRODUCT',
+      code: 'DRAFT',
+      name: 'Rascunho',
+      color: '#64748B',
+      icon: 'file-text',
+    },
+    category: {
+      id: 'c0000000-0013-0000-0000-000000000013',
+      name: 'Filtros de Óleo',
+      slug: 'filtros-de-oleo',
+    },
+    manufacturer: {
+      id: 'm0000000-0001-0000-0000-000000000001',
+      name: 'Bosch',
+      slug: 'bosch',
+    },
+    internal_code: 'OF-002',
+    name: 'Filtro de Óleo Bosch OF-002',
+    slug: 'filtro-de-oleo-bosch-of-002',
+    icon: null,
+    image: null,
+    short_description: 'Filtro de óleo paralelo Bosch',
+    description: 'Filtro de óleo paralelo de alta qualidade para linha VW/Fiat 1.0 e 1.6.',
+    weight: '0.300',
+    height: '10.00',
+    width: '8.00',
+    length: '8.00',
+    featured: false,
+    active: 0,
+    is_sellable: false,
+    commercial_status: 'ready',
+    pricing: {
+      regular_price: 35.9,
+      promotional_price: 29.9,
+      current_price: 29.9,
+      is_on_promotion: true,
+      promotion_start: '2026-07-01',
+      promotion_end: '2026-12-31',
+      active: true,
+      display: {
+        from: 35.9,
+        to: 29.9,
+        label: 'de R$ 35,90 por R$ 29,90',
+      },
+    },
+    inventory: {
+      quantity: 50,
+      reserved_quantity: 0,
+      available_quantity: 50,
+      minimum_quantity: 5,
+      maximum_quantity: 300,
+      allow_backorder: true,
+      active: true,
+    },
+  });
+
   // Static Dropdown Options
   readonly categoryOptions: SelectOption[] = [
     { label: 'Sistemas de Freios', value: 'cat-01' },
@@ -229,20 +292,39 @@ export class ProductFormComponent implements OnInit {
     const url = this.router.url;
     const id = this.route.snapshot.paramMap.get('id');
 
+    if (id) {
+      this.productById(id);
+    }
+
+    console.log('[URL CHEGANDO AQUI]', url);
+
     if (url.includes('/new')) {
       this.mode.set('create');
-    } else if (url.includes('/edit')) {
-      this.mode.set('edit');
-      this.loadMockProduct(id);
-    } else if (url.includes('/view') || (id && !url.includes('/duplicate'))) {
-      this.mode.set('view');
-      this.loadMockProduct(id);
-    } else if (url.includes('/duplicate')) {
-      this.mode.set('duplicate');
-      this.loadMockProduct(id);
-      // Backend mandate rule for duplicate: clean internal_code automatically
-      this.formInternalCode.set('');
     }
+    // else if (url.includes('/edit')) {
+    //   this.mode.set('edit');
+    //   this.loadMockProduct(id);
+    // } else if (url.includes('/view') || (id && !url.includes('/duplicate'))) {
+    //   this.mode.set('view');
+    //   this.loadMockProduct(id);
+    // } else if (url.includes('/duplicate')) {
+    //   this.mode.set('duplicate');
+    //   this.loadMockProduct(id);
+    //   // Backend mandate rule for duplicate: clean internal_code automatically
+    //   this.formInternalCode.set('');
+    // }
+  }
+
+  productById(productId: string) {
+    this.productService.getById(productId).subscribe({
+      next: (response) => {
+        console.log(response);
+        // this.product = response;
+      },
+      error: (error) => {
+        console.log(error);
+      },
+    });
   }
 
   loadMockProduct(id: string | null): void {

src/app/features/catalog/products/products.html

@@ -126,6 +126,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 mt-1">184</h3>
     [actions]="actions"
     [loading]="loading()"
     [roundedBottom]="false"
+    (actionClick)="handleProductAction($event)"
   />
 
   <app-pagination

src/app/features/catalog/products/products.ts

@@ -99,14 +99,23 @@ export class ProductsPageComponent implements OnInit {
     this.getPaginationAllProducts();
   }
 
-  getPaginationAllProducts() {
+  getPaginationAllProducts(): void {
+    this.loading.set(true);
     this.productService.getAll().subscribe({
       next: (response) => {
         this.allProducts.set(response.data);
-        console.log('[PRODUCT ALL LIST]', this.allProducts);
+        if (response.meta) {
+          this.totalItems.set(response.meta.total);
+          this.currentPage.set(response.meta.current_page);
+          this.pageSize.set(response.meta.per_page);
+        } else {
+          this.totalItems.set(response.data.length);
+        }
+        this.loading.set(false);
       },
       error: (error) => {
-        this.toastService.error('Erro ao buscar produtos', error.message);
+        this.loading.set(false);
+        this.toastService.error('Erro ao buscar produtos', error.message || 'Falha na requisição.');
       },
     });
   }
@@ -171,4 +180,16 @@ export class ProductsPageComponent implements OnInit {
     }
     this.deleteDialogOpen.set(false);
   }
+
+  handleProductAction(event: { actionId: string; row: ProductResponse }): void {
+    console.log('[HANDLE PRODUCT ACTION]', event);
+    switch (event.actionId) {
+      case 'edit':
+        this.editProduct(event.row);
+        break;
+      case 'delete':
+        this.confirmDelete(event.row);
+        break;
+    }
+  }
 }

…c/environment/environment.development.ts …/environments/environment.development.tssrc/environment/environment.development.ts renamed to src/environments/environment.development.ts src/environment/environment.development.ts renamed to src/environments/environment.development.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:8000/api',
+};