Cbm StocksByWarehouse — Documentación (español)

Componente y utilidades para mostrar inventario por bodegas (stocks por warehouse). Esta librería exporta el componente independiente CbmStocksByWarehouseComponent, la directiva NavMenuDirective y tipos auxiliares (ver src/lib/type.ts).

Resumen rápido:

• Componente: cbm-stocks-by-warehouse (standalone, Shadow DOM).
• Directiva: appNavMenu (gestiona menús verticales/botones con contenido asociado).
• Tipos exportados: cbmStockWarehouseModalModel, IPagination, status.

Propósito

Proveer una vista reutilizable para consultar y paginar stock por bodega, stock por lote (batch) y stock por serie. El componente maneja llamadas al repositorio de stock (CbmStockItemRepository) para obtener los datos y ofrece paginación integrada.

Exportados

• CbmStocksByWarehouseComponent — Componente standalone. Selector: cbm-stocks-by-warehouse.
• NavMenuDirective — Directiva standalone. Selector de atributo: appNavMenu.
• Tipos: cbmStockWarehouseModalModel, IPagination, status (definidos en src/lib/type.ts).

Requisitos / Peer dependencies

El componente depende de los siguientes símbolos/paquetes disponibles en el monorepo (o como dependencias peer):

• @cbm-common/stock-item-repository — para CbmStockItemRepository y CbmStockItemModel.
• @cbm-common/notification-service — para CbmNotificationService (envío de alertas/toasts).
• @cbm-common/pagination-nav — para CbmPaginationNavComponent (control de paginación usado en el template).

Antes de usar el componente en la aplicación host, asegúrate de tener instaladas/registradas estas dependencias y sus providers (por ejemplo, llamar a CbmStockItemModule.forRoot({ baseUrl }) si corresponde).

Cómo usar

1. Instala/integra la librería en tu proyecto (si está empaquetada) o importa directamente desde la librería local del monorepo.

2. Usar el componente en un template:

<!-- Ejemplo: mostrar inventario para un ítem -->
<cbm-stocks-by-warehouse
  [data]="{ code: 'A123', name: 'Producto A', _id: 'obj_1', manage_by: 'lot' }"
  [modalId]="'modal-'+item._id">
</cbm-stocks-by-warehouse>

Inputs disponibles (component):

• data: cbmStockWarehouseModalModel.item | null — elemento cuyo _id se usa para consultar stock. Si es null, no se realizarán consultas útiles.
• modalId: string — id único usado internamente si se necesita mostrar modal (por defecto se genera un UUID si no se pasa).

El componente realiza las consultas automáticamente en ngOnInit() (llama a getWarehouseStock, getSerieStock, getBatchStock) tomando this.data()?._id y los parámetros de paginación.

API interna y comportamiento

Funciones principales (métodos públicos del componente):

• getWarehouseStock() — solicita stock por bodega (usa CbmStockItemRepository.warehouseStock).
• getBatchStock() — solicita stock por lote (usa CbmStockItemRepository.batchStock).
• getSerieStock() — solicita stock por serie (usa CbmStockItemRepository.serieStock).

Estado y señales (signals):

• statusOfGetWarehouseStock, statusOfGetBatchStock, statusOfGetSerieStock — estado tipo status ('init'|'loading'|'success'|'failed').
• Paginación: paginationWarehouseStock, paginationBatchStock, paginationSerieStock — estructura IPagination con page, pages, records, size.
• Datos: warehouseStock, batchStock, serieStock — arrays con los ítems obtenidos.

Eventos de paginación:

• onGoToPage*, onNextPage*, onPreviousPage*, onPageSizeChange* — métodos que actualizan la paginación y vuelven a solicitar datos.

Errores y notificaciones: si ocurre un error en la consulta, el componente envía una alerta vía CbmNotificationService.sendAlert(...) y actualiza el estado a 'failed'.

Directiva appNavMenu

Uso:

<div appNavMenu>
  <button data-target="tab-warehouse">Bodegas</button>
  <button data-target="tab-batch">Lotes</button>
  <button data-target="tab-serie">Series</button>
</div>

<!-- Contenido relacionado: los divs deben tener un id que coincida con data-target -->
<div id="tab-warehouse"> ... </div>
<div id="tab-batch" class="hidden"> ... </div>
<div id="tab-serie" class="hidden"> ... </div>

La directiva gestiona la clase activa en los botones y la visibilidad (hidden) de las secciones asociadas. Está pensada para usarse junto al template exportado por el componente o en vistas que requieran un menú de pestañas simple.

Estilos y encapsulación

El componente utiliza ViewEncapsulation.ShadowDom, por lo que sus estilos (archivo src/lib/styles.css) quedan encapsulados dentro del Shadow DOM. Si necesitas sobreescribir estilos desde la aplicación host, considera usar CSS Custom Properties o no usar Shadow DOM.

Tipos y definiciones

Los tipos principales se encuentran en src/lib/type.ts e incluyen:

• cbmStockWarehouseModalModel.item — shape básico del ítem esperado en data.
• IPagination — formato de paginación usado por el componente.
• status — tipo literal para estados.

Además el componente consume tipos desde @cbm-common/stock-item-repository (por ejemplo CbmStockItemModel) para anotar las respuestas de las APIs.

Desarrollo y pruebas

Comandos disponibles (desde la raíz del workspace):

• Construir la librería:

ng build stocks-by-warehouse

• Ejecutar pruebas unitarias del workspace (Karma/Jasmine si están configuradas):

ng test

Si publicas la librería como paquete NPM desde dist/stocks-by-warehouse:

cd dist/stocks-by-warehouse
npm publish

Notas de integración y buenas prácticas

• Asegúrate de que las dependencias peer estén registradas en la aplicación host. Por ejemplo, el provider de CbmStockItemRepository suele exponerse mediante CbmStockItemModule.forRoot({ baseUrl }). Sin ese provider el componente lanzará errores en tiempo de ejecución.
• La librería asume que existe un CbmNotificationService para informar errores; puedes sustituirlo por un provider compatible si lo deseas.
• Por su uso de ShadowDom, la librería aísla estilos — útil para evitar conflictos, pero limita la personalización CSS directa desde la app host.

Dónde mirar el código

• Componente: src/lib/stocks-by-warehouse/stocks-by-warehouse.component.ts
• Tipos: src/lib/type.ts
• Directiva: src/lib/directives/drop-down-menu.directive.ts
• Public API: src/public-api.ts

Si quieres, puedo: 1) añadir ejemplos de integración concretos (módulo/app.module), 2) crear un spec de ejemplo que use HttpClientTestingModule para simular CbmStockItemRepository, o 3) adaptar el componente para no usar Shadow DOM si prefieres estilos globales.