utn-cli 2.1.39 → 2.1.40

package/package.json

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

package/templates/frontend/src/app/Componentes/Nucleo/reordenar-menu/reordenar-menu.component.css

@@ -0,0 +1,65 @@
+.instruccion {
+  font-size: 0.875rem;
+  color: #555;
+  margin: 0 0 1rem 0;
+}
+
+.lista-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 280px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: #f5f8ff;
+  border-left: 4px solid #1976d2;
+}
+
+.handle {
+  color: #999;
+  cursor: grab;
+  flex-shrink: 0;
+}
+
+.handle:active {
+  cursor: grabbing;
+}
+
+.item-icono {
+  color: #1976d2;
+  flex-shrink: 0;
+}
+
+.item-etiqueta {
+  flex: 1;
+  font-size: 0.95rem;
+}
+
+.cdk-drag-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: white;
+  border-left: 4px solid #1976d2;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.3;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.lista-items.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

package/templates/frontend/src/app/Componentes/Nucleo/reordenar-menu/reordenar-menu.component.html

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>Reordenar menú</h2>
+<mat-dialog-content>
+  <p class="instruccion">Arrastrá los elementos para cambiar el orden.</p>
+  <div cdkDropList (cdkDropListDropped)="drop($event)" class="lista-items">
+    @for (item of items; track item.id) {
+    <div cdkDrag class="item">
+      <mat-icon cdkDragHandle class="handle">drag_indicator</mat-icon>
+      <mat-icon class="item-icono">{{ item.icono }}</mat-icon>
+      <span class="item-etiqueta">{{ item.etiqueta }}</span>
+    </div>
+    }
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="cancelar()">Cancelar</button>
+  <button mat-flat-button color="primary" (click)="guardar()">Guardar</button>
+</mat-dialog-actions>

package/templates/frontend/src/app/Componentes/Nucleo/reordenar-menu/reordenar-menu.component.ts

@@ -0,0 +1,41 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+export interface ItemDeMenuDialog {
+  id: string;
+  etiqueta: string;
+  icono: string;
+}
+
+@Component({
+  selector: 'app-reordenar-menu',
+  standalone: true,
+  imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule, MatIconModule, DragDropModule],
+  templateUrl: './reordenar-menu.component.html',
+  styleUrl: './reordenar-menu.component.css'
+})
+export class ReordenarMenuComponent {
+  items: ItemDeMenuDialog[];
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { items: ItemDeMenuDialog[] },
+    private dialogRef: MatDialogRef<ReordenarMenuComponent>
+  ) {
+    this.items = [...data.items];
+  }
+
+  drop(event: CdkDragDrop<ItemDeMenuDialog[]>): void {
+    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
+  }
+
+  guardar(): void {
+    this.dialogRef.close(this.items);
+  }
+
+  cancelar(): void {
+    this.dialogRef.close();
+  }
+}

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

@@ -130,27 +130,16 @@
       </button>
 
       <mat-menu #menuAplicaciones="matMenu">
-        <button mat-menu-item (click)="irASugerencias()" title="Sugerencias">
-          <mat-icon>lightbulb</mat-icon>
-          <span>Sugerencias</span>
-        </button>
-        @if(TienePermiso) {
-        <button mat-menu-item (click)="irAActividad()" title="Actividad de la cuenta">
-          <mat-icon>history</mat-icon>
-          <span>Actividad de la cuenta</span>
-        </button>
-        <button mat-menu-item (click)="irAEstadisticasDelModulo()" title="Estadísticas del módulo">
-          <mat-icon>bar_chart</mat-icon>
-          <span>Estadísticas del módulo</span>
+        @for (item of itemsDeMenuVisibles; track item.id) {
+        <button mat-menu-item (click)="item.accion()" [title]="item.etiqueta">
+          <mat-icon>{{ item.icono }}</mat-icon>
+          <span>{{ item.etiqueta }}</span>
         </button>
         }
-        <button mat-menu-item (click)="irAAccesibilidad()" title="Accesibilidad mediante teclado">
-          <mat-icon>accessibility</mat-icon>
-          <span>Accesibilidad</span>
-        </button>
-        <button mat-menu-item (click)="irADeclaracionIA()" title="Declaración de uso de inteligencia artificial">
-          <mat-icon>smart_toy</mat-icon>
-          <span>Declaración de IA</span>
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="abrirDialogReordenarMenu()" title="Reordenar elementos del menú">
+          <mat-icon>sort</mat-icon>
+          <span>Reordenar</span>
         </button>
       </mat-menu>
 

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

@@ -6,17 +6,28 @@ import { Location, CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { ReporteDeIncidenciasComponent } from '../../../Componentes/Nucleo/reporte-de-incidencias/reporte-de-incidencias.component';
 import { MensajesComponent } from '../../../Componentes/Nucleo/mensajes/mensajes.component';
 import { MensajeConfirmacionHTMLComponent } from '../../../Componentes/Nucleo/mensaje-confirmacion-html/mensaje-confirmacion-html';
 import { ReporteDeSugerenciasComponent } from '../../../Componentes/Nucleo/reporte-de-sugerencias/reporte-de-sugerencias.component';
 import { EstadisticasDelModuloComponent } from '../../../Componentes/Nucleo/estadisticas-del-modulo/estadisticas-del-modulo.component';
+import { ReordenarMenuComponent, ItemDeMenuDialog } from '../../../Componentes/Nucleo/reordenar-menu/reordenar-menu.component';
 
 import { MatMenuModule } from '@angular/material/menu';
 
+interface ItemDeMenu {
+  id: string;
+  etiqueta: string;
+  icono: string;
+  accion: () => void;
+  requierePermiso: boolean;
+  posicion: number;
+}
+
 @Component({
   selector: 'app-contenedor-componentes',
-  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule, MatMenuModule],
+  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule, MatMenuModule, MatDividerModule],
   templateUrl: './contenedor-componentes.component.html',
   styleUrl: './contenedor-componentes.component.css'
 })
