utn-cli 1.0.0

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

@@ -0,0 +1,142 @@
+/* Cabecera */
+.cabecera2 {
+  width: 100%;
+  border-bottom: 1px solid #707070;
+}
+
+.cabecera2 p {
+  text-align: left;
+  font-family: "Roboto";
+  letter-spacing: 0;
+  color: #000;
+}
+
+.cabecera2 .titulo2 {
+  font-size: large;
+  font-weight: 600;
+}
+
+.cabecera2 .descripcion2 {
+  font-size: small;
+}
+
+/* Botones */
+.botonesDeNavegacion {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.botonDeNavegacion {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1976d2;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+/* Contenedor */
+.contenedor {
+  flex-grow: 1;
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  background-color: aliceblue;
+  background-image: url('../../../../assets/Puntos.svg');
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: contain;
+}
+
+.contenedor.calidad {
+  background-color: #FAFF6B;
+}
+
+.contenedor.pruebas {
+  background-color: #95D03A;
+}
+
+/* Contenido */
+.contenido {
+  border: 3px solid #0b4fce;
+  border-radius: 15px;
+  padding: 20px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  background-color: white;
+  text-align: center;
+}
+
+/* Titulos */
+.titulo,
+.encabezado {
+  font-weight: bold;
+  text-align: center;
+  padding: 0.5rem;
+  position: relative;
+}
+
+.titulo {
+  font-size: 18px;
+  background-color: #002f6b;
+  color: white;
+}
+
+.encabezado {
+  font-size: 25px;
+  background-color: #adbccf;
+  color: #002f6b;
+  display: flex;
+}
+
+/* Pie */
+.pie {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: #adbccf;
+  color: #000;
+  font-size: 15px;
+  flex-shrink: 0;
+}
+
+.pie-col {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.pie-col.izquierda {
+  justify-content: flex-start;
+  direction: ltr;
+}
+
+.pie-col.centro {
+  flex: 1;
+  justify-content: center;
+}
+
+.pie-col.derecha {
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+  direction: rtl;
+}
+
+/* Página */
+.pagina {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.zona-scrollable {
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,90 @@
+<div class="pagina">
+  <div class="encabezado">
+    <div class="pie-col izquierda">
+    </div>
+    <div class="pie-col centro">
+      Universidad Técnica Nacional
+    </div>
+    <div class="pie-col derecha">
+      @if(TienePermiso) {
+      <button class="botonDeNavegacion" matTooltip="Salir" mat-button (click)="Salir()">
+        <mat-icon>logout</mat-icon>
+      </button>
+      <button class="botonDeNavegacion" matTooltip="Perfil" mat-button (click)="irAPerfil()">
+        <mat-icon>person</mat-icon>
+      </button>
+      } @else {
+      <button class="botonDeNavegacion" matTooltip="Entrar" mat-button (click)="Entrar()">
+        <mat-icon>login</mat-icon>
+      </button>
+      }
+    </div>
+  </div>
+
+  <div class="zona-scrollable">
+    @if(TienePermiso){
+    <div class="titulo">{{ Titulo }}</div>
+    }
+    <div [ngClass]="claseDelContenedor">
+      @if(TienePermiso) {
+      <div class="botonesDeNavegacion">
+        <button class="botonDeNavegacion" matTooltip="Ir atrás" mat-button (click)="irAtras()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+        <button class="botonDeNavegacion" matTooltip="Ir al menú del módulo" mat-button (click)="irAlMenuDeModulo()">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <!-- <button class="botonDeNavegacion" matTooltip="Ir al móudulo padre" mat-button (click)="irAlModuloPadre()">
+          <mat-icon>apps</mat-icon>
+        </button> -->
+        <button class="botonDeNavegacion" matTooltip="Ir al inicio" mat-button (click)="irAlInicio()">
+          <mat-icon>home</mat-icon>
+        </button>
+      </div>
+      }
+      <div class="contenido">
+        @if(TienePermiso){
+        <div class="cabecera2">
+          <p class="titulo2">{{ Descripcion }}</p>
+          <p class="descripcion2">{{ Detalle }}</p>
+        </div>
+        <ng-content><router-outlet /></ng-content>
+        }@else{
+        <h3>No tiene permisos para consultar este módulo</h3>
+        }
+      </div>
+    </div>
+  </div>
+
+  <div class="pie">
+    <div class="pie-col izquierda">
+      Módulo: {{ Modulo }}. Versión {{ Version }}.
+    </div>
+    <div class="pie-col centro">
+    </div>
+    <div class="pie-col derecha">
+      @if(TienePermiso) {
+      <button class="botonDeNavegacion" matTooltip="Mensajes" mat-button (click)="irAMensajes()">
+        @if (Mensajes.length > 0) {
+        <mat-icon>mark_email_unread</mat-icon>
+        } @else {
+        <mat-icon>email_unread</mat-icon>
+        }
+      </button>
+      }
+      @if(EnlaceDelVideo !== '-') {
+      <button class="botonDeNavegacion" matTooltip="Vídeo" mat-button (click)="irAVideo()">
+        <mat-icon>live_tv</mat-icon>
+      </button>
+      }
+      @if(EnlaceDelManual !== '-') {
+      <button class="botonDeNavegacion" matTooltip="Ayuda" mat-button (click)="irAAyuda()">
+        <mat-icon>help</mat-icon>
+      </button>
+      }
+      <button class="botonDeNavegacion" matTooltip="Reporte" mat-button (click)="irASoporte()">
+        <mat-icon>support_agent</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,139 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+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 { ReporteDeIncidenciasComponent } from '../../../Componentes/Nucleo/reporte-de-incidencias/reporte-de-incidencias.component'
+import { MensajesComponent } from '../../../Componentes/Nucleo/mensajes/mensajes.component'
+
+@Component({
+  selector: 'app-contenedor-componentes',
+  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule],
+  templateUrl: './contenedor-componentes.component.html',
+  styleUrl: './contenedor-componentes.component.css'
+})
+export class ContenedorComponentesComponent {
+  public TienePermiso: boolean = false;
+  public Titulo: string = '';
+  public Modulo: string = '';
+  public Version: string = '';
+  public Mensajes: string[] = [];
+  public EnlaceDelManual: string = '-';
+  public EnlaceDelVideo: string = '-';
+  public claseDelContenedor: string = '';
+  public Descripcion: string = '';
+  public Detalle: string = '';
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private location: Location, private dialog: MatDialog) {
+    if (datosGlobalesService.ObtenerToken() === '') {
+      datosGlobalesService.RedirigirALogin();
+    }
+  }
+
+  ngOnInit() {
+    const url = window.location.href.toLowerCase();
+    if (url.includes('calidad')) {
+      this.claseDelContenedor = 'contenedor calidad';
+    } else if (url.includes('pruebas')) {
+      this.claseDelContenedor = 'contenedor pruebas';
+    } else {
+      this.claseDelContenedor = 'contenedor';
+    }
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/validarToken').subscribe((datos: any) => {
+      this.TienePermiso = datos.body;
+      if (!this.TienePermiso) {
+        this.Entrar();
+      }
+      this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/configurarFrontend').subscribe((datos: any) => {
+        this.Titulo = datos.body.Titulo;
+        this.Modulo = datos.body.Modulo;
+        this.Version = datos.body.Version;
+        this.Descripcion = datos.body.Descripcion;
+        this.Detalle = datos.body.Detalle;
+      })
+      this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerNotificaciones', {
+        headers: new HttpHeaders({
+          Authorization: this.datosGlobalesService.ObtenerToken(),
+          'Content-Type': 'application/json'
+        })
+      }).subscribe((datos: any) => {
+        this.Mensajes = datos.body;
+      })
+    })
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerDetalleDelModulo').subscribe((datos: any) => {
+      this.EnlaceDelManual = datos.body[0].EnlaceDelManual;
+      this.EnlaceDelVideo = datos.body[0].EnlaceDelVideo;
+    })
+  }
+
+  irAtras(): void {
+    this.location.back();
+  }
+
+  irAlMenuDeModulo(): void {
+    window.location.href = new URL(window.location.href).origin;
+  }
+
+  irAlModuloPadre(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerEnlaceDelModuloPadre').subscribe((datos: any) => {
+      window.location.href = datos.body;
+    })
+  }
+
+  irAlInicio(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerEnlaceDePortal').subscribe((datos: any) => {
+      window.location.href = datos.body;
+    })
+  }
+
+  irAMensajes(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerNotificaciones').subscribe((datos: any) => {
+      let data = datos.body;
+      this.dialog.open(MensajesComponent, { data });
+    })
+  }
+
+  irAAyuda(): void {
+    window.open(this.EnlaceDelManual, '_blank', 'noopener,noreferrer');
+    // const link = document.createElement('a');
+    // link.href = 'assets/Ayuda.pdf';
+    // link.setAttribute('download', 'Ayuda.pdf');
+    // link.setAttribute('target', '_blank');
+    // document.body.appendChild(link);
+    // link.click();
+    // document.body.removeChild(link);
+  }
+
+  irAVideo(): void {
+    window.open(this.EnlaceDelVideo, '_blank', 'noopener,noreferrer');
+  }
+
+  irASoporte(): void {
+    this.dialog.open(ReporteDeIncidenciasComponent);
+  }
+
+  irAPerfil(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerEnlaceDePerfil').subscribe((datos: any) => {
+      window.location.href = datos.body;
+    })
+  }
+
+  Salir(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/cerrarSesion').subscribe((datos: any) => {
+      document.cookie.split(";").forEach(c => {
+        const eqPos = c.indexOf("=");
+        const name = eqPos > -1 ? c.substring(0, eqPos).trim() : c.trim();
+        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
+      });
+      window.location.href = datos.body;
+    })
+  }
+
+  Entrar(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/iniciarSesion').subscribe((datos: any) => {
+      window.location.href = datos.body;
+    })
+  }
+}

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

