chaqui-catalog-frontend-lib 1.0.0

package/src/lib/components/catalog-items-select/catalog-items-select.component.ts

@@ -0,0 +1,125 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { CatalogService } from '../../services/catalog.service.js';
+import { CatalogItem } from '../../models/catalog.model.js';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'catalog-items-select',
+  templateUrl: './catalog-items-select.component.html',
+  styleUrls: ['./catalog-items-select.component.css']
+})
+export class CatalogItemsSelectComponent implements OnInit, OnDestroy {
+  /**
+   * ID del catálogo del cual cargar los items
+   */
+  @Input() catalogId!: number;
+
+  /**
+   * ID del item actualmente seleccionado (opcional)
+   */
+  @Input() selectedItemId?: number;
+
+  /**
+   * Label del input del catálogo
+   */
+  @Input() catalogLabel: string = 'ID del Catálogo';
+
+  /**
+   * Placeholder del select de items
+   */
+  @Input() itemSelectPlaceholder: string = 'Selecciona un item';
+
+  /**
+   * Emite cuando se selecciona un item
+   */
+  @Output() itemSelected = new EventEmitter<CatalogItem>();
+
+  /**
+   * Emite cuando hay un error al cargar los items
+   */
+  @Output() error = new EventEmitter<string>();
+
+  items: CatalogItem[] = [];
+  isLoading: boolean = false;
+  errorMessage: string = '';
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private catalogService: CatalogService) {}
+
+  ngOnInit(): void {
+    if (this.catalogId) {
+      this.loadItems();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /**
+   * Carga los items del catálogo especificado
+   */
+  loadItems(): void {
+    if (!this.catalogId) {
+      this.errorMessage = 'Por favor ingresa un ID de catálogo válido';
+      this.error.emit(this.errorMessage);
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = '';
+    this.items = [];
+
+    this.catalogService.getItemsByCatalogId(this.catalogId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (items: CatalogItem[]) => {
+          this.items = items;
+          this.isLoading = false;
+        },
+        error: (err: any) => {
+          this.isLoading = false;
+          this.errorMessage = err?.message || 'Error al cargar los items del catálogo';
+          this.error.emit(this.errorMessage);
+          console.error('Error cargando items:', err);
+        }
+      });
+  }
+
+  /**
+   * Maneja el cambio de catálogo
+   * @param event Evento del input
+   */
+  onCatalogIdChange(event: any): void {
+    const value = event.target.value;
+    this.catalogId = value ? Number(value) : null as any;
+    if (this.catalogId) {
+      this.loadItems();
+    }
+  }
+
+  /**
+   * Maneja la selección de un item
+   * @param event Evento del select
+   */
+  onItemSelected(event: any): void {
+    const itemId = Number(event.target.value);
+    const selectedItem = this.items.find(item => item.id === itemId);
+    
+    if (selectedItem) {
+      this.itemSelected.emit(selectedItem);
+    }
+  }
+
+  /**
+   * Obtiene el nombre del item para mostrar en el select
+   * @param item Item del catálogo
+   * @returns Nombre del item o ID si no hay nombre
+   */
+  getItemDisplayName(item: CatalogItem): string {
+    return item.name || `Item ${item.id}`;
+  }
+}

package/src/lib/components/index.ts

@@ -0,0 +1 @@
+export * from './catalog-items-select/catalog-items-select.component.js';

package/src/lib/config/catalog.config.ts

@@ -0,0 +1,15 @@
+/**
+ * Configuración de la librería de Catálogos
+ */
+export interface CatalogConfig {
+  /**
+   * URL base del servicio de catálogos
+   * Ejemplo: 'http://localhost:3000/api'
+   */
+  apiBaseUrl: string;
+}
+
+/**
+ * Token de inyección para la configuración
+ */
+export const CATALOG_CONFIG_TOKEN = 'CATALOG_CONFIG';

package/src/lib/models/catalog.model.ts

@@ -0,0 +1,28 @@
+/**
+ * Interfaz para representar un Catálogo
+ */
+export interface Catalog {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+/**
+ * Interfaz para representar un Item de Catálogo
+ */
+export interface CatalogItem {
+  id: number;
+  catalogId: number;
+  name: string;
+  description?: string;
+  [key: string]: any;
+}
+
+/**
+ * Interfaz para la respuesta de error de la API
+ */
+export interface ApiErrorResponse {
+  message: string;
+  status?: number;
+  error?: any;
+}

package/src/lib/models/index.ts

@@ -0,0 +1 @@
+export * from './catalog.model.js';

package/src/lib/services/catalog.service.ts

@@ -0,0 +1,71 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { Catalog, CatalogItem, ApiErrorResponse } from '../models/catalog.model.js';
+import { CATALOG_CONFIG_TOKEN } from '../config/catalog.config.js';
+import type { CatalogConfig } from '../config/catalog.config.js';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CatalogService {
+  private apiBaseUrl: string;
+
+  constructor(
+    private http: HttpClient,
+    @Inject(CATALOG_CONFIG_TOKEN) config: CatalogConfig
+  ) {
+    this.apiBaseUrl = config.apiBaseUrl;
+  }
+
+  /**
+   * Obtiene todos los catálogos disponibles
+   * @returns Observable con la lista de catálogos
+   */
+  getCatalogs(): Observable<Catalog[]> {
+    return this.http.get<Catalog[]>(`${this.apiBaseUrl}/catalogs`)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Obtiene todos los items de un catálogo específico
+   * @param catalogId ID del catálogo
+   * @returns Observable con la lista de items
+   */
+  getItemsByCatalogId(catalogId: number): Observable<CatalogItem[]> {
+    return this.http.get<CatalogItem[]>(`${this.apiBaseUrl}/catalogs/${catalogId}/items`)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Obtiene un item específico por su ID
+   * @param itemId ID del item
+   * @returns Observable con los datos del item
+   */
+  getItemById(itemId: number): Observable<CatalogItem> {
+    return this.http.get<CatalogItem>(`${this.apiBaseUrl}/items/${itemId}`)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Maneja los errores de las peticiones HTTP
+   * @param error Error de la petición
+   * @returns Observable con el error
+   */
+  private handleError(error: any) {
+    const errorResponse: ApiErrorResponse = {
+      message: error.message || 'Error en la petición',
+      status: error.status,
+      error: error.error
+    };
+    console.error('Error en CatalogService:', errorResponse);
+    return throwError(() => errorResponse);
+  }
+}

package/src/lib/services/index.ts

@@ -0,0 +1 @@
+export * from './catalog.service.js';

package/src/public-api.ts

@@ -0,0 +1,8 @@
+/**
+ * Exporta todos los módulos, servicios y componentes públicos de la librería
+ */
+export * from './lib/catalog.module.js';
+export * from './lib/services/index.js';
+export * from './lib/models/index.js';
+export * from './lib/components/index.js';
+export * from './lib/config/catalog.config.js';

package/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "lib": ["ES2022", "dom"],
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "skipLibCheck": true,
+    "removeComments": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "types": ["node"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "node_modules"]
+}