@@ -41,6 +52,12 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
   public AnimarUsuariosActivos: boolean = true;
   private intervaloUsuarios: any;
 
+  public itemsDeMenu: ItemDeMenu[] = [];
+
+  get itemsDeMenuVisibles(): ItemDeMenu[] {
+    return this.itemsDeMenu.filter(i => !i.requierePermiso || this.TienePermiso);
+  }
+
   get esDashboard(): boolean { return this.router.url === '/'; }
   get tieneTarjetas(): boolean { return this.datosGlobalesService.cantidadDeTarjetas$.value > 0; }
   get filtro(): string { return this.datosGlobalesService.filtroDeTarjetas$.value; }
@@ -69,7 +86,78 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
     return datos ? JSON.parse(datos) : [];
   }
 
+  private inicializarItemsDeMenu(): void {
+    this.itemsDeMenu = [
+      { id: 'nav_sugerencias', etiqueta: 'Sugerencias', icono: 'lightbulb', accion: () => this.irASugerencias(), requierePermiso: false, posicion: 10 },
+      { id: 'nav_actividad', etiqueta: 'Actividad de la cuenta', icono: 'history', accion: () => this.irAActividad(), requierePermiso: true, posicion: 20 },
+      { id: 'nav_estadisticas', etiqueta: 'Estadísticas del módulo', icono: 'bar_chart', accion: () => this.irAEstadisticasDelModulo(), requierePermiso: true, posicion: 30 },
+      { id: 'nav_accesibilidad', etiqueta: 'Accesibilidad', icono: 'accessibility', accion: () => this.irAAccesibilidad(), requierePermiso: false, posicion: 40 },
+      { id: 'nav_declaracion_ia', etiqueta: 'Declaración de IA', icono: 'smart_toy', accion: () => this.irADeclaracionIA(), requierePermiso: false, posicion: 50 },
+    ];
+  }
+
+  private cargarOrdenDelMenu(): void {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).subscribe({
+      next: (datos: any) => {
+        const config: { Titulo: string; Posicion: number }[] = datos.body ?? [];
+        const navConfig = config.filter((c: any) => c.Titulo.startsWith('nav_'));
+        if (navConfig.length === 0) return;
+        navConfig.forEach((c: any) => {
+          const item = this.itemsDeMenu.find(i => i.id === c.Titulo);
+          if (item) item.posicion = c.Posicion;
+        });
+        this.itemsDeMenu.sort((a, b) => a.posicion - b.posicion);
+      },
+      error: () => { }
+    });
+  }
+
+  abrirDialogReordenarMenu(): void {
+    const itemsVisibles: ItemDeMenuDialog[] = this.itemsDeMenuVisibles.map(i => ({
+      id: i.id,
+      etiqueta: i.etiqueta,
+      icono: i.icono
+    }));
+
+    this.dialog.open(ReordenarMenuComponent, { data: { items: itemsVisibles } })
+      .afterClosed()
+      .subscribe((resultado: ItemDeMenuDialog[] | undefined) => {
+        if (!resultado) return;
+        this.persistirOrdenDelMenu(resultado);
+      });
+  }
+
+  private persistirOrdenDelMenu(itemsOrdenados: ItemDeMenuDialog[]): void {
+    const idsOrdenados = itemsOrdenados.map(i => i.id);
+    const itemsNoVisibles = this.itemsDeMenu.filter(i => !idsOrdenados.includes(i.id));
+    const itemsVisiblesReordenados = idsOrdenados
+      .map(id => this.itemsDeMenu.find(i => i.id === id)!)
+      .filter(Boolean);
+
+    itemsVisiblesReordenados.forEach((item, index) => {
+      item.posicion = (index + 1) * 10;
+    });
+    itemsNoVisibles.forEach((item, index) => {
+      item.posicion = (itemsVisiblesReordenados.length + index + 1) * 10;
+    });
+
+    this.itemsDeMenu = [...itemsVisiblesReordenados, ...itemsNoVisibles];
+
+    const Configuraciones = this.itemsDeMenu.map(i => ({
+      Titulo: i.id,
+      Posicion: i.posicion,
+      ColorDeBorde: null
+    }));
+
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/actualizar`, {
+      Configuraciones
+    }).subscribe({ error: () => { } });
+  }
+
   ngOnInit() {
+    this.inicializarItemsDeMenu();
+    this.cargarOrdenDelMenu();
+
     const url = window.location.href.toLowerCase();
     if (url.includes('calidad')) {
       this.claseDelContenedor = 'contenedor calidad';