chaqui-catalog-frontend-lib 1.0.0

package/README.md

@@ -0,0 +1,310 @@
+# Librería Angular - Catalog Lib
+
+Librería Angular para consumir el servicio de catálogos de manera sencilla y configurable.
+
+## Características
+
+- ✅ Servicio configurable para conectar con tu backend
+- ✅ Componente reutilizable para seleccionar items de un catálogo
+- ✅ Manejo robusto de errores
+- ✅ Carga asincrónica de items
+- ✅ Compatible con Angular 15+
+- ✅ Totalmente tipado con TypeScript
+
+## Instalación
+
+### 1. Instalar la librería en tu proyecto Angular
+
+```bash
+npm install catalog-lib
+```
+
+O si usas yarn:
+```bash
+yarn add catalog-lib
+```
+
+## Configuración
+
+### 1. Importar el módulo en tu app.module.ts
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+import { CatalogModule } from 'catalog-lib';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    CatalogModule.forRoot({
+      apiBaseUrl: 'http://localhost:3000/api' // URL base de tu servicio
+    })
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+## Uso
+
+### Opción 1: Usar el Componente
+
+En tu componente:
+
+```typescript
+import { Component } from '@angular/core';
+import { CatalogItem } from 'catalog-lib';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <catalog-items-select
+      [catalogId]="catalogId"
+      [selectedItemId]="selectedItemId"
+      catalogLabel="ID del Catálogo"
+      itemSelectPlaceholder="Selecciona un item"
+      (itemSelected)="onItemSelected($event)"
+      (error)="onError($event)"
+    ></catalog-items-select>
+    
+    <div *ngIf="selectedItem">
+      <h3>Item Seleccionado:</h3>
+      <p><strong>ID:</strong> {{ selectedItem.id }}</p>
+      <p><strong>Nombre:</strong> {{ selectedItem.name }}</p>
+    </div>
+  `
+})
+export class ExampleComponent {
+  catalogId: number = 1;
+  selectedItemId?: number;
+  selectedItem: CatalogItem | null = null;
+
+  onItemSelected(item: CatalogItem): void {
+    this.selectedItem = item;
+    console.log('Item seleccionado:', item);
+  }
+
+  onError(error: string): void {
+    console.error('Error:', error);
+  }
+}
+```
+
+### Opción 2: Usar el Servicio Directamente
+
+Si prefieres controlar la lógica manualmente:
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { CatalogService, CatalogItem, Catalog } from 'catalog-lib';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <div>
+      <input 
+        type="number" 
+        [(ngModel)]="catalogId" 
+        (change)="loadItems()"
+        placeholder="ID del Catálogo"
+      />
+      
+      <select [(ngModel)]="selectedItemId" (change)="onItemSelected()">
+        <option value="">Selecciona un item</option>
+        <option *ngFor="let item of items" [value]="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </div>
+  `
+})
+export class ExampleComponent implements OnInit {
+  catalogId: number = 1;
+  selectedItemId?: number;
+  items: CatalogItem[] = [];
+  selectedItem: CatalogItem | null = null;
+
+  constructor(private catalogService: CatalogService) {}
+
+  ngOnInit(): void {
+    this.loadItems();
+  }
+
+  loadItems(): void {
+    this.catalogService.getItemsByCatalogId(this.catalogId)
+      .subscribe({
+        next: (items) => {
+          this.items = items;
+        },
+        error: (error) => {
+          console.error('Error cargando items:', error);
+        }
+      });
+  }
+
+  onItemSelected(): void {
+    if (this.selectedItemId) {
+      this.selectedItem = this.items.find(item => item.id === this.selectedItemId) || null;
+    }
+  }
+}
+```
+
+## API Reference
+
+### CatalogModule
+
+#### Método `forRoot(config: CatalogConfig)`
+
+Configura el módulo con la URL base del servicio.
+
+**Parámetros:**
+- `config.apiBaseUrl` (string): URL base del servicio de catálogos. Ejemplo: `http://localhost:3000/api`
+
+### CatalogService
+
+#### Método `getCatalogs()`
+
+Obtiene todos los catálogos disponibles.
+
+```typescript
+this.catalogService.getCatalogs().subscribe(
+  (catalogs: Catalog[]) => {
+    console.log('Catálogos:', catalogs);
+  }
+);
+```
+
+#### Método `getItemsByCatalogId(catalogId: number)`
+
+Obtiene todos los items de un catálogo específico.
+
+```typescript
+this.catalogService.getItemsByCatalogId(1).subscribe(
+  (items: CatalogItem[]) => {
+    console.log('Items:', items);
+  }
+);
+```
+
+#### Método `getItemById(itemId: number)`
+
+Obtiene un item específico por su ID.
+
+```typescript
+this.catalogService.getItemById(123).subscribe(
+  (item: CatalogItem) => {
+    console.log('Item:', item);
+  }
+);
+```
+
+### CatalogItemsSelectComponent
+
+Componente que proporciona una interfaz para seleccionar items de un catálogo.
+
+#### Inputs
+
+- `catalogId` (number): ID del catálogo del cual cargar los items
+- `selectedItemId` (number, opcional): ID del item actualmente seleccionado
+- `catalogLabel` (string, default: 'ID del Catálogo'): Label del input del catálogo
+- `itemSelectPlaceholder` (string, default: 'Selecciona un item'): Placeholder del select de items
+
+#### Outputs
+
+- `itemSelected`: Emite cuando se selecciona un item. Emite un objeto `CatalogItem`
+- `error`: Emite cuando hay un error al cargar los items. Emite un string con el mensaje de error
+
+## Modelos de Datos
+
+### Catalog
+
+```typescript
+interface Catalog {
+  id: number;
+  name: string;
+  description?: string;
+}
+```
+
+### CatalogItem
+
+```typescript
+interface CatalogItem {
+  id: number;
+  catalogId: number;
+  name: string;
+  description?: string;
+  [key: string]: any; // Propiedades adicionales
+}
+```
+
+## Ejemplos Avanzados
+
+### Ejemplo con manejo de errores
+
+```typescript
+import { Component } from '@angular/core';
+import { CatalogItem } from 'catalog-lib';
+
+@Component({
+  selector: 'app-catalog-example',
+  template: `
+    <catalog-items-select
+      [catalogId]="catalogId"
+      (itemSelected)="onItemSelected($event)"
+      (error)="onError($event)"
+    ></catalog-items-select>
+    
+    <div *ngIf="errorMessage" class="alert alert-danger">
+      {{ errorMessage }}
+    </div>
+    
+    <div *ngIf="selectedItem" class="alert alert-success">
+      Item seleccionado: {{ selectedItem.name }}
+    </div>
+  `
+})
+export class CatalogExampleComponent {
+  catalogId = 1;
+  selectedItem: CatalogItem | null = null;
+  errorMessage: string = '';
+
+  onItemSelected(item: CatalogItem): void {
+    this.selectedItem = item;
+    this.errorMessage = '';
+  }
+
+  onError(error: string): void {
+    this.errorMessage = error;
+  }
+}
+```
+
+## Desarrollo
+
+Para construir la librería:
+
+```bash
+npm run build
+```
+
+Para correr los tests:
+
+```bash
+npm run test
+```
+
+## Licencia
+
+ISC
+
+## Autor
+
+Desarrollado para el servicio de Catálogos

