infodocviewdoc 2.0.1 → 2.0.3

package/README.md

@@ -1,355 +1,160 @@
-# @infodocnpm/ui-components
+# MFE Document Viewer Integration Guide
 
-Biblioteca de componentes UI para SGDEA (Sistema de Gestión Documental Electrónico de Archivo).
+`infodocviewdoc` es una librería Angular para previsualizar documentos en microfrontends SGDEA.
 
-## Instalación
+## 1) Instalacion del paquete (ultima version)
 
 ```bash
-npm install @infodocnpm/ui-components
+npm i infodocviewdoc
 ```
 
-## Documentación Completa
+## 2) Dependencias requeridas en el host (package.json)
 
-Para la documentación completa de instalación e integración de metadatos, consulta el archivo:
+Si tu MFE ya existe (con Angular y dependencias base), **solo debes agregar estas nuevas**:
 
-**`MANUAL_INSTALACION_METADATOS.md`** en la raíz del repositorio `sgdea-component-library`.
-
-Este manual contiene:
-- Guía paso a paso de instalación
-- Configuración de rutas y secciones
-- Integración en modo inline (recomendado)
-- Ejemplos de código completos
-- Validación de campos obligatorios
-- Vinculación de metadatos con registros
-
-## Componente: Metadata Crosscutting
-
-Componente para gestionar y mostrar formularios de metadatos de manera inline o en modal.
-
-**IMPORTANTE:** Consulta el `MANUAL_INSTALACION_METADATOS.md` para ver la documentación completa y actualizada.
-
-### Modo Inline (Recomendado)
-
-El componente puede renderizarse directamente dentro de un formulario sin necesidad de un modal.
-
-#### 1. Importar el componente
-
-```typescript
-import { MetadataCrosscuttingComponent } from '@infodocnpm/ui-components';
-
-@Component({
-  selector: 'app-my-component',
-  standalone: true,
-  imports: [
-    MetadataCrosscuttingComponent,
-    // ... otros imports
-  ],
-  // ...
-})
-export class MyComponent {
-  // ...
-}
-```
-
-#### 2. Usar en el template
-
-```html
-<sgdea-metadata-crosscutting
-  #metadataComponent
-  [inlineMode]="true"
-  [autoLoad]="true"
-  [sectionFormId]="sectionFormId"
-  [apiUrl]="metadataApiUrl"
-  [createApiUrl]="metadataCreateApiUrl"
-  [registerId]="null"
-  [initialFormData]="initialMetadataData || null"
-  (saveModal)="onMetadataSave($event)">
-</sgdea-metadata-crosscutting>
-```
-
-#### 3. Configurar en el componente TypeScript
-
-```typescript
-import { ViewChild } from '@angular/core';
-import { MetadataCrosscuttingComponent, MetadataFormData, MetadataModalFormStructure } from '@infodocnpm/ui-components';
-
-export class MyComponent {
-  @ViewChild('metadataComponent') metadataComponent?: MetadataCrosscuttingComponent;
-  
-  sectionFormId = 'your-section-form-id';
-  metadataApiUrl = 'https://your-api.com/api/v1/metadata/template/get-all-metadata-for-modal';
-  metadataCreateApiUrl = 'https://your-api.com/api/v1/metadata/value-metadata/create';
-  initialMetadataData: MetadataFormData[] | null = null;
-
-  // Obtener datos actuales del formulario
-  getCurrentMetadataData(): MetadataFormData[] {
-    if (this.metadataComponent) {
-      return this.metadataComponent.getCurrentFormData();
-    }
-    return [];
-  }
-
-  // Guardar datos (opcional, si quieres guardar localmente)
-  onMetadataSave(data: { formData: MetadataFormData[], formStructure: MetadataModalFormStructure | null }): void {
-    // Guardar localmente si es necesario
-    console.log('Metadata saved:', data);
+```json
+{
+  "dependencies": {
+    "infodocviewdoc": "latest",
+    "@handsontable/angular": "^16.2.0",
+    "handsontable": "^16.2.0",
+    "jspdf": "^4.1.0",
+    "ngx-extended-pdf-viewer": "^25.6.4",
+    "xlsx": "^0.18.5"
   }
 }
 ```
 
-#### 4. Vincular metadatos después de crear un registro
-
-```typescript
-import { ValueMetadataCreateMapper, ValueMetadataCreateRequestDto } from '@infodocnpm/ui-components';
-import { HttpClient } from '@angular/common/http';
-import { forkJoin, Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-
-export class MyComponent {
-  constructor(private http: HttpClient) {}
-
-  // Después de crear tu registro (ej: préstamo, expediente, etc.)
-  linkMetadataToRegister(registerId: string): void {
-    const metadataData = this.metadataComponent?.getCurrentFormData() || [];
-    
-    if (metadataData.length === 0) {
-      return; // No hay datos para vincular
-    }
-
-    const apiUrl = 'https://your-api.com/api/v1/metadata/value-metadata/create';
-    const sectionFormId = this.sectionFormId;
-
-    // Construir el request usando el mapper
-    const requestPayload: ValueMetadataCreateRequestDto = ValueMetadataCreateMapper.toRequestDto(
-      metadataData,
-      sectionFormId,
-      registerId,
-      null // formStructure - opcional
-    );
-
-    // Enviar al backend
-    this.http.post(apiUrl, requestPayload).subscribe({
-      next: (response) => {
-        console.log('Metadata vinculado exitosamente:', response);
-      },
-      error: (error) => {
-        console.error('Error al vincular metadata:', error);
-      }
-    });
+> En resumen: si comparas contra tu `package.json` anterior, las nuevas para integrar el visor son:
+> - `infodocviewdoc`
+> - `@handsontable/angular`
+> - `handsontable`
+> - `jspdf`
+> - `ngx-extended-pdf-viewer`
+> - `xlsx`
+
+### Ejemplo completo para un MFE nuevo
+
+Si creas un microfront desde cero, ademas de Angular/base, tu bloque de `dependencies` debe terminar incluyendo al menos:
+
+```json
+{
+  "dependencies": {
+    "@angular/animations": "19.2.4",
+    "@angular/common": "19.2.4",
+    "@angular/core": "19.2.4",
+    "@angular/forms": "19.2.4",
+    "@angular/platform-browser": "19.2.4",
+    "@angular/platform-browser-dynamic": "19.2.4",
+    "@angular/router": "19.2.4",
+    "rxjs": "~7.8.0",
+    "tslib": "2.3.0",
+    "zone.js": "~0.15.0",
+    "infodocviewdoc": "latest",
+    "@handsontable/angular": "^16.2.0",
+    "handsontable": "^16.2.0",
+    "jspdf": "^4.1.0",
+    "ngx-extended-pdf-viewer": "^25.6.4",
+    "xlsx": "^0.18.5"
   }
 }
 ```
 
-### Modo Modal (Legacy)
-
-El componente también puede mostrarse en un modal (modo legacy).
+Despues de agregarlas:
 
-```html
-<sgdea-metadata-crosscutting
-  [isVisible]="isModalVisible"
-  [modalTitle]="'Metadatos del Documento'"
-  [sectionFormId]="sectionFormId"
-  [apiUrl]="metadataApiUrl"
-  [createApiUrl]="metadataCreateApiUrl"
-  [registerId]="registerId"
-  [initialFormData]="initialMetadataData"
-  (closeModal)="closeModal()"
-  (saveModal)="onMetadataSave($event)">
-</sgdea-metadata-crosscutting>
+```bash
+npm install
 ```
 
-### Propiedades del Componente
+## 3) Configuracion de assets PDF viewer (host)
 
-| Propiedad | Tipo | Descripción |
-|-----------|------|-------------|
-| `inlineMode` | `boolean` | Si es `true`, muestra el formulario inline (sin modal). Por defecto: `false` |
-| `autoLoad` | `boolean` | Si es `true`, carga automáticamente los metadatos al inicializar. Por defecto: `false` |
-| `sectionFormId` | `string \| null` | ID de la sección de formulario de metadatos |
-| `apiUrl` | `string \| null` | URL completa del endpoint para obtener la estructura de metadatos |
-| `createApiUrl` | `string \| null` | URL completa del endpoint para crear/vincular metadatos |
-| `registerId` | `string \| null` | ID del registro al que se vincularán los metadatos (usado en modo modal) |
-| `initialFormData` | `MetadataFormData[] \| null` | Datos iniciales para poblar el formulario |
-| `isVisible` | `boolean` | Muestra/oculta el modal (solo en modo modal). Por defecto: `false` |
-| `modalTitle` | `string` | Título del modal (solo en modo modal). Por defecto: `'Metadatos del Documento'` |
+En `angular.json` del MFE host agrega los assets de `ngx-extended-pdf-viewer`:
 
-### Eventos
+```json
+{
+  "glob": "**/*",
+  "input": "node_modules/ngx-extended-pdf-viewer/assets",
+  "output": "/assets/"
+}
+```
 
-| Evento | Tipo | Descripción |
-|--------|------|-------------|
-| `saveModal` | `EventEmitter<{ formData: MetadataFormData[], formStructure: MetadataModalFormStructure \| null }>` | Se emite cuando se guarda el formulario |
-| `closeModal` | `EventEmitter<void>` | Se emite cuando se cierra el modal (solo modo modal) |
+Sin esta configuracion puede aparecer el error 404 de `viewer-*.mjs`.
 
-### Métodos Públicos
+## 4) Como importar y usar el componente
 
-#### `getCurrentFormData(): MetadataFormData[]`
+### Import en componente standalone
 
-Obtiene los datos actuales del formulario sin validar ni guardar. Útil para obtener los valores actuales antes de vincular al registro.
+```ts
+import { PdfViewerComponent } from 'infodocviewdoc';
 
-```typescript
-const currentData = this.metadataComponent?.getCurrentFormData();
+@Component({
+  standalone: true,
+  imports: [PdfViewerComponent]
+})
+export class PdfPreviewModalComponent {}
 ```
 
-### Validación de Campos Obligatorios
-
-Para validar que todos los campos obligatorios estén diligenciados antes de crear un registro:
-
-```typescript
-import { MetadataValidationService, ValidateMissingFieldsResponseDto } from '@infodocnpm/ui-components';
-
-export class MyComponent {
-  constructor(private metadataValidationService: MetadataValidationService) {}
-
-  validateRequiredFields(): boolean {
-    const currentData = this.metadataComponent?.getCurrentFormData() || [];
-    const sectionFormId = this.sectionFormId;
-    
-    // Obtener secciones con campos obligatorios
-    const apiUrl = 'https://your-api.com/api/v1/metadata/template/get-all-metadata-for-modal';
-    
-    this.metadataValidationService.validateRequiredFields(apiUrl, [sectionFormId])
-      .subscribe({
-        next: (response) => {
-          if (response.sectionsWithRequiredFields.length > 0) {
-            // Hay campos obligatorios, validar que estén diligenciados
-            const metadataDataMap = new Map();
-            metadataDataMap.set(sectionFormId, {
-              formData: currentData,
-              formStructure: null // Obtener de la estructura cargada
-            });
-
-            const validationResult = this.metadataValidationService.validateMissingRequiredFields(
-              response.sectionsWithRequiredFields,
-              metadataDataMap
-            );
-
-            if (validationResult.hasMissingFields) {
-              console.error('Faltan campos obligatorios:', validationResult.missingSections);
-              return false;
-            }
-          }
-          return true;
-        }
-      });
-
-    return false;
-  }
-}
-```
+### Uso en template
 
-### Ejemplo Completo de Integración
+```html
+<sgdea-document-viewer
+  [url]="apiUrl"
+  [nameFile]="objectName"
+  [nameBucket]="bucketName"
+  [nameSpaceBucket]="''"
+  [token]="token">
+</sgdea-document-viewer>
+```
 
-```typescript
-import { Component, ViewChild } from '@angular/core';
-import { MetadataCrosscuttingComponent, MetadataFormData, MetadataModalFormStructure, ValueMetadataCreateMapper, ValueMetadataCreateRequestDto } from '@infodocnpm/ui-components';
-import { HttpClient } from '@angular/common/http';
+## 5) Inputs del componente
 
-@Component({
-  selector: 'app-loan-form',
-  standalone: true,
-  imports: [MetadataCrosscuttingComponent],
-  template: `
-    <form>
-      <!-- Campos del formulario principal -->
-      
-      <!-- Metadatos inline -->
-      <sgdea-metadata-crosscutting
-        #metadataComponent
-        [inlineMode]="true"
-        [autoLoad]="true"
-        [sectionFormId]="'DETAIL_SECTION'"
-        [apiUrl]="metadataApiUrl"
-        [createApiUrl]="metadataCreateApiUrl"
-        (saveModal)="onMetadataSave($event)">
-      </sgdea-metadata-crosscutting>
-
-      <button (click)="createLoan()">Crear Préstamo</button>
-    </form>
-  `
-})
-export class LoanFormComponent {
-  @ViewChild('metadataComponent') metadataComponent?: MetadataCrosscuttingComponent;
-  
-  metadataApiUrl = 'https://api.example.com/api/v1/metadata/template/get-all-metadata-for-modal';
-  metadataCreateApiUrl = 'https://api.example.com/api/v1/metadata/value-metadata/create';
+- `url`: base URL del microservicio de archivos (ej: `https://host-backend`)
+- `nameFile`: ruta/nombre del archivo en bucket (`objectName`)
+- `nameBucket`: nombre del bucket (ej: `attachments`)
+- `nameSpaceBucket`: namespace (si aplica; puede ir vacio)
+- `token`: JWT para `Authorization: Bearer <token>`
 
-  constructor(private http: HttpClient) {}
+## 6) Consideraciones de integracion en MFE
 
-  onMetadataSave(data: { formData: MetadataFormData[], formStructure: MetadataModalFormStructure | null }): void {
-    // Guardar localmente si es necesario
-    console.log('Metadata guardado:', data);
-  }
+- El componente prioriza `@Input()`; si no llegan valores por inputs, usa `queryParams` como fallback.
+- En modales, usa contenedor con `height` definido y `overflow` para Excel grandes.
+- Para obtener token en host, puedes usar `localStorage` o tu servicio de autenticacion central.
+- Mantener contrato estable: ruta y forma de datos enviados al visor via inputs.
 
-  createLoan(): void {
-    // 1. Crear el préstamo
-    this.http.post('https://api.example.com/api/v1/loans', loanData)
-      .subscribe({
-        next: (response: any) => {
-          const loanId = response.idPrestamo;
-          
-          // 2. Vincular metadatos al préstamo
-          this.linkMetadataToLoan(loanId);
-        }
-      });
-  }
+## 7) Formatos soportados por el visor
 
-  linkMetadataToLoan(loanId: string): void {
-    const metadataData = this.metadataComponent?.getCurrentFormData() || [];
-    
-    if (metadataData.length === 0) {
-      return;
-    }
-
-    const requestPayload: ValueMetadataCreateRequestDto = ValueMetadataCreateMapper.toRequestDto(
-      metadataData,
-      'DETAIL_SECTION',
-      loanId,
-      null
-    );
-
-    this.http.post(this.metadataCreateApiUrl, requestPayload).subscribe({
-      next: () => {
-        console.log('Metadatos vinculados exitosamente');
-      },
-      error: (error) => {
-        console.error('Error al vincular metadatos:', error);
-      }
-    });
-  }
-}
-```
+- Procesamiento de texto: `.docx`, `.doc`
+- Hojas de calculo: `.xlsx`, `.xls`
+- Presentaciones: `.pptx`, `.ppt`
+- Documentos portatiles: `.pdf`
+- Texto plano: `.txt`
+- Imagenes: `.jpg`, `.png`, `.tiff`, `.gif`
 
-## Building
+## 8) Ejemplo rapido de instalacion local (desarrollo)
 
-Para construir la librería localmente:
+Desde el repositorio de la libreria:
 
 ```bash
 npm run build:lib
+cd dist/ui-components
+npm pack
 ```
 
-Los artefactos de compilación se guardarán en el directorio `dist/`.
-
-### Publicar la Librería
+En el MFE host:
 
-Una vez construida la librería:
-
-1. Navegar al directorio `dist`:
-   ```bash
-   cd dist/ui-components
-   ```
-
-2. Ejecutar `npm publish` para publicar la librería en el registro de npm:
-   ```bash
-   npm publish
-   ```
+```bash
+npm install "C:/ruta/a/infodocviewdoc-<version>.tgz"
+```
 
-## Running unit tests
+## 9) Public API exportada
 
-Para ejecutar las pruebas unitarias:
+`public-api.ts` exporta:
 
-```bash
-npm test
-```
+- `PdfViewerComponent`
 
-## Recursos Adicionales
+---
 
-Para más información sobre Angular CLI, visita [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli).
+Si integras este paquete en otro microfront, valida primero:
+1. dependencias del host,
+2. assets de `ngx-extended-pdf-viewer`,
+3. envio correcto de `url`, `nameFile`, `nameBucket` y `token`.