chaqui-catalog-frontend-lib 1.0.0

package/EXAMPLES.md

@@ -0,0 +1,255 @@
+/**
+ * Ejemplo de uso de la librería Catalog Lib
+ * 
+ * Este archivo muestra cómo usar el componente y servicio de catálogos
+ * en tu aplicación Angular.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { CatalogService, CatalogItem, Catalog } from '@catalogos/catalog-lib';
+
+/**
+ * Ejemplo 1: Usando el componente CatalogItemsSelect
+ */
+@Component({
+  selector: 'app-catalog-component-example',
+  template: `
+    <div class="container">
+      <h2>Ejemplo 1: Usando el Componente</h2>
+      
+      <catalog-items-select
+        [catalogId]="selectedCatalogId"
+        [selectedItemId]="selectedItemId"
+        catalogLabel="Selecciona un Catálogo"
+        itemSelectPlaceholder="Elige un item..."
+        (itemSelected)="onItemSelected($event)"
+        (error)="onError($event)"
+      ></catalog-items-select>
+
+      <div *ngIf="errorMessage" class="alert alert-danger">
+        <strong>Error:</strong> {{ errorMessage }}
+      </div>
+
+      <div *ngIf="selectedItem" class="alert alert-success">
+        <h4>Item Seleccionado</h4>
+        <p><strong>ID:</strong> {{ selectedItem.id }}</p>
+        <p><strong>Nombre:</strong> {{ selectedItem.name }}</p>
+        <p><strong>Descripción:</strong> {{ selectedItem.description || 'N/A' }}</p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .container {
+      max-width: 500px;
+      margin: 20px auto;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+    }
+    .alert {
+      padding: 15px;
+      margin-top: 15px;
+      border-radius: 4px;
+    }
+    .alert-danger {
+      background-color: #f8d7da;
+      border: 1px solid #f5c6cb;
+      color: #721c24;
+    }
+    .alert-success {
+      background-color: #d4edda;
+      border: 1px solid #c3e6cb;
+      color: #155724;
+    }
+  `]
+})
+export class CatalogComponentExampleComponent {
+  selectedCatalogId: number = 1;
+  selectedItemId?: number;
+  selectedItem: CatalogItem | null = null;
+  errorMessage: string = '';
+
+  onItemSelected(item: CatalogItem): void {
+    this.selectedItem = item;
+    this.selectedItemId = item.id;
+    this.errorMessage = '';
+    console.log('Item Seleccionado:', item);
+  }
+
+  onError(error: string): void {
+    this.errorMessage = error;
+  }
+}
+
+/**
+ * Ejemplo 2: Usando el servicio directamente
+ */
+@Component({
+  selector: 'app-catalog-service-example',
+  template: `
+    <div class="container">
+      <h2>Ejemplo 2: Usando el Servicio Directamente</h2>
+
+      <div class="form-group">
+        <label>ID del Catálogo:</label>
+        <input
+          type="number"
+          [(ngModel)]="catalogId"
+          (change)="onCatalogIdChange()"
+          min="1"
+        />
+      </div>
+
+      <button (click)="loadCatalogs()" class="btn btn-primary">
+        Cargar Todos los Catálogos
+      </button>
+
+      <div *ngIf="catalogs.length > 0" class="catalogs-list">
+        <h3>Catálogos Disponibles:</h3>
+        <ul>
+          <li *ngFor="let catalog of catalogs">
+            {{ catalog.name }} (ID: {{ catalog.id }})
+          </li>
+        </ul>
+      </div>
+
+      <div *ngIf="items.length > 0" class="items-list">
+        <h3>Items del Catálogo {{ catalogId }}:</h3>
+        <select [(ngModel)]="selectedItemId" (change)="onItemSelected()">
+          <option value="">Selecciona un item</option>
+          <option *ngFor="let item of items" [value]="item.id">
+            {{ item.name }} (ID: {{ item.id }})
+          </option>
+        </select>
+      </div>
+
+      <div *ngIf="selectedItem" class="selected-item">
+        <h4>Detalles del Item:</h4>
+        <pre>{{ selectedItem | json }}</pre>
+      </div>
+
+      <div *ngIf="isLoading" class="loading">
+        Cargando...
+      </div>
+    </div>
+  `,
+  styles: [`
+    .container {
+      max-width: 600px;
+      margin: 20px auto;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+    }
+    .form-group {
+      margin-bottom: 15px;
+    }
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: 500;
+    }
+    input, select {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      margin-top: 10px;
+    }
+    .btn-primary {
+      background-color: #007bff;
+      color: white;
+    }
+    .btn-primary:hover {
+      background-color: #0056b3;
+    }
+    .catalogs-list, .items-list, .selected-item {
+      margin-top: 20px;
+      padding: 15px;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+    }
+    .loading {
+      text-align: center;
+      color: #666;
+      font-style: italic;
+      margin-top: 20px;
+    }
+  `]
+})
+export class CatalogServiceExampleComponent implements OnInit {
+  catalogId: number = 1;
+  selectedItemId?: number;
+  catalogs: Catalog[] = [];
+  items: CatalogItem[] = [];
+  selectedItem: CatalogItem | null = null;
+  isLoading: boolean = false;
+
+  constructor(private catalogService: CatalogService) {}
+
+  ngOnInit(): void {
+    this.loadCatalogs();
+  }
+
+  loadCatalogs(): void {
+    this.isLoading = true;
+    this.catalogService.getCatalogs().subscribe({
+      next: (catalogs) => {
+        this.catalogs = catalogs;
+        this.isLoading = false;
+        console.log('Catálogos cargados:', catalogs);
+      },
+      error: (error) => {
+        this.isLoading = false;
+        console.error('Error cargando catálogos:', error);
+      }
+    });
+  }
+
+  onCatalogIdChange(): void {
+    const catalogs = this.catalogs.filter(c => c.id === this.catalogId);
+    if (catalogs.length > 0) {
+      this.loadItems();
+    }
+  }
+
+  loadItems(): void {
+    this.isLoading = true;
+    this.items = [];
+    this.selectedItem = null;
+
+    this.catalogService.getItemsByCatalogId(this.catalogId).subscribe({
+      next: (items) => {
+        this.items = items;
+        this.isLoading = false;
+        console.log('Items cargados:', items);
+      },
+      error: (error) => {
+        this.isLoading = false;
+        console.error('Error cargando items:', error);
+      }
+    });
+  }
+
+  onItemSelected(): void {
+    if (this.selectedItemId) {
+      this.catalogService.getItemById(this.selectedItemId).subscribe({
+        next: (item) => {
+          this.selectedItem = item;
+          console.log('Detalles del item:', item);
+        },
+        error: (error) => {
+          console.error('Error cargando item:', error);
+        }
+      });
+    }
+  }
+}