package/STRUCTURE.md

@@ -0,0 +1,123 @@
+# Estructura de la Librería Catalog Lib
+
+```
+catalog-lib/
+├── src/
+│   ├── lib/
+│   │   ├── components/
+│   │   │   └── catalog-items-select/
+│   │   │       ├── catalog-items-select.component.ts      # Componente principal
+│   │   │       ├── catalog-items-select.component.html    # Template
+│   │   │       └── catalog-items-select.component.css     # Estilos
+│   │   │
+│   │   ├── services/
+│   │   │   ├── catalog.service.ts                         # Servicio de API
+│   │   │   └── index.ts
+│   │   │
+│   │   ├── models/
+│   │   │   ├── catalog.model.ts                          # Interfaces de datos
+│   │   │   └── index.ts
+│   │   │
+│   │   ├── config/
+│   │   │   └── catalog.config.ts                         # Configuración
+│   │   │
+│   │   └── catalog.module.ts                             # Módulo principal
+│   │
+│   └── public-api.ts                                     # Punto de entrada público
+│
+├── index.ts                                              # Índice de la librería
+├── package.json                                          # Dependencias npm
+├── tsconfig.lib.json                                     # Configuración de TypeScript
+├── ng-package.json                                       # Configuración de ng-packagr
+├── README.md                                             # Documentación principal
+├── INSTALLATION.md                                       # Guía de instalación
+└── EXAMPLES.md                                           # Ejemplos de uso
+```
+
+## Descripción de los Archivos
+
+### Componentes
+
+#### `catalog-items-select.component.ts`
+Componente Angular que proporciona una interfaz para:
+- Ingresar el ID de un catálogo
+- Cargar automáticamente los items
+- Seleccionar un item mediante un select
+- Manejo de errores y estados de carga
+
+**Inputs:**
+- `catalogId`: ID del catálogo
+- `selectedItemId`: ID del item seleccionado (opcional)
+- `catalogLabel`: Etiqueta del input
+- `itemSelectPlaceholder`: Placeholder del select
+
+**Outputs:**
+- `itemSelected`: Emite cuando se selecciona un item
+- `error`: Emite cuando hay un error
+
+### Servicios
+
+#### `catalog.service.ts`
+Servicio que proporciona métodos para consumir la API:
+- `getCatalogs()`: Obtiene todos los catálogos
+- `getItemsByCatalogId()`: Obtiene items de un catálogo
+- `getItemById()`: Obtiene un item específico
+
+### Modelos
+
+#### `catalog.model.ts`
+Define las interfaces TypeScript:
+- `Catalog`: Estructura de un catálogo
+- `CatalogItem`: Estructura de un item
+- `ApiErrorResponse`: Estructura de errores
+
+### Configuración
+
+#### `catalog.config.ts`
+Define:
+- `CatalogConfig`: Interfaz para la configuración
+- `CATALOG_CONFIG_TOKEN`: Token de inyección para Angular
+
+### Módulo
+
+#### `catalog.module.ts`
+Módulo A Angular que:
+- Declara y exporta componentes
+- Proporciona servicios
+- Implementa `forRoot()` para configuración
+
+## Flujo de Uso
+
+1. **Importación**: El usuario importa `CatalogModule.forRoot()` en `app.module.ts`
+2. **Configuración**: Se proporciona la URL base del API
+3. **Inyección**: Angular inyecta `CatalogService` a través del token de configuración
+4. **Uso**: El usuario puede usar `CatalogItemsSelectComponent` o `CatalogService` directamente
+5. **Llamadas API**: El servicio hace peticiones a:
+   - `GET /catalogs`
+   - `GET /catalogs/:id/items`
+   - `GET /items/:id`
+
+## Compilación
+
+Para compilar la librería:
+
+```bash
+ng build catalog-lib
+```
+
+Los archivos compilados se encontrarán en `dist/catalog-lib/`
+
+## Publicación
+
+Para publicar en npm:
+
+```bash
+cd dist/catalog-lib
+npm publish
+```
+
+O con una organización:
+
+```bash
+npm publish --access public
+```

