Add DSelectOption & status options support

Introduce a shared DSelectOption model and StatusOption/StatusOptionsResponse models. Add StatusService.getOptions to fetch status options from the API and map responses into DSelectOption shape. Refactor select and autocomplete components to use DSelectOption. Update product form to use signal-based statusOptions, call onStatusSearch during init, replace static status list, and adjust template binding ([options] uses statusOptions()). Also remove an informational panel in the product form template. Small import and signal reorganizations to support these changes.

Author: aledguedes

src/app/core/models/design-system/select-option.model.ts

@@ -0,0 +1,5 @@
+export interface DSelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}

src/app/core/models/status/status-options.model.ts

@@ -0,0 +1,12 @@
+export interface StatusOptionsResponse {
+  success: boolean;
+  message: string;
+  data: StatusOption[];
+}
+
+export interface StatusOption {
+  id: string;
+  label: string;
+  description: string;
+  icon: string;
+}

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

@@ -3,6 +3,9 @@ import { inject, Injectable } from '@angular/core';
 import { PaginatedResponse } from '../models/pagination/pagination.model';
 import { ProductResponse } from '../models/products/product-response.model';
 import { environment } from '../../../environments/environment';
+import { buildHttpParams } from './build-http-params';
+import { GeneralOptionQuery } from '../models/generals/general-option-query.model';
+import { StatusOptionsResponse } from '../models/status/status-options.model';
 
 @Injectable({
   providedIn: 'root',
@@ -15,4 +18,12 @@ export class StatusService {
   getAll() {
     return this.http.get<PaginatedResponse<ProductResponse>>(`${this.api}/${this.flag}`);
   }
+
+  getOptions(module: string, limit: string | null = null) {
+    const params = buildHttpParams({
+      module: module,
+      limit: limit,
+    });
+    return this.http.get<StatusOptionsResponse>(`${this.api}/${this.flag}/options`, { params });
+  }
 }

src/app/design-system/autocomplete-select/autocomplete-select.ts

@@ -11,10 +11,10 @@ import {
   OnDestroy,
 } from '@angular/core';
 import { AppIconComponent } from '../icon/app-icon';
-import { SelectOption } from '../select/select';
 import { GeneralOptionQuery } from '../../core/models/generals/general-option-query.model';
+import { DSelectOption } from '../../core/models/design-system/select-option.model';
 
-export interface AutocompleteOption extends SelectOption {
+export interface AutocompleteOption extends DSelectOption {
   sublabel?: string;
   category?: string;
   icon?: string;

src/app/design-system/select/select.ts

@@ -1,11 +1,6 @@
 import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
 import { AppIconComponent } from '../icon/app-icon';
-
-export interface SelectOption {
-  label: string;
-  value: string | number;
-  disabled?: boolean;
-}
+import { DSelectOption } from '../../core/models/design-system/select-option.model';
 
 @Component({
   selector: 'app-select',
@@ -19,7 +14,7 @@ export class SelectComponent {
   readonly label = input<string | undefined>(undefined);
   readonly value = input<string | number>('');
   readonly placeholder = input<string>('Selecione uma opção');
-  readonly options = input.required<SelectOption[]>();
+  readonly options = input.required<DSelectOption[]>();
   readonly disabled = input<boolean>(false);
   readonly required = input<boolean>(false);
   readonly error = input<string | undefined>(undefined);

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

@@ -167,7 +167,7 @@
         [required]="true"
         placeholder="Selecione o status"
         [value]="formStatusId()"
-        [options]="statusOptions"
+        [options]="statusOptions()"
         [disabled]="isReadOnly()"
         [error]="errors()['status_id']"
         (valueChange)="updateField('status_id', $event)"
@@ -419,64 +419,6 @@ <h3 class="text-sm font-bold text-gray-900 dark:text-slate-100 flex items-center
         ></span>
       </button>
     </div>
-
-    <!-- Painel Informativo: Campos Gerenciados Automaticamente pelo Sistema -->
-    <div
-      class="p-4 bg-gray-50/90 dark:bg-slate-900/50 rounded-xl border border-gray-200/70 dark:border-slate-700/70 space-y-3"
-    >
-      <div
-        class="flex items-center gap-2 text-xs font-bold text-gray-700 dark:text-slate-300 uppercase tracking-wider"
-      >
-        <app-icon name="check-circle" size="w-4 h-4" class="text-[#4F8A6B]" />
-        <span>Campos Gerenciados Automaticamente pelo Sistema</span>
-      </div>
-
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 text-xs">
-        <div
-          class="p-3 rounded-lg bg-white dark:bg-slate-800 border border-gray-200/60 dark:border-slate-700/60 shadow-2xs"
-        >
-          <span class="block text-[11px] font-medium text-gray-400 dark:text-slate-400 mb-1">
-            ID (id)
-          </span>
-          <span
-            class="font-mono text-gray-800 dark:text-slate-200 text-[11px] bg-gray-100 dark:bg-slate-700/60 px-1.5 py-0.5 rounded"
-          >
-            Gerado Auto (UUID)
-          </span>
-        </div>
-
-        <div
-          class="p-3 rounded-lg bg-white dark:bg-slate-800 border border-gray-200/60 dark:border-slate-700/60 shadow-2xs"
-        >
-          <span class="block text-[11px] font-medium text-gray-400 dark:text-slate-400 mb-1">
-            Produto (product_id)
-          </span>
-          <span class="font-medium text-gray-800 dark:text-slate-200">Vínculo Automático</span>
-        </div>
-
-        <div
-          class="p-3 rounded-lg bg-white dark:bg-slate-800 border border-gray-200/60 dark:border-slate-700/60 shadow-2xs"
-        >
-          <span class="block text-[11px] font-medium text-gray-400 dark:text-slate-400 mb-1">
-            Qtd. Reservada (reserved)
-          </span>
-          <span class="font-medium text-emerald-600 dark:text-emerald-400">0 (Inicial)</span>
-        </div>
-
-        <div
-          class="p-3 rounded-lg bg-white dark:bg-slate-800 border border-gray-200/60 dark:border-slate-700/60 shadow-2xs"
-        >
-          <span class="block text-[11px] font-medium text-gray-400 dark:text-slate-400 mb-1">
-            Status (active)
-          </span>
-          <span
-            class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300 border border-emerald-300/50"
-          >
-            Ativo (true)
-          </span>
-        </div>
-      </div>
-    </div>
   </div>
   }
 

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

@@ -9,7 +9,7 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { PageHeaderComponent } from '../../../design-system/page-header/page-header';
 import { InputComponent } from '../../../design-system/input/input';
-import { SelectComponent, SelectOption } from '../../../design-system/select/select';
+import { SelectComponent } from '../../../design-system/select/select';
 import { ButtonComponent } from '../../../design-system/button/button';
 import { ConfirmDialogComponent } from '../../../design-system/dialog/confirm-dialog';
 import { AppIconComponent } from '../../../design-system/icon/app-icon';
@@ -29,6 +29,11 @@ import { debounceTime, distinctUntilChanged, Subject, switchMap } from 'rxjs';
 import { GeneralOptionQuery } from '../../../core/models/generals/general-option-query.model';
 import { ManufacturerOption } from '../../../core/models/manufactureres/manufaturer-options.model';
 import { StatusService } from '../../../core/services/status-service';
+import {
+  StatusOption,
+  StatusOptionsResponse,
+} from '../../../core/models/status/status-options.model';
+import { DSelectOption } from '../../../core/models/design-system/select-option.model';
 
 export type ProductFormMode = 'create' | 'edit' | 'view' | 'duplicate';
 export type FormTab =
@@ -176,21 +181,21 @@ export class ProductFormComponent implements OnInit {
   readonly productNotes = signal<ProductNoteItem[]>([]);
 
   readonly categoryLoading = signal(false);
-  readonly categoryQuery = signal('');
+  readonly manufacturerLoading = signal(false);
+
+  readonly fetchedStatuses = signal<StatusOption[]>([]);
   readonly fetchedCategories = signal<CategoryOption[]>([]);
   readonly fetchedManufacturers = signal<ManufacturerOption[]>([]);
 
-  readonly manufacturerLoading = signal(false);
+  readonly statusQuery = signal('');
+  readonly categoryQuery = signal('');
   readonly manufacturerQuery = signal('');
-  // readonly manufacturerQuery = signal<GeneralOptionQuery>({
-  //   active: null,
-  //   search: '',
-  //   limit: 10,
-  // });
 
   private readonly categorySearch$ = new Subject<GeneralOptionQuery>();
   private readonly manufacturerSearch$ = new Subject<GeneralOptionQuery>();
 
+  private currentModule = signal<string>('PRODUCT');
+
   readonly product = signal<ProductResponse>({
     id: 'p0000000-0002-0000-0000-000000000002',
     status: {
@@ -266,10 +271,10 @@ export class ProductFormComponent implements OnInit {
   });
 
   readonly manufacturerOptions = computed<AutocompleteOption[]>(() => {
-    const manufacturers = this.fetchedManufacturers();
+    const status = this.fetchedStatuses();
     const query = this.manufacturerQuery().trim().toLowerCase() || '';
 
-    return manufacturers
+    return status
       .filter((m) => !query || m.label.toLowerCase().includes(query))
       .map((m) => ({
         label: m.label,
@@ -278,14 +283,16 @@ export class ProductFormComponent implements OnInit {
       }));
   });
 
-  readonly partOriginOptions: SelectOption[] = [
+  readonly statusOptions = signal<DSelectOption[]>([]);
+
+  readonly partOriginOptions: DSelectOption[] = [
     { label: 'Nacional', value: 'po-01' },
     { label: 'Importado Direto', value: 'po-02' },
     { label: 'Original OEM', value: 'po-03' },
     { label: 'Aftermarket Premium', value: 'po-04' },
   ];
 
-  readonly unitOptions: SelectOption[] = [
+  readonly unitOptions: DSelectOption[] = [
     { label: 'Jogo', value: 'jogo' },
     { label: 'Peça', value: 'peça' },
     { label: 'Par', value: 'par' },
@@ -297,13 +304,7 @@ export class ProductFormComponent implements OnInit {
     { label: 'Conjunto', value: 'conjunto' },
   ];
 
-  readonly statusOptions: SelectOption[] = [
-    { label: 'Ativo', value: 'st-01' },
-    { label: 'Inativo', value: 'st-02' },
-    { label: 'Em Homologação', value: 'st-03' },
-  ];
-
-  readonly warehouseOptions: SelectOption[] = [
+  readonly warehouseOptions: DSelectOption[] = [
     { label: 'Depósito Central SP', value: 'wh-01' },
     { label: 'Depósito Filial PR', value: 'wh-02' },
     { label: 'Depósito Distribuição RJ', value: 'wh-03' },
@@ -384,9 +385,9 @@ export class ProductFormComponent implements OnInit {
         },
       });
 
+    this.onStatusSearch();
     this.onCategorySearch(this.queries());
     this.onManufacturerSearch(this.queries());
-    this.getStatus();
 
     if (id) {
       this.productById(id);
@@ -1068,10 +1069,15 @@ export class ProductFormComponent implements OnInit {
     this.manufacturerSearch$.next(query);
   }
 
-  getStatus() {
-    this.statusService.getAll().subscribe({
+  onStatusSearch(limit = null) {
+    this.statusService.getOptions(this.currentModule(), limit).subscribe({
       next: (response) => {
-        console.log('Fetched Product Status Options:', response.data);
+        const result = response.data.map((status) => ({
+          label: status.label,
+          value: status.id,
+          description: status.description,
+        }));
+        this.statusOptions.set(result);
       },
       error: (error) => {
         console.error('Error fetching product status options:', error);