utn-cli 2.0.60 → 2.0.62

package/package.json

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

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.css

@@ -10,7 +10,7 @@
   border-radius: 12px;
   margin-bottom: 20px;
   border: 1px solid #e0e6ed;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   text-align: left;
 }
 
@@ -80,7 +80,7 @@
   border: 1px solid #e0e6ed;
   border-radius: 12px;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   text-align: left;
 }
 
@@ -110,37 +110,17 @@
 }
 
 /* Colores por método */
-.metodo-get {
-  color: #0069B4;
-  background-color: #e3f2fd;
-}
-
-.metodo-post {
-  color: #518a5f;
-  background-color: #e8f5e9;
-}
-
-.metodo-put {
-  color: #FFA757;
-  background-color: #fff3e0;
-}
-
-.metodo-delete {
-  color: #F82617;
-  background-color: #ffebee;
-}
-
-.metodo-default {
-  color: #7d7d7d;
-  background-color: #f5f5f5;
-}
+.metodo-get { color: #0069B4; background-color: #e3f2fd; }
+.metodo-post { color: #518a5f; background-color: #e8f5e9; }
+.metodo-put { color: #FFA757; background-color: #fff3e0; }
+.metodo-delete { color: #F82617; background-color: #ffebee; }
+.metodo-default { color: #7d7d7d; background-color: #f5f5f5; }
 
 .item-contenido {
   flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  /* Evita que el flex desborde */
+  min-width: 0; /* Evita que el flex desborde */
 }
 
 .item-titulo {
@@ -188,21 +168,10 @@
   height: 14px;
 }
 
-.detalle-dispositivo mat-icon {
-  color: #673ab7;
-}
-
-.detalle-browser mat-icon {
-  color: #5f6368;
-}
-
-.detalle-ip mat-icon {
-  color: #0069B4;
-}
-
-.detalle-pais mat-icon {
-  color: #F87600;
-}
+.detalle-dispositivo mat-icon { color: #673ab7; }
+.detalle-browser mat-icon { color: #5f6368; }
+.detalle-ip mat-icon { color: #0069B4; }
+.detalle-pais mat-icon { color: #F87600; }
 
 .item-fecha {
   font-size: 11px;
@@ -227,14 +196,14 @@ mat-progress-bar {
     flex-direction: column;
     align-items: flex-start;
   }
-
+  
   .item-icono {
     margin-bottom: 12px;
   }
-
+  
   .item-fecha {
     margin-left: 0;
     margin-top: 12px;
     align-items: flex-start;
   }
-}
+}

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.html

@@ -2,59 +2,57 @@
   <div class="header-actividad">
     <h2><mat-icon>history</mat-icon> Actividad reciente de la cuenta</h2>
     <p>Historial de acciones realizadas en el sistema</p>
-
+    
     <div class="mensaje-informativo">
       <mat-icon>info</mat-icon>
-      <p>Si tiene dudas sobre la información que ve en pantalla, por favor comparta una captura de pantalla al correo
-        <strong>soporte@utn.ac.cr</strong>.</p>
+      <p>Si tiene dudas sobre la información que ve en pantalla, por favor comparta una captura de pantalla al correo <strong>soporte@utn.ac.cr</strong>.</p>
     </div>
   </div>
 
   @if(cargando){
-  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   }
-
+  
   <div class="lista-actividad">
     @if(actividad.length === 0 && !cargando) {
-    <p class="sin-datos">No hay actividad reciente.</p>
+      <p class="sin-datos">No hay actividad reciente.</p>
     }
 
     @for (item of actividad; track item.Consecutivo) {
-    <div class="actividad-item">
-      <div class="item-icono" [ngClass]="{
+      <div class="actividad-item">
+        <div class="item-icono" [ngClass]="{
           'metodo-get': item.Metodo === 'GET',
           'metodo-post': item.Metodo === 'POST',
           'metodo-put': item.Metodo === 'PUT',
           'metodo-delete': item.Metodo === 'DELETE'
         }">
-        <mat-icon [matTooltip]="item.Metodo">{{ getIcon(item.Metodo) }}</mat-icon>
-      </div>
-      <div class="item-contenido">
-        <div class="item-titulo">
-          {{ item.URL }}
-          @if(esSesionActual(item.Token)){
-          <span class="badge-sesion-actual">Sesión actual</span>
-          }
+          <mat-icon [matTooltip]="item.Metodo">{{ getIcon(item.Metodo) }}</mat-icon>
         </div>
-        <div class="item-detalles">
-          <span class="detalle-dispositivo">
-            <mat-icon>{{ item.Dispositivo === 'Móvil' ? 'smartphone' : (item.Dispositivo === 'Tablet' ? 'tablet' :
-              'laptop') }}</mat-icon>
-            {{ item.Dispositivo }}
-          </span>
-          <span class="detalle-browser"><mat-icon>public</mat-icon> {{ item.Navegador }}</span>
-          <span class="detalle-ip"><mat-icon>lan</mat-icon> {{ item.IP }}</span>
-          <span class="detalle-pais"><mat-icon>location_on</mat-icon> {{ item.Pais }}</span>
+        <div class="item-contenido">
+          <div class="item-titulo">
+            {{ item.URL }}
+            @if(esSesionActual(item.Token)){
+              <span class="badge-sesion-actual">Sesión actual</span>
+            }
+          </div>
+          <div class="item-detalles">
+            <span class="detalle-dispositivo">
+              <mat-icon>{{ item.Dispositivo === 'Móvil' ? 'smartphone' : (item.Dispositivo === 'Tablet' ? 'tablet' : 'laptop') }}</mat-icon>
+              {{ item.Dispositivo }}
+            </span>
+            <span class="detalle-browser"><mat-icon>public</mat-icon> {{ item.Navegador }}</span>
+            <span class="detalle-ip"><mat-icon>lan</mat-icon> {{ item.IP }}</span>
+            <span class="detalle-pais"><mat-icon>location_on</mat-icon> {{ item.Pais }}</span>
+          </div>
+        </div>
+        <div class="item-fecha">
+          <span>{{ item.Fecha | date: 'dd/MM/yyyy' }}</span>
+          <strong>{{ item.Fecha | date: 'HH:mm:ss' }}</strong>
+          <button mat-icon-button color="warn" matTooltip="Cerrar esta sesión" (click)="cerrarSesion(item.Token)">
+            <mat-icon>logout</mat-icon>
+          </button>
         </div>
       </div>
-      <div class="item-fecha">
-        <span>{{ item.Fecha | date: 'dd/MM/yyyy' }}</span>
-        <strong>{{ item.Fecha | date: 'HH:mm:ss' }}</strong>
-        <button mat-icon-button color="warn" matTooltip="Cerrar esta sesión" (click)="cerrarSesion(item.Token)">
-          <mat-icon>logout</mat-icon>
-        </button>
-      </div>
-    </div>
     }
   </div>
-</div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.ts

@@ -5,6 +5,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MensajeConfirmacionComponent } from '../mensaje-confirmacion/mensaje-confirmacion';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 
 @Component({
@@ -19,7 +21,7 @@ export class GestionActividadComponent implements OnInit {
   public cargando = false;
   private tokenActual = '';
 
-  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private dialog: MatDialog) { }
 
   ngOnInit(): void {
     this.tokenActual = this.datosGlobalesService.ObtenerToken().split(' ')[1] || '';
@@ -43,23 +45,32 @@ export class GestionActividadComponent implements OnInit {
   }
 
   cerrarSesion(token: string): void {
-    if (confirm('¿Está seguro de que desea cerrar esta sesión?')) {
-      this.http.delete(`${this.datosGlobalesService.ObtenerURL()}misc/cerrarSesionPorToken/${token}`).subscribe({
-        next: () => {
-          if (token === this.tokenActual) {
-            this.datosGlobalesService.RedirigirALogin();
-          } else {
-            this.obtenerActividad();
-          }
+    this.dialog.open(MensajeConfirmacionComponent, {
+      data: {
+        titulo: 'Confirmación',
+        mensaje: '¿Está seguro de que desea cerrar esta sesión?',
+        textoCerrar: 'Cancelar',
+        textoAceptar: 'Cerrar sesión',
+        onClose: () => { },
+        onAccept: () => {
+          this.http.delete(`${this.datosGlobalesService.ObtenerURL()}misc/cerrarSesionPorToken/${token}`).subscribe({
+            next: () => {
+              if (token === this.tokenActual) {
+                this.datosGlobalesService.RedirigirALogin();
+              } else {
+                this.obtenerActividad();
+              }
+            },
+            error: (error) => {
+              console.error('Error al cerrar sesión:', error);
+            }
+          });
         },
-        error: (error) => {
-          console.error('Error al cerrar sesión:', error);
-        }
-      });
-    }
+      },
+    });
   }
-
   esSesionActual(token: string): boolean {
+
     return token === this.tokenActual;
   }
 

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.component.css

@@ -1,240 +1,5 @@
-.contenedor-actividad {
-  background-color: transparent;
-  margin: 0;
-  padding: 10px;
-}
-
-.header-actividad {
-  background-color: white;
-  padding: 20px 24px;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  border: 1px solid #e0e6ed;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  text-align: left;
-}
-
-.header-actividad h2 {
-  margin: 0;
-  color: #002f6b;
-  font-size: 1.5rem;
-  font-weight: 700;
+.mensaje {
+  margin-top: 1%;
   display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-actividad h2 mat-icon {
-  font-size: 28px;
-  width: 28px;
-  height: 28px;
-  color: #0b4fce;
-}
-
-.header-actividad p {
-  margin: 8px 0 0 0;
-  color: #5f6368;
-  font-size: 0.95rem;
-}
-
-.mensaje-informativo {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background-color: #e3f2fd;
-  border-left: 4px solid #1976d2;
-  padding: 12px 16px;
-  margin-top: 20px;
-  border-radius: 4px;
-}
-
-.mensaje-informativo mat-icon {
-  color: #1976d2;
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-}
-
-.mensaje-informativo p {
-  margin: 0 !important;
-  font-size: 13.5px !important;
-  color: #0d47a1 !important;
-  line-height: 1.4;
-}
-
-.mensaje-informativo strong {
-  color: #d32f2f;
-}
-
-.lista-actividad {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.actividad-item {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  background-color: white;
-  border: 1px solid #e0e6ed;
-  border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  text-align: left;
-}
-
-.actividad-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: #0b4fce;
-  background-color: #f0f7ff;
-}
-
-.item-icono {
-  margin-right: 12px;
-  display: flex;
-  align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: #f1f3f4;
-  flex-shrink: 0;
-}
-
-.item-icono mat-icon {
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-}
-
-/* Colores por método */
-.metodo-get {
-  color: #0069B4;
-  background-color: #e3f2fd;
-}
-
-.metodo-post {
-  color: #518a5f;
-  background-color: #e8f5e9;
-}
-
-.metodo-put {
-  color: #FFA757;
-  background-color: #fff3e0;
-}
-
-.metodo-delete {
-  color: #F82617;
-  background-color: #ffebee;
-}
-
-.metodo-default {
-  color: #7d7d7d;
-  background-color: #f5f5f5;
-}
-
-.item-contenido {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  /* Evita que el flex desborde */
-}
-
-.item-titulo {
-  font-size: 14px;
-  color: #002f6b;
-  font-weight: 600;
-  word-break: break-all;
-  margin-bottom: 2px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.badge-sesion-actual {
-  background-color: #e8f5e9;
-  color: #2e7d32;
-  font-size: 10px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  border: 1px solid #c8e6c9;
-  text-transform: uppercase;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.item-detalles {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  font-size: 12px;
-  color: #5f6368;
-}
-
-.item-detalles span {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  white-space: nowrap;
-}
-
-.item-detalles mat-icon {
-  font-size: 14px;
-  width: 14px;
-  height: 14px;
-}
-
-.detalle-dispositivo mat-icon {
-  color: #673ab7;
-}
-
-.detalle-browser mat-icon {
-  color: #5f6368;
-}
-
-.detalle-ip mat-icon {
-  color: #0069B4;
-}
-
-.detalle-pais mat-icon {
-  color: #F87600;
-}
-
-.item-fecha {
-  font-size: 11px;
-  color: #9aa0a6;
-  white-space: nowrap;
-  margin-left: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  font-family: 'Roboto Mono', monospace;
-  flex-shrink: 0;
-}
-
-mat-progress-bar {
-  height: 4px;
-  border-radius: 2px;
-  margin-bottom: 10px;
-}
-
-@media (max-width: 600px) {
-  .actividad-item {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .item-icono {
-    margin-bottom: 12px;
-  }
-
-  .item-fecha {
-    margin-left: 0;
-    margin-top: 12px;
-    align-items: flex-start;
-  }
 }

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.component.html

@@ -1,60 +1,23 @@
-<div class="contenedor-actividad">
-  <div class="header-actividad">
-    <h2><mat-icon>history</mat-icon> Actividad reciente de la cuenta</h2>
-    <p>Historial de acciones realizadas en el sistema</p>
+<h3 mat-dialog-title>{{ data.titulo }}</h3>
 
-    <div class="mensaje-informativo">
-      <mat-icon>info</mat-icon>
-      <p>Si tiene dudas sobre la información que ve en pantalla, por favor comparta una captura de pantalla al correo
-        <strong>soporte@utn.ac.cr</strong>.</p>
-    </div>
-  </div>
-
-  @if(cargando){
-  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+<mat-dialog-content>
+  <p>{{ data.mensaje }}</p>
+  @if(SolicitaMensaje){
+  <mat-form-field class="mensaje">
+    <mat-label>Agregar comentario</mat-label>
+    <textarea matInput placeholder="Explicación del motivo de aprobación o rechazo"
+      [(ngModel)]="MensajeBrindado"></textarea>
+  </mat-form-field>
   }
 
-  <div class="lista-actividad">
-    @if(actividad.length === 0 && !cargando) {
-    <p class="sin-datos">No hay actividad reciente.</p>
-    }
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  @if(data.textoCerrar){
+  <button mat-button (click)="onClose()">{{ data.textoCerrar }}</button>
+  }
 
-    @for (item of actividad; track item.Consecutivo) {
-    <div class="actividad-item">
-      <div class="item-icono" [ngClass]="{
-          'metodo-get': item.Metodo === 'GET',
-          'metodo-post': item.Metodo === 'POST',
-          'metodo-put': item.Metodo === 'PUT',
-          'metodo-delete': item.Metodo === 'DELETE'
-        }">
-        <mat-icon [matTooltip]="item.Metodo">{{ getIcon(item.Metodo) }}</mat-icon>
-      </div>
-      <div class="item-contenido">
-        <div class="item-titulo">
-          {{ item.URL }}
-          @if(esSesionActual(item.Token)){
-          <span class="badge-sesion-actual">Sesión actual</span>
-          }
-        </div>
-        <div class="item-detalles">
-          <span class="detalle-dispositivo">
-            <mat-icon>{{ item.Dispositivo === 'Móvil' ? 'smartphone' : (item.Dispositivo === 'Tablet' ? 'tablet' :
-              'laptop') }}</mat-icon>
-            {{ item.Dispositivo }}
-          </span>
-          <span class="detalle-browser"><mat-icon>public</mat-icon> {{ item.Navegador }}</span>
-          <span class="detalle-ip"><mat-icon>lan</mat-icon> {{ item.IP }}</span>
-          <span class="detalle-pais"><mat-icon>location_on</mat-icon> {{ item.Pais }}</span>
-        </div>
-      </div>
-      <div class="item-fecha">
-        <span>{{ item.Fecha | date: 'dd/MM/yyyy' }}</span>
-        <strong>{{ item.Fecha | date: 'HH:mm:ss' }}</strong>
-        <button mat-icon-button color="warn" matTooltip="Cerrar esta sesión" (click)="cerrarSesion(item.Token)">
-          <mat-icon>logout</mat-icon>
-        </button>
-      </div>
-    </div>
-    }
-  </div>
-</div>
+  @if(data.textoAceptar){
+  <button mat-button (click)="onAccept()" cdkFocusInitial>{{ data.textoAceptar }}</button>
+  }
+</mat-dialog-actions>

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.ts

@@ -1,86 +1,65 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
-import { MensajeConfirmacionComponent } from '../mensaje-confirmacion/mensaje-confirmacion';
-import { DatosGlobalesService } from '../../../datos-globales.service';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+
+export interface DialogData {
+  titulo: string;
+  mensaje: string;
+  textoCerrar?: string;
+  textoAceptar?: string;
+  SolicitaMensaje?: string;
+  onClose?: () => void;
+  onAccept?: (MensajeBrindado: any) => void;
+}
 
 @Component({
-  selector: 'app-gestion-actividad',
-  standalone: true,
-  imports: [CommonModule, MatIconModule, MatTooltipModule, MatProgressBarModule, MatButtonModule],
-  templateUrl: './gestion-actividad.component.html',
-  styleUrls: ['./gestion-actividad.component.css']
+  selector: 'app-dialogo',
+  templateUrl: './mensaje-confirmacion.component.html',
+  styleUrls: ['./mensaje-confirmacion.component.css'],
+  imports: [
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule
+  ]
 })
-export class GestionActividadComponent implements OnInit {
-  public actividad: any[] = [];
-  public cargando = false;
-  private tokenActual = '';
-
-  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private dialog: MatDialog) { }
+export class MensajeConfirmacionComponent {
 
-  ngOnInit(): void {
-    this.tokenActual = this.datosGlobalesService.ObtenerToken().split(' ')[1] || '';
-    this.obtenerActividad();
-  }
+  SolicitaMensaje: string | undefined;
 
-  obtenerActividad(): void {
-    this.cargando = true;
-    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/ListarActividades`).subscribe({
-      next: (datos: any) => {
-        this.actividad = datos.body;
-      },
-      error: (error) => {
-        console.error('Error al obtener actividad:', error);
-        this.cargando = false;
-      },
-      complete: () => {
-        this.cargando = false;
-      }
-    });
-  }
+  public MensajeBrindado: string = '';
 
-  cerrarSesion(token: string): void {
-    this.dialog.open(MensajeConfirmacionComponent, {
-      data: {
-        titulo: 'Confirmación',
-        mensaje: '¿Está seguro de que desea cerrar esta sesión?',
-        textoCerrar: 'Cancelar',
-        textoAceptar: 'Cerrar sesión',
-        onClose: () => { },
-        onAccept: () => {
-          this.http.delete(`${this.datosGlobalesService.ObtenerURL()}misc/cerrarSesionPorToken/${token}`).subscribe({
-            next: () => {
-              if (token === this.tokenActual) {
-                this.datosGlobalesService.RedirigirALogin();
-              } else {
-                this.obtenerActividad();
-              }
-            },
-            error: (error) => {
-              console.error('Error al cerrar sesión:', error);
-            }
-          });
-        },
-      },
-    });
+  constructor(
+    public dialogRef: MatDialogRef<MensajeConfirmacionComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData
+  ) {
+    this.dialogRef.disableClose = true;
+    this.SolicitaMensaje = this.data.SolicitaMensaje;
   }
 
-  esSesionActual(token: string): boolean {
-    return token === this.tokenActual;
+  onClose(): void {
+    if (this.data.onClose) {
+      this.data.onClose();
+    }
+    this.dialogRef.close();
   }
 
-  getIcon(metodo: string): string {
-    switch (metodo) {
-      case 'GET': return 'search';
-      case 'POST': return 'add_circle';
-      case 'PUT': return 'edit';
-      case 'DELETE': return 'delete';
-      default: return 'help_outline';
+  onAccept(): void {
+    if (this.data.onAccept) {
+      this.data.onAccept(this.MensajeBrindado);
     }
+    this.dialogRef.close(this.MensajeBrindado);
   }
 }