package/dist/lib/catalog.module.d.ts

@@ -0,0 +1,19 @@
+import { ModuleWithProviders } from '@angular/core';
+import type { CatalogConfig } from './config/catalog.config.js';
+export declare class CatalogModule {
+    /**
+     * Configura el módulo con la URL base del servicio de catálogos
+     * @param config Configuración del módulo
+     * @returns Módulo configurado con los proveedores
+     *
+     * @example
+     * // En tu app.module.ts
+     * imports: [
+     *   CatalogModule.forRoot({
+     *     apiBaseUrl: 'http://localhost:3000/api'
+     *   })
+     * ]
+     */
+    static forRoot(config: CatalogConfig): ModuleWithProviders<CatalogModule>;
+}
+//# sourceMappingURL=catalog.module.d.ts.map

package/dist/lib/catalog.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.module.d.ts","sourceRoot":"","sources":["../../src/lib/catalog.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAM9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,qBAKa,aAAa;IACxB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,mBAAmB,CAAC,aAAa,CAAC;CAY1E"}

package/dist/lib/catalog.module.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var CatalogModule_1;
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { CatalogItemsSelectComponent } from './components/catalog-items-select/catalog-items-select.component.js';
+import { CatalogService } from './services/catalog.service.js';
+import { CATALOG_CONFIG_TOKEN } from './config/catalog.config.js';
+let CatalogModule = CatalogModule_1 = class CatalogModule {
+    /**
+     * Configura el módulo con la URL base del servicio de catálogos
+     * @param config Configuración del módulo
+     * @returns Módulo configurado con los proveedores
+     *
+     * @example
+     * // En tu app.module.ts
+     * imports: [
+     *   CatalogModule.forRoot({
+     *     apiBaseUrl: 'http://localhost:3000/api'
+     *   })
+     * ]
+     */
+    static forRoot(config) {
+        return {
+            ngModule: CatalogModule_1,
+            providers: [
+                CatalogService,
+                {
+                    provide: CATALOG_CONFIG_TOKEN,
+                    useValue: config
+                }
+            ]
+        };
+    }
+};
+CatalogModule = CatalogModule_1 = __decorate([
+    NgModule({
+        declarations: [CatalogItemsSelectComponent],
+        imports: [CommonModule, HttpClientModule],
+        exports: [CatalogItemsSelectComponent]
+    })
+], CatalogModule);
+export { CatalogModule };
+//# sourceMappingURL=catalog.module.js.map

