/* global jAlert */ let lote, json = {} const httpRequest = { listarFichasDocente() { defaultConfigDataTable() let contador = 0 return new Promise((resolve) => { $(document.querySelector('#tblFichas')).DataTable().destroy() $(document.querySelector('#tblFichas')).DataTable({ data: lote.detalle, bInfo: false, paging: false, columnDefs: [ {targets: 0, orderable: false, width: '2%', className: 'text-center'}, {targets: 1, orderable: false, width: '20%'}, {targets: 2, orderable: false, width: '10%'}, {targets: 3, orderable: false, width: '10%', className: 'text-center'}, {targets: 4, orderable: false, width: '7%', className: 'text-center'}, {targets: 5, orderable: false, width: '6%', className: 'text-center'}, {targets: 6, orderable: false, width: '6%', className: 'text-center'}, {targets: 7, orderable: false, width: '6%', className: 'text-center'}, {targets: 9, orderable: false, width: '2%', className: 'text-center'} ], columns: [ { data: null, render: () => ++contador }, { data: null, render: (data) => `${data.apellidoPaterno} ${data.apellidoMaterno} ${data.nombre}` }, { data: 'numeroDocumento' }, { data: 'fechaInicio' }, { data: 'costoMensual', render: (data) => { return data === '0.00' ? data : `<a href="#" class="costoMensual" data-prop="" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>` } }, { data: 'costoa', render: (data) => { return data === '0.00' ? data : `<a href="#" class="costoa" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>` } }, { data: 'costob', render: (data) => { return data === '0.00' ? data : `<a href="#" class="costob" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>` } }, { data: 'costoc', render: (data) => { return data === '0.00' ? data : `<a href="#" class="costoc" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>` } }, { data: null, render: () => `<input type="text" class="form-control observacion" value="" placeholder="Ingrese observación"/>` }, { data: null, render: (data) => { return `<ul class="icons-list"> <li class="text-primary"> <a href="#" onclick="javascript: return false" class="verDetalleFicha" data-toggle="tooltip" data-placement="top" title="Ver detalle lote"><i style="font-size:22px;" class="fa fa-file-text-o fa-lg"></i></a> </li> </ul> ` } } ], initComplete: function (settings, data) { resolve(data) } }) }) }, listarFichasAdministrativo() { defaultConfigDataTable() let contador = 0 return new Promise((resolve, reject) => { $(document.querySelector('#tblFichas')).DataTable().destroy() $(document.querySelector('#tblFichas')).DataTable({ data: lote.detalle, bInfo: false, paging: false, columnDefs: [ {targets: 0, orderable: false, width: '2%', className: 'text-center'}, {targets: 1, orderable: false, width: '12%'}, {targets: 2, orderable: false, width: '8%'}, {targets: 3, orderable: false, width: '5%', className: 'text-center'}, {targets: 4, orderable: false, width: '4%', className: 'text-center'}, {targets: 5, orderable: false, width: '4%', className: 'text-center'}, {targets: 6, orderable: false, width: '4%', className: 'text-center'}, {targets: 7, orderable: false, width: '25%', className: 'text-center'}, {targets: 8, orderable: false, width: '2%', className: 'text-center'} ], columns: [ { data: null, render: () => ++contador }, { data: null, render: (data) => `${data.apellidoPaterno} ${data.apellidoMaterno} ${data.nombre}` }, { data: 'numeroDocumento' }, { data: 'fechaInicio' }, { data: 'sueldoEscalafon', render: (data) => { return `<b> S/. ${data} </b>` } }, { data: 'sueldoMensual', render: (data) => { return `<b> S/. ${data} </b>` } }, { data: 'sueldoMensual', render: (data) => { return `<a href="#" style="font-size:16px;" class="costoPresidencia" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual a asignar"></a>` } }, { data: null, render: () => `<input type="text" class="form-control observacion" value="" placeholder="Ingrese observación"/>` }, { data: null, render: (data) => { return `<ul class="icons-list"> <li class="text-primary"> <a href="#" onclick="javascript: return false" class="verDetalleFicha" data-toggle="tooltip" data-placement="top" title="Ver detalle lote"><i style="font-size:22px;" class="fa fa-file-text-o fa-lg"></i></a> </li> </ul> ` } } ], initComplete: function (settings, data) { resolve(data) } }) }) }, registrarSueldoDocente(obj) { return new Promise((resolve, reject) => { $.ajax({ url: '../DetalleLoteFichaDocenteServlet', dataType: 'json', type: 'POST', data: { accion: 'registrarSueldosPresidenciaLoteDocente', json: JSON.stringify(obj) }, success: function (data, textStatus, jqXHR) { resolve(data) }, error: function (jqXHR, textStatus, errorThrown) { reject(errorThrown) } }) }) }, registrarSueldoAdministrativo(obj) { return new Promise((resolve, reject) => { $.ajax({ url: '../DetalleLoteFichaDocenteServlet', dataType: 'json', type: 'POST', data: { accion: 'registrarSueldosPresidenciaLoteAdministrativo', json: JSON.stringify(obj) }, beforeSend: function (xhr) { load("Actualizando lote administrativo") }, success: function (data, textStatus, jqXHR) { unload() resolve(data) }, error: function (jqXHR, textStatus, errorThrown) { reject({ req: obj, error: errorThrown }) } }) }) }, obtenerDetalle(obj) { return new Promise((resolve, reject) => { $.ajax({ url: '../DetalleLoteFichaDocenteServlet', dataType: 'json', type: 'POST', data: { accion: 'obtenerDetalleFicha', json: JSON.stringify(obj) }, beforeSend: function (xhr) { load("Obteniendo detalle de la ficha") }, success: function (data, textStatus, jqXHR) { unload() resolve(data) }, error: function (jqXHR, textStatus, errorThrown) { reject({ req: obj, error: errorThrown }) } }) }) }, imprimirLote() { $('#btnImprimir').on('click', () => { if (lote.tipoLote === "A") { // ADMINISTRATIVO document.querySelector('#formPDF').action = '../DetalleLoteFichaAdministrativaServlet'; $('#numeroLote').val(lote.numeroLote); $('#numeroFilas').val(lote.detalle.length); $('#data').val(JSON.stringify(lote.detalle)); $('#formPDF').submit(); } else if (lote.tipoLote === "D") { // DOCENTE document.querySelector('#formPDF').action = '../DetalleLoteFichaDocenteServlet'; $('#numeroLote').val(lote.numeroLote); $('#numeroFilas').val(lote.detalle.length); $('#data').val(JSON.stringify(lote.detalle)); $('#formPDF').submit(); } }) } } const DOMComponents = { init() { this.initializePluginComponents() }, initializePluginComponents() { $('.costoMensual, .costoa, .costob, .costoc, .costoPresidencia').editable({ clear: false }) $('.costoMensual, .costoPresidencia').on('shown', function (e, editable) { editable.input.$input.TouchSpin({ min: 0, max: 10000, step: 0.1, decimals: 2 }).parent().parent().addClass('editable-touchspin') }) $('.costoa, .costob, .costoc').on('shown', function (e, editable) { editable.input.$input.TouchSpin({ min: 0, max: 30, step: 0.1, decimals: 2 }).parent().parent().addClass('editable-touchspin') }) } } const getDataFromLocalStorage = () => { if (localStorage.getItem('lote')) { lote = JSON.parse(localStorage.getItem('lote')) } else { window.location = "lotesFicha.jsp" } } const DOMEvents = () => { $('.observacion').on('change', (e) => { console.log('stee') if ($(e.currentTarget).val() !== '') { $(e.currentTarget).removeClass('tp-error-input-observacion') $(e.currentTarget).next().remove() } }) $('#tblFichas tbody').on('click', '.verDetalleFicha', (e) => { let data = $('#tblFichas').DataTable().row($(e.currentTarget).parents('tr')).data() httpRequest.obtenerDetalle({codigoPersona: data.codigoPersona, codigoFicha: data.codigoFicha, tipoFicha: lote.tipoLote}) .then((data) => { localStorage.setItem('detalleFichaLote', JSON.stringify(data)) localStorage.setItem('paginaActual', 'detalleLoteDocente') window.location.href = 'detalleFicha.jsp' }) .catch(err => jAlert({type: 'error', content: err, buttons: {left: 'Aceptar'}})) }) } const getDataDocenteJSON = () => { let table = $(document.querySelector('#tblFichas tbody')) let jsonData = [] table.find('tr').each(function (i, el) { let row = $(this).find('td') let codigoFicha = $('#tblFichas').DataTable().row(i).data().codigoFicha let codigoPago = $('#tblFichas').DataTable().row(i).data().codigoPago let costoMensual = row.eq(4).text() let costoa = row.eq(5).text() let costob = row.eq(6).text() let costoc = row.eq(7).text() let observacion = row.eq(8).find('input').val() let json = ` { "codigoFicha" : ${codigoFicha}, "codigoPago" : ${codigoPago}, "costoMensual": "${costoMensual}", "costoa":"${costoa}", "costob":"${costob}", "costoc":"${costoc}", "observacion":"${observacion}" } ` jsonData.push(JSON.parse(json)) }) return jsonData } const getDataAdministrativoJSON = () => { let table = $(document.querySelector('#tblFichas tbody')) let jsonData = [] table.find('tr').each(function (i, el) { let row = $(this).find('td') let codigoFicha = $('#tblFichas').DataTable().row(i).data().codigoFicha let codigoAreaCargoTipoPago = $('#tblFichas').DataTable().row(i).data().codigoAreaCargoTipoPago let sueldoEscalafon = `${row.eq(4).text().split('.')[1]}.${row.eq(4).text().split('.')[2]}`.trim() let sueldoMensual = `${row.eq(5).text().split('.')[1]}.${row.eq(5).text().split('.')[2]}`.trim() let sueldoPresidencia = row.eq(6).text() let observacion = row.eq(7).find('input').val() let json = ` { "codigoFicha" : ${codigoFicha}, "codigoAreaCargoTipoPago" : ${codigoAreaCargoTipoPago}, "sueldoEscalafon": "${sueldoEscalafon}", "sueldoMensual":"${sueldoMensual}", "sueldoPresidencia":"${sueldoPresidencia}", "observacion":"${observacion}" } ` jsonData.push(JSON.parse(json)) }) return jsonData } const printComponents = { panelLote() { document.querySelector('#lblNumeroLote').innerHTML = lote.numeroLote document.querySelector('#lblFechaRegistro').innerHTML = lote.fechaRegistro document.querySelector('#lblTipoLote').innerHTML = lote.tipoLote === 'A' ? '<span class="label bg-primary">ADMINISTRATIVO</span>' : '<span class="label bg-success">DOCENTE</span>' document.querySelector('#divEstadoLote').innerHTML = ` <div class="form-group"> <label class="text-semibold">Estado de lote:</label> <span class="pull-right-sm label bg-orange"">${lote.estadoLote}</span> </div> ` document.querySelector('#lblCantidadFichas').innerHTML = lote.detalle.length }, tablaHead(obj) { return new Promise((resolve) => { let head = '' if (obj.tipoLote === 'D') { head = `<tr> <th class="text-center" rowspan="2">#</th> <th class="text-center" rowspan="2">APELLIDOS Y NOMBRES</th> <th class="text-center" rowspan="2">N° DOCUMENTO</th> <th class="text-center" rowspan="2">FECHA DE INICIO</th> <th class="text-center" colspan="4" class="text-center">COSTOS</th> <th class="text-center" rowspan="2">OBSERVACION</th> <th class="text-center" rowspan="2">ACCIONES</th> </tr> <tr> <th class="text-center">MENSUAL</th> <th class="text-center">A</th> <th class="text-center">B</th> <th class="text-center">C</th> </tr>` } else if (obj.tipoLote === 'A') { head = `<tr> <th class="text-center" rowspan="2">#</th> <th class="text-center" rowspan="2">APELLIDOS Y NOMBRES</th> <th class="text-center" rowspan="2">N° DOCUMENTO</th> <th class="text-center" rowspan="2">FECHA DE INICIO</th> <th class="text-center" colspan="3" class="text-center">COSTOS</th> <th class="text-center" rowspan="2">OBSERVACION</th> <th class="text-center" rowspan="2">ACCIONES</th> </tr> <tr> <th class="text-center">ESCALAFÓN</th> <th class="text-center">PROPUESTO</th> <th class="text-center">COSTO MENSUAL</th> </tr>` } else { jAlert({type: 'error', content: 'Error al obtener el tipo de lote', buttons: {left: 'Aceptar'}}) } document.querySelector('#tblFichasHead').innerHTML = head resolve(obj.tipoLote) }) } } const fichasDocente = { init() { this.actualizarFichas() }, actualizarFichas() { document.querySelector('#btnEvaluarFichasDocente').addEventListener('click', (e) => { let obj = this.validarFichas() if (obj.status) { delete obj["status"] jAlert({ type: 'confirm', content: 'Asegúrese de revisar bien la información de los sueldos de las fichas.', buttons: {left: 'Si', right: 'No'} }).then(flag => { if (flag) { httpRequest.registrarSueldoDocente(obj) .then(data => { if (data.status) { jAlert({ type: 'success', content: `Se actualizó el lote número <mark>${lote.numeroLote}</mark> correctamente!`, buttons: {left: 'Aceptar'} }).then(flag => { if (flag) { window.location = 'lotesFicha.jsp' } }) } else { jAlert({type: 'error', content: data.message, buttons: {left: 'Aceptar'}}) } }) .catch(err => jAlert({type: 'error', content: err, buttons: {left: 'Aceptar'}})) } }) } }) }, validarFichas() { let json = this.obtenerData() let flagActualizar = false if (json.estadoLote) { let fichas = json.fichas for (let ficha in fichas) { if (fichas[ficha].estadoFicha) { if (fichas[ficha].observacion === "") { let input = $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[8]).children() input.next().remove() input.addClass('tp-error-input-observacion') input.after('<span style="color: #F44336">Debe ingresar una observación</span>') flagActualizar = false } else { flagActualizar = true } } else { $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[8]).children().removeClass('tp-error-input-observacion') } } } else { $('#tblFichas tbody tr').each((i, el) => { $($(el).find('td')[8]).children().removeClass('tp-error-input-observacion') }) flagActualizar = true } json.status = flagActualizar return json }, obtenerData() { let new_data = getDataDocenteJSON(), flag = false let data = lote.detalle for (let ficha in data) { if (data[ficha].costoMensual === new_data[ficha].costoMensual && data[ficha].costoa === new_data[ficha].costoa && data[ficha].costob === new_data[ficha].costob && data[ficha].costoc === new_data[ficha].costoc) { new_data[ficha].estadoFicha = false } else { new_data[ficha].estadoFicha = true flag = true } } json.fichas = new_data json.codigoLote = parseInt(lote.codigoFichaLote) json.estadoLote = flag return json } } const fichasAdministrativo = { init() { this.actualizarFichas() }, actualizarFichas() { document.querySelector('#btnEvaluarFichasAdministrativo').addEventListener('click', (e) => { let obj = this.validarFichas() if (obj.status) { delete obj["status"] jAlert({ type: 'confirm', content: 'Asegúrese de revisar bien la información de los sueldos de las fichas.', buttons: {left: 'Si', right: 'No'} }).then(flag => { if (flag) { httpRequest.registrarSueldoAdministrativo(obj) .then(data => { if (data.status) { jAlert({ type: 'success', content: `Se actualizó el lote número <mark>${lote.numeroLote}</mark> correctamente!`, buttons: {left: 'Aceptar'} }).then(flag => { if (flag) { window.location = 'lotesFicha.jsp' } }) } else { jAlert({type: 'error', content: data.message, buttons: {left: 'Aceptar'}}) } }) .catch(err => jAlert({type: 'error', content: err, buttons: {left: 'Aceptar'}})) } }) } }) }, validarFichas() { let json = this.obtenerData() let flagActualizar = false if (json.estadoLote) { let fichas = json.fichas for (let ficha in fichas) { if (fichas[ficha].estadoFicha) { if (fichas[ficha].observacion === "") { let input = $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[7]).children() input.next().remove() input.addClass('tp-error-input-observacion') input.after('<span style="color: #F44336">Debe ingresar una observación</span>') input.parent('td').css({textAlign: 'left'}) flagActualizar = false } else { flagActualizar = true } } else { $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[7]).children().removeClass('tp-error-input-observacion') } } } else { $('#tblFichas tbody tr').each((i, el) => { $($(el).find('td')[7]).children().removeClass('tp-error-input-observacion') }) flagActualizar = true } json.status = flagActualizar return json }, obtenerData() { let new_data = getDataAdministrativoJSON(), flag = false let data = lote.detalle for (let ficha in data) { if (data[ficha].sueldoMensual === new_data[ficha].sueldoPresidencia) { new_data[ficha].estadoFicha = false } else { new_data[ficha].estadoFicha = true flag = true } } json.fichas = new_data json.codigoLote = parseInt(lote.codigoFichaLote) json.estadoLote = flag return json } } // METODOS getDataFromLocalStorage() printComponents.tablaHead(lote) .then((tipoLote) => { if (tipoLote === 'D') { httpRequest.listarFichasDocente() } else if (tipoLote === 'A') { httpRequest.listarFichasAdministrativo() } else { jAlert({type: 'error', content: 'Error al obtener el tipo de lote', buttons: {left: 'Aceptar'}}) } }) httpRequest.imprimirLote() printComponents.panelLote() setTimeout(() => { DOMComponents.init() }, 0) if (lote.tipoLote === 'A') { document.querySelector('.tp-btn-evaluar').setAttribute('id', 'btnEvaluarFichasAdministrativo') fichasAdministrativo.init() } else if (lote.tipoLote === 'D') { document.querySelector('.tp-btn-evaluar').setAttribute('id', 'btnEvaluarFichasDocente') fichasDocente.init() } else { jAlert({type: 'error', content: 'Error al obtener el tipo de lote', buttons: {left: 'Aceptar'}}) } setTimeout(function () { DOMEvents() }, 0) removeLocal('detalleFichaLote')