utn-cli 2.0.78 → 2.0.80

package/package.json

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

package/templates/backend/server.js

@@ -11,7 +11,8 @@ app.use(express.json());
 app.use(helmet());
 app.use(async (solicitud, respuesta, next) => {
   let Usuario = null;
-  if (solicitud.headers.authorization) {
+  // Si length es > a 43 es un JWT, de lo contario es un UUID
+  if (solicitud.headers.authorization.length > 43) {
     Usuario = await Miscelaneo.obtenerDatosDelUsuario(solicitud.headers.authorization) ?? null;
   } else {
     Usuario = solicitud.user ?? null;

package/templates/backend/servicios/Nucleo/Miscelaneas.js

@@ -160,10 +160,10 @@ class Miscelaneo {
     </div>`;
   }
 
-  GenerarReporteHTMLRegistrosVerticales(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = []) {
-    //Ejemplo ElementosParaLaTabla:
+  GenerarReporteHTMLRegistrosVerticales(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = [], MostrarEncabezado = true) {
+    // Ejemplo ElementosParaLaTabla:
     // [
-    //   {
+    //    {
     //     "Fecha del traslado": "16-03-2026",
     //     "Justificacion": "Traslado por mantenimiento",
     //     "Dependencia que entrega": "Juan Pérez",
@@ -192,16 +192,21 @@ class Miscelaneo {
     //     Estado: "Excelente",
     //     IdentificadorOrigen: 101,
     //     IdentificadorDestino: 202
-    //   }
     // ]
-    // Espera un Array 
-    //Ejemplo ParametrosExcluidos:
-    //const ParametrosExcluidos = ['IdentificadorOrigen', 'Justificacion', 'IdentificadorDestino'];
-    //Valores devueltos por el QUERY que no sean necesarios mostrar en la tabla.
+    // Espera un Array de objetos.
+    //
+    // Ejemplo ParametrosExcluidos:
+    // const ParametrosExcluidos = ['IdentificadorOrigen', 'Justificacion', 'IdentificadorDestino'];
+    // Valores devueltos por el QUERY que no sean necesarios mostrar en la tabla.
+    //
+    // Ejemplo ParametrosExtra:
+    // const ParametrosExtra = ['Toma física'];
+    // En caso de necesitar un espacio extra en la tabla que no se encuentra en la lista principal.
+    //
+    // Ejemplo MostrarEncabezado:
+    // MostrarEncabezado = true  (Valor por defecto, muestra la barra azul "Registro N° 1")
+    // MostrarEncabezado = false (Oculta la barra azul, ideal para usar la función con un único registro)
 
-    //Ejemplo ParametrosExtra:
-    //const ParametrosExtra = ['Toma física'];
-    //En caso de necesitar un espacio extra en la tabla que no se encuentra en la lista principal.
     if (!ElementosParaLaTabla?.length) return '<p>No hay datos para mostrar.</p>';
 
     const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
@@ -221,12 +226,16 @@ class Miscelaneo {
         `;
       }).join('');
 
-      htmlFinal += `
-      <div style="margin-top: 20px; page-break-inside: avoid; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
-        
+      const encabezadoHTML = MostrarEncabezado ? `
         <div style="background-color: #002f6b; color: white; padding: 6px 10px; font-weight: bold; font-size: 14px;">
           Registro N° ${index + 1}
         </div>
+      ` : '';
+
+      htmlFinal += `
+      <div style="margin-top: 20px; page-break-inside: avoid; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
+        
+        ${encabezadoHTML}
         
         <table style="border: none; border-radius: 0; margin-top: 0;">
           <tbody>

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta-personalizada/tarjeta-personalizada.component.css

@@ -0,0 +1,133 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.contenedor {
+  width: 100%;
+  /* Ocupa todo el espacio que le dé el padre (cdkDrag) */
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #00000029;
+  border-radius: 10px;
+  opacity: 1;
+  padding: 16px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  /* Asegura que todas las tarjetas tengan la misma altura si se desea */
+  box-sizing: border-box;
+}
+
+/* Eliminamos los media queries antiguos que forzaban anchos en vw */
+
+.contenedor .cabecera_contenedor {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  /* Alinea los elementos al inicio (arriba) */
+  justify-content: space-between;
+  /* Separa el texto del icono */
+  gap: 8px;
+  /* Espacio mínimo entre texto e icono */
+}
+
+.contenedor .cabecera_contenedor .icono {
+  background: #eef2ff 0% 0% no-repeat padding-box;
+  opacity: 1;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  /* Evita que flexbox lo encoja */
+  color: #1b3069;
+  font-size: x-small;
+  font-weight: bold;
+}
+
+.contenedor .cabecera_contenedor .icono .numero {
+  font-size: large;
+}
+
+.contenedor .cabecera {
+  flex: 1;
+  /* Permite que el texto ocupe todo el espacio sobrante */
+  min-width: 0;
+  /* Permite truncar texto si es muy largo en móviles */
+}
+
+.contenedor .cabecera .titulo {
+  text-align: left;
+  font-family: "Roboto";
+  font-size: large;
+  font-weight: 600;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+}
+
+.contenedor .cabecera .descripcion {
+  text-align: left;
+  font-family: "Roboto";
+  font-size: small;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+}
+
+.contenedor .contenido {
+  text-align: left;
+  font-family: "Roboto";
+  font-size: small;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+  margin-left: 3%;
+  margin-top: 5%;
+}
+
+.contenedor .cantidad {
+  min-height: 20px;
+  width: 100%;
+  justify-content: center;
+  font-family: "Roboto";
+  font-size: large;
+  font-weight: 600;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+}
+
+.contenedor .izquierda {
+  margin-top: 20%;
+  align-items: start;
+  color: #1b3069;
+  font-weight: 700;
+}
+
+.contenedor .pie {
+  border-top: 2px solid #eef2ff;
+  opacity: 1;
+  padding: 5%;
+  position: relative;
+}
+
+.contenedor .linea {
+  width: 0%;
+  border: 1px solid #95d03a;
+  opacity: 1;
+}
+
+.contenedor .pie p {
+  text-align: left;
+  font: normal normal normal 15px/20px Roboto;
+  letter-spacing: 0px;
+  color: #1b3069;
+  opacity: 1;
+  font-size: small;
+  text-decoration: none;
+}

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta-personalizada/tarjeta-personalizada.component.html

@@ -0,0 +1,35 @@
+<div class="contenedor" (click)="onClick()" [style.border-left]="ColorDeBorde ? '10px solid ' + ColorDeBorde : ''">
+  <div class="cabecera_contenedor">
+    <div class="cabecera">
+      <p class="titulo">
+        {{ titulo }}
+      </p>
+      <p class="descripcion">
+        {{ descripcion }}
+      </p>
+    </div>
+    <div class="icono">
+      @if(icono){
+      <mat-icon [fontIcon]="icono"></mat-icon>
+      } @if(numero){
+      <p class="numero">{{ numero }}</p>
+      }
+    </div>
+  </div>
+  <div class="contenido">
+    @if(contenido.length>0){ @for(item of contenido[0];track item){
+    <p>{{ item }}</p>
+    }
+    <hr />
+    @for(item of contenido[1];track item){
+    <p>{{ item }}</p>
+    } }
+  </div>
+  <div [class]="cantidadLugar">
+    <p>{{ (cantidadAMostrar !== 0 ? cantidadAMostrar : '') }}</p>
+  </div>
+  <!-- <hr [id]="'porcentaje'+titulo" class="linea" [matTooltip]="'Cantidad: ' + cantidad" matTooltipPosition="above"/>
+  <div class="pie">
+    <p>{{Etiqueta}}</p>
+  </div> -->
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta-personalizada/tarjeta-personalizada.component.ts

@@ -0,0 +1,53 @@
+import { AfterViewInit, Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatIconModule } from "@angular/material/icon";
+import { MatCardModule } from "@angular/material/card";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-tarjeta-personalizada",
+  standalone: true,
+  imports: [MatIconModule, MatCardModule, MatTooltipModule],
+  templateUrl: "./tarjeta-personalizada.component.html",
+  styleUrl: "./tarjeta-personalizada.component.css"
+})
+export class TarjetaPersonalizadaComponent implements AfterViewInit {
+  @Input() titulo: string = "";
+  @Input() descripcion: string = "";
+  @Input() icono: any = null;
+  @Input() numero: any = null;
+  @Input() contenido: any = [];
+  @Input() cantidad: number | undefined;
+  @Input() cantidadLugar: string = "cantidad";
+  @Input() rutaASeguir: string = '';
+  @Input() cantidadMaxima: number | undefined;
+  @Input() cantidadAMostrar: number = 0;
+  @Input() Etiqueta: string = "CONTINUAR";
+  @Input() ColorDeBorde: string = "";
+  @Output() etiquetaClick = new EventEmitter<void>();
+
+  constructor(private ruta: Router) { }
+
+  onClick() {
+    if(this.etiquetaClick!==undefined){
+      this.etiquetaClick.emit();
+      return;
+    }
+    this.ruta.navigate([this.rutaASeguir]);
+  }
+
+  ngOnInit() {
+    this.cantidadAMostrar = (this.cantidadMaxima ? this.cantidadMaxima : 0) - (this.cantidad ? this.cantidad : 0);
+  }
+
+  ngAfterViewInit(): void {
+    if (this.cantidad) {
+      let porcentaje = 100;
+      if (this.cantidadMaxima) {
+        porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
+      }
+      const linea = document.getElementById('porcentaje' + this.titulo) as HTMLHRElement;
+      linea.style.width = `${porcentaje}%`;
+    }
+  }
+}

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

@@ -1,35 +1,31 @@
 <div class="contenido" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)">
   @for (tarjeta of tarjetas; track tarjeta.titulo) {
-    <div cdkDrag>
-      @switch (tarjeta.type) {
-        @case ('single') {
-          <app-tarjeta
-            [rutaASeguir]="tarjeta.rutaASeguir"
-            [titulo]="tarjeta.titulo"
-            [descripcion]="tarjeta.descripcion"
-            [icono]="tarjeta.icono"
-            [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''">
-          </app-tarjeta>
-        }
-        @case ('multiple') {
-          <app-tarjeta-multiple
-            [titulo]="tarjeta.titulo"
-            [descripcion]="tarjeta.descripcion"
-            [rutas]="tarjeta.rutas"
-            [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''">
-          </app-tarjeta-multiple>
-        }
-        @case ('report') {
-          <app-tarjeta-reporte
-            [reporteAGenerar]="tarjeta.reporteAGenerar"
-            [titulo]="tarjeta.titulo"
-            [descripcion]="tarjeta.descripcion"
-            [icono]="tarjeta.icono"
-            [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
-            (GenerarReporte)="GenerarReporte($event)">
-          </app-tarjeta-reporte>
-        }
-      }
-    </div>
+  <div cdkDrag>
+    @switch (tarjeta.type) {
+    @case ('single') {
+    <app-tarjeta [rutaASeguir]="tarjeta.rutaASeguir" [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion"
+      [icono]="tarjeta.icono" [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
+      [cantidad]="tarjeta.cantidad ?? 0" [cantidadMaxima]="tarjeta.cantidadMaxima ?? 0">>
+    </app-tarjeta>
+    }
+    @case ('multiple') {
+    <app-tarjeta-multiple [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion" [rutas]="tarjeta.rutas"
+      [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''">
+    </app-tarjeta-multiple>
+    }
+    @case ('report') {
+    <app-tarjeta-reporte [reporteAGenerar]="tarjeta.reporteAGenerar" [titulo]="tarjeta.titulo"
+      [descripcion]="tarjeta.descripcion" [icono]="tarjeta.icono"
+      [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''" (GenerarReporte)="GenerarReporte($event)">
+    </app-tarjeta-reporte>
+    }
+    @case ('custom') {
+    <app-tarjeta-personalizada [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion" [icono]="tarjeta.icono"
+      [Etiqueta]="tarjeta.etiqueta" [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
+      (etiquetaClick)="EjecutarAccionPersonalizada(tarjeta.accion)">
+    </app-tarjeta-personalizada>
+    }
+    }
+  </div>
   }
 </div>

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

@@ -1,18 +1,19 @@
 import { Component, OnInit } from "@angular/core";
-import { CommonModule } from "@angular/common"; 
+import { CommonModule } from "@angular/common";
 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";
+import { TarjetaPersonalizadaComponent } from "../../Componentes/Nucleo/tarjeta-personalizada/tarjeta-personalizada.component";
 import { HttpClient } from "@angular/common/http";
 import { DatosGlobalesService } from '../../datos-globales.service';
 import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 interface BaseTarjetaConfig {
-  type: 'single' | 'multiple' | 'report';
+  type: 'single' | 'multiple' | 'report' | 'custom';
   position: number;
   titulo: string;
   descripcion: string;
-  acceso?: boolean; 
+  acceso?: boolean;
   ColorDeBorde?: string;
 }
 
@@ -20,6 +21,8 @@ interface TarjetaConfig extends BaseTarjetaConfig {
   type: 'single';
   rutaASeguir: string;
   icono: string;
+  cantidad?: number;
+  cantidadMaxima?: number;
 }
 
 interface RutaMenuItem {
@@ -38,12 +41,19 @@ interface TarjetaReporteConfig extends BaseTarjetaConfig {
   icono: string;
 }
 
-type AnyTarjetaConfig = TarjetaConfig | TarjetaMultipleConfig | TarjetaReporteConfig;
+interface TarjetaPersonalizadaConfig extends BaseTarjetaConfig {
+  type: 'custom';
+  icono: string;
+  etiqueta: string;
+  accion: string;
+}
+
+type AnyTarjetaConfig = TarjetaConfig | TarjetaMultipleConfig | TarjetaReporteConfig | TarjetaPersonalizadaConfig;
 
 @Component({
   selector: "app-contenedor-principal",
   standalone: true,
-  imports: [TarjetaComponent, TarjetaMultipleComponent, TarjetaReporteComponent, CommonModule, DragDropModule],
+  imports: [TarjetaComponent, TarjetaMultipleComponent, TarjetaReporteComponent, TarjetaPersonalizadaComponent, CommonModule, DragDropModule],
   templateUrl: "./contenedor-principal.component.html",
   styleUrl: "./contenedor-principal.component.css"
 })
@@ -185,53 +195,52 @@ export class ContenedorPrincipalComponent implements OnInit {
       }
     ];
 
-    // 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);
-        }
-        
-        // 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;
-                  }
-                }
-              });
+    // // 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);
-          },
-          error: (error) => {
-            console.error('Error al obtener configuración de tarjetas:', error);
-            this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
-          }
-        });
+          });
+        }
+        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
       },
       error: (error) => {
-        console.error('Problemas al intentar obtener los datos: ', error);
+        console.error('Error al obtener configuración de tarjetas:', error);
         this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
-      },
+      }
     });
   }