utn-cli 2.1.1 → 2.1.3

package/templates/frontend/src/app/Paginas/contenedor-principal/contenedor-principal.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
 import { TarjetaComponent } from "../../Componentes/Nucleo/tarjeta/tarjeta.component";
 import { TarjetaMultipleComponent } from "../../Componentes/Nucleo/tarjeta-multiple/tarjeta-multiple.component";
 import { TarjetaReporteComponent } from "../../Componentes/Nucleo/tarjeta-reporte/tarjeta-reporte.component";
@@ -58,85 +60,79 @@ type AnyTarjetaConfig = TarjetaConfig | TarjetaMultipleConfig | TarjetaReporteCo
   styleUrl: "./contenedor-principal.component.css"
 })
 
-export class ContenedorPrincipalComponent implements OnInit {
+export class ContenedorPrincipalComponent implements OnInit, OnDestroy {
   public cantidad: number = 0;
   public cantidadMaxima: number = 0;
   public tarjetas: AnyTarjetaConfig[] = [];
+  public filtro: string = '';
+  private destroy$ = new Subject<void>();
 
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {
     this.cantidad = 0;
     this.cantidadMaxima = 0;
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
-  async ngOnInit() {
-    // 1. Define base cards
-    let baseTarjetas: AnyTarjetaConfig[] = [
-
-      // {
-      //   type: 'single',
-      //   position: 10,
-      //   rutaASeguir: 'tablaInformacionGeneral',
-      //   titulo: 'Información general',
-      //   descripcion: 'Listado de información general',
-      //   icono: 'feed'
-      // },
-
-    ];
-
-    // // 2. Check for extra permissions (Personas card)
-    // this.http.get(`${this.datosGlobalesService.ObtenerURL()}Personas/PermisoExtra`).subscribe({
-    //   next: (datos: any) => {
-    //     if (datos.body) {
-    //       const personasCard: TarjetaMultipleConfig = {
-    //         type: 'multiple',
-    //         position: 25,
-    //         titulo: 'Personas',
-    //         descripcion: 'Módulo para el mantenimiento de los datos relacionados con personas',
-    //         rutas: [
-    //           { nombre: 'Personas', ruta: 'tablaPersonas' },
-    //           { nombre: 'Correos', ruta: 'tablaCorreosPersonas' },
-    //           { nombre: 'Cuentas bancarias', ruta: 'tablaCuentasPersonas' },
-    //           { nombre: 'Teléfonos', ruta: 'tablaTelefonosPersonas' },
-    //           { nombre: 'Ubicación', ruta: 'tablaUbicacionPersona' },
-    //         ]
-    //       };
-    //       baseTarjetas.push(personasCard);
-    //     }
-    //   },
-    //   error: (error) => {
-    //     console.error('Problemas al intentar obtener los datos: ', error);
-    //     this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
-    //   },
-    // });
-
-    // 3. Load user-specific positions from backend
-    this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).subscribe({
-      next: (res: any) => {
-        if (res.body && res.body.length > 0) {
-          const savedConfigs = res.body;
-          baseTarjetas.forEach(tarjeta => {
-            const config = savedConfigs.find((c: any) => c.Titulo === tarjeta.titulo);
-            if (config) {
-              tarjeta.position = config.Posicion;
-              if (config.ColorDeBorde) {
-                tarjeta.ColorDeBorde = config.ColorDeBorde;
-              }
-            }
-          });
-        }
-        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+  esDimmed(tarjeta: AnyTarjetaConfig): boolean {
+    if (!this.filtro.trim()) return false;
+    return !tarjeta.titulo.toLowerCase().includes(this.filtro.toLowerCase());
+  }
+
+  ngOnInit() {
+    this.datosGlobalesService.filtroDeTarjetas$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(f => this.filtro = f);
+
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerTarjetasDelContenedor`).subscribe({
+      next: (datos: any) => {
+        this.tarjetas = (datos.body ?? []).map((d: any) => this.mapearTarjeta(d));
       },
       error: (error) => {
-        console.error('Error al obtener configuración de tarjetas:', error);
-        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+        console.error('Error al obtener las tarjetas del contenedor:', error);
+        this.tarjetas = [];
       }
     });
   }
 
+  private mapearTarjeta(d: any): AnyTarjetaConfig {
+    const tipoMap: Record<string, AnyTarjetaConfig['type']> = {
+      'Única': 'single',
+      'Múltiple': 'multiple',
+      'Reporte': 'report',
+      'Personalizada': 'custom'
+    };
+
+    const base = {
+      type: tipoMap[d.Tipo] ?? 'single',
+      position: d['Posición'],
+      titulo: d['Título'],
+      descripcion: d['Descripción'],
+      ColorDeBorde: d.ColorDeBorde
+    };
+
+    switch (d.Tipo) {
+      case 'Única':
+        return { ...base, type: 'single', rutaASeguir: d.RutaASeguir ?? '', icono: d['Ícono'] ?? '', cantidad: d.Cantidad, cantidadMaxima: d.CantidadMaxima } as TarjetaConfig;
+      case 'Múltiple':
+        return {
+          ...base, type: 'multiple',
+          rutas: (d.Rutas ?? []).map((r: any) => ({ nombre: r.Nombre, ruta: r.Ruta }))
+        } as TarjetaMultipleConfig;
+      case 'Reporte':
+        return { ...base, type: 'report', reporteAGenerar: d.ReporteAGenerar ?? '', icono: d['Ícono'] ?? '' } as TarjetaReporteConfig;
+      case 'Personalizada':
+        return { ...base, type: 'custom', icono: d['Ícono'] ?? '', etiqueta: d.Etiqueta ?? '', accion: d['Acción'] ?? '' } as TarjetaPersonalizadaConfig;
+      default:
+        return base as any;
+    }
+  }
+
   drop(event: CdkDragDrop<AnyTarjetaConfig[]>) {
     moveItemInArray(this.tarjetas, event.previousIndex, event.currentIndex);
-    // Update positions based on new order
     this.tarjetas.forEach((tarjeta, index) => {
       tarjeta.position = (index + 1) * 10;
     });
@@ -159,6 +155,12 @@ export class ContenedorPrincipalComponent implements OnInit {
     });
   }
 
+  EjecutarAccionPersonalizada(accion: string) {
+    // if (accion === 'DescargarInformacionSociodemografica') {
+    //   this.DescargarInformacionSociodemografica();
+    // }
+  }
+
   GenerarReporte(event: { reporte: string }) {
     if (event.reporte === 'ElReporte1') {
       this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaReporteCSV`, {
@@ -179,10 +181,4 @@ export class ContenedorPrincipalComponent implements OnInit {
       });
     }
   }
-
-  EjecutarAccionPersonalizada(accion: string) {
-    // if (accion === 'DescargarInformacionSociodemografica') {
-    //   this.DescargarInformacionSociodemografica();
-    // }
-  }
-}
+}

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.html

@@ -1,6 +1,17 @@
 <h1>Reportería del módulo</h1>
 <div class="contenido">
   <app-tarjeta-reporte [reporteAGenerar]="'ElReporte1'" titulo="Reporte número uno"
-    descripcion="Acá la descripción de lo que hace el reporte número uno"
-    icono="pie_chart" (GenerarReporte)="GenerarReporte($event)"></app-tarjeta-reporte>
-</div>
+    descripcion="Descarga un CSV con los datos de prueba del módulo." icono="pie_chart" ColorDeBorde="#3498db"
+    (GenerarReporte)="GenerarReporte($event)">
+  </app-tarjeta-reporte>
+
+  <app-tarjeta-reporte [reporteAGenerar]="'ReportePersonasHTML'" titulo="Reporte de personas"
+    descripcion="Abre un reporte HTML con el listado completo de personas registradas en el sistema." icono="people"
+    ColorDeBorde="#2ecc71" (GenerarReporte)="GenerarReporte($event)">
+  </app-tarjeta-reporte>
+
+  <app-tarjeta-reporte [reporteAGenerar]="'ReportePDF'" titulo="Reporte PDF de ejemplo"
+    descripcion="Abre un reporte PDF con el listado completo de personas registradas en el sistema."
+    icono="picture_as_pdf" ColorDeBorde="#e74c3c" (GenerarReporte)="GenerarReporte($event)">
+  </app-tarjeta-reporte>
+</div>

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.ts

@@ -17,20 +17,58 @@ export class GestionDeReportesComponent {
 
   GenerarReporte(event: { reporte: string }) {
     if (event.reporte === 'ElReporte1') {
-      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaReporteCSV`, {
-        responseType: 'text'
-      }).subscribe({
-        next: (datos: any) => {
-          const blob = new Blob([decodeURIComponent(datos)], { type: 'text/csv;charset=utf-8;' });
-          const enlace = document.createElement('a');
-          enlace.href = URL.createObjectURL(blob);
-          enlace.download = 'datos.csv';
-          enlace.click();
-        },
-        error: (error) => {
-          console.error('Problemas al intentar descargar el reporte: ', error);
-        },
-      });
+      this.descargarCSV(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaReporteCSV`, 'datos.csv');
     }
+    if (event.reporte === 'ReportePersonasHTML') {
+      this.abrirReporteHTML(`${this.datosGlobalesService.ObtenerURL()}Personas/reporteHTML`);
+    }
+    if (event.reporte === 'ReportePDF') {
+      this.abrirReportePDF(`${this.datosGlobalesService.ObtenerURL()}Personas/reportePDF`);
+    }
+  }
+
+  private descargarCSV(url: string, nombreArchivo: string): void {
+    this.http.get(url, { responseType: 'text' }).subscribe({
+      next: (datos: any) => {
+        const blob = new Blob([decodeURIComponent(datos)], { type: 'text/csv;charset=utf-8;' });
+        const enlace = document.createElement('a');
+        enlace.href = URL.createObjectURL(blob);
+        enlace.download = nombreArchivo;
+        enlace.click();
+        URL.revokeObjectURL(enlace.href);
+      },
+      error: (error) => {
+        console.error('Problemas al intentar descargar el reporte: ', error);
+      },
+    });
+  }
+
+  private abrirReporteHTML(url: string): void {
+    this.http.get(url, { responseType: 'text' }).subscribe({
+      next: (html: string) => {
+        const nuevaPestana = window.open('', '_blank');
+        if (nuevaPestana) {
+          nuevaPestana.document.write(decodeURI(html));
+          nuevaPestana.document.close();
+        } else {
+          console.error('No se pudo abrir la nueva pestaña. Verifica que no esté bloqueada.');
+        }
+      },
+      error: (error) => {
+        console.error('Problemas al obtener el reporte HTML: ', error);
+      }
+    });
+  }
+
+  private abrirReportePDF(url: string): void {
+    this.http.get(url, { responseType: 'blob' }).subscribe({
+      next: (pdfBlob: Blob) => {
+        const urlBlob = window.URL.createObjectURL(pdfBlob);
+        window.open(urlBlob, '_blank');
+      },
+      error: (error) => {
+        console.error('Problemas al obtener el reporte PDF: ', error);
+      }
+    });
   }
 }

package/templates/frontend/src/app/app.routes.ts

@@ -9,6 +9,10 @@ export const routes: Routes = [
     path: 'Actividad',
     loadComponent: () => import('./Componentes/Nucleo/gestion-actividad/gestion-actividad.component').then(m => m.GestionActividadComponent)
   },
+  {
+    path: 'manual',
+    loadComponent: () => import('./Componentes/Nucleo/manual/manual.component').then(m => m.ManualComponent)
+  },
   {
     path: 'tabla',
     loadComponent: () => import('./Paginas/gestion-tabla/gestion-tabla.component').then(m => m.GestionTablaComponent)

package/templates/frontend/src/app/datos-globales.service.ts

@@ -1,16 +1,19 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DatosGlobalesService {
 
+  readonly filtroDeTarjetas$ = new BehaviorSubject<string>('');
+
   constructor() { }
 
   ObtenerToken() {
     const baseUrl = this.ObtenerURL();
     if (baseUrl === 'http://localhost/') {
-      return 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiIxMiIsImlhdCI6MTc2MzEzMDc0NSwiZXhwIjoxNzYzMTY2NzQ1fQ.0Ferkg8T4bOGmpCR2RWdKxUwzOJr2xuqNBbX502D7vs';
+      return 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiIxMiIsIklkZW50aWZpY2Fkb3IiOiIxMiIsImlhdCI6MTc3Nzk4OTgwOSwiZXhwIjoxNzc4MDI1ODA5fQ.T1kUm7H4hwbapQ3eFok31GVvezkPitdTlJL96MorozY';
     }
     const match = document.cookie.match(/(?:^|;\s*)_siguid=([^;]+)/);
     let token = match ? decodeURIComponent(match[1]) : '';