utn-cli 2.1.15 → 2.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "utn-cli",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "Herramienta CLI unificada para la gestión de plantillas en SIGU.",
   "main": "index.js",
   "type": "module",

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.css

@@ -7,7 +7,6 @@ button:focus {
   display: flex;
   flex-direction: column;
   padding: 20px;
-  /* Padding uniforme en todos los lados */
   background-color: white;
   overflow: hidden;
   box-sizing: border-box;
@@ -15,7 +14,6 @@ button:focus {
 
 .lista {
   width: 100%;
-  /* Ocupa todo el ancho disponible del contenedor */
   margin-bottom: 15px;
   max-height: 300px;
   overflow-y: auto;
@@ -23,10 +21,8 @@ button:focus {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  /* Espacio uniforme entre archivos */
 }
 
-/* Estilo de la fila de archivo */
 .lista .archivo {
   border: solid 1px #007bff;
   border-radius: 8px;
@@ -34,22 +30,34 @@ button:focus {
   justify-content: space-between;
   align-items: center;
   padding: 8px 15px;
-  /* Espacio interno simétrico */
   box-sizing: border-box;
 }
 
-.lista .archivo p {
-  margin: 0;
+.nombre-archivo {
   flex: 1;
-  /* El texto toma el espacio restante */
-  text-align: left;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   padding-right: 10px;
+  overflow: hidden;
+}
+
+.nombre-texto {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.fecha-archivo {
+  font-size: 11px;
+  color: #7f8c8d;
+  white-space: nowrap;
 }
 
-/* Zona de Arrastre */
 .zona-archivo {
   width: 100%;
-  /* Centrado automático */
   height: 100px;
   border: 2px dashed #3498db;
   border-radius: 8px;
@@ -72,13 +80,11 @@ button:focus {
   font-weight: bold;
 }
 
-/* Centrado del mensaje vacío */
 .mensaje-vacio {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 40px 0;
-  /* Margen superior e inferior igual */
   color: #7f8c8d;
   width: 100%;
 }
@@ -91,11 +97,10 @@ button:focus {
   margin-top: 20px;
   display: flex;
   justify-content: flex-end;
-  /* Alinea botones a la derecha */
   gap: 10px;
+  flex-shrink: 0;
 }
 
-/* Estilizador de Scrollbar */
 .lista::-webkit-scrollbar {
   width: 6px;
 }
@@ -105,7 +110,6 @@ button:focus {
   border-radius: 10px;
 }
 
-/* Iconos */
 .descargar {
   color: #007bff;
 }
@@ -116,4 +120,257 @@ button:focus {
 
 .deshabilitado {
   color: #bdc3c7;
+}
+
+.diff-icon {
+  color: #8e44ad;
+}
+
+/* ── Visor inline ─────────────────────────────────────────────────── */
+
+.visor-contenedor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.visor-encabezado {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  background: #1b3069;
+  color: #ffffff;
+  padding: 6px 12px 6px 8px;
+  flex-shrink: 0;
+}
+
+.visor-encabezado button {
+  color: #eef2ff;
+}
+
+.visor-icono-tipo {
+  color: #eef2ff;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.visor-nombre {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.visor-estadisticas {
+  display: flex;
+  gap: 10px;
+  font-size: 13px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.visor-stat.agregado {
+  color: #95d03a;
+}
+
+.visor-stat.eliminado {
+  color: #ff8a80;
+}
+
+.visor-cuerpo {
+  padding: 0 !important;
+  background: #f5f7fa !important;
+  max-height: 70vh !important;
+  overflow: auto !important;
+}
+
+.visor-cuerpo.sin-padding {
+  display: flex !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+}
+
+.visor-estado-carga,
+.visor-estado-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px;
+  color: #7f8c8d;
+}
+
+.visor-estado-error mat-icon {
+  font-size: 40px;
+  color: #e74c3c;
+}
+
+/* Diff */
+.visor-codigo {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 20px;
+  min-width: max-content;
+  background: #1e2a45;
+}
+
+.visor-linea {
+  display: flex;
+  align-items: stretch;
+  min-width: 100%;
+}
+
+.visor-linea:hover {
+  filter: brightness(1.1);
+}
+
+.visor-numero-linea {
+  min-width: 48px;
+  padding: 0 12px;
+  text-align: right;
+  color: #7a8cb0;
+  background: #162035;
+  border-right: 1px solid #2a3f6f;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.visor-texto-linea {
+  margin: 0;
+  padding: 0 12px;
+  white-space: pre;
+  flex: 1;
+}
+
+.visor-linea.meta {
+  background: #1e2a45;
+  color: #8ea8d0;
+}
+
+.visor-linea.archivo {
+  background: #1b3069;
+  color: #c5d8ff;
+}
+
+.visor-linea.bloque {
+  background: #162850;
+  color: #7ab4ff;
+}
+
+.visor-linea.agregado {
+  background: #0e3a1e;
+  color: #b5f2a0;
+}
+
+.visor-linea.eliminado {
+  background: #3a1010;
+  color: #ffaaaa;
+}
+
+.visor-linea.contexto {
+  background: #1e2a45;
+  color: #d0daf0;
+}
+
+/* Texto */
+.visor-texto {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  background: #1e2a45;
+  color: #d0daf0;
+  padding: 16px 20px;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  min-height: 100%;
+}
+
+/* CSV */
+.visor-csv {
+  overflow: auto;
+  background: #fff;
+}
+
+.visor-csv table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13px;
+}
+
+.visor-csv th {
+  background: #1b3069;
+  color: #fff;
+  padding: 8px 14px;
+  border: 1px solid #ccc;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.visor-csv td {
+  padding: 6px 14px;
+  border: 1px solid #ddd;
+  white-space: nowrap;
+}
+
+.visor-csv tr:nth-child(even) td {
+  background: #f0f4fb;
+}
+
+.visor-csv tr:hover td {
+  background: #dde6f5;
+}
+
+/* Imagen */
+.visor-imagen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #eef2ff;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.visor-imagen img {
+  max-width: 100%;
+  max-height: 65vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0px 3px 10px #00000029;
+}
+
+/* PDF */
+.visor-pdf {
+  width: 100%;
+  height: 65vh;
+  border: none;
+  display: block;
+}
+
+/* Footer del visor */
+.visor-pie {
+  margin-top: 0;
+  background: #ffffff;
+  border-top: 2px solid #eef2ff;
+  padding: 8px 16px;
+}
+
+.visor-pie button {
+  color: #1b3069;
+  font-weight: 500;
+}
+
+.visor-pie button:hover {
+  background: #eef2ff;
 }

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.html

@@ -1,19 +1,27 @@
 <a #descargaLink style="display:none"></a>
+
+@if (!archivoEnVisor) {
 <div class="contenedor">
   <div class="lista">
     @for(archivo of ListaArchivos;track $index){
     <div class="archivo">
-      <p style="text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{archivo.Nombre}}
-      </p>
+      <div class="nombre-archivo">
+        <span class="nombre-texto">{{ nombreSinFecha(archivo.Nombre) }}</span>
+        @if(fechaDelArchivo(archivo.Nombre)) {
+        <span class="fecha-archivo">Fecha de carga: {{ fechaDelArchivo(archivo.Nombre) }}</span>
+        }
+      </div>
+      <button mat-icon-button [disabled]="!esPrevisualizable(archivo.Nombre)" (click)="PreVisualizarArchivo(archivo)"
+        [matTooltip]="esPrevisualizable(archivo.Nombre) ? 'Vista previa' : 'Vista previa no disponible para este formato'">
+        <mat-icon [class.diff-icon]="esPrevisualizable(archivo.Nombre)"
+          [class.deshabilitado]="!esPrevisualizable(archivo.Nombre)">visibility</mat-icon>
+      </button>
       <button mat-icon-button (click)="DescargarArchivo(archivo.ArchivoId,archivo.Nombre)" matTooltip="Descargar">
-        <!--pone deshabilitado si es estado coincide con el indicado -->
         <mat-icon class="descargar">download</mat-icon>
       </button>
       <button mat-icon-button [disabled]="!EsEditable" (click)="BorrarArchivo(archivo.ArchivoId)" matTooltip="Eliminar">
-        <!--pone deshabilitado si es estado coincide con el indicado -->
         <mat-icon class="eliminar" [class.deshabilitado]="!EsEditable">delete</mat-icon>
       </button>
-
     </div>
     }
   </div>
@@ -31,7 +39,6 @@
     <p>Archivo seleccionado: {{ Archivo.name }}</p>
     }
     }
-    <!-- Input oculto para seleccionar archivos manualmente -->
     <input type="file" #EntradaDeArchivo hidden (change)="ArchivoSeleccionado($event)"
       [accept]="FormatosPermitidos.join(',')">
   </div>
@@ -46,4 +53,79 @@
     <button mat-button (click)="Cancelar()">Cerrar</button>
     <button mat-button [disabled]="!EsEditable" (click)="SubirArchivo()">Guardar</button>
   </div>
-</div>
+</div>
+} @else {
+<div class="visor-contenedor">
+  <div class="visor-encabezado">
+    <button mat-icon-button (click)="cerrarVisor()" matTooltip="Volver a la lista">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <mat-icon class="visor-icono-tipo">{{ iconoVisor }}</mat-icon>
+    <span class="visor-nombre" [title]="nombreSinFecha(archivoEnVisor.Nombre)">{{ nombreSinFecha(archivoEnVisor.Nombre)
+      }}</span>
+    @if (archivoEnVisor.tipo === 'diff' && !visorCargando && !visorError) {
+    <span class="visor-estadisticas">
+      <span class="visor-stat agregado">+{{ estadisticasDiff.agregadas }}</span>
+      <span class="visor-stat eliminado">-{{ estadisticasDiff.eliminadas }}</span>
+    </span>
+    }
+  </div>
+
+  <mat-dialog-content class="visor-cuerpo"
+    [class.sin-padding]="archivoEnVisor.tipo === 'imagen' || archivoEnVisor.tipo === 'pdf'">
+    @if (visorCargando) {
+    <div class="visor-estado-carga">
+      <mat-spinner diameter="40"></mat-spinner>
+      <p>Cargando archivo...</p>
+    </div>
+    } @else if (visorError) {
+    <div class="visor-estado-error">
+      <mat-icon>error_outline</mat-icon>
+      <p>No se pudo cargar el archivo.</p>
+    </div>
+    } @else {
+    @switch (archivoEnVisor.tipo) {
+    @case ('diff') {
+    <div class="visor-codigo">
+      @for (linea of visorLineasDiff; track linea.numero) {
+      <div class="visor-linea" [class]="linea.tipo">
+        <span class="visor-numero-linea">{{ linea.numero }}</span>
+        <pre class="visor-texto-linea">{{ linea.contenido }}</pre>
+      </div>
+      }
+    </div>
+    }
+    @case ('texto') {
+    <pre class="visor-texto">{{ visorContenidoTexto }}</pre>
+    }
+    @case ('csv') {
+    <div class="visor-csv">
+      <table>
+        @for (fila of visorFilasCsv; track $index; let i = $index) {
+        <tr>
+          @for (celda of fila; track $index) {
+          @if (i === 0) { <th>{{ celda }}</th> }
+          @else { <td>{{ celda }}</td> }
+          }
+        </tr>
+        }
+      </table>
+    </div>
+    }
+    @case ('imagen') {
+    <div class="visor-imagen">
+      <img [src]="visorImagenUrl" [alt]="nombreSinFecha(archivoEnVisor.Nombre)" />
+    </div>
+    }
+    @case ('pdf') {
+    <iframe class="visor-pdf" [src]="visorPdfUrl" [title]="nombreSinFecha(archivoEnVisor.Nombre)"></iframe>
+    }
+    }
+    }
+  </mat-dialog-content>
+
+  <mat-dialog-actions class="visor-pie">
+    <button mat-button (click)="cerrarVisor()">Volver</button>
+  </mat-dialog-actions>
+</div>
+}

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.ts

@@ -1,24 +1,35 @@
 import { Component, ElementRef, inject, OnDestroy, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { DomSanitizer, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 import { MensajeConfirmacionComponent } from '../mensaje-confirmacion/mensaje-confirmacion';
 import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+type TipoDeVista = 'diff' | 'texto' | 'csv' | 'imagen' | 'pdf';
+
+interface LineaDiff {
+  contenido: string;
+  tipo: 'meta' | 'archivo' | 'bloque' | 'agregado' | 'eliminado' | 'contexto';
+  numero: number;
+}
+
 @Component({
   selector: 'app-subir-archivo',
-  imports: [MatButtonModule, MatIconModule],
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule, MatProgressSpinnerModule, MatDialogContent, MatDialogActions],
   templateUrl: './subir-archivo.component.html',
   styleUrl: './subir-archivo.component.css'
 })
 export class SubirArchivoComponent implements OnInit, OnDestroy {
   readonly dialogRef = inject(MatDialogRef<SubirArchivoComponent>);
   Archivo: any;
-  ListaArchivos: any[] = []
+  ListaArchivos: any[] = [];
   HaCargadoArchivos: boolean = false;
   CantidadMaximaDeArchivos: number = 99;
   private _destroy$ = new Subject<void>();
@@ -35,25 +46,32 @@ export class SubirArchivoComponent implements OnInit, OnDestroy {
   public RutaParaListar: string = 'misc/listarArchivos/';
   public RutaParaDescargar: string = 'misc/descargarArchivo/';
   public RutaParaCargar: string = 'misc/cargarArchivo/';
-  constructor(private dialog: MatDialog, private datosGlobalesService: DatosGlobalesService, private http: HttpClient) { }
+
+  // Visor inline
+  archivoEnVisor: any = null;
+  visorCargando = false;
+  visorError = false;
+  visorContenidoTexto = '';
+  visorLineasDiff: LineaDiff[] = [];
+  visorFilasCsv: string[][] = [];
+  visorImagenUrl: SafeUrl | null = null;
+  visorPdfUrl: SafeResourceUrl | null = null;
+  private visorObjectUrl = '';
+
+  constructor(
+    private dialog: MatDialog,
+    private datosGlobalesService: DatosGlobalesService,
+    private http: HttpClient,
+    private sanitizer: DomSanitizer
+  ) { }
 
   ngOnInit(): void {
-    if (this.data.RutaParaCargar) {
-      this.RutaParaCargar = this.data.RutaParaCargar;
-    }
-    if (this.data.RutaParaListar) {
-      this.RutaParaListar = this.data.RutaParaListar;
-    }
-    if (this.data.RutaParaDescargar) {
-      this.RutaParaDescargar = this.data.RutaParaDescargar;
-    }
-    if (this.data.FormatosPermitidos) {
-      this.FormatosPermitidos = this.data.FormatosPermitidos;
-    }
-    if (this.data.CantidadMaximaDeArchivos) {
-      this.CantidadMaximaDeArchivos = this.data.CantidadMaximaDeArchivos;
-    }
-    this.ListarArchivos(this.Etiqueta)
+    if (this.data.RutaParaCargar) this.RutaParaCargar = this.data.RutaParaCargar;
+    if (this.data.RutaParaListar) this.RutaParaListar = this.data.RutaParaListar;
+    if (this.data.RutaParaDescargar) this.RutaParaDescargar = this.data.RutaParaDescargar;
+    if (this.data.FormatosPermitidos) this.FormatosPermitidos = this.data.FormatosPermitidos;
+    if (this.data.CantidadMaximaDeArchivos) this.CantidadMaximaDeArchivos = this.data.CantidadMaximaDeArchivos;
+    this.ListarArchivos(this.Etiqueta);
   }
 
   ArrastrarAdentro(event: DragEvent) {
@@ -143,9 +161,7 @@ export class SubirArchivoComponent implements OnInit, OnDestroy {
   }
 
   ValidarFormato(archivo: File): boolean {
-    if (this.FormatosPermitidos.length === 0) {
-      return true;
-    }
+    if (this.FormatosPermitidos.length === 0) return true;
     const nombreArchivo = archivo.name.toLowerCase();
     return this.FormatosPermitidos.some(formato => nombreArchivo.endsWith(formato.toLowerCase()));
   }
@@ -182,24 +198,23 @@ export class SubirArchivoComponent implements OnInit, OnDestroy {
       }
       let archivo = new FormData();
       archivo.append("file", this.Archivo);
-      this.CargarArchivo(archivo, this.Etiqueta)
+      this.CargarArchivo(archivo, this.Etiqueta);
     }
   }
 
   CargarArchivo(archivo: any, Etiqueta: string) {
-    this.http.post(this.datosGlobalesService.ObtenerURL() + this.RutaParaCargar + Etiqueta,
-      archivo)
+    this.http.post(this.datosGlobalesService.ObtenerURL() + this.RutaParaCargar + Etiqueta, archivo)
       .pipe(takeUntil(this._destroy$))
       .subscribe({
         next: (data: any) => {
           this.Archivo = undefined;
           this.MetaDatosDelArchivoCargado = data.body;
-          this.ListarArchivos(Etiqueta)
+          this.ListarArchivos(Etiqueta);
         },
         error: (error) => {
           console.error('Ocurrió un error al guardar el archivo:', error);
         }
-      })
+      });
   }
 
   ListarArchivos(Etiqueta: string) {
@@ -214,43 +229,162 @@ export class SubirArchivoComponent implements OnInit, OnDestroy {
         error: (error) => {
           console.error('Ocurrió un error al listar los archivos:', error);
         }
-      })
+      });
+  }
+
+  nombreSinFecha(nombre: string): string {
+    return nombre.split(' (')[0].trim();
+  }
+
+  fechaDelArchivo(nombre: string): string {
+    const match = nombre.match(/\(([^)]+)\)$/);
+    return match ? match[1].split(' ')[0] : '';
   }
 
   DescargarArchivo(ArchivoId: string, Nombre: string) {
-    this.http.get(this.datosGlobalesService.ObtenerURL() + this.RutaParaDescargar + ArchivoId + this.Permiso
-      , { responseType: 'blob' })
+    this.http.get(this.datosGlobalesService.ObtenerURL() + this.RutaParaDescargar + ArchivoId + this.Permiso, { responseType: 'blob' })
       .pipe(takeUntil(this._destroy$))
       .subscribe((pdfBlob) => {
         const url = window.URL.createObjectURL(pdfBlob);
         const a = this.descargaLinkRef.nativeElement;
         a.href = url;
-        a.download = Nombre;
+        a.download = this.nombreSinFecha(Nombre);
         a.click();
         window.URL.revokeObjectURL(url);
-      })
+      });
   }
 
   BorrarArchivo(ArchivoId: string) {
     this.http.delete(this.datosGlobalesService.ObtenerURL() + 'misc/borrarArchivo/' + ArchivoId)
       .pipe(takeUntil(this._destroy$))
       .subscribe({
-        next: (data: any) => {
+        next: () => {
           this.MetaDatosDelArchivoCargado = null;
           this.ListarArchivos(this.Etiqueta);
         },
         error: (error) => {
           console.error('Ocurrió un error al borrar el archivo:', error);
         }
-      })
+      });
+  }
+
+  Cancelar() {
+    this.dialogRef.close(this.MetaDatosDelArchivoCargado);
+  }
+
+  // ── Visor inline ─────────────────────────────────────────────────────────
+
+  obtenerTipoDeVista(nombre: string): TipoDeVista | null {
+    const n = nombre.split(' (')[0].trim().toLowerCase();
+    if (n.endsWith('.diff')) return 'diff';
+    if (n.endsWith('.txt')) return 'texto';
+    if (n.endsWith('.csv')) return 'csv';
+    if (n.endsWith('.pdf')) return 'pdf';
+    if (/\.(png|jpg|jpeg|gif|webp|bmp|svg)$/.test(n)) return 'imagen';
+    return null;
+  }
+
+  esPrevisualizable(nombre: string): boolean {
+    return this.obtenerTipoDeVista(nombre) !== null;
+  }
+
+  PreVisualizarArchivo(archivo: any) {
+    const tipo = this.obtenerTipoDeVista(archivo.Nombre);
+    if (!tipo) return;
+
+    this.dialogRef.updateSize('min(90vw, 1400px)', '85vh');
+    this.archivoEnVisor = { ...archivo, tipo };
+    this.visorCargando = true;
+    this.visorError = false;
+    this.visorContenidoTexto = '';
+    this.visorLineasDiff = [];
+    this.visorFilasCsv = [];
+    this.visorImagenUrl = null;
+    this.visorPdfUrl = null;
+    if (this.visorObjectUrl) { URL.revokeObjectURL(this.visorObjectUrl); this.visorObjectUrl = ''; }
+
+    const url = this.datosGlobalesService.ObtenerURL() + this.RutaParaDescargar + archivo.ArchivoId + this.Permiso;
+
+    if (tipo === 'diff' || tipo === 'texto' || tipo === 'csv') {
+      this.http.get(url, { responseType: 'text' })
+        .pipe(takeUntil(this._destroy$))
+        .subscribe({
+          next: (contenido) => {
+            this.visorContenidoTexto = contenido;
+            if (tipo === 'diff') this.parsearDiff(contenido);
+            if (tipo === 'csv') this.parsearCsv(contenido);
+            this.visorCargando = false;
+          },
+          error: () => { this.visorError = true; this.visorCargando = false; }
+        });
+    } else {
+      this.http.get(url, { responseType: 'blob' })
+        .pipe(takeUntil(this._destroy$))
+        .subscribe({
+          next: (blob) => {
+            this.visorObjectUrl = URL.createObjectURL(blob);
+            if (tipo === 'imagen') {
+              this.visorImagenUrl = this.sanitizer.bypassSecurityTrustUrl(this.visorObjectUrl);
+            } else {
+              this.visorPdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.visorObjectUrl);
+            }
+            this.visorCargando = false;
+          },
+          error: () => { this.visorError = true; this.visorCargando = false; }
+        });
+    }
+  }
+
+  cerrarVisor() {
+    this.dialogRef.updateSize('', '');
+    this.archivoEnVisor = null;
+    if (this.visorObjectUrl) { URL.revokeObjectURL(this.visorObjectUrl); this.visorObjectUrl = ''; }
+  }
+
+  private parsearDiff(contenido: string) {
+    this.visorLineasDiff = contenido.split('\n').map((linea, i) => ({
+      contenido: linea,
+      numero: i + 1,
+      tipo: this.clasificarLinea(linea)
+    }));
+  }
+
+  private clasificarLinea(linea: string): LineaDiff['tipo'] {
+    if (linea.startsWith('diff ') || linea.startsWith('index ') || linea.startsWith('new file') ||
+      linea.startsWith('deleted file') || linea.startsWith('similarity') || linea.startsWith('rename')) return 'meta';
+    if (linea.startsWith('--- ') || linea.startsWith('+++ ')) return 'archivo';
+    if (linea.startsWith('@@ ')) return 'bloque';
+    if (linea.startsWith('+')) return 'agregado';
+    if (linea.startsWith('-')) return 'eliminado';
+    return 'contexto';
+  }
+
+  private parsearCsv(contenido: string) {
+    this.visorFilasCsv = contenido
+      .split('\n')
+      .filter(l => l.trim() !== '')
+      .map(l => l.split(',').map(c => c.trim().replace(/^"|"$/g, '')));
+  }
+
+  get estadisticasDiff() {
+    return {
+      agregadas: this.visorLineasDiff.filter(l => l.tipo === 'agregado').length,
+      eliminadas: this.visorLineasDiff.filter(l => l.tipo === 'eliminado').length
+    };
+  }
+
+  get iconoVisor(): string {
+    const tipo: TipoDeVista | undefined = this.archivoEnVisor?.tipo;
+    if (!tipo) return 'visibility';
+    const iconos: Record<TipoDeVista, string> = {
+      diff: 'code', imagen: 'image', pdf: 'picture_as_pdf', csv: 'table_chart', texto: 'description'
+    };
+    return iconos[tipo] ?? 'visibility';
   }
 
   ngOnDestroy(): void {
     this._destroy$.next();
     this._destroy$.complete();
-  }
-
-  Cancelar() {
-    this.dialogRef.close(this.MetaDatosDelArchivoCargado);
+    if (this.visorObjectUrl) URL.revokeObjectURL(this.visorObjectUrl);
   }
 }