@@ -0,0 +1,4 @@
+.contenido {
+  display: flex;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,17 @@
+<div class="contenido">
+  <app-tarjeta [rutaASeguir]="'tabla'" titulo="Registro"
+    descripcion="Módulo para el registro de las ausencias por concepto de incapacidades, licencias o permisos"
+    icono="inventory"></app-tarjeta>
+  <app-tarjeta [rutaASeguir]="'graficoDeModulos'" titulo="Gráficos"
+    descripcion="Módulo para la visualización de gráficos sobre módulosV2" icono="analytics"></app-tarjeta>
+  <app-tarjeta [rutaASeguir]="'parametros-reportes'" titulo="Reportes sobre el módulo"
+    descripcion="Módulo para la gestión de los reportes del módulo" icono="analytics"></app-tarjeta>
+  <app-tarjeta [rutaASeguir]="'gestionIframe1'" titulo="Matrícula por sedes" descripcion="Matrícula por sedes"
+    icono="mail"></app-tarjeta>
+  @if(cantidadMaxima > 0) {
+  <app-tarjeta [rutaASeguir]="'aprobaciones'" titulo="Aprobaciones" [cantidad]="cantidad"
+    [cantidadMaxima]="cantidadMaxima"
+    descripcion="Módulo para las aprobaciones de las ausencias por concepto de incapacidades, licencias o permisos por parte de las personas jefes"
+    icono="check"></app-tarjeta>
+  }
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from "@angular/core";
+import { TarjetaComponent } from "../../Componentes/Nucleo/tarjeta/tarjeta.component";
+// import { HttpClient, HttpHeaders } from "@angular/common/http";
+// import { DatosGlobalesService } from '../../datos-globales.service'
+
+@Component({
+  selector: "app-contenedor-principal",
+  imports: [TarjetaComponent],
+  templateUrl: "./contenedor-principal.component.html",
+  styleUrl: "./contenedor-principal.component.css"
+})
+export class ContenedorPrincipalComponent {
+  public cantidad: number = 0;
+  public cantidadMaxima: number = 0;
+
+  constructor(/*private http: HttpClient, private datosGlobalesService: DatosGlobalesService */) {
+    this.cantidad = 0;
+    this.cantidadMaxima = 0;
+  }
+
+  ngOnInit() {
+    // this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/consolidadoDeLaJefatura`).subscribe({
+    //   next: (datos: any) => {
+    //     if (datos.error) {
+    //       console.error('Problemas al obtener los datos:', datos.error);
+    //       return;
+    //     }
+    //     this.cantidad = datos.body[0]['cantidad'];
+    //     this.cantidadMaxima = datos.body[0]['cantidadMaxima'];
+    //   },
+    //   error: (error) => {
+    //     console.error('Problemas al intentar obtener los datos: ', error);
+    //   },
+    // });
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.css

@@ -0,0 +1,4 @@
+.contenido {
+  display: flex;
+  flex-wrap: wrap;
+}

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.html

@@ -0,0 +1,6 @@
+<h1>Reportería del módulo</h1>
+<div class="contenido">
+  <app-tarjeta-reporte [reporteAGenerar]="'ElReporte1'" titulo="Reporte número uno"
+    descripcion="Acá la descripción de lo que hace el reporte número uno"
+    icono="pie_chart" (GenerarReporte)="GenerarReporte($event)"></app-tarjeta-reporte>
+</div>

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.ts

@@ -0,0 +1,36 @@
+import { Component } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { DatosGlobalesService } from '../../datos-globales.service'
+import { TarjetaReporteComponent } from '../../Componentes/Nucleo/tarjeta-reporte/tarjeta-reporte.component';
+
+@Component({
+  selector: "gestion-de-reportes",
+  imports: [TarjetaReporteComponent],
+  templateUrl: "./gestion-de-reportes.component.html",
+  styleUrl: "./gestion-de-reportes.component.css"
+})
+export class GestionDeReportesComponent {
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+
+  ngOnInit() { }
+
+  GenerarReporte(event: { reporte: string }) {
+    if (event.reporte === 'ElReporte1') {
+      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaReporteCSV`, {
+        responseType: 'text'
+      }).subscribe({
+        next: (datos: any) => {
+          const blob = new Blob([decodeURIComponent(datos)], { type: 'text/csv;charset=utf-8;' });
+          const enlace = document.createElement('a');
+          enlace.href = URL.createObjectURL(blob);
+          enlace.download = 'datos.csv';
+          enlace.click();
+        },
+        error: (error) => {
+          console.error('Problemas al intentar descargar el reporte: ', error);
+        },
+      });
+    }
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.css

@@ -0,0 +1,13 @@
+.cargando-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.html

@@ -0,0 +1,13 @@
+<div>
+  <!-- <h3>Gráficos sobre módulos del SIGU</h3> -->
+  @if(cargando) {
+  <div class="cargando-overlay">
+    <mat-spinner diameter="50"></mat-spinner>
+    <p>Procesando, por favor espere...</p>
+  </div>
+  } @else {
+  <app-graficos [TipoDeGrafico]="'Pie'" [Datos]="datosParaElGraficoPie" [Titulo]="'Módulos desarrollados en SIGU'" />
+  <app-graficos [TipoDeGrafico]="'Barras'" [Datos]="datosParaElGraficoBarras"
+    [Titulo]="'Total de nacimientos por mes'" />
+  }
+</div>

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.ts

@@ -0,0 +1,75 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { DatosGlobalesService } from '../../datos-globales.service';
+// import { MatDialog } from '@angular/material/dialog';
+// import { TablaComponent } from '../../Componentes/Nucleo/tabla/tabla.component';
+import { MatButtonModule } from '@angular/material/button';
+// import { GuardarIncapacidadComponent } from '../../Componentes/guardar-incapacidad/guardar-incapacidad.component';
+// import { MensajeConfirmacionComponent } from '../../Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion';
+// import { SubirArchivoComponent } from '../../Componentes/Nucleo/subir-archivo/subir-archivo.component';
+// import { MensajeInformacionComponent } from '../../Componentes/Nucleo/mensaje-informacion/mensaje-informacion';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { GraficosComponent } from '../../Componentes/Nucleo/graficos/graficos.component';
+
+@Component({
+  selector: 'app-gestion-graficos',
+  imports: [
+    // TablaComponent,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    MatRadioModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatProgressSpinnerModule,
+    GraficosComponent
+  ],
+  templateUrl: './gestion-graficos.component.html',
+  styleUrls: ['./gestion-graficos.component.css'],
+})
+export class GestionGraficosComponent {
+
+  public cargando: boolean = false;
+  public datosParaElGraficoPie: any;
+  public datosParaElGraficoBarras: any;
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {
+  }
+  ngOnInit() {
+    this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaGraficoDePie`).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.error('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.datosParaElGraficoPie = datos.body;
+        // this.cargando = false;
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los registros: ', error);
+        // this.cargando = false;
+      },
+    });
+    // this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaGraficoDeBarras`).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.error('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.datosParaElGraficoBarras = datos.body;
+        // this.cargando = false;
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los registros: ', error);
+        // this.cargando = false;
+      },
+    });
+    this.cargando = false;
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-iframe1/gestion-iframe1.component.css

