utn-cli 2.0.28 → 2.0.29

package/package.json

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

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

@@ -299,6 +299,11 @@ tr.example-element-row:hover {
     gap: 10px !important; /* Espacio uniforme entre elementos */
   }
 
+  .contenedor-columnas {
+    width: 100%;
+    justify-content: center;
+  }
+        
   /* Forzamos que Input, Select y Botón sean idénticos en ancho */
   .custom-input, 
   mat-select.custom-input, 

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

@@ -9,6 +9,20 @@
   </div>
   <div class="centro"></div>
   <div class="derecha">
+    <mat-menu #menuColumnas="matMenu">
+      @for(col of columnas; track $index){
+      <button mat-menu-item>
+        <mat-checkbox [(ngModel)]="col.Visible" (change)="recalcularColumnas()">
+          {{ col.Alias }}
+        </mat-checkbox>
+      </button>
+      }
+    </mat-menu>
+    <div class="contenedor-columnas">
+      <button mat-icon-button [matMenuTriggerFor]="menuColumnas" matTooltip="Mostrar/Ocultar columnas">
+        <mat-icon>view_column</mat-icon>
+      </button>
+    </div>
     <input #valorFiltroInput id="valorFiltro" type="text" class="custom-input" placeholder="Filtrar"
       (keydown.enter)="AplicarFiltro()">
     @if(mostrarElBotonDeFiltro){

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

@@ -11,6 +11,9 @@ import { MatSelectModule } from '@angular/material/select';
 import { MensajeConfirmacionComponent } from '../mensaje-confirmacion/mensaje-confirmacion';
 import { MatDialog } from '@angular/material/dialog';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-tabla',
@@ -31,20 +34,24 @@ import { MatBadgeModule } from '@angular/material/badge';
     MatSortModule,
     MatInputModule,
     MatSelectModule,
-    MatBadgeModule],
+    MatBadgeModule,
+    MatMenuModule,
+    MatCheckboxModule,
+    FormsModule,
+  ],
   templateUrl: './tabla.component.html',
   styleUrl: './tabla.component.css'
 })
 export class TablaComponent implements OnInit, OnChanges {
-  @Input() columnas: { Llave: string, Alias: string, TipoDeFiltro: string }[] = [];
+  @Input() columnas: { Llave: string, Alias: string, TipoDeFiltro: string, Visible?: boolean }[] = [];
   @Input() subColumnas: { Llave: string, Alias: string }[] = [];
   @Input() datos: any[] = [];
-  @Input() acciones:                     { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
-  @Input() accionesDinamicas:            { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; Mostrar: (row: any) => boolean }[] = [];
-  @Input() accionesSiempreClickeable:    { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
-  @Input() subAcciones:                  { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() acciones: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() accionesDinamicas: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; Mostrar: (row: any) => boolean }[] = [];
+  @Input() accionesSiempreClickeable: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() subAcciones: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
   @Input() subAccionesSiempreClickeable: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
-  @Input() subAccionesDinamicas:         { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; Mostrar: (row: any) => boolean }[] = [];
+  @Input() subAccionesDinamicas: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; Mostrar: (row: any) => boolean }[] = [];
   @Input() desplegable: boolean = false
   @Input() atributoDesplegable: string = ''
   public llavesColumnas: string[] = [];
@@ -147,17 +154,31 @@ export class TablaComponent implements OnInit, OnChanges {
   }
 
   private inicializarColumnas(): void {
-    this.llavesColumnas = this.columnas.map(c => c.Llave);
-    this.tieneColumnaEstado = this.columnas.some(c => c.Llave === 'Estado');
+    this.columnas.forEach(c => {
+      if (c.Visible === undefined) {
+        c.Visible = true;
+      }
+    });
+    this.recalcularColumnas();
+  }
 
-    if (this.acciones.length || this.accionesSiempreClickeable.length || this.accionesDinamicas.length) {
+  public recalcularColumnas(): void {
+    const columnasVisibles = this.columnas.filter(c => c.Visible).map(c => c.Llave);
+    this.llavesColumnas = [];
+    if (this.desplegable) {
+      this.llavesColumnas.push('expand');
+    }
+    this.llavesColumnas.push(...columnasVisibles);
+    this.tieneColumnaEstado = this.columnas.some(c => c.Llave === 'Estado');
+    if (this.acciones.length ||
+      this.accionesSiempreClickeable.length ||
+      this.accionesDinamicas.length) {
       this.llavesColumnas.push('acciones');
     }
-
     if (this.desplegable) {
-      this.llavesColumnas.unshift('expand');
       this.llavesSubColumnas = this.subColumnas.map(c => c.Llave);
-      if (this.subAcciones.length || this.subAccionesSiempreClickeable.length) {
+      if (this.subAcciones.length ||
+        this.subAccionesSiempreClickeable.length) {
         this.llavesSubColumnas.push('subAcciones');
       }
     }