package/templates/frontend/src/app/Componentes/Nucleo/tabla/tabla.component.ts

@@ -188,10 +188,11 @@ export class TablaComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   private actualizarDataSource(): void {
-    const paginaActual = this.paginator ? this.paginator.pageIndex : 0;
-    const tamanioPagina = this.paginator ? this.paginator.pageSize : this.valorSeleccionadoPorElUsuario;
-
-    this.dataSource = new MatTableDataSource(this.datos);
+    if (!this.dataSource) {
+      this.dataSource = new MatTableDataSource<any>(this.datos);
+    } else {
+      this.dataSource.data = this.datos;
+    }
 
     if (!this.paginarResultados && this.paginator) {
       this.dataSource.paginator = this.paginator;
@@ -199,14 +200,13 @@ export class TablaComponent implements OnInit, OnChanges, OnDestroy {
     if (this.sort) {
       this.dataSource.sort = this.sort;
     }
-    if (this.paginarResultados && this.paginator) {
-      this.paginator.pageIndex = paginaActual;
-      this.paginator.pageSize = tamanioPagina;
-    }
   }
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
+    if (!this.paginarResultados) {
+      this.dataSource.paginator = this.paginator;
+    }
     this.subscriptions.add(this.paginator.page.subscribe((event: PageEvent) => {
       localStorage.setItem('pageSize', event.pageSize.toString());
 
@@ -247,7 +247,6 @@ export class TablaComponent implements OnInit, OnChanges, OnDestroy {
         });
       }
     }));
-    this.actualizarDataSource();
   }
 
   ngOnDestroy() {