utn-cli 1.0.0

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

@@ -0,0 +1,300 @@
+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';
+
+@Component({
+  selector: 'app-gestion-tabla',
+  imports: [
+    TablaComponent,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    MatRadioModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatProgressSpinnerModule
+  ],
+  templateUrl: './gestion-tabla.component.html',
+  styleUrls: ['./gestion-tabla.component.css'],
+})
+export class GestionTablaComponent {
+  // public DatosParaPoblarLaTabla: any[] = [];
+  // Si NO se inicializa muestra la barra de "cargando" y se queda "pegado" en "cargando", esto pasa con más de 15.000 registros
+  public DatosParaPoblarLaTabla: any[] = [];
+  public tiposDeLicencias: any[] = [];
+  public cargando = false;
+
+  // TipoDeFiltro: Ninguno,BaseDeDatos,Tabla
+  // Ninguno: la columna no aparecerá en la lista desplegable
+  // BaseDeDatos: para las tablas paginadas se usará en la cláusa WHERE
+  // Tabla: para las NO tablas paginadas se usará predeterminadamente
+  // Si la tabla no pagina los resultados, TipoDeFiltro puede ser siempre 'Tabla'
+  public columnas = [
+    { Llave: 'NumeroBoleta', Alias: 'N° de boleta', TipoDeFiltro: 'Tabla' },
+    { Llave: 'Descripcion', Alias: 'Tipo de ausencia', TipoDeFiltro: 'Tabla' },
+    { Llave: 'FechaDeInicio', Alias: 'Fecha de inicio', TipoDeFiltro: 'Tabla' },
+    { Llave: 'FechaDeFinal', Alias: 'Fecha final', TipoDeFiltro: 'Tabla' },
+    { Llave: 'TotalDeDias', Alias: 'Total de días', TipoDeFiltro: 'Tabla' },
+    { Llave: 'CodigoDeDoctor', Alias: 'Código y nombre del doctor', TipoDeFiltro: 'Tabla' },
+    { Llave: 'AreaDeSalud', Alias: 'Área de salud', TipoDeFiltro: 'Tabla' },
+    { Llave: 'Estado', Alias: 'Estado', TipoDeFiltro: 'Tabla' }
+  ];
+
+  public estadosQuePermitenEdicion = ['Pendiente'];
+  // https://fonts.google.com/icons
+  acciones = [
+    { icono: 'edit', color: 'azul', textoAyuda: 'Editar', ejecutar: (fila: any) => this.AbrirModal(fila), },
+    { icono: 'draw', color: 'marino', textoAyuda: 'Firmar', ejecutar: (fila: any) => this.confirmacionFirmaDelUsuario(fila), },
+    { icono: 'delete', color: 'rojo', textoAyuda: 'Eliminar', ejecutar: (fila: any) => this.confirmacionEliminar(fila), },
+  ];
+  public accionesSiempreClickeable = [
+    { icono: 'upload_file', color: 'verde', textoAyuda: 'Subir adjuntos', ejecutar: (fila: any) => this.AbrirModalArchivo(fila), },
+    { icono: 'info', color: 'verdeoscuro', textoAyuda: 'Información', ejecutar: (fila: any) => this.mostrarDetalleDelRegistro(fila.LicenciaId), }
+  ];
+  constructor(private http: HttpClient, private dialog: MatDialog, private datosGlobalesService: DatosGlobalesService) {
+    this.obtenerDatosParaPoblarLaTabla();
+    this.obtenerTiposLicencias();
+  }
+
+  // PuntosPorColegioEnCantonConMIDH(fila: any): void {
+  //   this.dialog.open(MensajeConfirmacionComponent, {
+  //     data: {
+  //       titulo: 'Confirmación',
+  //       mensaje: `¿Confirma que desea actualizar las los púntos por colegio en cantón con MIDH?`,
+  //       textoCerrar: 'Cancelar',
+  //       textoAceptar: 'Actualizar',
+  //       onClose: () => { },
+  //       onAccept: () => {
+  //         this.cargando = true;
+  //         this.http.post(`${this.datosGlobalesService.ObtenerURL()}ParametrosAcciones/PuntosPorColegioEnCantonConMIDH`, { Periodo: fila.Periodo }).subscribe({
+  //           next: (datos: any) => {
+  //             this.dialog.open(MensajeConfirmacionComponent, {
+  //               data: {
+  //                 titulo: 'Confirmación',
+  //                 mensaje: datos.body,
+  //                 textoCerrar: 'Cancelar',
+  //                 textoAceptar: 'Cerrar',
+  //                 onClose: () => { },
+  //                 onAccept: () => { },
+  //               },
+  //             });
+  //             this.obtenerDatosParaPoblarLaTabla();
+  //           },
+  //           error: (error) => {
+  //             this.obtenerDatosParaPoblarLaTabla();
+  //           },
+  //           complete: () => {
+  //           this.cargando = false; // Ocultar spinner
+  //           }
+  //         });
+  //       },
+  //     },
+  //   });
+  // }
+
+  mostrarDetalleDelRegistro(LicenciaId: any): void {
+    let data = {};
+    this.http
+      .get(`${this.datosGlobalesService.ObtenerURL()}licencias/datosDeUnaLicencia/${LicenciaId}`)
+      .subscribe({
+        next: (datos: any) => {
+          let data = datos.body[0];
+          this.dialog.open(MensajeInformacionComponent, { data });
+        },
+      });
+  }
+
+  confirmacionFirmaDelUsuario(fila: any): void {
+    this.dialog.open(MensajeConfirmacionComponent, {
+      data: {
+        titulo: 'Confirmación',
+        mensaje: `¿Realmente desea hacer la confirmación de este registro?`,
+        textoCerrar: 'Cancelar',
+        textoAceptar: 'Firmar',
+        onClose: () => { },
+        onAccept: () => { this.firmaFuncionario(fila.LicenciaId) },
+      },
+    });
+  }
+  firmaFuncionario(LicenciaId: any): void {
+    this.http
+      .post(`${this.datosGlobalesService.ObtenerURL()}licencias/firmaFuncionario`, { LicenciaId })
+      .subscribe({
+        next: (datos: any) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+        error: (error) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+      });
+  }
+  confirmacionEliminar(fila: any): void {
+    this.dialog.open(MensajeConfirmacionComponent, {
+      data: {
+        titulo: 'Confirmación',
+        mensaje: `¿Confirma que desea eliminar este registro?`,
+        textoCerrar: 'Cancelar',
+        textoAceptar: 'Eliminar',
+        onClose: () => { },
+        onAccept: () => { this.eliminar(fila.LicenciaId) },
+      },
+    });
+  }
+  eliminar(LicenciaId: any): void {
+    this.http
+      .post(`${this.datosGlobalesService.ObtenerURL()}licencias/borrar`, { LicenciaId })
+      .subscribe({
+        next: (datos: any) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+        error: (error) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+      });
+  }
+
+  public PaginarResultados: boolean = false;
+  public TotalDeRegistros: number = 0;
+  public PaginadorAccion: string = '-';
+  public PaginadorIndice: number = 0;
+  public PaginadorTamanio: number = 0;
+  public PaginadorFiltro: string = '&&&&';
+  public PaginadorColumnaParaFiltrar: string = '-';
+  public PaginadorColumnasParaFiltrar: string = '-';
+  public ColumnaParaOrdenar: string = '-';
+  public TipoDeOrden: string = '-';
+  onCambioDePagina(event: { accion: string, pageIndex: number, pageSize: number, valorParaFiltrar: string, columnaParaFiltrar: string, columnasParaFiltrar: string, ordenColumna: string, ordenDireccion: string }) {
+    this.PaginadorAccion = event.accion;
+    this.PaginadorIndice = event.pageIndex;
+    this.PaginadorTamanio = event.pageSize;
+    this.PaginadorFiltro = event.valorParaFiltrar || '&&&&';
+    this.PaginadorColumnaParaFiltrar = event.columnaParaFiltrar || '-';
+    this.PaginadorColumnasParaFiltrar = event.columnasParaFiltrar || '-';
+    this.ColumnaParaOrdenar = event.ordenColumna || '-';
+    this.TipoDeOrden = event.ordenDireccion || '-';
+    if (this.PaginarResultados) {
+      this.obtenerDatosParaPoblarLaTabla();
+    }
+  }
+
+  obtenerDatosParaPoblarLaTabla() {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/listar`).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.error('Problemas al obtener los registros:', datos.error);
+          return;
+        }
+        if (this.PaginarResultados) {
+          this.DatosParaPoblarLaTabla = datos.body.Registros || [];
+          this.TotalDeRegistros = datos.body.TotalDeRegistros || 0;
+        } else {
+          this.DatosParaPoblarLaTabla = datos.body || [];
+          this.TotalDeRegistros = datos.body.length || 0;
+        }
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los registros: ', error);
+      },
+    });
+  }
+  obtenerTiposLicencias() {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/tipos`).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.error('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.tiposDeLicencias = datos.body || [];
+
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los registros: ', error);
+      },
+    });
+  }
+  Agregar(incapacidad: any) {
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}licencias/agregar`, incapacidad).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.log('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.obtenerDatosParaPoblarLaTabla();
+      },
+      error: (error) => {
+        console.log('Problemas al intentar obtener los registros', error);
+      },
+    });
+  }
+  Actualizar(incapacidad: any) {
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}licencias/actualizar`, incapacidad).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.log('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.obtenerDatosParaPoblarLaTabla();
+      },
+      error: (error) => {
+        console.log('Problemas al intentar obtener los registros', error);
+      },
+    });
+  }
+  DescargarReporte() {
+    this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/reporte`, {
+      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);
+      },
+      complete: () => {
+        this.cargando = false;
+      }
+    });
+  }
+  AbrirModal(incapacidad?: any): void {
+    const dialogRef = this.dialog.open(GuardarIncapacidadComponent, {
+      data: { Incapacidad: incapacidad, TiposDeLicencias: this.tiposDeLicencias },
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result !== undefined) {
+        if (incapacidad) {
+          this.Actualizar(result);
+        }
+        else {
+          this.Agregar(result);
+        }
+      }
+    });
+  }
+  async AbrirModalArchivo(incapacidad?: any): Promise<void> {
+    const dialogRef = this.dialog.open(SubirArchivoComponent, {
+      data: {
+        Etiqueta: incapacidad.LicenciaId
+        , EsEditable: incapacidad.Estado == 'Pendiente'
+        , Permiso: 'Usuario'
+      },
+    });
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-tabla-XYZ/gestion-tabla-XYZ.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-XYZ/gestion-tabla-XYZ.component.html

@@ -0,0 +1,43 @@
+<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"
+[subColumnas] = "subColumnas"
+[datos] = "DatosParaPoblarLaTabla"
+[acciones] = "acciones"
+[accionesDinamicas] = "accionesDinamicas"
+[accionesSiempreClickeable] = "accionesSiempreClickeable"
+[subAcciones] = "subAcciones"
+[subAccionesSiempreClickeable] = "subAccionesSiempreClickeable"
+[subAccionesDinamicas] = "subAccionesDinamicas"
+[desplegable] = "false"
+[atributoDesplegable] = ""
+[mostrarElBotonDeGuardado] = "true"
+[mostrarElBotonDeDescargar] = "true"
+[mostrarElBotonDeFiltro] = "true"
+[mostrarPaginador] = "true"
+[estadosQuePermitenEdicion] = "accionesSiempreClickeable"
+[subEstadosQuePermitenEdicion] = "subEstadosQuePermitenEdicion"
+[paginarResultados] = "PaginarResultados"
+[TotalDeRegistros] = "TotalDeRegistros"
+(GuardarAccion)="AbrirModal()"
+(DescargarInformacion)="DescargarReporte()"
+(CambioDePagina)="onCambioDePagina($event)"
+></app-tabla>
+  </div>
+  <div class="pie">
+  </div>
+  } @else {
+  <div>
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>Cargando...
+  </div>
+  }
+</div>

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

@@ -0,0 +1,305 @@
+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';
+
+@Component({
+  selector: 'app-gestion-tabla-XYZ',
+  imports: [
+    TablaComponent,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    MatRadioModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatProgressSpinnerModule
+  ],
+  templateUrl: './gestion-tabla-XYZ.component.html',
+  styleUrls: ['./gestion-tabla-XYZ.component.css'],
+})
+export class GestionTablaXYZComponent {
+  // public DatosParaPoblarLaTabla: any[] = [];
+  // Si NO se inicializa muestra la barra de "cargando" y se queda "pegado" en "cargando", esto pasa con más de 15.000 registros
+  public DatosParaPoblarLaTabla: any[] = [];
+  public tiposDeLicencias: any[] = [];
+  public cargando = false;
+
+  // TipoDeFiltro: Ninguno,BaseDeDatos,Tabla
+  // Ninguno: la columna no aparecerá en la lista desplegable
+  // BaseDeDatos: para las tablas paginadas se usará en la cláusa WHERE
+  // Tabla: para las NO tablas paginadas se usará predeterminadamente
+  // Si la tabla no pagina los resultados, TipoDeFiltro puede ser siempre 'Tabla'
+  public columnas = [
+    { Llave: 'NumeroBoleta', Alias: 'N° de boleta', TipoDeFiltro: 'Tabla' },
+    { Llave: 'Descripcion', Alias: 'Tipo de ausencia', TipoDeFiltro: 'Tabla' },
+    { Llave: 'FechaDeInicio', Alias: 'Fecha de inicio', TipoDeFiltro: 'Tabla' },
+    { Llave: 'FechaDeFinal', Alias: 'Fecha final', TipoDeFiltro: 'Tabla' },
+    { Llave: 'TotalDeDias', Alias: 'Total de días', TipoDeFiltro: 'Tabla' },
+    { Llave: 'CodigoDeDoctor', Alias: 'Código y nombre del doctor', TipoDeFiltro: 'Tabla' },
+    { Llave: 'AreaDeSalud', Alias: 'Área de salud', TipoDeFiltro: 'Tabla' },
+    { Llave: 'Estado', Alias: 'Estado', TipoDeFiltro: 'Tabla' }
+  ];
+  public subColumnas = [];
+  public estadosQuePermitenEdicion = ['Pendiente'];
+  public subEstadosQuePermitenEdicion = [];
+  // https://fonts.google.com/icons
+  public acciones = [
+    { icono: 'edit', color: 'azul', textoAyuda: 'Editar', ejecutar: (fila: any) => this.AbrirModal(fila), },
+    { icono: 'draw', color: 'marino', textoAyuda: 'Firmar', ejecutar: (fila: any) => this.confirmacionFirmaDelUsuario(fila), },
+    { icono: 'delete', color: 'rojo', textoAyuda: 'Eliminar', ejecutar: (fila: any) => this.confirmacionEliminar(fila), },
+  ];
+  public accionesDinamicas = [];
+  public accionesSiempreClickeable = [
+    { icono: 'upload_file', color: 'verde', textoAyuda: 'Subir adjuntos', ejecutar: (fila: any) => this.AbrirModalArchivo(fila), },
+    { icono: 'info', color: 'verdeoscuro', textoAyuda: 'Información', ejecutar: (fila: any) => this.mostrarDetalleDelRegistro(fila.LicenciaId), }
+  ];
+  public subAcciones = [];
+  public subAccionesSiempreClickeable = [];
+  public subAccionesDinamicas = [];
+  constructor(private http: HttpClient, private dialog: MatDialog, private datosGlobalesService: DatosGlobalesService) {
+    this.obtenerDatosParaPoblarLaTabla();
+    this.obtenerTiposLicencias();
+  }
+
+  // PuntosPorColegioEnCantonConMIDH(fila: any): void {
+  //   this.dialog.open(MensajeConfirmacionComponent, {
+  //     data: {
+  //       titulo: 'Confirmación',
+  //       mensaje: `¿Confirma que desea actualizar las los púntos por colegio en cantón con MIDH?`,
+  //       textoCerrar: 'Cancelar',
+  //       textoAceptar: 'Actualizar',
+  //       onClose: () => { },
+  //       onAccept: () => {
+  //         this.cargando = true;
+  //         this.http.post(`${this.datosGlobalesService.ObtenerURL()}ParametrosAcciones/PuntosPorColegioEnCantonConMIDH`, { Periodo: fila.Periodo }).subscribe({
+  //           next: (datos: any) => {
+  //             this.dialog.open(MensajeConfirmacionComponent, {
+  //               data: {
+  //                 titulo: 'Confirmación',
+  //                 mensaje: datos.body,
+  //                 textoCerrar: 'Cancelar',
+  //                 textoAceptar: 'Cerrar',
+  //                 onClose: () => { },
+  //                 onAccept: () => { },
+  //               },
+  //             });
+  //             this.obtenerDatosParaPoblarLaTabla();
+  //           },
+  //           error: (error) => {
+  //             this.obtenerDatosParaPoblarLaTabla();
+  //           },
+  //           complete: () => {
+  //           this.cargando = false; // Ocultar spinner
+  //           }
+  //         });
+  //       },
+  //     },
+  //   });
+  // }
+
+  mostrarDetalleDelRegistro(LicenciaId: any): void {
+    let data = {};
+    this.http
+      .get(`${this.datosGlobalesService.ObtenerURL()}licencias/datosDeUnaLicencia/${LicenciaId}`)
+      .subscribe({
+        next: (datos: any) => {
+          let data = datos.body[0];
+          this.dialog.open(MensajeInformacionComponent, { data });
+        },
+      });
+  }
+
+  confirmacionFirmaDelUsuario(fila: any): void {
+    this.dialog.open(MensajeConfirmacionComponent, {
+      data: {
+        titulo: 'Confirmación',
+        mensaje: `¿Realmente desea hacer la confirmación de este registro?`,
+        textoCerrar: 'Cancelar',
+        textoAceptar: 'Firmar',
+        onClose: () => { },
+        onAccept: () => { this.firmaFuncionario(fila.LicenciaId) },
+      },
+    });
+  }
+  firmaFuncionario(LicenciaId: any): void {
+    this.http
+      .post(`${this.datosGlobalesService.ObtenerURL()}licencias/firmaFuncionario`, { LicenciaId })
+      .subscribe({
+        next: (datos: any) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+        error: (error) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+      });
+  }
+  confirmacionEliminar(fila: any): void {
+    this.dialog.open(MensajeConfirmacionComponent, {
+      data: {
+        titulo: 'Confirmación',
+        mensaje: `¿Confirma que desea eliminar este registro?`,
+        textoCerrar: 'Cancelar',
+        textoAceptar: 'Eliminar',
+        onClose: () => { },
+        onAccept: () => { this.eliminar(fila.LicenciaId) },
+      },
+    });
+  }
+  eliminar(LicenciaId: any): void {
+    this.http
+      .post(`${this.datosGlobalesService.ObtenerURL()}licencias/borrar`, { LicenciaId })
+      .subscribe({
+        next: (datos: any) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+        error: (error) => {
+          this.obtenerDatosParaPoblarLaTabla();
+        },
+      });
+  }
+
+  public PaginarResultados: boolean = false;
+  public TotalDeRegistros: number = 0;
+  public PaginadorAccion: string = '-';
+  public PaginadorIndice: number = 0;
+  public PaginadorTamanio: number = 0;
+  public PaginadorFiltro: string = '&&&&';
+  public PaginadorColumnaParaFiltrar: string = '-';
+  public PaginadorColumnasParaFiltrar: string = '-';
+  public ColumnaParaOrdenar: string = '-';
+  public TipoDeOrden: string = '-';
+  onCambioDePagina(event: { accion: string, pageIndex: number, pageSize: number, valorParaFiltrar: string, columnaParaFiltrar: string, columnasParaFiltrar: string, ordenColumna: string, ordenDireccion: string }) {
+    this.PaginadorAccion = event.accion;
+    this.PaginadorIndice = event.pageIndex;
+    this.PaginadorTamanio = event.pageSize;
+    this.PaginadorFiltro = event.valorParaFiltrar || '&&&&';
+    this.PaginadorColumnaParaFiltrar = event.columnaParaFiltrar || '-';
+    this.PaginadorColumnasParaFiltrar = event.columnasParaFiltrar || '-';
+    this.ColumnaParaOrdenar = event.ordenColumna || '-';
+    this.TipoDeOrden = event.ordenDireccion || '-';
+    if (this.PaginarResultados) {
+      this.obtenerDatosParaPoblarLaTabla();
+    }
+  }
+
+  obtenerDatosParaPoblarLaTabla() {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/listar`).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.error('Problemas al obtener los registros:', datos.error);
+          return;
+        }
+        if (this.PaginarResultados) {
+          this.DatosParaPoblarLaTabla = datos.body.Registros || [];
+          this.TotalDeRegistros = datos.body.TotalDeRegistros || 0;
+        } else {
+          this.DatosParaPoblarLaTabla = datos.body || [];
+          this.TotalDeRegistros = datos.body.length || 0;
+        }
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los registros: ', error);
+      },
+    });
+  }
+  obtenerTiposLicencias() {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/tipos`).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.error('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.tiposDeLicencias = datos.body || [];
+
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los registros: ', error);
+      },
+    });
+  }
+  Agregar(incapacidad: any) {
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}licencias/agregar`, incapacidad).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.log('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.obtenerDatosParaPoblarLaTabla();
+      },
+      error: (error) => {
+        console.log('Problemas al intentar obtener los registros', error);
+      },
+    });
+  }
+  Actualizar(incapacidad: any) {
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}licencias/actualizar`, incapacidad).subscribe({
+      next: (datos: any) => {
+        if (datos.error) {
+          console.log('Problemas al intentar obtener los registros:', datos.error);
+          return;
+        }
+        this.obtenerDatosParaPoblarLaTabla();
+      },
+      error: (error) => {
+        console.log('Problemas al intentar obtener los registros', error);
+      },
+    });
+  }
+  DescargarReporte() {
+    this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/reporte`, {
+      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);
+      },
+      complete: () => {
+        this.cargando = false;
+      }
+    });
+  }
+  AbrirModal(incapacidad?: any): void {
+    const dialogRef = this.dialog.open(GuardarIncapacidadComponent, {
+      data: { Incapacidad: incapacidad, TiposDeLicencias: this.tiposDeLicencias },
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result !== undefined) {
+        if (incapacidad) {
+          this.Actualizar(result);
+        }
+        else {
+          this.Agregar(result);
+        }
+      }
+    });
+  }
+  async AbrirModalArchivo(incapacidad?: any): Promise<void> {
+    const dialogRef = this.dialog.open(SubirArchivoComponent, {
+      data: {
+        Etiqueta: incapacidad.LicenciaId
+        , EsEditable: incapacidad.Estado == 'Pendiente'
+        , Permiso: 'Usuario'
+      },
+    });
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-tabla-jefe/gestion-tabla-jefe.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;
+}