package/INSTALLATION.md

@@ -0,0 +1,226 @@
+# Guía de Instalación - Catalog Lib
+
+## Requisitos Previos
+
+- Node.js 14+ instalado
+- Angular 15+ 
+- npm o yarn
+
+## Pasos de Instalación
+
+### Paso 1: Preparar tu Proyecto Angular
+
+Si aún no tienes un proyecto Angular, crea uno:
+
+```bash
+ng new my-catalog-app
+cd my-catalog-app
+```
+
+### Paso 2: Instalar las Dependencias Necesarias
+
+La librería requiere que `@angular/common` y `HttpClientModule` estén disponibles.
+
+```bash
+npm install
+```
+
+### Paso 3: Instalar la Librería Catalog Lib
+
+Opción A - Si está publicada en npm:
+```bash
+npm install @catalogos/catalog-lib
+```
+
+Opción B - Si está en tu sistema de archivos local:
+```bash
+npm install ../path/to/catalog-lib
+```
+
+O si usas un monorepo con workspaces, simplemente asegúrate de que esté incluida.
+
+### Paso 4: Importar el Módulo en tu Aplicación
+
+En tu archivo `src/app/app.module.ts`, añade:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+
+// Importar el módulo de Catalog
+import { CatalogModule } from '@catalogos/catalog-lib';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,        // ⚠️ REQUERIDO
+    FormsModule,              // Recomendado si usas ngModel
+    CatalogModule.forRoot({
+      apiBaseUrl: 'http://localhost:3000/api'  // Reemplaza con tu URL
+    })
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### Importante ⚠️
+
+- **HttpClientModule** es obligatorio. Si no lo importas, la librería no funcionará.
+- Reemplaza `http://localhost:3000/api` con la URL correcta de tu backend.
+
+## Configuración de CORS
+
+Si tu backend está en un servidor diferente, asegúrate de que CORS esté configurado correctamente.
+
+En tu backend (Node.js/Express):
+
+```typescript
+import cors from 'cors';
+import express from 'express';
+
+const app = express();
+
+app.use(cors({
+  origin: ['http://localhost:4200'],  // URL de tu aplicación Angular
+  credentials: true
+}));
+
+// ... resto de tu configuración
+```
+
+## Configuración por Ambiente
+
+Para configurar diferentes URLs según el ambiente, usa `environment.ts`:
+
+```typescript
+// src/environments/environment.ts
+export const environment = {
+  production: false,
+  apiBaseUrl: 'http://localhost:3000/api'
+};
+
+// src/environments/environment.prod.ts
+export const environment = {
+  production: true,
+  apiBaseUrl: 'https://api.example.com/api'
+};
+```
+
+Luego en `app.module.ts`:
+
+```typescript
+import { environment } from '../environments/environment';
+import { CatalogModule } from '@catalogos/catalog-lib';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    // ... otros imports
+    CatalogModule.forRoot({
+      apiBaseUrl: environment.apiBaseUrl
+    })
+  ],
+  // ...
+})
+export class AppModule {}
+```
+
+## Uso en Componentes
+
+Una vez instalada, puedes usar la librería en tus componentes:
+
+```typescript
+import { Component } from '@angular/core';
+import { CatalogItem } from '@catalogos/catalog-lib';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <catalog-items-select
+      [catalogId]="1"
+      (itemSelected)="onItemSelected($event)"
+      (error)="onError($event)"
+    ></catalog-items-select>
+  `
+})
+export class AppComponent {
+  onItemSelected(item: CatalogItem): void {
+    console.log('Item seleccionado:', item);
+  }
+
+  onError(error: string): void {
+    console.error('Error:', error);
+  }
+}
+```
+
+## Solución de Problemas
+
+### Error: "Cannot find module '@catalogos/catalog-lib'"
+
+Asegúrate de que:
+1. Ejecutaste `npm install`
+2. La ruta a la librería es correcta
+3. Reconstruye tu proyecto: `ng serve` o `ng build`
+
+### Error: "HttpClientModule is not imported"
+
+Asegúrate de importar `HttpClientModule` en tu `app.module.ts`:
+
+```typescript
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  imports: [HttpClientModule, CatalogModule.forRoot({...})]
+})
+export class AppModule {}
+```
+
+### Los items no cargan
+
+1. Verifica que la URL del API sea correcta
+2. Abre la consola del navegador (F12) y revisa los errores de red
+3. Asegúrate de que el backend está corriendo
+4. Verifica que CORS está configurado correctamente
+
+### Error de CORS
+
+Si ves un error como `Access to XMLHttpRequest blocked by CORS policy`:
+
+1. Verifica que tu backend tiene CORS habilitado
+2. Asegúrate de que la URL de origen está permitida
+3. El header `Content-Type: application/json` debe estar permitido
+
+## Verificación de Instalación
+
+Para verificar que todo está instalado correctamente:
+
+```bash
+# Inicia el servidor de desarrollo
+ng serve
+
+# Abre tu navegador en http://localhost:4200
+# La aplicación debe cargar sin errores
+```
+
+## Próximos Pasos
+
+- Revisa [README.md](./README.md) para más información sobre la API
+- Consulta [EXAMPLES.md](./EXAMPLES.md) para ver ejemplos de uso
+- Integra el componente en tus páginas
+
+## Soporte
+
+Si encuentras problemas, revisa:
+1. Los errores en la consola del navegador
+2. Los errores en la consola del servidor Node.js
+3. Las peticiones en Network tab del inspector