utn-cli 2.1.1 → 2.1.3

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

@@ -1,11 +1,13 @@
-import { Component, ElementRef, inject, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
+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 { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { MatIconModule } from '@angular/material/icon';
 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';
 
 @Component({
   selector: 'app-subir-archivo',
@@ -13,14 +15,16 @@ import { MatDialog } from '@angular/material/dialog';
   templateUrl: './subir-archivo.component.html',
   styleUrl: './subir-archivo.component.css'
 })
-export class SubirArchivoComponent implements OnInit {
+export class SubirArchivoComponent implements OnInit, OnDestroy {
   readonly dialogRef = inject(MatDialogRef<SubirArchivoComponent>);
   Archivo: any;
   ListaArchivos: any[] = []
   HaCargadoArchivos: boolean = false;
   CantidadMaximaDeArchivos: number = 99;
+  private _destroy$ = new Subject<void>();
   @Output() HaCargadoArchivosChange = new EventEmitter<boolean>();
   @ViewChild('EntradaDeArchivo') EntradaDeArchivo!: ElementRef<HTMLInputElement>;
+  @ViewChild('descargaLink') descargaLinkRef!: ElementRef<HTMLAnchorElement>;
   readonly data = inject(MAT_DIALOG_DATA);
   Permiso = '--Permiso=' + this.data.Permiso;
   Etiqueta = this.data.Etiqueta + this.Permiso;
@@ -185,6 +189,7 @@ export class SubirArchivoComponent implements OnInit {
   CargarArchivo(archivo: any, Etiqueta: string) {
     this.http.post(this.datosGlobalesService.ObtenerURL() + this.RutaParaCargar + Etiqueta,
       archivo)
+      .pipe(takeUntil(this._destroy$))
       .subscribe({
         next: (data: any) => {
           this.Archivo = undefined;
@@ -199,6 +204,7 @@ export class SubirArchivoComponent implements OnInit {
 
   ListarArchivos(Etiqueta: string) {
     this.http.get(this.datosGlobalesService.ObtenerURL() + this.RutaParaListar + Etiqueta)
+      .pipe(takeUntil(this._destroy$))
       .subscribe({
         next: (data: any) => {
           this.ListaArchivos = data.body;
@@ -214,19 +220,20 @@ export class SubirArchivoComponent implements OnInit {
   DescargarArchivo(ArchivoId: string, Nombre: string) {
     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 = document.createElement('a');
+        const a = this.descargaLinkRef.nativeElement;
         a.href = url;
         a.download = Nombre;
-        document.body.appendChild(a);
         a.click();
-        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
       })
   }
 
   BorrarArchivo(ArchivoId: string) {
     this.http.delete(this.datosGlobalesService.ObtenerURL() + 'misc/borrarArchivo/' + ArchivoId)
+      .pipe(takeUntil(this._destroy$))
       .subscribe({
         next: (data: any) => {
           this.MetaDatosDelArchivoCargado = null;
@@ -238,6 +245,11 @@ export class SubirArchivoComponent implements OnInit {
       })
   }
 
+  ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
   Cancelar() {
     this.dialogRef.close(this.MetaDatosDelArchivoCargado);
   }

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

@@ -28,8 +28,8 @@
   <div [class]="cantidadLugar">
     <p>{{ (cantidadAMostrar !== 0 ? cantidadAMostrar : '') }}</p>
   </div>
-  @if(cantidad > 0) {
-  <hr [id]="'porcentaje'+titulo" class="linea" [matTooltip]="'Cantidad: ' + cantidad" matTooltipPosition="above" />
+  @if(cantidadMaxima && cantidadMaxima > 0) {
+  <hr #lineaRef class="linea" [matTooltip]="cantidad + ' / ' + cantidadMaxima" matTooltipPosition="above" />
   }
   <!-- <div class="pie">
     <p>CONTINUAR</p>

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { MatTooltipModule } from "@angular/material/tooltip";
@@ -21,8 +21,12 @@ export class TarjetaComponent implements AfterViewInit {
   @Input() cantidadLugar: string = "cantidad";
   @Input() rutaASeguir: string = '';
   @Input() cantidadMaxima: number | undefined;
-  @Input() cantidadAMostrar: number = 0;
   @Input() ColorDeBorde: string = '';
+  @ViewChild('lineaRef') lineaRef?: ElementRef<HTMLHRElement>;
+
+  get cantidadAMostrar(): number {
+    return (this.cantidadMaxima ?? 0) - (this.cantidad ?? 0);
+  }
 
   constructor(private ruta: Router) { }
 
@@ -30,18 +34,10 @@ export class TarjetaComponent implements AfterViewInit {
     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}%`;
+    if (this.cantidadMaxima && this.cantidadMaxima > 0) {
+      const porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
+      if (this.lineaRef?.nativeElement) this.lineaRef.nativeElement.style.width = `${porcentaje}%`;
     }
   }
 }

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, Output } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
 import { MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { MatTooltipModule } from "@angular/material/tooltip";
@@ -11,7 +11,7 @@ import { Router } from "@angular/router";
   templateUrl: "./tarjeta-personalizada.component.html",
   styleUrl: "./tarjeta-personalizada.component.css"
 })
-export class TarjetaPersonalizadaComponent implements AfterViewInit {
+export class TarjetaPersonalizadaComponent implements OnInit, AfterViewInit {
   @Input() titulo: string = "";
   @Input() descripcion: string = "";
   @Input() icono: any = null;
@@ -25,15 +25,12 @@ export class TarjetaPersonalizadaComponent implements AfterViewInit {
   @Input() Etiqueta: string = "CONTINUAR";
   @Input() ColorDeBorde: string = "";
   @Output() etiquetaClick = new EventEmitter<void>();
+  @ViewChild('porcentajeRef') porcentajeRef?: ElementRef<HTMLHRElement>;
 
   constructor(private ruta: Router) { }
 
   onClick() {
-    if(this.etiquetaClick!==undefined){
-      this.etiquetaClick.emit();
-      return;
-    }
-    this.ruta.navigate([this.rutaASeguir]);
+    this.etiquetaClick.emit();
   }
 
   ngOnInit() {
@@ -46,8 +43,9 @@ export class TarjetaPersonalizadaComponent implements AfterViewInit {
       if (this.cantidadMaxima) {
         porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
       }
-      const linea = document.getElementById('porcentaje' + this.titulo) as HTMLHRElement;
-      linea.style.width = `${porcentaje}%`;
+      if (this.porcentajeRef?.nativeElement) {
+        this.porcentajeRef.nativeElement.style.width = `${porcentaje}%`;
+      }
     }
   }
 }

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

@@ -15,12 +15,7 @@ export class TarjetaReporteComponent {
   @Input() ColorDeBorde: string = '';
   @Output() GenerarReporte: EventEmitter<{ reporte: string }> = new EventEmitter();
 
-  constructor() { }
-
   onClick() {
-    this.GenerarReporte.emit({reporte: this.reporteAGenerar});
-  }
-
-  ngOnInit() {
+    this.GenerarReporte.emit({ reporte: this.reporteAGenerar });
   }
 }

package/templates/frontend/src/app/Paginas/Nucleo/contenedor-componentes/contenedor-componentes.component.css

@@ -2,6 +2,15 @@
 .cabecera2 {
   width: 100%;
   border-bottom: 1px solid #707070;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.cabecera2-info {
+  flex: 1;
+  min-width: 0;
 }
 
 .cabecera2 p {
@@ -9,6 +18,7 @@
   font-family: "Roboto";
   letter-spacing: 0;
   color: #000;
+  margin: 0;
 }
 
 .cabecera2 .titulo2 {
@@ -20,6 +30,68 @@
   font-size: small;
 }
 
+/* Filtro de tarjetas */
+.filtro-tarjetas {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #f0f4f8;
+  border: 1px solid #c4d0de;
+  border-radius: 8px;
+  padding: 4px 8px;
+  flex-shrink: 0;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.filtro-tarjetas:focus-within {
+  border-color: #1976d2;
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+}
+
+.filtro-icono {
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+  color: #6b7c8f;
+  flex-shrink: 0;
+}
+
+.filtro-input {
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+  color: #333;
+  width: 180px;
+}
+
+.filtro-input::placeholder {
+  color: #a0aab4;
+}
+
+.filtro-limpiar {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  color: #6b7c8f;
+  transition: color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.filtro-limpiar mat-icon {
+  font-size: 16px !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.filtro-limpiar:hover {
+  color: #c0392b;
+}
+
 /* Botones */
 .botonesDeNavegacion {
   padding: 10px;

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

@@ -66,8 +66,23 @@
       <div class="contenido">
         @if(TienePermiso){
         <div class="cabecera2">
-          <p class="titulo2">{{ Descripcion }}</p>
-          <p class="descripcion2">{{ Detalle }}</p>
+          <div class="cabecera2-info">
+            <p class="titulo2">{{ Descripcion }}</p>
+            <p class="descripcion2">{{ Detalle }}</p>
+          </div>
+          @if (esDashboard) {
+          <div class="filtro-tarjetas">
+            <mat-icon class="filtro-icono">search</mat-icon>
+            <input class="filtro-input" type="text" placeholder="Buscar tarjeta..." [value]="filtro"
+              (input)="onFiltroChange($event)" aria-label="Buscar tarjeta por nombre" />
+            @if (filtro) {
+            <button class="filtro-limpiar" (click)="limpiarFiltro()" title="Limpiar búsqueda"
+              aria-label="Limpiar búsqueda">
+              <mat-icon>close</mat-icon>
+            </button>
+            }
+          </div>
+          }
         </div>
         <ng-content><router-outlet /></ng-content>
         }@else{
@@ -132,11 +147,9 @@
         <mat-icon>live_tv</mat-icon>
       </button>
       }
-      @if(EnlaceDelManual !== '-') {
       <button class="botonDeNavegacion" matTooltip="Ayuda" title="Ayuda" (click)="irAAyuda()">
         <mat-icon>help</mat-icon>
       </button>
-      }
       <button class="botonDeNavegacion" matTooltip="Reporte" title="Reporte" (click)="irASoporte()">
         <mat-icon>support_agent</mat-icon>
       </button>

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

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { RouterOutlet, Router } from '@angular/router';
 import { DatosGlobalesService } from '../../../datos-globales.service';
@@ -37,6 +37,17 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
   public AnimarUsuariosActivos: boolean = true;
   private intervaloUsuarios: any;
 
+  get esDashboard(): boolean { return this.router.url === '/'; }
+  get filtro(): string { return this.datosGlobalesService.filtroDeTarjetas$.value; }
+
+  onFiltroChange(event: Event): void {
+    this.datosGlobalesService.filtroDeTarjetas$.next((event.target as HTMLInputElement).value);
+  }
+
+  limpiarFiltro(): void {
+    this.datosGlobalesService.filtroDeTarjetas$.next('');
+  }
+
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private location: Location, private dialog: MatDialog, private router: Router, private ngZone: NgZone) {
     if (datosGlobalesService.ObtenerToken() === '') {
       datosGlobalesService.RedirigirALogin();
@@ -65,73 +76,57 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
       }, 60000);
     });
 
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/validarToken').subscribe((datos: any) => {
-      this.TienePermiso = datos.body;
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/inicializar').subscribe((datos: any) => {
+      const body = datos.body;
+
+      this.TienePermiso = body.TienePermiso;
       if (!this.TienePermiso) {
         this.Entrar();
+        return;
       }
-      this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/configurarFrontend').subscribe((datos: any) => {
-        this.Titulo = datos.body.Titulo;
-        this.Modulo = datos.body.Modulo;
-        this.Version = datos.body.Version;
-        this.Descripcion = datos.body.Descripcion;
-        this.Detalle = datos.body.Detalle;
-        this.NombreUsuario = datos.body.NombreUsuario || 'Perfil';
-      })
-      this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerNotificaciones', {
-        headers: new HttpHeaders({
-          Authorization: this.datosGlobalesService.ObtenerToken(),
-          'Content-Type': 'application/json'
-        })
-      }).subscribe((datos: any) => {
-        this.Mensajes = datos.body;
-      })
-    });
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerDetalleDelModulo').subscribe((datos: any) => {
-      this.EnlaceDelManual = datos.body[0].EnlaceDelManual;
-      this.EnlaceDelVideo = datos.body[0].EnlaceDelVideo;
-    });
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'ConsentimientoInformado/ConsentimientoInformado').subscribe((datos: any) => {
-      if (datos.body.Aceptaciones === 0) {
-        const ConsentimientoInformadoId = datos.body.Consentimiento[0].ConsentimientoInformadoId;
+
+      this.Titulo = body.Titulo;
+      this.Modulo = body.Modulo;
+      this.Version = body.Version;
+      this.Descripcion = body.Descripcion;
+      this.Detalle = body.Detalle;
+      this.NombreUsuario = body.NombreUsuario || 'Perfil';
+      this.EnlaceDelManual = body.EnlaceDelManual;
+      this.EnlaceDelVideo = body.EnlaceDelVideo;
+      this.Mensajes = body.Notificaciones;
+
+      if (body.Consentimiento?.Aceptaciones === 0) {
+        const ConsentimientoInformadoId = body.Consentimiento.Consentimiento[0].ConsentimientoInformadoId;
         this.dialog.open(MensajeConfirmacionHTMLComponent, {
           data: {
-            titulo: datos.body.Consentimiento[0].Titulo,
-            mensaje: datos.body.Consentimiento[0].Texto,
+            titulo: body.Consentimiento.Consentimiento[0].Titulo,
+            mensaje: body.Consentimiento.Consentimiento[0].Texto,
             textoCerrar: 'Cancelar',
             textoAceptar: 'Aceptar',
             onClose: () => { this.datosGlobalesService.RedirigirAPortal() },
             onAccept: () => {
-              this.http.post(`${this.datosGlobalesService.ObtenerURL()}ConsentimientoInformado/AceptarConsentimientoInformado`
-                , { ConsentimientoInformadoId })
-                .subscribe({
-                  next: (datos: any) => {
-                    // this.obtenerDatosParaPoblarLaTabla();
-                  },
-                  error: (error) => {
-                    this.datosGlobalesService.RedirigirAPortal();
-                  },
+              this.http.post(`${this.datosGlobalesService.ObtenerURL()}ConsentimientoInformado/AceptarConsentimientoInformado`,
+                { ConsentimientoInformadoId }).subscribe({
+                  error: () => { this.datosGlobalesService.RedirigirAPortal(); }
                 });
             },
           },
         });
       }
-    });
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerMensajesModulares').subscribe((datos: any) => {
-      let mensajesVisualizados = this.obtenerMensajesModularesVisualizados();
-      for (let contador = 0; contador < datos.body.length; contador++) {
-        const index = mensajesVisualizados.indexOf(datos.body[contador]['MensajeModularId']);
-        if (index === -1) {
+
+      const mensajesVisualizados = this.obtenerMensajesModularesVisualizados();
+      for (let i = 0; i < body.MensajesModulares.length; i++) {
+        if (!mensajesVisualizados.includes(body.MensajesModulares[i]['MensajeModularId'])) {
           this.dialog.open(MensajeConfirmacionHTMLComponent, {
             data: {
-              titulo: datos.body[contador]['Titulo'],
-              mensaje: datos.body[contador]['Texto'],
+              titulo: body.MensajesModulares[i]['Titulo'],
+              mensaje: body.MensajesModulares[i]['Texto'],
               textoAceptar: 'Cerrar',
               onClose: () => { },
               onAccept: () => {
-                let mensajesVisualizados = this.obtenerMensajesModularesVisualizados();
-                mensajesVisualizados.push(datos.body[contador]['MensajeModularId']);
-                localStorage.setItem('MensajesModularesVisualizados', JSON.stringify(mensajesVisualizados));
+                const vistos = this.obtenerMensajesModularesVisualizados();
+                vistos.push(body.MensajesModulares[i]['MensajeModularId']);
+                localStorage.setItem('MensajesModularesVisualizados', JSON.stringify(vistos));
               },
             },
           });
@@ -171,14 +166,7 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
   }
 
   irAAyuda(): void {
-    window.open(this.EnlaceDelManual, '_blank', 'noopener,noreferrer');
-    // const link = document.createElement('a');
-    // link.href = 'assets/Ayuda.pdf';
-    // link.setAttribute('download', 'Ayuda.pdf');
-    // link.setAttribute('target', '_blank');
-    // document.body.appendChild(link);
-    // link.click();
-    // document.body.removeChild(link);
+    this.router.navigate(['/manual']);
   }
 
   irAVideo(): void {

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

@@ -14,6 +14,17 @@
   box-sizing: border-box;
 }
 
+.tarjeta-opaca {
+  opacity: 0.15;
+  filter: grayscale(50%);
+  transition: opacity 0.25s ease, filter 0.25s ease;
+  pointer-events: none;
+}
+
+.contenido>div[cdkDrag] {
+  transition: opacity 0.25s ease, filter 0.25s ease;
+}
+
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 8px;

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

@@ -1,11 +1,11 @@
 <div class="contenido" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)">
   @for (tarjeta of tarjetas; track tarjeta.titulo) {
-  <div cdkDrag>
+  <div cdkDrag [class.tarjeta-opaca]="esDimmed(tarjeta)">
     @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 [rutaASeguir]="$any(tarjeta).rutaASeguir" [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion"
+      [icono]="$any(tarjeta).icono" [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
+      [cantidad]="$any(tarjeta).cantidad ?? 0" [cantidadMaxima]="$any(tarjeta).cantidadMaxima ?? 0">
     </app-tarjeta>
     }
     @case ('multiple') {