@@ -0,0 +1,13 @@
+.cargando-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}

package/templates/frontend/src/app/Paginas/gestion-iframe1/gestion-iframe1.component.html

@@ -0,0 +1,3 @@
+<div>
+  <app-iframe [url]="'https://matriculadb.sigu.utn.ac.cr/matricula_sede'"></app-iframe>
+</div>

package/templates/frontend/src/app/Paginas/gestion-iframe1/gestion-iframe1.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IframeComponent } from '../../Componentes/Nucleo/iframe/iframe';
+
+@Component({
+  selector: 'app-gestion-iframe1',
+  imports: [
+    IframeComponent
+  ],
+  templateUrl: './gestion-iframe1.component.html',
+  styleUrls: ['./gestion-iframe1.component.css'],
+})
+export class GestionIframe1Component {
+
+}

package/templates/frontend/src/app/Paginas/gestion-tabla/gestion-tabla.component.css

@@ -0,0 +1,13 @@
+.cargando-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}

package/templates/frontend/src/app/Paginas/gestion-tabla/gestion-tabla.component.html

@@ -0,0 +1,24 @@
+<div>
+  <h3>Listado de incapacidades, licencias y permisos por persona</h3>
+  @if(cargando) {
+  <div class="cargando-overlay">
+    <mat-spinner diameter="50"></mat-spinner>
+    <p>Procesando, por favor espere...</p>
+  </div>
+  }
+  @if(DatosParaPoblarLaTabla){
+  <div class="borde">
+    <app-tabla [columnas]="columnas" [datos]="DatosParaPoblarLaTabla" [acciones]="acciones"
+      [mostrarElBotonDeGuardado]="true" [mostrarElBotonDeDescargar]="true" [accionesSiempreClickeable]="accionesSiempreClickeable"
+      [estadosQuePermitenEdicion]="estadosQuePermitenEdicion" (GuardarAccion)="AbrirModal()"
+      (DescargarInformacion)="DescargarReporte()" (CambioDePagina)="onCambioDePagina($event)"
+      [paginarResultados]="PaginarResultados" [TotalDeRegistros]="TotalDeRegistros"></app-tabla>
+  </div>
+  <div class="pie">
+  </div>
+  } @else {
+  <div>
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>Cargando...
+  </div>
+  }
+</div>