ViewReport

This project was generated using Angular CLI version 20.1.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the library, run:

ng build view-report

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the dist directory:

   cd dist/view-report

2. Run the npm publish command to publish your library to the npm registry:

   npm publish

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.

@cbm-common/view-report

Documentación en español para la librería @cbm-common/view-report.

Resumen

• Propósito: Componente standalone que muestra y gestiona la visualización de reportes generados por general-report-repository. Ofrece descarga, impresión y metadatos del reporte.
• Paquete: @cbm-common/view-report (ver package.json).
• Requisitos: Angular 20.1.5 y las librerías peer definidas en package.json (general-report-repository, record-detail-metadata, upload-repository, user-history, notification-service).

Qué exporta

• Export públicos: CbmViewReportComponent y el namespace CbmViewReportModel (ver src/lib/index.ts).

Comportamiento y responsabilidades

• CbmViewReportComponent es un componente standalone (ShadowDom, OnPush) que:
  • Recibe un reportId (obligatorio) y obtiene el reporte correspondiente mediante CbmGeneralReportRepository.
  • Muestra metadata (a través de CbmRecordDetailMetadataComponent) y un historial de auditoría (CbmUserHistoryComponent).
  • Permite descargar/print el archivo asociado (upload-repository) y muestra estados de carga/errores mediante notification-service.
  • Soporta refresh vía onRefresh (Observable) para actualizar el estado del reporte en tiempo real.

Inputs principales del componente

• reportId: string (required) — id del reporte a mostrar.
• collectionName: string (required) — nombre de la colección origen para traducciones.
• translateCollectionNames: Record<string,string> (required) — mapa para localizar nombres de colección.
• othersFn?: (request: any) => CbmViewReportModel.ReportData.Others[] — función opcional para derivar campos auxiliares desde el request original.
• routeToReturn?: string — ruta a la lista de reportes (por defecto ../../list).
• onRefresh?: Observable<CbmViewReportModel.WebSocketReport> — observable para actualizaciones en vivo.

Modelos y tipos

• CbmViewReportModel.ReportData — representación enriquecida del reporte (extiende tipos de CbmGeneralReportModel).
• CbmViewReportModel.WebSocketReport — payload esperado para actualizaciones websocket.
• CbmViewReportModel.ReportStatusType — 'completed' | 'generating' | 'error'.
• CbmViewReportModel.Status — 'init' | 'loading' | 'success' | 'failed'.

Ejemplo de uso

import { Component } from '@angular/core';
import { CbmViewReportComponent } from '@cbm-common/view-report';

@Component({
   selector: 'app-demo',
   template: `
      <cbm-view-report
         [reportId]="'report-123'"
         [collectionName]="'items'"
         [translateCollectionNames]="{ items: 'Items' }"
      ></cbm-view-report>
   `,
   standalone: true,
   imports: [CbmViewReportComponent],
})
export class DemoComponent {}

Notas de implementación

• El componente depende de varias librerías internas:
  • @g2-common/general-report-repository para obtener datos del reporte.
  • @g2-common/upload-repository para descargar el archivo asociado (blob).
  • @g2-common/record-detail-metadata y @g2-common/user-history para mostrar metadata y auditoría.
  • @g2-common/notification-service para mostrar notificaciones de error/éxito.
• Manejo de archivos: descarga de blob y apertura/impresión se implementa en downloadExcel, downloadPdf y printPdf.

Build y publicación

Para compilar la librería (desde la raíz del workspace):

ng build view-report

Los artefactos estarán en dist/view-report. Para publicar:

cd dist/view-report
npm publish

Tests

• Ejecutar tests unitarios con ng test si están configurados.

Siguientes pasos sugeridos

• Documentar los contratos exactos de respuesta en general-report-repository para garantizar compatibilidad de report.request.
• Añadir tests unitarios para CbmViewReportComponent (simular repositorios con mocks y HttpClientTestingModule si es necesario).
• Añadir ejemplos de integración (story/stackblitz) si quieres una demo rápida.

Estado: README.md actualizado en español, alineado con el código fuente del paquete.

ViewReport

This project was generated using Angular CLI version 20.1.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the library, run:

ng build view-report

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the dist directory:

   cd dist/view-report

2. Run the npm publish command to publish your library to the npm registry:

   npm publish

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.