package/dist/lib/catalog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.module.js","sourceRoot":"","sources":["../../src/lib/catalog.module.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,2BAA2B,EAAE,MAAM,qEAAqE,CAAC;AAClH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,IAAM,aAAa,qBAAnB,MAAM,aAAa;IACxB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,OAAO,CAAC,MAAqB;QAClC,OAAO;YACL,QAAQ,EAAE,eAAa;YACvB,SAAS,EAAE;gBACT,cAAc;gBACd;oBACE,OAAO,EAAE,oBAAoB;oBAC7B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA1BY,aAAa;IALzB,QAAQ,CAAC;QACR,YAAY,EAAE,CAAC,2BAA2B,CAAC;QAC3C,OAAO,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC;QACzC,OAAO,EAAE,CAAC,2BAA2B,CAAC;KACvC,CAAC;GACW,aAAa,CA0BzB","sourcesContent":["import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HttpClientModule } from '@angular/common/http';\nimport { CatalogItemsSelectComponent } from './components/catalog-items-select/catalog-items-select.component.js';\nimport { CatalogService } from './services/catalog.service.js';\nimport { CATALOG_CONFIG_TOKEN } from './config/catalog.config.js';\nimport type { CatalogConfig } from './config/catalog.config.js';\n\n@NgModule({\n  declarations: [CatalogItemsSelectComponent],\n  imports: [CommonModule, HttpClientModule],\n  exports: [CatalogItemsSelectComponent]\n})\nexport class CatalogModule {\n  /**\n   * Configura el módulo con la URL base del servicio de catálogos\n   * @param config Configuración del módulo\n   * @returns Módulo configurado con los proveedores\n   * \n   * @example\n   * // En tu app.module.ts\n   * imports: [\n   *   CatalogModule.forRoot({\n   *     apiBaseUrl: 'http://localhost:3000/api'\n   *   })\n   * ]\n   */\n  static forRoot(config: CatalogConfig): ModuleWithProviders<CatalogModule> {\n    return {\n      ngModule: CatalogModule,\n      providers: [\n        CatalogService,\n        {\n          provide: CATALOG_CONFIG_TOKEN,\n          useValue: config\n        }\n      ]\n    };\n  }\n}\n"]}

package/dist/lib/components/catalog-items-select/catalog-items-select.component.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { CatalogService } from '../../services/catalog.service.js';
+import { CatalogItem } from '../../models/catalog.model.js';
+export declare class CatalogItemsSelectComponent implements OnInit, OnDestroy {
+    private catalogService;
+    /**
+     * ID del catálogo del cual cargar los items
+     */
+    catalogId: number;
+    /**
+     * ID del item actualmente seleccionado (opcional)
+     */
+    selectedItemId?: number;
+    /**
+     * Label del input del catálogo
+     */
+    catalogLabel: string;
+    /**
+     * Placeholder del select de items
+     */
+    itemSelectPlaceholder: string;
+    /**
+     * Emite cuando se selecciona un item
+     */
+    itemSelected: EventEmitter<CatalogItem>;
+    /**
+     * Emite cuando hay un error al cargar los items
+     */
+    error: EventEmitter<string>;
+    items: CatalogItem[];
+    isLoading: boolean;
+    errorMessage: string;
+    private destroy$;
+    constructor(catalogService: CatalogService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Carga los items del catálogo especificado
+     */
+    loadItems(): void;
+    /**
+     * Maneja el cambio de catálogo
+     * @param event Evento del input
+     */
+    onCatalogIdChange(event: any): void;
+    /**
+     * Maneja la selección de un item
+     * @param event Evento del select
+     */
+    onItemSelected(event: any): void;
+    /**
+     * 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;
+}
+//# sourceMappingURL=catalog-items-select.component.d.ts.map

package/dist/lib/components/catalog-items-select/catalog-items-select.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-items-select.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/catalog-items-select/catalog-items-select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI5D,qBAKa,2BAA4B,YAAW,MAAM,EAAE,SAAS;IAqCvD,OAAO,CAAC,cAAc;IApClC;;OAEG;IACM,SAAS,EAAG,MAAM,CAAC;IAE5B;;OAEG;IACM,cAAc,CAAC,EAAE,MAAM,CAAC;IAEjC;;OAEG;IACM,YAAY,EAAE,MAAM,CAAqB;IAElD;;OAEG;IACM,qBAAqB,EAAE,MAAM,CAAwB;IAE9D;;OAEG;IACO,YAAY,4BAAmC;IAEzD;;OAEG;IACO,KAAK,uBAA8B;IAE7C,KAAK,EAAE,WAAW,EAAE,CAAM;IAC1B,SAAS,EAAE,OAAO,CAAS;IAC3B,YAAY,EAAE,MAAM,CAAM;IAE1B,OAAO,CAAC,QAAQ,CAAuB;gBAEnB,cAAc,EAAE,cAAc;IAElD,QAAQ,IAAI,IAAI;IAMhB,WAAW,IAAI,IAAI;IAKnB;;OAEG;IACH,SAAS,IAAI,IAAI;IA2BjB;;;OAGG;IACH,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAQnC;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAShC;;;;OAIG;IACH,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;CAG9C"}