[EDIT periodo de cierre de asistencia, editando periodos de cierre]

src/main/webapp/js/pages/registro_periodo_cierre.js

+function getColumns() {
+	let columns = [
+		{
+			title: `N°`,
+			data: `id`,
+			className: 'text-center'
+		},
+		{
+			title: "TIPO DE CIERRE",
+			data: "tipopersonal_descripcion"
+		},
+		{
+			title: "PERIODO",
+			data: "mescierre_descripcion"
+		},
+		{
+			title: "FECHA INICIO",
+			data: "fecha_inicio",
+			className: "text-center"
+		},
+		{
+			title: `FECHA FIN`,
+			data: `fecha_fin`,
+			className: 'text-center'
+		},
+		{
+			title: `ESTADO`,
+			data: `estado`,
+			className: 'text-center',
+			render: (data) => {
+				let label = "";
+				let text = "";
+
+				switch (data) {
+					case 0:
+						label = "label label-danger";
+						text = "CERRADO";
+						break;
+					case 1:
+						label = "label label-success";
+						text = "ABIERTO";
+						break;
+				}
+
+				return `<span class="${label}">${text}</span>`;
+			}
+		},
+		{
+			title: `ACCIONES`,
+			data: null,
+			className: 'text-center',
+			render: (data) => {
+				let acciones = "";
+				let editar = "";
+				let abrirPeriodo = ""
+				let cerrarPeriodo = ""
+
+				if (data.estado === 1) {
+					cerrarPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo icon-lock2 text-danger-700"></i>&nbsp;&nbsp;</span>`;
+				} else if (data.estado === 0) {
+					abrirPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo icon-unlocked2 text-success-700"></i>&nbsp;&nbsp;</span>`;
+				}
+				editar = `<span style="cursor: pointer"><i class="editar icon-pencil text-slate-800"></i>&nbsp;&nbsp;</span>`;
+
+				acciones = editar + abrirPeriodo + cerrarPeriodo;
+				return acciones;
+			}
+		},
+	];
+
+	return columns;
+}
 const mostrarModalNuevoPeriodo = () => {
 	ajaxModal.get("cierreasistenciamensual/mantenimientoPeriodoCierre/registroperiodocierre.jspf").then((response) => {
 		swalWithBootstrapButtons({
@@ -66,28 +138,133 @@ const registrarNuevoPeriodo = () => {
 
 
 const listarTipoPersonal = (nodeIdentifier) => {
-	ajaxWebService.get(URI_TIPOPERSONAL).then((response) => {
-		console.log(response)
+	return ajaxWebService.get(URI_TIPOPERSONAL).then((response) => {
 		if (response.status) {
 			let data = response.data
 			let html = ""
 			html += data.map(tipoPersonal => `<option value="${tipoPersonal.id}">${tipoPersonal.descripcion}</option>`)
 			$(nodeIdentifier).html(html)
 		}
+		return $(nodeIdentifier)
 	})
 }
 
 const listarMesesCierre = (nodeIdentifier) => {
-	ajaxWebService.get(URI_MESESCIERRE).then((response) => {
+	return ajaxWebService.get(URI_MESESCIERRE).then((response) => {
 		if (response.status) {
 			let data = response.data
 			let html = ""
 			html += data.map(mesCierre => `<option value="${mesCierre.id}">${mesCierre.descripcion}</option>`)
 			$(nodeIdentifier).html(html)
 		}
+		return $(nodeIdentifier)
+	})
+}
+
+
+function listarPeriodosCierre(objParams = {}){
+	ajaxWebService.get(URI_PERIODOCIERRE, objParams).then((response) => {
+		let columns = getColumns();
+
+		let wrapsNameDatatable = `divDatatable`;
+		let classNameForDatatable = `display table table-bordered`;
+
+		makeDatatable(
+			wrapsNameDatatable,
+			{
+				data: response.data,
+				columns,
+			},
+			classNameForDatatable,
+			).then((nodes) => {
+			nodes.container
+				.off()
+				.on("click", ".editar", function () {
+					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
+					mostrarModalEditarPeriodoCierre(data);
+				})
+				.on("click", ".cierre-periodo", function () {
+					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
+					mostrarModalCierrePeriodo(data);
+				});
+
+		});
+	});
+}
+
+const mostrarModalEditarPeriodoCierre = (data) => {
+	ajaxModal.get("cierreasistenciamensual/mantenimientoPeriodoCierre/registroperiodocierre.jspf").then((response) => {
+		swalWithBootstrapButtons({
+			title: '<strong>Editar Periodo de cierre</strong>',
+			html: response.data,
+			showCancelButton: true,
+			showCloseButton: true,
+			focusConfirm: false,
+			confirmButtonText: '<i class="icon-checkmark2"></i> Guardar cambios',
+			cancelButtonText: '<i class="icon-cross3"></i>Cancelar',
+			width: '30%',
+			customClass: 'swal2-overflow',
+			onOpen: () => {
+				inicializarInputsModalEditarPeriodoCierre(data);
+			}
+		}).then((result) => {
+			if (result.value) {
+				editarPeriodoCierre(data);
+			}
+		});
+	});
+}
+
+const inicializarInputsModalEditarPeriodoCierre = (data) => {
+	console.log(data)
+	listarTipoPersonal("#cboTipoPersonal").then((node) => node.val(data.tipopersonal_id))
+	listarMesesCierre("#cboMesesCierre").then((node) => node.val(data.mescierre_id))
+	initDatePicker("#dpFechaInicio", "#dpFechaFin")
+	$("#dpFechaInicio").val(data.fecha_inicio)
+	$("#dpFechaFin").val(data.fecha_fin)
+}
+
+const editarPeriodoCierre = (data) => {
+	let {id} = data
+	let tipopersonal_id = $("#cboTipoPersonal").val()
+	let tipopersonal_descripcion = $("#cboTipoPersonal option:selected").text()
+	let mescierre_id = $("#cboMesesCierre").val()
+	let mescierre_descripcion = $("#cboMesesCierre option:selected").text()
+	let fecha_inicio = $("#dpFechaInicio").val()
+	let fecha_fin = $("#dpFechaFin").val()
+	let params = {
+		tipopersonal_id,
+		tipopersonal_descripcion,
+		mescierre_id,
+		mescierre_descripcion,
+		fecha_inicio,
+		fecha_fin
+	}
+
+	ajaxWebService.patch(`${URI_PERIODOCIERRE}/${id}`, params).then((response) => {
+		if (response.status) {
+			swal({
+				type: 'success',
+				title: `¡Periodo de cierre modificado exitosamente!`,
+				showConfirmButton: false,
+				timer: 1500
+			})
+			listarPeriodosCierre()
+		}
 	})
+
+}
+
+const mostrarModalCierrePeriodo = (data) => {
+
+}
+
+const aplicarFiltro = () => {
+
 }
 
 $(document).ready(function () {
 	$("#btnNuevoPeriodo").click(mostrarModalNuevoPeriodo);
+	$("#btnMostrarTodo").click(listarPeriodosCierre)
+	$("#btnAplicarFiltro").click(aplicarFiltro)
 })
\ No newline at end of file

src/main/webapp/js/pages/tolerancia_individual.js

@@ -96,18 +96,6 @@ const listarPersonal = (selectorName) => {
 };
 
 
-const listarSedes = (selectorName) => {
-	ajaxWebService.get(URI_SEDES).then((result) => {
-		let sedes = result.data;
-		sedes = _.orderBy(sedes, s => s.descripcion);
-		let html = `<option value="">[TODOS]</option>`;
-		sedes.forEach(sede => html += `<option value="${sede.codigo}">${sede.descripcion}</option>`);
-		$(`${selectorName}`).html(html);
-		$(selectorName).select2();
-	});
-};
-
-
 const inicializarInputsModalNuevaTolerancia = () => {
 	listarPersonal("#cboPersonal");
 	$("#cboPersonal").change(cargarHorarios);

src/main/webapp/vistas/modals/cierreasistenciamensual/mantenimientoPeriodoCierre/editarperiodocierre.jspf

+<div class="panel-body">
+	<form id="frm" onsubmit="return false;" autocomplete="off">
+
+		<div class="row">
+			<div class="form-group col-md-6">
+				<label>Tipo de cierre</label>
+				<select id="cboTipoPersonal" class="select-search form-control"></select>
+			</div>
+			<div class="form-group col-md-6">
+				<label>Mes de cierre</label>
+				<select id="cboMesesCierre" class="select-search form-control"></select>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="form-group col-md-6">
+				<label>Fecha Inicio</label>
+				<div class="input-group">
+					<span class="input-group-addon"><i class="icon-calendar"></i></span>
+					<input type="text" class="form-control" id="dpFechaInicio">
+				</div>
+			</div>
+			<div class="form-group col-md-6">
+				<label>Fecha Fin</label>
+				<div class="input-group">
+					<span class="input-group-addon"><i class="icon-calendar"></i></span>
+					<input type="text" class="form-control" id="dpFechaFin">
+				</div>
+			</div>
+		</div>
+
+	</form>
+</div>
\ No newline at end of file

src/main/webapp/vistas/registroPeriodoCierre.jsp

@@ -66,7 +66,7 @@
 		<div class="col-md-10 col-md-offset-1">
 			<div class="panel panel-primary card-3" style="margin-top: 30px"> 
 				<div class="panel-heading" style="padding: 8px 15px">
-					<h6 class="panel-title" style="font-size: 15px; font-family: inherit">LISTADO DE PERIODOS DE CIERRE</h6>
+					<h6 class="panel-title" style="font-size: 15px; font-family: inherit">LISTADO DE PERIODOS DE CIERRE DE ASISTENCIA</h6>
 					<div class="heading-elements">                                                                
 						<button type="button" id="btnNuevoPeriodo" class="btn bg-slate border-slate-600 btn-xs"><i class="glyphicon glyphicon-plus"></i>&nbsp; Nuevo periodo</button>
 					</div>