reportePersonal.js

/* global Infinity */

const getNode = node => document.querySelector(node);
let jsonResult = {};
let codigoSedeArea, codigoAreaCargo;
/**
 * Crea los elementos option del array que se pase como parametro
 * @method createSelectOptions
 * @param {JSONArray} obj array de objetos
 * @param {String} valueName la key del json que se usará como value del elemento option
 * @param {String} textName la key del json que se usará como text del elemento option
 * @returns {Promise} Promise retorna status, msg
 */
let createSelectOptions = (obj, valueName, textName) => {
  let options = '<option value="0">[SELECCIONAR]</option>';
  obj.forEach((data) => {
    options += '<option value="' + data[valueName] + '">' + data[textName] + '</option>';
  });
  return options;
};
/**
 * Listado de funciones a utilizar en esta página
 */

const functions = {
  /**
   * Inicializar componentes (controles)
   */
  initComponents() {
    $(getNode('.select')).select2({
      minimumResultsForSearch: Infinity
    });
    $(".datepicker").prop('readonly', true);
    $(".datepicker").datepicker({
      dateFormat: 'dd/mm/yy',
      showButtonPanel: false
    });
    let date = new Date();
    $(".datepicker").datepicker("setDate", date);
    $.datepicker.regional['es'] = {
      closeText: 'Cerrar',
      prevText: '<Ant',
      nextText: 'Sig>',
      currentText: 'Hoy',
      monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
      monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
      dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
      dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
      dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
      weekHeader: 'Sm',
      dateFormat: 'dd/mm/yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: '',
      changeMonth: true,
      changeYear: true,
      yearRange: '1900:' + date.getFullYear()
    };
    $.datepicker.setDefaults($.datepicker.regional['es']);
    // condicion de localstorage
    if (localStorage.getItem('jsonResult') !== null) {
      if (Object.keys(jsonResult).length === 0 && jsonResult.constructor === Object) {
        jsonResult = JSON.parse(localStorage.getItem('jsonResult'));
      }
    }

  },
  /**
   * Configuración de categorias de criterio
   */
  configuracionCriterio() {
    getNode('#cboCriterio').onchange = (e) => {
      getNode('#firstDiv').innerHTML = '';
      getNode('#secondDiv').innerHTML = '';
      getNode('#thirdDiv').innerHTML = '';
      this.createActionFilterStructure(0);
      let id = e.currentTarget.value;
      if (!isNaN(id)) {
        functions.createFilterStructure(id);
      } else {
        errorMessage('ERROR!, Por favor, seleccione un criterio de filtro correcto e inténtelo de nuevo.');
        this.createActionFilterStructure(0);
      }
    };
  },
  /**
   * Lista los tipos de documentos
   * @returns {JSONArray} 
   */
  listarTipoDocumentoRequest() {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../TipoDocumentoServlet',
        data: {accion: 'listarTipoDocumento'},
        beforeSend: () => {
          load('Listando tipo de documentos');
        },
        success: (data, textStatus, jqXHR) => {
          if (textStatus === 'success') {
            unload();
            if (data.status) {
              resolve(data.data.tipodocumentos);
            } else {
              errorMessage(data.message);
            }
          }
        },
        error: (jqXHR, textStatus, errorThrown) => {
          reject('Lo sentimos, no se pudo realizar la petición listarTipoDocumentoRequest: ' + errorThrown);
        }
      });
    });
  },
  /**
   * Lista las nacionalidades
   * @returns {JSONArray} 
   */
  listarNacionalidadRequest() {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../NacionalidadServlet',
        data: {accion: 'listarNacionalidad'},
        beforeSend: () => {
          load('Listando nacionalidades');
        },
        success: (data, textStatus, jqXHR) => {
          if (textStatus === 'success') {
            unload();
            if (data.status) {
              resolve(data.data.Nacionalidades);
            } else {
              errorMessage(data.message);
            }
          }
        },
        error: (jqXHR, textStatus, errorThrown) => {
          reject('Lo sentimos, no se pudo realizar la petición listarNacionalidadRequest: ' + errorThrown);
        }
      });
    });
  },
  /**
   * Listar sedes
   * @returns {JSONArray} 
   */
  listarSedeRequest() {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../SedeServlet',
        data: {accion: 'listarSede'},
        beforeSend: () => {
          load('Listando sedes');
        },
        success: (data, textStatus, jqXHR) => {
          if (textStatus === 'success') {
            unload();
            if (data.status) {
              resolve(data.data.sedes);
            } else {
              errorMessage(data.message);
            }
          }
        },
        error: (jqXHR, textStatus, errorThrown) => {
          reject('Lo sentimos, no se pudo realizar la petición listarSedeRequest: ' + errorThrown);
        }
      });
    });
  },
  /**
   * Listar areas
   * @argument {int} codigoSede 
   * @returns {JSONArray} 
   */
  listarAreaRequest(codigoSede) {
    if (!isNaN(codigoSede)) {
      return new Promise((resolve, reject) => {
        $.ajax({
          type: 'POST',
          url: '../AreaServlet',
          data: {accion: 'listarArea', codigoSede: parseInt(codigoSede)},
          beforeSend: () => {
            load('Listando areas');
          },
          success: (data, textStatus, jqXHR) => {
            if (textStatus === 'success') {
              unload();
              if (data.status) {
                resolve(data.data.areas);
              } else {
                errorMessage(data.message);
              }
            }
          },
          error: (jqXHR, textStatus, errorThrown) => {
            reject('Lo sentimos, no se pudo realizar la petición listarAreaRequest: ' + errorThrown);
          }
        });
      });
    } else {
      errorMessage('ERROR!, Por favor, seleccione una sede correcta e inténtelo de nuevo.');
    }
  },
  /**
   * Listar cargos
   * @argument {int} codigoArea
   * @returns {JSONArray} 
   */
  listarCargoRequest(codigoArea) {
    if (!isNaN(codigoArea)) {
      return new Promise((resolve, reject) => {
        $.ajax({
          type: 'POST',
          url: '../CargoServlet',
          data: {accion: 'listarCargo', codigoArea: parseInt(codigoArea)},
          beforeSend: () => {
            load('Listando cargos');
          },
          success: (data, textStatus, jqXHR) => {
            if (textStatus === 'success') {
              unload();
              if (data.status) {
                resolve(data.data.cargos);
              } else {
                errorMessage(data.message);
              }
            }
          },
          error: (jqXHR, textStatus, errorThrown) => {
            reject('Lo sentimos, no se pudo realizar la petición listarCargoRequest: ' + errorThrown);
          }
        });
      });
    } else {
      errorMessage('ERROR!, Por favor, seleccione una área correcta e inténtelo de nuevo.');
    }
  },
  /**
   * Listar parentesco
   * @returns {JSONArray} 
   */
  listarParentescoRequest() {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../ParentescoServlet',
        data: {accion: 'listarParentesco'},
        beforeSend: () => {
          load('Listando parentesco');
        },
        success: (data, textStatus, jqXHR) => {
          if (textStatus === 'success') {
            unload();
            if (data.status) {
              resolve(data.data.parentescos);
            } else {
              errorMessage(data.message);
            }
          }
        },
        error: (jqXHR, textStatus, errorThrown) => {
          reject('Lo sentimos, no se pudo realizar la petición listarParentescoRequest: ' + errorThrown);
        }
      });
    });
  },
  /**
   * Obtiene el codigo de sede area
   * de acuerdo a la sede y area seleccionada
   * @argument {int} paramCodigoSede 
   * @argument {int} paramCodigoArea 
   * @returns {int} codigoSedeArea
   */
  obtenerSedeArea(paramCodigoSede, paramCodigoArea) {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../SedeAreaServlet',
        data: {accion: 'obtenerSedeArea', codigoSede: paramCodigoSede, codigoArea: paramCodigoArea},
        beforeSend: function () {
          load('Obteniendo datos');
        },
        success: function (data, textStatus, jqXHR) {
          if (textStatus === 'success') {
            unload();
            if (data.status) {
              resolve(data.data.getResultedKey);
            }
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
          reject('Lo sentimos, no se pudo realizar la petición obtenerSedeArea: ' + errorThrown);
        }
      });
    });
  },
  /**
   * Obtiene el codigo de sede area
   * de acuerdo a la sede y area seleccionada
   * @argument {int} paramCodigoArea 
   * @argument {int} paramCodigoCargo 
   * @returns {int} codigoAreaCargo
   */
  obtenerAreaCargo(paramCodigoArea, paramCodigoCargo) {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../AreaCargoServlet',
        data: {accion: 'obtenerAreaCargo', codigoArea: paramCodigoArea, codigoCargo: paramCodigoCargo},
        beforeSend: function () {
          load('Obteniendo datos');
        },
        success: function (data, textStatus, jqXHR) {
          if (textStatus === 'success') {
            unload();
            if (data.status) {
              resolve(data.data.getResultedKey);
            }
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
          reject('Lo sentimos, no se pudo realizar la petición obtenerAreaCargo: ' + errorThrown);
        }
      });
    });
  },
  /**
   * crear selects (combobox)
   * dependiendo el criterio de filtro seleccionado
   * @argument {int} id 
   * @returns {HTML} 
   */
  createFilterStructure(id) {
    let html = ``;
    let arrayCriterioFecha = [
      {id: 1, text: 'IGUAL A'},
      {id: 2, text: 'MAYOR IGUAL A'},
      {id: 3, text: 'MENOR IGUAL A'},
      {id: 4, text: 'ENTRE'}
    ];
    switch (parseInt(id)) {
      case 0: // niguno
        getNode('#firstDiv').innerHTML = '';
        getNode('#secondDiv').innerHTML = '';
        getNode('#thirdDiv').innerHTML = '';
        this.createActionFilterStructure(0);
        break;
        // ---------- grupo personal ---------- //
      case 1: // tipo documento
        // select
        this.listarTipoDocumentoRequest().then((array) => {
          html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboTipoDocumento" class="text-semibold">Tipo de documentos <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboTipoDocumento">
                      ${createSelectOptions(array, 'codigoTipoDocumento', 'descripcionCorta')}
                    </select>
                  </div>
               </div>
               `;
          getNode('#firstDiv').innerHTML = html;
          $(getNode('#cboTipoDocumento')).select2({minimumResultsForSearch: Infinity});
          // input
          getNode('#cboTipoDocumento').onchange = (e) => {
            if (!isNaN(e.currentTarget.value)) {
              let codigoTipoDocumento = parseInt(getNode('#cboTipoDocumento').value);
              if (codigoTipoDocumento !== 0) {
                this.createActionFilterStructure(1);
              } else {
                getNode('#secondDiv').innerHTML = '';
                this.createActionFilterStructure(0);
              }
            } else {
              errorMessage('ERROR!, Por favor, seleccione un tipo de documento correcto e inténtelo de nuevo.');
              this.createActionFilterStructure(0);
            }
          };
        });
        break;
      case 4: // nacionalidad
        this.listarNacionalidadRequest().then((array) => {
          html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboNacionalidad" class="text-semibold">Nacionalidad <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboNacionalidad">
                      ${createSelectOptions(array, 'codigoNacionalidad', 'gentilicio')}
                    </select>
                  </div>
               </div>
               `;
          getNode('#firstDiv').innerHTML = html;
          $(getNode('#cboNacionalidad')).select2({minimumResultsForSearch: Infinity});
          getNode('#cboNacionalidad').onchange = (e) => {
            if (!isNaN(e.currentTarget.value)) {
              let codigoNacionalidad = parseInt(e.currentTarget.value);
              if (codigoNacionalidad !== 0) {
                this.createActionFilterStructure(1);
              } else {
                this.createActionFilterStructure(0);
              }
            } else {
              errorMessage('ERROR!, Por favor, seleccione una nacionalidad correcta e inténtelo de nuevo.');
              this.createActionFilterStructure(0);
            }
          }
        });
        break;
      case 5: // parentesco
        this.listarParentescoRequest().then((array) => {
          html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboParentesco" class="text-semibold">Parencesco <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboParentesco">
                      ${createSelectOptions(array, 'codigoParentesco', 'nombre')}
                    </select>
                  </div>
               </div>
               `;
          getNode('#firstDiv').innerHTML = html;
          $(getNode('#cboParentesco')).select2({minimumResultsForSearch: Infinity});
          getNode('#cboParentesco').onchange = (e) => {
            if (!isNaN(e.currentTarget.value)) {
              let codigoParentesco = parseInt(e.currentTarget.value);
              if (codigoParentesco !== 0) {
                this.createActionFilterStructure(1);
              } else {
                this.createActionFilterStructure(0);
              }
            } else {
              errorMessage('ERROR!, Por favor, seleccione un parentesco correcto e inténtelo de nuevo.');
              this.createActionFilterStructure(0);
            }
          }
        });
        break;
        // ---------- grupo fecha ---------- //
      case 6: // fecha de nacimiento
        // select
        html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboCriterioFecha" class="text-semibold">Criterio fecha <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboCriterioFecha">
                      ${createSelectOptions(arrayCriterioFecha, 'id', 'text')}
                    </select>
                  </div>
               </div>
               `;
        getNode('#firstDiv').innerHTML = html;
        $(getNode('#cboCriterioFecha')).select2({minimumResultsForSearch: Infinity});
        // event
        getNode('#cboCriterioFecha').onchange = (e) => {
          getNode('#secondDiv').innerHTML = '';
          getNode('#thirdDiv').innerHTML = '';
          if (!isNaN(e.currentTarget.value)) {
            let codigoCriterioFecha = parseInt(e.currentTarget.value);
            switch (codigoCriterioFecha) {
              case 0:
                getNode('#secondDiv').innerHTML = '';
                getNode('#thirdDiv').innerHTML = '';
                this.createActionFilterStructure(0);
                break;
              case 1:
              case 2:
              case 3:
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaNacimiento" class="text-semibold">Fecha de Nacimiento <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de nacimiento" id="dpFechaNacimiento" name="dpFechaNacimiento" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#secondDiv').innerHTML = html;
                this.initComponents();
                this.createActionFilterStructure(1);
                break;
              case 4:
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaNacimientoInicio" class="text-semibold">Desde: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de nacimiento" id="dpFechaNacimientoInicio" name="dpFechaNacimientoInicio" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#secondDiv').innerHTML = html;
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaNacimientoFin" class="text-semibold">Hasta: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de nacimiento" id="dpFechaNacimientoFin" name="dpFechaNacimientoFin" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#thirdDiv').innerHTML = html;
                this.initComponents();
                this.createActionFilterStructure(1);
                break;
              default:
                warningMessage('Al parecer no se ha encontrado el filtro que acaba de seleccionar');
                this.createActionFilterStructure(0);
                break;
            }
          } else {
            errorMessage('ERROR!, Por favor, seleccione un criterio de fecha correcto e inténtelo de nuevo.');
            this.createActionFilterStructure(0);
          }
        };
        break;
      case 7: // fecha de ingreso
        // select
        html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboCriterioFecha" class="text-semibold">Criterio fecha <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboCriterioFecha">
                      ${createSelectOptions(arrayCriterioFecha, 'id', 'text')}
                    </select>
                  </div>
               </div>
               `;
        getNode('#firstDiv').innerHTML = html;
        $(getNode('#cboCriterioFecha')).select2({minimumResultsForSearch: Infinity});
        // event
        getNode('#cboCriterioFecha').onchange = (e) => {
          getNode('#secondDiv').innerHTML = '';
          getNode('#thirdDiv').innerHTML = '';
          if (!isNaN(e.currentTarget.value)) {
            let codigoCriterioFecha = parseInt(e.currentTarget.value);
            switch (codigoCriterioFecha) {
              case 0:
                getNode('#secondDiv').innerHTML = '';
                getNode('#thirdDiv').innerHTML = '';
                this.createActionFilterStructure(0);
                break;
              case 1:
              case 2:
              case 3:
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaIngreso" class="text-semibold">Fecha de Ingreso <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de Ingreso" id="dpFechaIngreso" name="dpFechaIngreso" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#secondDiv').innerHTML = html;
                this.initComponents();
                this.createActionFilterStructure(1);
                break;
              case 4:
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaIngresoInicio" class="text-semibold">Desde: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de ingreso" id="dpFechaIngresoInicio" name="dpFechaIngresoInicio" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#secondDiv').innerHTML = html;
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaIngresoFin" class="text-semibold">Hasta: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de ingreso" id="dpFechaIngresoFin" name="dpFechaIngresoFin" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#thirdDiv').innerHTML = html;
                this.initComponents();
                this.createActionFilterStructure(1);
                break;
              default:
                warningMessage('Al parecer no se ha encontrado el filtro que acaba de seleccionar');
                this.createActionFilterStructure(0);
                break;
            }
          } else {
            errorMessage('ERROR!, Por favor, seleccione un criterio de fecha correcto e inténtelo de nuevo.');
            this.createActionFilterStructure(0);
          }
        };
        break;
      case 8: // fecha de termino
        // select
        html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboCriterioFecha" class="text-semibold">Criterio fecha <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboCriterioFecha">
                      ${createSelectOptions(arrayCriterioFecha, 'id', 'text')}
                    </select>
                  </div>
               </div>
               `;
        getNode('#firstDiv').innerHTML = html;
        $(getNode('#cboCriterioFecha')).select2({minimumResultsForSearch: Infinity});
        // event
        getNode('#cboCriterioFecha').onchange = (e) => {
          getNode('#secondDiv').innerHTML = '';
          getNode('#thirdDiv').innerHTML = '';
          if (!isNaN(e.currentTarget.value)) {
            let codigoCriterioFecha = parseInt(e.currentTarget.value);
            switch (codigoCriterioFecha) {
              case 0:
                getNode('#secondDiv').innerHTML = '';
                getNode('#thirdDiv').innerHTML = '';
                this.createActionFilterStructure(0);
                break;
              case 1:
              case 2:
              case 3:
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaTermino" class="text-semibold">Fecha de término <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de término" id="dpFechaTermino" name="dpFechaTermino" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#secondDiv').innerHTML = html;
                this.initComponents();
                this.createActionFilterStructure(1);
                break;
              case 4:
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaTerminoInicio" class="text-semibold">Desde: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de término" id="dpFechaTerminoInicio" name="dpFechaTerminoInicio" autocomplete="off" readonly>
                            </div>
                          </div>
                      </div>
                        `;
                getNode('#secondDiv').innerHTML = html;
                html = `
                      <div class="col-md-3">
                          <div class="form-group">
                            <label for="dpFechaTerminoFin" class="text-semibold">Hasta: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                <input type="text" class="form-control datepicker" placeholder="Fecha de término" id="dpFechaTerminoFin" name="dpFechaTerminoFin" autocomplete="off" readonly>
                            </div>                                                    
                          </div>
                      </div>
                        `;
                getNode('#thirdDiv').innerHTML = html;
                this.initComponents();
                this.createActionFilterStructure(1);
                break;
              default:
                warningMessage('Al parecer no se ha encontrado el filtro que acaba de seleccionar');
                this.createActionFilterStructure(0);
                break;
            }
          } else {
            errorMessage('ERROR!, Por favor, seleccione un criterio de fecha correcto e inténtelo de nuevo.');
            this.createActionFilterStructure(0);
          }
        };
        break;
        // ---------- grupo laboral ---------- //
      case 9: // sede
        // select sede
        this.listarSedeRequest().then((array) => {
          html = `
               <div class="col-md-3">
                  <div class="form-group">
                    <label for="cboSede" class="text-semibold">Sedes <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboSede">
                      ${createSelectOptions(array, 'codigoSede', 'nombre')}
                    </select>
                  </div>
               </div>
               `;
          getNode('#firstDiv').innerHTML = html;
          $(getNode('#cboSede')).select2({minimumResultsForSearch: Infinity});
          // select area
          getNode('#cboSede').onchange = (e) => {
            getNode('#secondDiv').innerHTML = '';
            getNode('#thirdDiv').innerHTML = '';
            if (!isNaN(e.currentTarget.value)) {
              let codigoSede = parseInt(e.currentTarget.value);
              if (codigoSede !== 0) {
                this.createActionFilterStructure(1);
                this.listarAreaRequest(codigoSede).then((array) => {
                  html = `
                      <div class="col-md-3">
                         <div class="form-group">
                           <label for="cboArea" class="text-semibold">Áreas</label>
                           <select class="select" id="cboArea">
                             ${createSelectOptions(array, 'codigoArea', 'nombre')}
                           </select>
                         </div>
                      </div>
                  `;
                  getNode('#secondDiv').innerHTML = html;
                  $(getNode('#cboArea')).select2({minimumResultsForSearch: Infinity});
                  // select cargo
                  getNode('#cboArea').onchange = (e) => {
                    if (!isNaN(e.currentTarget.value)) {
                      let codigoArea = parseInt(e.currentTarget.value);
                      if (codigoArea !== 0) {
                        // obtener codigo sede area
                        functions.obtenerSedeArea(codigoSede, codigoArea).then((data) => {
                          codigoSedeArea = data;
                        });
                        this.createActionFilterStructure(1);
                        this.listarCargoRequest(codigoArea).then((array) => {
                          html = `
                              <div class="col-md-3">
                                 <div class="form-group">
                                   <label for="cboCargo" class="text-semibold">Cargos</label>
                                   <select class="select" id="cboCargo">
                                     ${createSelectOptions(array, 'codigoCargo', 'nombre')}
                                   </select>
                                 </div>
                              </div>
                        `;
                          getNode('#thirdDiv').innerHTML = html;
                          $(getNode('#cboCargo')).select2({minimumResultsForSearch: Infinity});
                          getNode('#cboCargo').onchange = (e) => {
                            if (!isNaN(e.currentTarget.value)) {
                              let codigoCargo = parseInt(e.currentTarget.value);
                              if (codigoCargo !== 0) {
                                // obtener codigo area cargo
                                functions.obtenerAreaCargo(codigoArea, codigoCargo).then((data) => {
                                  codigoAreaCargo = data;
                                });
                                this.createActionFilterStructure(1);
                              }
                            } else {
                              errorMessage('ERROR!, Por favor, seleccione un cargo correcto e inténtelo de nuevo.');
                              this.createActionFilterStructure(0);
                            }
                          }
                        });
                      } else {
                        getNode('#thirdDiv').innerHTML = '';
                      }
                    } else {
                      errorMessage('ERROR!, Por favor, seleccione una área correcta e inténtelo de nuevo.');
                      this.createActionFilterStructure(0);
                    }
                  };
                });
              } else {
                getNode('#secondDiv').innerHTML = '';
                getNode('#thirdDiv').innerHTML = '';
                this.createActionFilterStructure(0);
              }
            } else {
              errorMessage('ERROR!, Por favor, seleccione una sede correcta e inténtelo de nuevo.');
              this.createActionFilterStructure(0);
            }
          };
          // select cargo
        });
        break;
      case 10:// estado
        this.createActionFilterStructure(0);
        break;
      default:
        warningMessage('Al parecer no se ha encontrado el filtro que acaba de seleccionar');
        this.createActionFilterStructure(0);
        break;
    }
  },
  /**
   * crear las acciones para
   * añadir filtros
   * @argument {int} visible  1 = true | 0 = false
   */
  createActionFilterStructure(visible) {
    let html = ``;
    if (visible === 1) {
      html = `
            <button type="button" class="btn border-success text-success-600 btn-flat btn-icon btn-rounded" data-popup="tooltip" title="Agregar filtro" id="btnAgregarFiltro"><i class="icon-checkmark3"></i></button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn border-danger text-danger-600 btn-flat btn-icon btn-rounded" data-popup="tooltip" title="Cancelar filtro" id="btnCancelarFiltro"><i class="icon-cross2"></i></button>
           `;
      getNode('#actionFilter').innerHTML = html;
      $(getNode('#btnAgregarFiltro')).tooltip();
      $(getNode('#btnCancelarFiltro')).tooltip();
      this.agregarFiltro();
      this.cancelarFiltro();
    } else {
      getNode('#actionFilter').innerHTML = '';
    }
  },
  /**
   * agrega el filtro que el usuario construyó
   * en el panel de filtros
   * */
  agregarFiltro() {
    getNode('#btnAgregarFiltro').addEventListener('click', () => {
      if (!isNaN(getNode('#cboCriterio').value)) {
        let codigoCriterio = parseInt(getNode('#cboCriterio').value);
        switch (codigoCriterio) {
          // personal
          case 1:
            this.obtenerFiltroTipoDocumento();
            break;
          case 4:
            this.obtenerFiltroNacionalidad();
            break;
          case 5:
            this.obtenerFiltroParentesco();
            break;
            // fecha            
          case 6:
            this.obtenerFiltroFechaNacimiento();
            break;
          case 7:
            this.obtenerFiltroFechaIngreso();
            break;
          case 8:
            this.obtenerFiltroFechaTermino();
            break;
            // laboral
          case 9:
            this.obtenerFiltroSede();
            break;
          case 10:
            break;
          default:
            warningMessage('Lo sentimos, no se pudo realizar el filtro por errores de seleccion de criterios, por favor vuelva a intentarlo nuevamente');
            break;
        }
        localStorage.setItem('jsonResult', JSON.stringify(jsonResult));
        this.listarDetalleFiltro();
      } else {
        errorMessage('Lo sentimos, el criterio seleccionado no tiene un valor correcto, por favor intente nuevamente');
      }
    });
  },
  /**
   * Cancela el filtro a construir
   */
  cancelarFiltro() {
    getNode('#btnCancelarFiltro').addEventListener('click', () => {
      getNode('#firstDiv').innerHTML = '';
      getNode('#secondDiv').innerHTML = '';
      getNode('#thirdDiv').innerHTML = '';
      $(getNode('#btnAgregarFiltro')).tooltip('destroy');
      $(getNode('#btnCancelarFiltro')).tooltip('destroy');
      getNode('#actionFilter').innerHTML = '';
      $(getNode('#cboCriterio')).val(0).trigger('change');

    });
  },
  /**
   * TIPO DE DOCUMENTO
   * captura los valores y los almacena en un json filter
   * */
  obtenerFiltroTipoDocumento() {
    let objTipoDocumento;
    if (!isNaN(getNode('#cboTipoDocumento').value)) {
      let codigoTipoDocumento = parseInt(getNode('#cboTipoDocumento').value);
      let nombreTipoDocumento = $('#cboTipoDocumento option[value="' + codigoTipoDocumento + '"]').text();
      if (codigoTipoDocumento !== 0) {
        objTipoDocumento = {
          id: guidGenerator(),
          codigoTipoDocumento: codigoTipoDocumento,
          nombreTipoDocumento: nombreTipoDocumento
        };
        jsonResult.tipoDocumento = objTipoDocumento;
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione un tipo de documento correcto e inténtelo de nuevo.');
    }
  },
  /**
   * NACIONALIDAD
   * captura los valores y los almacena en un json filter
   * */
  obtenerFiltroNacionalidad() {
    let objNacionalidad;
    if (!isNaN(getNode('#cboNacionalidad').value)) {
      let codigoNacionalidad = parseInt(getNode('#cboNacionalidad').value);
      let nombreNacionalidad = $('#cboNacionalidad option[value="' + codigoNacionalidad + '"]').text();
      if (codigoNacionalidad !== 0) {
        objNacionalidad = {
          id: guidGenerator(),
          codigoNacionalidad: codigoNacionalidad,
          nombreNacionalidad: nombreNacionalidad
        };
        jsonResult.nacionalidad = objNacionalidad;
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione una nacionalidad correcta e inténtelo de nuevo.');
    }
  },
  /**
   * PARENTESCO
   * captura los valores y los almacena en un json filter
   */
  obtenerFiltroParentesco() {
    let objParentesco;
    if (!isNaN(getNode('#cboParentesco').value)) {
      let codigoParentesco = parseInt(getNode('#cboParentesco').value);
      let nombreParentesco = $('#cboParentesco option[value="' + codigoParentesco + '"]').text();
      if (codigoParentesco !== 0) {
        objParentesco = {
          id: guidGenerator(),
          codigoParentesco: codigoParentesco,
          nombreParentesco: nombreParentesco
        }
        jsonResult.parentesco = objParentesco;
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione un parentesco correcto e inténtelo de nuevo.');
    }
  },
  /**
   * FECHA DE NACIMINETO
   * captura los valores y los almacena en un json filter
   */
  obtenerFiltroFechaNacimiento() {
    let objFechaNacimiento;
    if (!isNaN(getNode('#cboCriterioFecha').value)) {
      let codigoCriterioFecha = parseInt(getNode('#cboCriterioFecha').value);
      let nombreCriterioFecha = $('#cboCriterioFecha option[value="' + codigoCriterioFecha + '"]').text();
      if (codigoCriterioFecha !== 0) {
        // validar criterio de fecha (=, >=, <=, rango)
        if (codigoCriterioFecha !== 4) {
          let fechaNacimiento = getNode('#dpFechaNacimiento').value;
          objFechaNacimiento = {
            id: guidGenerator(),
            codigoCriterioFecha: codigoCriterioFecha,
            nombreCriterioFecha: nombreCriterioFecha,
            fechaNacimiento: fechaNacimiento
          };
        } else {
          let fechaNacimientoInicio = getNode('#dpFechaNacimientoInicio').value;
          let fechaNacimientoFin = getNode('#dpFechaNacimientoFin').value;
          objFechaNacimiento = {
            id: guidGenerator(),
            codigoCriterioFecha: codigoCriterioFecha,
            nombreCriterioFecha: nombreCriterioFecha,
            fechaNacimientoInicio: fechaNacimientoInicio,
            fechaNacimientoFin: fechaNacimientoFin
          };
        }
        jsonResult.fechaNacimiento = objFechaNacimiento;
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione un criterio de fecha correcta e inténtelo de nuevo.');
    }
  },
  /**
   * FECHA DE INGRESO
   * captura los valores y los almacena en un json filter
   */
  obtenerFiltroFechaIngreso() {
    let objFechaIngreso;
    if (!isNaN(getNode('#cboCriterioFecha').value)) {
      let codigoCriterioFecha = parseInt(getNode('#cboCriterioFecha').value);
      let nombreCriterioFecha = $('#cboCriterioFecha option[value="' + codigoCriterioFecha + '"]').text();
      if (codigoCriterioFecha !== 0) {
        // validar criterio de fecha (=, >=, <=, rango)
        if (codigoCriterioFecha !== 4) {
          let fechaIngreso = getNode('#dpFechaIngreso').value;
          objFechaIngreso = {
            id: guidGenerator(),
            codigoCriterioFecha: codigoCriterioFecha,
            nombreCriterioFecha: nombreCriterioFecha,
            fechaIngreso: fechaIngreso
          };
        } else {
          let fechaIngresoInicio = getNode('#dpFechaIngresoInicio').value;
          let fechaIngresoFin = getNode('#dpFechaIngresoFin').value;
          objFechaIngreso = {
            id: guidGenerator(),
            codigoCriterioFecha: codigoCriterioFecha,
            nombreCriterioFecha: nombreCriterioFecha,
            fechaIngresoInicio: fechaIngresoInicio,
            fechaIngresoFin: fechaIngresoFin
          };
        }
        jsonResult.fechaIngreso = objFechaIngreso;
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione un criterio de fecha correcta e inténtelo de nuevo.');
    }
  },
  /**
   * FECHA DE TÉRMINO
   * captura los valores y los almacena en un json filter
   */
  obtenerFiltroFechaTermino() {
    let objFechaTermino;
    if (!isNaN(getNode('#cboCriterioFecha').value)) {
      let codigoCriterioFecha = parseInt(getNode('#cboCriterioFecha').value);
      let nombreCriterioFecha = $('#cboCriterioFecha option[value="' + codigoCriterioFecha + '"]').text();
      if (codigoCriterioFecha !== 0) {
        // validar criterio de fecha (=, >=, <=, rango)
        if (codigoCriterioFecha !== 4) {
          let fechaTermino = getNode('#dpFechaTermino').value;
          objFechaTermino = {
            id: guidGenerator(),
            codigoCriterioFecha: codigoCriterioFecha,
            nombreCriterioFecha: nombreCriterioFecha,
            fechaTermino: fechaTermino
          };
        } else {
          let fechaTerminoInicio = getNode('#dpFechaTerminoInicio').value;
          let fechaTerminoFin = getNode('#dpFechaTerminoFin').value;
          objFechaTermino = {
            id: guidGenerator(),
            codigoCriterioFecha: codigoCriterioFecha,
            nombreCriterioFecha: nombreCriterioFecha,
            fechaTerminoInicio: fechaTerminoInicio,
            fechaTerminoFin: fechaTerminoFin
          };
        }
        jsonResult.fechaTermino = objFechaTermino;
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione un criterio de fecha correcta e inténtelo de nuevo.');
    }
  },
  /**
   * SEDE (area y cargo)
   * captura los valores y los almacena en un json filter
   */
  obtenerFiltroSede() {
    let objSede;
    if (!isNaN(getNode('#cboSede').value)) {
      let codigoSede = parseInt(getNode('#cboSede').value);
      let nombreSede = $('#cboSede option[value="' + codigoSede + '"]').text();
      if (codigoSede !== 0) {
        objSede = {
          id: guidGenerator(),
          codigoSede: codigoSede,
          nombreSede: nombreSede
        }
        jsonResult.sede = objSede;
        // area
        if (!isNaN(getNode('#cboArea').value)) {
          let codigoArea = parseInt(getNode('#cboArea').value);
          let nombreArea = $('#cboArea option[value="' + codigoArea + '"]').text();
          if (codigoArea !== 0) {
            objSede = {
              id: guidGenerator(),
              codigoSede: codigoSede,
              nombreSede: nombreSede,
              codigoArea: codigoArea,
              nombreArea: nombreArea,
              codigoSedeArea: codigoSedeArea
            }
            jsonResult.sede = objSede;
            // cargo
            if (!isNaN(getNode('#cboCargo').value)) {
              let codigoCargo = parseInt(getNode('#cboCargo').value);
              let nombreCargo = $('#cboCargo option[value="' + codigoCargo + '"]').text();
              if (codigoCargo !== 0) {
                objSede = {
                  id: guidGenerator(),
                  codigoSede: codigoSede,
                  nombreSede: nombreSede,
                  codigoArea: codigoArea,
                  nombreArea: nombreArea,
                  codigoCargo: codigoCargo,
                  nombreCargo: nombreCargo,
                  codigoSedeArea: codigoSedeArea,
                  codigoAreaCargo: codigoAreaCargo
                }
                jsonResult.sede = objSede;
              }
            } else {
              errorMessage('ERROR!, Por favor, seleccione un cargo correcto e inténtelo de nuevo.');
            }
          }
        } else {
          errorMessage('ERROR!, Por favor, seleccione una área correcta e inténtelo de nuevo.');
        }
      }
    } else {
      errorMessage('ERROR!, Por favor, seleccione una sede correcta e inténtelo de nuevo.');
    }
  },
  /**
   * listar el detalle de los filtros
   */
  listarDetalleFiltro() {
    if (localStorage.getItem('jsonResult') !== null) {
      if (!isEmpty(JSON.parse(localStorage.getItem('jsonResult')))) {
        let htmlBody = ``;
        let count = 0;
        let criterio = '';
        let criterioValue = '';
        let criterioSecondValue = '';
        let id = '';
        for (let item in jsonResult) {

          switch (item) {
            case 'tipoDocumento':
              criterio = "TIPO DOCUMENTO"
              criterioValue = jsonResult.tipoDocumento.nombreTipoDocumento;
              criterioSecondValue = '';
              id = jsonResult.tipoDocumento.id;
              break;
            case 'nacionalidad':
              criterio = "NACIONALIDAD"
              criterioValue = jsonResult.nacionalidad.nombreNacionalidad;
              criterioSecondValue = '';
              id = jsonResult.nacionalidad.id;
              break;
            case 'parentesco':
              criterio = "PARENTESCO"
              criterioValue = jsonResult.parentesco.nombreParentesco;
              criterioSecondValue = '';
              id = jsonResult.parentesco.id;
              break;
            case 'fechaNacimiento':
              criterio = "FECHA DE NACIMIENTO"
              criterioValue = jsonResult.fechaNacimiento.nombreCriterioFecha;
              criterioSecondValue = '';
              id = jsonResult.fechaNacimiento.id;
              if (jsonResult.fechaNacimiento.codigoCriterioFecha !== 4) {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.fechaNacimiento.fechaNacimiento;
              } else {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.fechaNacimiento.fechaNacimientoInicio + ' AL ' + jsonResult.fechaNacimiento.fechaNacimientoFin + '';
              }
              break;
            case 'fechaIngreso':
              criterio = "FECHA DE INGRESO"
              criterioValue = jsonResult.fechaIngreso.nombreCriterioFecha;
              criterioSecondValue = '';
              id = jsonResult.fechaIngreso.id;
              if (jsonResult.fechaIngreso.codigoCriterioFecha !== 4) {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.fechaIngreso.fechaIngreso;
              } else {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.fechaIngreso.fechaIngresoInicio + ' AL ' + jsonResult.fechaIngreso.fechaIngresoFin + '';
              }
              break;
            case 'fechaTermino':
              criterio = "FECHA DE TÉRMINO"
              criterioValue = jsonResult.fechaTermino.nombreCriterioFecha;
              criterioSecondValue = '';
              id = jsonResult.fechaTermino.id;
              if (jsonResult.fechaTermino.codigoCriterioFecha !== 4) {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.fechaTermino.fechaTermino;
              } else {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.fechaTermino.fechaTerminoInicio + ' AL ' + jsonResult.fechaTermino.fechaTerminoFin + '';
              }
              break;
            case 'sede':
              criterio = "SEDE"
              criterioValue = jsonResult.sede.nombreSede;
              criterioSecondValue = '';
              id = jsonResult.sede.id;
              if (!(typeof jsonResult.sede.codigoArea === 'undefined')) {
                criterioSecondValue = '<i class="text-blue-800 icon-arrow-right5"></i> <b>ÁREA</b> <i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.sede.nombreArea;
                if (!(typeof jsonResult.sede.codigoCargo === 'undefined')) {
                  criterioSecondValue += '<i class="text-blue-800 icon-arrow-right5"></i> <b>CARGO</b> <i class="text-blue-800 icon-arrow-right5"></i> ' + jsonResult.sede.nombreCargo;
                } else {
                  criterioSecondValue += '';
                }
              } else {
                criterioSecondValue = '';
              }
              break;
            default:
              break;
          }
          count++;
          let style = count % 2 === 0 ? 'style="background-color: #e1ebec94;"' : '';
          htmlBody += `
                      <tr ${style}>
                        <td class="text-center text-bold">${count}</td>
                        <td>${"<b>" + criterio + "</b> <i class='text-blue-800 icon-arrow-right5'></i> " + criterioValue + criterioSecondValue}</td>
                        <td class="text-center"><a href='javascript:functions.eliminarFiltro("${id}")' class="text-danger-600"><u>ELIMINAR FILTRO</u></td>
                      </tr>
                     `;
          getNode('#tblBodyDetalleFiltro').innerHTML = htmlBody;
        }
        htmlBody += `
                    <tr style="background-color:#f1f1f1;">
                    <td colspan="3" class="text-center text-semibold"><a href="javascript:functions.eliminarTodo();" class="text-danger"><i class="icon-trash"></i> ELIMINAR TODOS LOS FILTROS</a></td>
                    </tr>
                    `
        getNode('#tblBodyDetalleFiltro').innerHTML = htmlBody;
      } else {
        let htmlBody = `
                      <tr>
                        <td colspan="3" class="text-danger text-center">No se ha realizado ningún filtro</td>
                      </tr>
                     `;
        getNode('#tblBodyDetalleFiltro').innerHTML = htmlBody;
      }
    } else {
      let htmlBody = `
                      <tr>
                        <td colspan="3" class="text-danger text-center">No se ha realizado ningún filtro</td>
                      </tr>
                     `;
      getNode('#tblBodyDetalleFiltro').innerHTML = htmlBody;
    }
  },
  /**
   * Elimina el filtro de la tabla
   * @argument {String} code 
   * */
  eliminarFiltro(code) {
    for (let item in jsonResult) {
      if (jsonResult[item].id === code) {
        delete jsonResult[item];
        localStorage.setItem('jsonResult', JSON.stringify(jsonResult));
        this.listarDetalleFiltro();
        break;
      }
    }
  },
  /**
   * Elimina todos los filtros realizados
   * */
  eliminarTodo() {
    $.confirm({
      icon: 'fa fa-warning',
      theme: 'material',
      closeIcon: true,
      animation: 'scale',
      type: 'dark',
      draggable: false,
      backgroundDismissAnimation: 'glow',
      title: 'Confirmar',
      content: `
                <span class=text-bold>¿Está usted seguro de eliminar todo el filtro realizado?</span> <br/>
                <span class="text-danger">Se eliminará todos los filtros realizados en esta tabla</span>
               `,
      buttons: {
        'SI, ELIMIAR': {
          btnClass: 'btn-danger',
          action: function () {
            for (var item in jsonResult) {
              delete jsonResult[item];
              localStorage.setItem('jsonResult', JSON.stringify(jsonResult));
              functions.listarDetalleFiltro();
              functions.listarConsultaPersonal();
            }
          }
        },
        Cancelar: {
          btnClass: 'btn-slate'
        }
      }
    });
  },
  /**
   * Envia la peticion para devolver un json object con
   * todos los datos, de acuerdo al criterio seleccionado
   * @returns {JSONObject} JOReporte
   * */
  consultarPersonalRequest() {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        url: '../ReportePersonalServlet',
        data: {accion: 'validarExistenciaFilas', jsonResult: JSON.stringify(jsonResult)},
        dataType: 'json',
        beforeSend: () => {
          load('Cargando');
        },
        success: function (data, textStatus, jqXHR) {
          if (textStatus === 'success') {
            unload();
            resolve(data);
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
          reject('Lo sentimos no se pudo realizar la petición consultarPersonalRequest: ' + errorThrown);
        }
      });
    });
  },
  /**
   * Realiza la cosulta de acuerdo al filtro construido
   * @returns {JSONObject} objPersona
   * */
  listarConsultaPersonal() {
    let totalFilas = 0;
    let htmlBody = `<tr>
                          <td class="text-center text-danger" colspan="19">Esta tabla no tiene resutlados</td>
                        </tr>`;
    getNode('#tblBodyResultadoBusqueda').innerHTML = htmlBody;
    if (!isEmpty(JSON.parse(localStorage.getItem('jsonResult')))) {
      functions.consultarPersonalRequest().then((data) => {
        console.log(data);
        if (data.status) {
          let reportePersonal = data.data.data.reportePersonal;
          console.log(reportePersonal);
          let htmlBody = ``;
          for (let i in reportePersonal) {
            totalFilas = parseInt(i) + 1;
            htmlBody += `
                    <tr>
                      <td>${parseInt(i) + 1}</td>
                      <td>${ reportePersonal[i].apellidoPaterno + " " + reportePersonal[i].apellidoMaterno + ", " + reportePersonal[i].nombre }</td>
                      <td>${ reportePersonal[i].tipoDocumento }</td>
                      <td>${ reportePersonal[i].numeroDocumento }</td>
                      <td>${ reportePersonal[i].nacionalidad }</td>
                      <td>${ reportePersonal[i].ubigeoNacimiento }</td>
                      <td>${ reportePersonal[i].direccionDocumento }</td>
                      <td>${ reportePersonal[i].sexo }</td>
                      <td>${ reportePersonal[i].estadoCivil }</td>
                      <td>${ reportePersonal[i].fechaNacimiento }</td>
                      <td>${ reportePersonal[i].telefonoFijo + " / " + reportePersonal[i].telefonoMovil }</td>
                      <td>${ reportePersonal[i].ubigeoResidencia }</td>
                      <td>${ reportePersonal[i].fondoPension }</td>
                      <td>${ reportePersonal[i].sede }</td>
                      <td>${ reportePersonal[i].area }</td>
                      <td>${ reportePersonal[i].cargo }</td>
                      <td>${ reportePersonal[i].fechaIngreso }</td>
                      <td>${ reportePersonal[i].fechaTermino }</td>
                      <td>${ reportePersonal[i].cantidadParentesco }</td>
                    </tr>
                     `;
          }
          getNode('#tblBodyResultadoBusqueda').innerHTML = htmlBody;
          getNode('#totalFilas').innerHTML = "Total de resultados filtrados: " + totalFilas;
        } else {
          errorMessage(data.message);
          getNode('#totalFilas').innerHTML = "Total de resultados filtrados: 0";
        }
      });
    } else {
      let htmlBody = `<tr>
                          <td class="text-center text-danger" colspan="19">Esta tabla no tiene resutlados</td>
                        </tr>`
      getNode('#tblBodyResultadoBusqueda').innerHTML = htmlBody;
    }
  },
  /**
   * Realiza la cosulta de acuerdo al filtro construido
   * @returns {JSONObject} objPersona
   * */
  consultarPersonal() {
    let htmlBody = `<tr>
                          <td class="text-center text-danger" colspan="19">Esta tabla no tiene resutlados</td>
                        </tr>`
    getNode('#tblBodyResultadoBusqueda').innerHTML = htmlBody;
    getNode('#btnConsultarPersonal').addEventListener('click', () => {
      functions.listarConsultaPersonal();
    });
  }
};
// ---------------------------
// Declaración de funciones ||
// ---------------------------

// configuraciones
functions.initComponents();
functions.configuracionCriterio();
functions.listarDetalleFiltro();
functions.consultarPersonal();