utn-cli 2.1.1 → 2.1.3

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartData, Plugin } from 'chart.js';
 
@@ -9,7 +9,7 @@ import { ChartConfiguration, ChartData, Plugin } from 'chart.js';
   templateUrl: './graficos.component.html',
   styleUrl: './graficos.component.css'
 })
-export class GraficosComponent {
+export class GraficosComponent implements OnChanges {
 
   @Input() public TipoDeGrafico: string = '';
   @Input() public Datos: any[] = [];
@@ -162,8 +162,6 @@ export class GraficosComponent {
     }
   };
 
-  constructor() { }
-
   ngOnChanges() {
 
     // ✅ Si no hay datos, limpia todo para evitar gráficos raros

package/templates/frontend/src/app/Componentes/Nucleo/manual/manual.component.css

@@ -0,0 +1,318 @@
+/* ═══════════════════════════════════════════════════════════
+   Layout general — rompe el text-align:center del contenedor
+   ══════════════════════════════════════════════════════════ */
+:host {
+  display: block;
+  text-align: left;
+}
+
+.manual-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 0;
+  align-items: start;
+  min-height: 100%;
+  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Índice lateral
+   ══════════════════════════════════════════════════════════ */
+.manual-toc {
+  position: sticky;
+  top: 0;
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  border-right: 2px solid #e0e8f5;
+  padding: 1.25rem 0.75rem 2rem 0;
+  background: #f7faff;
+  scrollbar-width: thin;
+  scrollbar-color: #b0c4de transparent;
+}
+
+.toc-titulo {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #002f6b;
+  padding: 0 0 0.6rem 1rem;
+  border-bottom: 1px solid #d0ddf0;
+  margin-bottom: 0.6rem;
+}
+
+.toc-lista {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc-lista li {
+  margin: 0;
+}
+
+.toc-enlace {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  color: #444;
+  padding: 0.3rem 0.75rem;
+  border-radius: 0 6px 6px 0;
+  transition: background 0.15s, color 0.15s;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.toc-enlace:hover {
+  background: #dce9ff;
+  color: #002f6b;
+}
+
+.toc-nivel-1 .toc-enlace {
+  font-weight: 700;
+  color: #002f6b;
+  font-size: 0.82rem;
+  padding-left: 1rem;
+}
+
+.toc-nivel-2 .toc-enlace {
+  font-weight: 600;
+  color: #1976d2;
+  padding-left: 1.5rem;
+}
+
+.toc-nivel-3 .toc-enlace {
+  font-weight: 400;
+  color: #555;
+  padding-left: 2.25rem;
+  font-size: 0.78rem;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Área principal del artículo
+   ══════════════════════════════════════════════════════════ */
+.manual-main {
+  padding: 1.5rem 2.5rem 4rem 2rem;
+  min-width: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Estados: cargando / error
+   ══════════════════════════════════════════════════════════ */
+.manual-estado {
+  padding: 1.25rem 1.5rem;
+  border-radius: 8px;
+  background: #f0f4ff;
+  color: #002f6b;
+  font-size: 0.95rem;
+  border-left: 4px solid #1976d2;
+}
+
+.manual-error {
+  background: #fff0f0;
+  color: #b00020;
+  border-left-color: #b00020;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Tipografía del artículo
+   ══════════════════════════════════════════════════════════ */
+.manual-articulo {
+  color: #1a1a1a;
+  font-size: 0.95rem;
+  line-height: 1.8;
+}
+
+/* Encabezados */
+.manual-articulo h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #002f6b;
+  margin: 0 0 1.25rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid #1976d2;
+  scroll-margin-top: 1rem;
+}
+
+.manual-articulo h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #002f6b;
+  margin: 2.5rem 0 0.75rem;
+  padding: 0.4rem 0.9rem;
+  background: #e8f0fe;
+  border-left: 4px solid #1976d2;
+  border-radius: 0 6px 6px 0;
+  scroll-margin-top: 1rem;
+}
+
+.manual-articulo h3 {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: #0b4fce;
+  margin: 1.75rem 0 0.5rem;
+  scroll-margin-top: 1rem;
+}
+
+.manual-articulo h4 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #333;
+  margin: 1.25rem 0 0.4rem;
+  scroll-margin-top: 1rem;
+}
+
+/* Párrafos */
+.manual-articulo p {
+  margin: 0 0 0.9rem;
+}
+
+/* Listas */
+.manual-articulo ul,
+.manual-articulo ol {
+  margin: 0.25rem 0 1rem 1.4rem;
+}
+
+.manual-articulo li {
+  margin-bottom: 0.3rem;
+}
+
+.manual-articulo li p {
+  margin: 0;
+}
+
+/* Código inline */
+.manual-articulo code {
+  background: #eef2ff;
+  color: #1a237e;
+  border-radius: 3px;
+  padding: 0.1em 0.45em;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-size: 0.87em;
+}
+
+/* Bloques de código */
+.manual-articulo pre {
+  background: #f3f4f6;
+  border: 1px solid #dde1ea;
+  border-left: 4px solid #1976d2;
+  border-radius: 0 6px 6px 0;
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  margin: 0.75rem 0 1.25rem;
+}
+
+.manual-articulo pre code {
+  background: none;
+  padding: 0;
+  color: #1a1a1a;
+  font-size: 0.88em;
+  line-height: 1.65;
+}
+
+/* Tablas */
+.manual-articulo table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75rem 0 1.5rem;
+  font-size: 0.9rem;
+  border: 1px solid #d0daf0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.manual-articulo thead {
+  background: #002f6b;
+  color: #fff;
+}
+
+.manual-articulo th {
+  text-align: left;
+  padding: 0.6rem 1rem;
+  font-weight: 600;
+  font-size: 0.88rem;
+  letter-spacing: 0.02em;
+}
+
+.manual-articulo td {
+  padding: 0.55rem 1rem;
+  border-top: 1px solid #e0e8f5;
+  vertical-align: top;
+  color: #222;
+}
+
+.manual-articulo tbody tr:nth-child(even) td {
+  background: #f5f8ff;
+}
+
+.manual-articulo tbody tr:hover td {
+  background: #ebf1ff;
+}
+
+/* Separador */
+.manual-articulo hr {
+  border: none;
+  border-top: 1px solid #dde3f0;
+  margin: 2rem 0;
+}
+
+/* Citas / notas */
+.manual-articulo blockquote {
+  margin: 0.75rem 0 1rem;
+  padding: 0.65rem 1rem;
+  background: #fffbea;
+  border-left: 4px solid #f9a825;
+  border-radius: 0 6px 6px 0;
+  color: #4a3c00;
+  font-size: 0.92rem;
+}
+
+.manual-articulo blockquote p {
+  margin: 0;
+}
+
+/* Énfasis */
+.manual-articulo strong {
+  font-weight: 700;
+  color: #002f6b;
+}
+
+/* Links */
+.manual-articulo a {
+  color: #1976d2;
+  text-decoration: underline;
+}
+
+.manual-articulo a:focus {
+  outline: 2px solid #1976d2;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Responsivo — pantallas pequeñas
+   ══════════════════════════════════════════════════════════ */
+@media (max-width: 768px) {
+  .manual-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .manual-toc {
+    position: static;
+    max-height: none;
+    border-right: none;
+    border-bottom: 2px solid #e0e8f5;
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .manual-main {
+    padding: 1rem 1rem 3rem;
+  }
+}

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

@@ -0,0 +1,43 @@
+<div class="manual-layout">
+
+  <!-- ── Índice lateral ─────────────────────────────────── -->
+  <aside class="manual-toc" aria-label="Índice del manual">
+    <p class="toc-titulo">Contenido</p>
+    <nav>
+      <ul class="toc-lista">
+        @for (entrada of toc; track entrada.id) {
+          <li [class]="'toc-nivel-' + entrada.nivel">
+            <button class="toc-enlace" (click)="irA(entrada.id)" [title]="entrada.texto">
+              {{ entrada.texto }}
+            </button>
+          </li>
+        }
+      </ul>
+    </nav>
+  </aside>
+
+  <!-- ── Artículo principal ─────────────────────────────── -->
+  <main class="manual-main" role="main" aria-label="Manual de usuario">
+
+    @if (cargando) {
+      <div class="manual-estado" role="status" aria-live="polite" aria-busy="true">
+        <p>Cargando manual…</p>
+      </div>
+    }
+
+    @if (error) {
+      <div class="manual-estado manual-error" role="alert">
+        <p>
+          No se pudo cargar el manual. Verifique que el archivo
+          <code>Manual.md</code> esté en la carpeta <code>public/</code>.
+        </p>
+      </div>
+    }
+
+    @if (!cargando && !error) {
+      <article #contenidoManual class="manual-articulo" [innerHTML]="contenido"></article>
+    }
+
+  </main>
+
+</div>

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

@@ -0,0 +1,77 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { marked } from 'marked';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+interface EntradaToc {
+  nivel: number;
+  texto: string;
+  id: string;
+}
+
+const DIACRITICOS = new RegExp('[̀-ͯ]', 'g');
+
+@Component({
+  selector: 'app-manual',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './manual.component.html',
+  styleUrl: './manual.component.css'
+})
+export class ManualComponent implements OnInit, OnDestroy {
+  public contenido: SafeHtml = '';
+  public toc: EntradaToc[] = [];
+  public cargando: boolean = true;
+  public error: boolean = false;
+  private _destroy$ = new Subject<void>();
+  @ViewChild('contenidoManual') contenidoManualRef!: ElementRef;
+
+  constructor(private http: HttpClient, private sanitizer: DomSanitizer, private datosGlobalesService: DatosGlobalesService) { }
+
+  ngOnInit(): void {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDelManual`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+
+    this.http.get('/Manual.md', { responseType: 'text' }).pipe(takeUntil(this._destroy$)).subscribe({
+      next: (markdown) => {
+        const html = marked.parse(markdown) as string;
+
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        doc.querySelectorAll('h1, h2, h3').forEach((heading) => {
+          const texto = heading.textContent ?? '';
+          const id = 'sec-' + texto
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(DIACRITICOS, '')
+            .replace(/[^a-z0-9\s-]/g, '')
+            .trim()
+            .replace(/\s+/g, '-');
+          heading.id = id;
+          const nivel = parseInt(heading.tagName[1], 10);
+          this.toc.push({ nivel, texto, id });
+        });
+
+        this.contenido = this.sanitizer.bypassSecurityTrustHtml(doc.body.innerHTML);
+        this.cargando = false;
+      },
+      error: () => {
+        this.error = true;
+        this.cargando = false;
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
+  irA(id: string): void {
+    this.contenidoManualRef?.nativeElement.querySelector('#' + id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}

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

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,6 +8,8 @@ import { MatDialogContent, MatDialogActions, MatDialogTitle } from '@angular/mat
 import { CommonModule } from '@angular/common';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 
+interface FilaMensaje { llave: string; valor: string; tachado: boolean }
+
 @Component({
   selector: 'app-mensajes',
   templateUrl: './mensajes.component.html',
@@ -24,7 +26,7 @@ import { DatosGlobalesService } from '../../../datos-globales.service';
   ]
 })
 export class MensajesComponent {
-  public arregloDeDatos: { llave: any; valor: any; tachado: any }[] = [];
+  public arregloDeDatos: FilaMensaje[] = [];
 
   constructor(private http: HttpClient, public dialogRef: MatDialogRef<MensajesComponent>
     , @Inject(MAT_DIALOG_DATA) public data: any, private datosGlobalesService: DatosGlobalesService) {
@@ -35,7 +37,7 @@ export class MensajesComponent {
     this.dialogRef.close();
   }
 
-  enviar(item: { llave: any; valor: any; tachado: any }) {
+  enviar(item: FilaMensaje) {
     item.tachado = true;
     this.http
       .post(`${this.datosGlobalesService.ObtenerURL()}misc/actualizarNotificacion`, { FechaYHoraDeCreacion: item.llave }).subscribe();

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -6,7 +6,9 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { DatosGlobalesService } from '../../../datos-globales.service';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-reporte-de-incidencias',
@@ -23,10 +25,10 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
   ]
 })
 
-export class ReporteDeIncidenciasComponent implements OnInit {
+export class ReporteDeIncidenciasComponent implements OnInit, OnDestroy {
   formulario!: FormGroup;
-  archivos: File[] = [];
   readonly dialogRef = inject(MatDialogRef<ReporteDeIncidenciasComponent>);
+  private _destroy$ = new Subject<void>();
   constructor(private fb: FormBuilder, private datosGlobalesService: DatosGlobalesService, private http: HttpClient) { }
   @ViewChild('EntradDeArchivo') EntradDeArchivo!: ElementRef<HTMLInputElement>;
   Archivo: any;
@@ -51,6 +53,7 @@ export class ReporteDeIncidenciasComponent implements OnInit {
       const Datos = JSON.stringify(this.formulario.value);
       this.http.post(this.datosGlobalesService.ObtenerURL() + 'misc/reporteDeIncidencia/' + Datos,
         archivo)
+        .pipe(takeUntil(this._destroy$))
         .subscribe({
           next: (data: any) => {
             alert('Mensaje enviado');
@@ -70,6 +73,11 @@ export class ReporteDeIncidenciasComponent implements OnInit {
     }
   }
 
+  ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
   AbrirGestorDeArchivos() {
     this.EntradDeArchivo.nativeElement.click();
   }

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -6,7 +6,9 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { DatosGlobalesService } from '../../../datos-globales.service';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-reporte-de-sugerencias',
@@ -23,9 +25,10 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
   ]
 })
 
-export class ReporteDeSugerenciasComponent implements OnInit {
+export class ReporteDeSugerenciasComponent implements OnInit, OnDestroy {
   formulario!: FormGroup;
   readonly dialogRef = inject(MatDialogRef<ReporteDeSugerenciasComponent>);
+  private _destroy$ = new Subject<void>();
   constructor(private fb: FormBuilder, private datosGlobalesService: DatosGlobalesService, private http: HttpClient) { }
 
   ngOnInit(): void {
@@ -41,6 +44,7 @@ export class ReporteDeSugerenciasComponent implements OnInit {
   Enviar() {
     const Datos = JSON.stringify(this.formulario.value);
     this.http.post(this.datosGlobalesService.ObtenerURL() + 'misc/reporteDeSugerencia/' + Datos, {})
+      .pipe(takeUntil(this._destroy$))
       .subscribe({
         next: (data: any) => {
           alert('Mensaje enviado');
@@ -51,4 +55,9 @@ export class ReporteDeSugerenciasComponent implements OnInit {
       })
     this.Cerrar();
   }
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
 }

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

@@ -1,3 +1,4 @@
+<a #descargaLink style="display:none"></a>
 <div class="contenedor">
   <div class="lista">
     @for(archivo of ListaArchivos;track $index){
@@ -17,20 +18,22 @@
     }
   </div>
   @if(EsEditable) {
-  <div class="zona-archivo" [class.deshabilitado]="ListaArchivos.length >= CantidadMaximaDeArchivos" (click)="AbrirGestorDeArchivos()" (dragover)="ArrastrarAdentro($event)"
-    (dragleave)="ArrastrarAfuera($event)" (drop)="Soltar($event)">
+  <div class="zona-archivo" [class.deshabilitado]="ListaArchivos.length >= CantidadMaximaDeArchivos"
+    (click)="AbrirGestorDeArchivos()" (dragover)="ArrastrarAdentro($event)" (dragleave)="ArrastrarAfuera($event)"
+    (drop)="Soltar($event)">
     @if(ListaArchivos.length >= CantidadMaximaDeArchivos) {
-      <p class="texto-limite">Límite de {{CantidadMaximaDeArchivos}} archivos alcanzado</p>
+    <p class="texto-limite">Límite de {{CantidadMaximaDeArchivos}} archivos alcanzado</p>
     } @else {
-      @if(!Archivo){
-      <p class="texto">Arrastra y suelta un archivo aquí o <span class="texto-clic">haz clic para subir</span></p>
-      }
-      @else{
-      <p>Archivo seleccionado: {{ Archivo.name }}</p>
-      }
+    @if(!Archivo){
+    <p class="texto">Arrastra y suelta un archivo aquí o <span class="texto-clic">haz clic para subir</span></p>
+    }
+    @else{
+    <p>Archivo seleccionado: {{ Archivo.name }}</p>
+    }
     }
     <!-- Input oculto para seleccionar archivos manualmente -->
-    <input type="file" #EntradaDeArchivo hidden (change)="ArchivoSeleccionado($event)" [accept]="FormatosPermitidos.join(',')">
+    <input type="file" #EntradaDeArchivo hidden (change)="ArchivoSeleccionado($event)"
+      [accept]="FormatosPermitidos.join(',')">
   </div>
   } @else {
   @if(ListaArchivos.length === 0) {