utn-cli 2.1.9 → 2.1.10

package/package.json

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

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

@@ -183,6 +183,22 @@
   .encabezado {
     font-size: 18px;
   }
+
+  .cabecera2 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .filtro-tarjetas {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .filtro-input {
+    width: 100%;
+    min-width: 0;
+  }
 }
 
 @media (max-width: 480px) {

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

@@ -73,7 +73,7 @@
           @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 #filtroInput 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"

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgZone, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';
 import { RouterOutlet, Router } from '@angular/router';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 import { Location, CommonModule } from '@angular/common';
@@ -19,7 +19,10 @@ import { MatMenuModule } from '@angular/material/menu';
   templateUrl: './contenedor-componentes.component.html',
   styleUrl: './contenedor-componentes.component.css'
 })
-export class ContenedorComponentesComponent implements OnInit, OnDestroy {
+export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @ViewChild('filtroInput') filtroInput?: ElementRef<HTMLInputElement>;
+  private focusDone = false;
+
   public TienePermiso: boolean = false;
   public Titulo: string = '';
   public Modulo: string = '';
@@ -208,6 +211,13 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
     this.router.navigate(['/Actividad']);
   }
 
+  ngAfterViewChecked() {
+    if (!this.focusDone && this.filtroInput?.nativeElement) {
+      this.filtroInput.nativeElement.focus();
+      this.focusDone = true;
+    }
+  }
+
   ngOnDestroy() {
     if (this.intervaloUsuarios) {
       clearInterval(this.intervaloUsuarios);

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

@@ -14,6 +14,27 @@
   box-sizing: border-box;
 }
 
+.drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 0;
+  color: #bbb;
+  cursor: grab;
+  touch-action: none;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+  color: #888;
+}
+
+.drag-handle mat-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
 .tarjeta-opaca {
   opacity: 0.15;
   filter: grayscale(50%);

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

@@ -1,6 +1,11 @@
 <div class="contenido" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)">
   @for (tarjeta of tarjetas; track tarjeta.titulo) {
   <div cdkDrag [class.tarjeta-opaca]="esDimmed(tarjeta)">
+    @if(isMobile) {
+    <div class="drag-handle" cdkDragHandle aria-label="Arrastrar tarjeta">
+      <mat-icon>drag_indicator</mat-icon>
+    </div>
+    }
     @switch (tarjeta.type) {
     @case ('single') {
     <app-tarjeta [rutaASeguir]="$any(tarjeta).rutaASeguir" [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion"

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Component, OnInit, OnDestroy, HostListener } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -6,6 +6,7 @@ import { TarjetaComponent } from "../../Componentes/Nucleo/tarjeta/tarjeta.compo
 import { TarjetaMultipleComponent } from "../../Componentes/Nucleo/tarjeta-multiple/tarjeta-multiple.component";
 import { TarjetaReporteComponent } from "../../Componentes/Nucleo/tarjeta-reporte/tarjeta-reporte.component";
 import { TarjetaPersonalizadaComponent } from "../../Componentes/Nucleo/tarjeta-personalizada/tarjeta-personalizada.component";
+import { MatIconModule } from "@angular/material/icon";
 import { HttpClient } from "@angular/common/http";
 import { DatosGlobalesService } from '../../datos-globales.service';
 import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@@ -55,7 +56,7 @@ type AnyTarjetaConfig = TarjetaConfig | TarjetaMultipleConfig | TarjetaReporteCo
 @Component({
   selector: "app-contenedor-principal",
   standalone: true,
-  imports: [TarjetaComponent, TarjetaMultipleComponent, TarjetaReporteComponent, TarjetaPersonalizadaComponent, CommonModule, DragDropModule],
+  imports: [TarjetaComponent, TarjetaMultipleComponent, TarjetaReporteComponent, TarjetaPersonalizadaComponent, CommonModule, DragDropModule, MatIconModule],
   templateUrl: "./contenedor-principal.component.html",
   styleUrl: "./contenedor-principal.component.css"
 })
@@ -65,8 +66,14 @@ export class ContenedorPrincipalComponent implements OnInit, OnDestroy {
   public cantidadMaxima: number = 0;
   public tarjetas: AnyTarjetaConfig[] = [];
   public filtro: string = '';
+  public isMobile: boolean = window.innerWidth <= 768;
   private destroy$ = new Subject<void>();
 
+  @HostListener('window:resize')
+  onResize(): void {
+    this.isMobile = window.innerWidth <= 768;
+  }
+
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {
     this.cantidad = 0;
     this.cantidadMaxima = 0;