utn-cli 2.1.2 → 2.1.4

package/commands/frontend.js

@@ -42,7 +42,7 @@ export async function initFrontend() {
 
 export async function updateFrontend(opciones = { cerrarAlFinalizar: true }) {
   console.log('Actualizando el proyecto de frontend...');
-  const archivosAExcluir = ['app.routes.ts', 'contenedor-principal.component.ts', '.vscode', 'dist'];
+  const archivosAExcluir = ['app.routes.ts', 'contenedor-principal.component.ts', '.vscode', 'dist', 'Manual.md'];
   const directoriodePlantillas = path.join(__dirname, '../templates/frontend');
   const directorioDestino = process.cwd();
 

package/package.json

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

package/templates/backend/rutas/misc.js

@@ -209,6 +209,24 @@ Router.get('/obtenerDetalleDelModulo', async (solicitud, respuesta, next) => {
   }
 });
 
+Router.get('/VistaDelManual', async (solicitud, respuesta, next) => {
+  try {
+    if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {
+      try {
+        await Miscelaneo.registrarVistaDelManual(solicitud.headers.authorization);
+        return respuesta.json({ body: undefined, error: undefined });
+      } catch (error) {
+        const MensajeDeError = 'No fue posible registrar la vista del manual';
+        console.error(new ManejadorDeErrores(MensajeDeError, ManejadorDeErrores.obtenerNumeroDeLinea(), true, `Dirección IP: ${solicitud.ip}`));
+        return respuesta.status(500).json({ body: undefined, error: MensajeDeError });
+      }
+    }
+    return respuesta.status(401).json({ body: undefined, error: ManejadorDeErrores.mensajeDeError401() });
+  } catch (error) {
+    next(error);
+  }
+});
+
 Router.get('/obtenerDatosDelUsuario', async (solicitud, respuesta, next) => {
   try {
     if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {

package/templates/backend/servicios/Nucleo/Miscelaneas.js

@@ -880,6 +880,14 @@ class Miscelaneo {
     });
   }
 
+  async registrarVistaDelManual(Token) {
+    const { uid } = await this.obtenerDatosDelUsuario(Token);
+    await ejecutarConsulta(
+      "INSERT INTO `DatosMiscelaneos` (`DatoMiscelaneo`, `Datos`, `LastUser`) VALUES ('VistasDelManual', JSON_OBJECT('Total', 1), ?) ON DUPLICATE KEY UPDATE `Datos` = JSON_SET(`Datos`, '$.Total', CAST(JSON_VALUE(`Datos`, '$.Total') AS UNSIGNED) + 1), `LastUser` = ?",
+      [uid, uid]
+    );
+  }
+
   async obtenerMensajesModulares() {
     return await ejecutarConsultaSIGU("SELECT `MensajeModularId`, `Titulo`, `Texto`, `FechaYHoraDeInicio`, `FechaYHoraDeFinalizacion` FROM  `SIGU`.`SIGU_MensajesModulares` WHERE NOW(4) BETWEEN `FechaYHoraDeInicio` AND `FechaYHoraDeFinalizacion` AND `Modulo` = ?"
       , [this.NombreCanonicoDelModulo]);
@@ -1920,10 +1928,10 @@ class Miscelaneo {
       const informacionDelArchivo = await this.almacenarArchivoEnDisco(Solicitud, Resultado['uid']);
       const Respuesta = await ejecutarConsultaSIGU("INSERT INTO `SIGU`.`SIGU_Adjuntos` (`AdjuntosId`, `Identificador`, `Modulo`, `Seccion`, `Nombre`,\
         `NombreOriginal`, `Ruta`, `Tipo`, `Tamanio`, `Etiqueta`, `LastUpdate`, `LastUser`)\
-        VALUES (NULL, ?, ?, 'No aplica', ?, ?, ?, ?, ?, 'No aplica', NOW(4), ?)"
+        VALUES (NULL, ?, ?, 'No aplica', ?, ?, ?, ?, ?, ?, NOW(4), ?)"
         , [Resultado['uid'], this.NombreCanonicoDelModulo, informacionDelArchivo.nombreDeArchivo, informacionDelArchivo.nombreDeArchivo
           , informacionDelArchivo.rutaDeArchivo, informacionDelArchivo.tipoDeContenido, informacionDelArchivo.tamanioTotal
-          , Resultado['uid']]);
+          , Etiquetas, Resultado['uid']]);
       informacionDelArchivo.insertId = Respuesta.insertId;
       informacionDelArchivo.Etiquetas = Etiquetas;
       await ejecutarConsulta("INSERT INTO `" + this.NombreDelRepositorioDeLaBaseDeDatos.slice(0, -3) + "`.`Archivos`\
@@ -2508,6 +2516,8 @@ class Miscelaneo {
     return {
       TienePermiso: true,
       ...configuracion,
+      Descripcion: detalleDelModulo[0]?.Descripcion ?? configuracion.Descripcion,
+      Detalle: detalleDelModulo[0]?.Detalle ?? configuracion.Detalle,
       EnlaceDelManual: detalleDelModulo[0]?.EnlaceDelManual ?? '-',
       EnlaceDelVideo: detalleDelModulo[0]?.EnlaceDelVideo ?? '-',
       Notificaciones: notificaciones,

package/templates/backend/servicios/Nucleo/ReportePDF.js

@@ -661,7 +661,7 @@ class ReportePDF {
 
     // Función auxiliar para aplicar el formato y escribir el buffer
     const flushText = (token, isLast) => {
-      if (token === "") return;
+      if (!token) return;
 
       let fontName = this.config.fuenteBase;
       if (isBold && isItalic) fontName = this.config.fuenteNegritaCursiva;

package/templates/backend/servicios/Servicio1.js

@@ -9,6 +9,111 @@ class Servicio1 {
 
   RegistrarElServicio() {
     const NombreDelServicio = 'Servicio1';
+
+    // El segundo parámetro de RegistrarElServicio define la tarjeta (o tarjetas) que
+    // aparecerán en el dashboard del módulo. Puede ser un objeto o un arreglo de objetos.
+    // Si se omite, el servicio se registra sin crear ninguna tarjeta.
+    //
+    // Campos comunes a todos los tipos:
+    //   'Tipo'               — 'Única' | 'Múltiple' | 'Reporte' | 'Personalizada'
+    //   'Posición'           — Número entero; menor = aparece antes. Use múltiplos de 10.
+    //   'Título'             — Texto visible en la tarjeta del dashboard.
+    //   'Descripción'        — Texto secundario de la tarjeta.
+    //   'RequierePermisoExtra' — true: solo visible para usuarios con permiso extra.
+    //   'Activa'             — false: la tarjeta existe pero no se muestra.
+    //
+    // ── Tipo 'Única' ────────────────────────────────────────────────────────────────
+    // Tarjeta de acceso directo a una sola ruta.
+    //
+    // Miscelaneas.RegistrarElServicio(NombreDelServicio, {
+    //   'Tipo': 'Única',
+    //   'Posición': 10,
+    //   'Título': 'Mi sección',
+    //   'Descripción': 'Descripción breve de la sección',
+    //   'Ícono': 'settings',           // Nombre de ícono de Material Icons
+    //   'RutaASeguir': 'miRuta',       // Ruta relativa sin barra inicial
+    //   'ColorDeBorde': '#3498db',     // Opcional; omitir para color predeterminado
+    //   'RequierePermisoExtra': false,
+    //   'Activa': true
+    // });
+    //
+    // ── Tipo 'Múltiple' ──────────────────────────────────────────────────────────────
+    // Tarjeta de menú desplegable con varias opciones de navegación.
+    //
+    // Miscelaneas.RegistrarElServicio(NombreDelServicio, {
+    //   'Tipo': 'Múltiple',
+    //   'Posición': 20,
+    //   'Título': 'Mi sección',
+    //   'Descripción': 'Descripción breve de la sección',
+    //   'Rutas': [
+    //     { 'Nombre': 'Opción A', 'Ruta': 'tablaOpcionA' },
+    //     { 'Nombre': 'Opción B', 'Ruta': 'tablaOpcionB' },
+    //     { 'Nombre': 'Opción C', 'Ruta': 'tablaOpcionC' }
+    //   ],
+    //   'RequierePermisoExtra': false,
+    //   'Activa': true
+    // });
+    //
+    // ── Tipo 'Reporte' ───────────────────────────────────────────────────────────────
+    // Tarjeta que, al hacer clic, genera y descarga un reporte.
+    // El valor de 'ReporteAGenerar' debe coincidir con el identificador manejado
+    // en el método GenerarReporte() del componente ContenedorPrincipalComponent.
+    //
+    // Miscelaneas.RegistrarElServicio(NombreDelServicio, {
+    //   'Tipo': 'Reporte',
+    //   'Posición': 30,
+    //   'Título': 'Mi reporte',
+    //   'Descripción': 'Descarga el reporte de ejemplo en formato CSV',
+    //   'Ícono': 'download',
+    //   'ReporteAGenerar': 'ElReporte1', // Identificador del reporte en el frontend
+    //   'RequierePermisoExtra': false,
+    //   'Activa': true
+    // });
+    //
+    // ── Tipo 'Personalizada' ─────────────────────────────────────────────────────────
+    // Tarjeta que ejecuta una acción programada definida en el frontend.
+    // El valor de 'Acción' debe coincidir con el identificador manejado
+    // en el método EjecutarAccionPersonalizada() del componente ContenedorPrincipalComponent.
+    //
+    // Miscelaneas.RegistrarElServicio(NombreDelServicio, {
+    //   'Tipo': 'Personalizada',
+    //   'Posición': 40,
+    //   'Título': 'Mi acción',
+    //   'Descripción': 'Ejecuta una acción personalizada',
+    //   'Ícono': 'bolt',
+    //   'Etiqueta': 'Ejecutar',         // Texto del botón dentro de la tarjeta
+    //   'Acción': 'MiAccionPersonalizada', // Identificador de la acción en el frontend
+    //   'RequierePermisoExtra': false,
+    //   'Activa': true
+    // });
+    //
+    // ── Múltiples tarjetas a la vez ──────────────────────────────────────────────────
+    // El segundo parámetro también acepta un arreglo para registrar varias tarjetas
+    // en una sola llamada (útil cuando un servicio expone más de una sección).
+    //
+    // Miscelaneas.RegistrarElServicio(NombreDelServicio, [
+    //   {
+    //     'Tipo': 'Única',
+    //     'Posición': 10,
+    //     'Título': 'Sección A',
+    //     'Descripción': 'Descripción de la sección A',
+    //     'Ícono': 'dashboard',
+    //     'RutaASeguir': 'tablaSeccionA',
+    //     'RequierePermisoExtra': false,
+    //     'Activa': true
+    //   },
+    //   {
+    //     'Tipo': 'Única',
+    //     'Posición': 20,
+    //     'Título': 'Sección B',
+    //     'Descripción': 'Descripción de la sección B',
+    //     'Ícono': 'bar_chart',
+    //     'RutaASeguir': 'tablaSeccionB',
+    //     'RequierePermisoExtra': false,
+    //     'Activa': true
+    //   }
+    // ]);
+
     Miscelaneas.RegistrarElServicio(NombreDelServicio);
     console.log("Se ha creado el servicio: " + NombreDelServicio);
   }
@@ -39,8 +144,8 @@ class Servicio1 {
   //     informacionDelArchivo.Etiquetas = Etiquetas;
   //     await ejecutarConsulta("INSERT INTO `" + this.NombreDelRepositorioDeLaBaseDeDatos.slice(0, -3) + "`.`Archivos`\
   //       VALUES (?, ?, ?, ?, ?, NOW(4), ?)"
-  //       , [Respuesta.insertId, Resultado.uid, informacionDelArchivo.rutaDeArchivo, informacionDelArchivo.nombreDeArchivo
-  //         , Etiquetas, Resultado.uid]);
+  //       , [Respuesta.insertId, Resultado.Identificador, informacionDelArchivo.rutaDeArchivo, informacionDelArchivo.nombreDeArchivo
+  //         , Etiquetas, Resultado.Identificador]);
   //     return informacionDelArchivo;
   //   }
   //   return;
@@ -50,7 +155,7 @@ class Servicio1 {
   //   return await ejecutarConsulta("SELECT `BeneficioEstudiantilId`, `Nombre`, `Tipo`, `Estado` FROM `vve-bybe`.`BYBE_BeneficiosEstudiantiles`");
   // }
 
-//   // Ejemplo de listar con paginador
+  //   // Ejemplo de listar con paginador
   // async listar(Parametros) {
   //   let Resultados = undefined;
   //   let ORDERBY = "";
@@ -109,7 +214,7 @@ class Servicio1 {
   // async agergar(Datos) {
   //   return ejecutarConsulta("INSERT INTO `vve-bybe`.`BYBE_BeneficiosEstudiantiles` VALUES (NULL,\
   //       ?, ?, 'Activo', NOW(4), ?)"
-  //     , [Datos.Nombre, Datos.Tipo, Resultado.uid]);
+  //     , [Datos.Nombre, Datos.Tipo, Resultado.Identificador]);
   // }
 
   // async borrar(Datos) {
@@ -122,7 +227,7 @@ class Servicio1 {
   //       SET `Nombre` = ?, `Tipo` = ?, `Estado` = ?\
   //       , `LastUpdate` = NOW(4), `LastUser` = ?\
   //       WHERE `BeneficioEstudiantilId` = ?"
-  //     , [Datos.Nombre, Datos.Tipo, Datos.Estado, Resultado.uid, Datos.BeneficioEstudiantilId]);
+  //     , [Datos.Nombre, Datos.Tipo, Datos.Estado, Resultado.Identificador, Datos.BeneficioEstudiantilId]);
   // }
 
   // async detalle(BeneficioEstudiantilId) {

package/templates/bd/docker-scripts/1-crear estructura.sql

@@ -37,3 +37,11 @@ CREATE OR REPLACE TABLE `NOMBRE_DEL_REPOSITORIO_DE_BASE_DE_DATOS`.`Configuracion
   `LastUser` VARCHAR(1000) NOT NULL DEFAULT '-' COMMENT 'Último usuario que modificó la fila',
   PRIMARY KEY (`Identificador`, `Titulo`)
 ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_spanish_ci COMMENT = 'Almacena la configuración de las tarjetas del contenedor principal por usuario';
+
+CREATE OR REPLACE TABLE `NOMBRE_DEL_REPOSITORIO_DE_BASE_DE_DATOS`.`DatosMiscelaneos` (
+  `DatoMiscelaneo` VARCHAR(200) NOT NULL COMMENT 'Nombre del datos misceláneo que se desea almacenar',
+  `Datos`      JSON NOT NULL COMMENT 'Configuración completa de la tarjeta: Tipo, Posición, Título, Descripción, Ícono, RutaASeguir, Rutas, ColorDeBorde, RequierePermisoExtra, Activo',
+  `LastUpdate` DATETIME(4) NOT NULL DEFAULT CURRENT_TIMESTAMP(4) ON UPDATE CURRENT_TIMESTAMP(4) COMMENT 'Fecha de la última actualización de la fila',
+  `LastUser`   VARCHAR(1000) NOT NULL DEFAULT '-' COMMENT 'Último usuario que modificó la fila',
+  PRIMARY KEY (`DatoMiscelaneo`)
+) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_spanish_ci COMMENT = 'Datos misceláneos sobre el módulo';

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

@@ -2,6 +2,7 @@ import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/co
 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';
@@ -29,9 +30,11 @@ export class ManualComponent implements OnInit, OnDestroy {
   private _destroy$ = new Subject<void>();
   @ViewChild('contenidoManual') contenidoManualRef!: ElementRef;
 
-  constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}
+  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;

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

@@ -2,6 +2,15 @@
 .cabecera2 {
   width: 100%;
   border-bottom: 1px solid #707070;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.cabecera2-info {
+  flex: 1;
+  min-width: 0;
 }
 
 .cabecera2 p {
@@ -9,6 +18,7 @@
   font-family: "Roboto";
   letter-spacing: 0;
   color: #000;
+  margin: 0;
 }
 
 .cabecera2 .titulo2 {
@@ -20,6 +30,68 @@
   font-size: small;
 }
 
+/* Filtro de tarjetas */
+.filtro-tarjetas {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #f0f4f8;
+  border: 1px solid #c4d0de;
+  border-radius: 8px;
+  padding: 4px 8px;
+  flex-shrink: 0;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.filtro-tarjetas:focus-within {
+  border-color: #1976d2;
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+}
+
+.filtro-icono {
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+  color: #6b7c8f;
+  flex-shrink: 0;
+}
+
+.filtro-input {
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+  color: #333;
+  width: 180px;
+}
+
+.filtro-input::placeholder {
+  color: #a0aab4;
+}
+
+.filtro-limpiar {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  color: #6b7c8f;
+  transition: color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.filtro-limpiar mat-icon {
+  font-size: 16px !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.filtro-limpiar:hover {
+  color: #c0392b;
+}
+
 /* Botones */
 .botonesDeNavegacion {
   padding: 10px;

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

@@ -66,8 +66,23 @@
       <div class="contenido">
         @if(TienePermiso){
         <div class="cabecera2">
-          <p class="titulo2">{{ Descripcion }}</p>
-          <p class="descripcion2">{{ Detalle }}</p>
+          <div class="cabecera2-info">
+            <p class="titulo2">{{ Descripcion }}</p>
+            <p class="descripcion2">{{ Detalle }}</p>
+          </div>
+          @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)="onFiltroChange($event)" aria-label="Buscar tarjeta por nombre" />
+            @if (filtro) {
+            <button class="filtro-limpiar" (click)="limpiarFiltro()" title="Limpiar búsqueda"
+              aria-label="Limpiar búsqueda">
+              <mat-icon>close</mat-icon>
+            </button>
+            }
+          </div>
+          }
         </div>
         <ng-content><router-outlet /></ng-content>
         }@else{

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

@@ -37,6 +37,17 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
   public AnimarUsuariosActivos: boolean = true;
   private intervaloUsuarios: any;
 
+  get esDashboard(): boolean { return this.router.url === '/'; }
+  get filtro(): string { return this.datosGlobalesService.filtroDeTarjetas$.value; }
+
+  onFiltroChange(event: Event): void {
+    this.datosGlobalesService.filtroDeTarjetas$.next((event.target as HTMLInputElement).value);
+  }
+
+  limpiarFiltro(): void {
+    this.datosGlobalesService.filtroDeTarjetas$.next('');
+  }
+
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private location: Location, private dialog: MatDialog, private router: Router, private ngZone: NgZone) {
     if (datosGlobalesService.ObtenerToken() === '') {
       datosGlobalesService.RedirigirALogin();

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

@@ -14,6 +14,17 @@
   box-sizing: border-box;
 }
 
+.tarjeta-opaca {
+  opacity: 0.15;
+  filter: grayscale(50%);
+  transition: opacity 0.25s ease, filter 0.25s ease;
+  pointer-events: none;
+}
+
+.contenido>div[cdkDrag] {
+  transition: opacity 0.25s ease, filter 0.25s ease;
+}
+
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 8px;

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

@@ -1,6 +1,6 @@
 <div class="contenido" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)">
   @for (tarjeta of tarjetas; track tarjeta.titulo) {
-  <div cdkDrag>
+  <div cdkDrag [class.tarjeta-opaca]="esDimmed(tarjeta)">
     @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,5 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
 import { TarjetaComponent } from "../../Componentes/Nucleo/tarjeta/tarjeta.component";
 import { TarjetaMultipleComponent } from "../../Componentes/Nucleo/tarjeta-multiple/tarjeta-multiple.component";
 import { TarjetaReporteComponent } from "../../Componentes/Nucleo/tarjeta-reporte/tarjeta-reporte.component";
@@ -58,17 +60,33 @@ type AnyTarjetaConfig = TarjetaConfig | TarjetaMultipleConfig | TarjetaReporteCo
   styleUrl: "./contenedor-principal.component.css"
 })
 
-export class ContenedorPrincipalComponent implements OnInit {
+export class ContenedorPrincipalComponent implements OnInit, OnDestroy {
   public cantidad: number = 0;
   public cantidadMaxima: number = 0;
   public tarjetas: AnyTarjetaConfig[] = [];
+  public filtro: string = '';
+  private destroy$ = new Subject<void>();
 
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {
     this.cantidad = 0;
     this.cantidadMaxima = 0;
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  esDimmed(tarjeta: AnyTarjetaConfig): boolean {
+    if (!this.filtro.trim()) return false;
+    return !tarjeta.titulo.toLowerCase().includes(this.filtro.toLowerCase());
+  }
+
   ngOnInit() {
+    this.datosGlobalesService.filtroDeTarjetas$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(f => this.filtro = f);
+
     this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerTarjetasDelContenedor`).subscribe({
       next: (datos: any) => {
         this.tarjetas = (datos.body ?? []).map((d: any) => this.mapearTarjeta(d));

package/templates/frontend/src/app/datos-globales.service.ts

@@ -1,16 +1,19 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DatosGlobalesService {
 
+  readonly filtroDeTarjetas$ = new BehaviorSubject<string>('');
+
   constructor() { }
 
   ObtenerToken() {
     const baseUrl = this.ObtenerURL();
     if (baseUrl === 'http://localhost/') {
-      return 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiIxMiIsImlhdCI6MTc2MzEzMDc0NSwiZXhwIjoxNzYzMTY2NzQ1fQ.0Ferkg8T4bOGmpCR2RWdKxUwzOJr2xuqNBbX502D7vs';
+      return 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiIxMiIsIklkZW50aWZpY2Fkb3IiOiIxMiIsImlhdCI6MTc3Nzk4OTgwOSwiZXhwIjoxNzc4MDI1ODA5fQ.T1kUm7H4hwbapQ3eFok31GVvezkPitdTlJL96MorozY';
     }
     const match = document.cookie.match(/(?:^|;\s*)_siguid=([^;]+)/);
     let token = match ? decodeURIComponent(match[1]) : '';