import {Vista} from '../vista.js';
/**
* Contiene la vista de gestión de padres de secretaría
*/
export class VistaGestionPadres extends Vista {
/**
* Constructor de la clase.
* @param {ControladorSecretaria} controlador Controlador de la vista.
* @param {HTMLDivElement} div Div de HTML en el que se desplegará la vista.
*/
constructor(controlador, div) {
super(controlador, div);
this.idUsuario = 0;
this.padres = null;
this.busqueda = null;
// Secciones de la vista
this.divListadoPadres = this.div.querySelector('#divListadoPadres');
this.divModificacionPadres = this.div.querySelector('#divModificacionPadres');
//Elementos vista listado padres
this.tabla = this.div.querySelector('#tablaGestionPadres');
this.thead = this.div.getElementsByTagName('thead')[0];
this.tbody = this.div.getElementsByTagName('tbody')[0];
this.txtBusqueda = this.div.getElementsByTagName('input')[0];
this.btnBuscar = this.div.getElementsByTagName('button')[0];
this.btnBuscar.addEventListener('click', this.buscar.bind(this))
//Elementos vista modificar padres
this.formModificar = this.div.querySelector('#formModificacionPadres');
this.btnCancelarMod = this.div.getElementsByTagName('button')[1];
this.btnActualizar = this.div.getElementsByTagName('button')[2];
this.divExitoModificar = this.div.querySelector('#divExitoModificacion');
this.divErrorModificar = this.div.querySelector('#divErrorModificacion');
this.divCargandoModificar = this.div.querySelector('#loadingImgModificacion');
this.inputsModificar = this.formModificar.getElementsByTagName('input');
this.btnActualizar.addEventListener('click', this.validarFormulario.bind(this));
this.btnCancelarMod.addEventListener('click', this.cancelarModificacion.bind(this));
//Inicio de las vistas
this.mostrarOcultarCrud(true, false);
}
/**
* Realizar búsqueda de padres.
*/
buscar() {
this.busqueda = this.txtBusqueda.value;
this.inicializar();
}
/**
* Mostrar/Ocultar crud padres.
* @param {Boolean} listado Mostrar o no listado de padres.
* @param {Boolean} modificacion Mostrar o no modificación de padres.
*/
mostrarOcultarCrud(listado, modificacion) {
this.divListadoPadres.style.display = listado ? 'block' : 'none';
this.divModificacionPadres.style.display = modificacion ? 'block' : 'none';
}
/**
* Refrescar/iniciar listado.
*/
inicializar() {
this.controlador.obtenerListadoPadres(this.busqueda);
}
/**
* Generar tabla por partes.
*/
iniciarTabla(padres) {
this.padres = padres;
this.crearEncabezado();
this.crearCuerpo();
}
/**
* Crear cabecera tabla.
*/
crearEncabezado() {
this.thead.innerHTML = '';
if (this.padres) {
let trInfo = document.createElement('tr');
let thPadres = document.createElement('th');
thPadres.textContent = 'Padres';
trInfo.appendChild(thPadres);
let thCorreo = document.createElement('th');
thCorreo.textContent = 'Email'
trInfo.appendChild(thCorreo)
this.thead.appendChild(trInfo);
}
}
/**
* Generar cuerpo de la tabla.
*/
crearCuerpo() {
this.tbody.innerHTML = '';
if (this.padres) {
for (const padre of this.padres) {
let tr = document.createElement('tr');
let tdNombre = document.createElement('td');
tdNombre.textContent = padre.nombre + " " + padre.apellidos;
if (tdNombre.textContent.length > 40) {
tdNombre.textContent = padre.nombre + "(...)";
tdNombre.setAttribute('title', padre.nombre + " " + padre.apellidos)
}
tdNombre.style.cursor = "pointer";
tdNombre.onclick = this.editar.bind(this, padre)
let tdEmail = document.createElement('td');
tdEmail.textContent = padre.correo
//Esto hace un control para que si el correo es muy largo pues lo recorte a 40 caracteres
if (tdEmail.textContent.length > 40) {
while (tdEmail.textContent.length > 40) {
tdEmail.textContent = tdEmail.textContent.substring(0, tdEmail.textContent.length - 1);
}
tdEmail.textContent = tdEmail.textContent + "(...)";
tdEmail.setAttribute('title', padre.correo)
}
tr.appendChild(tdNombre);
tr.appendChild(tdEmail);
this.tbody.appendChild(tr);
}
}
else {
let tr = document.createElement('tr');
let tdSinUsuarios = document.createElement('td');
//tdSinUsuarios.setAttribute('colspan', '4')
tdSinUsuarios.textContent = "No existen registros";
tr.appendChild(tdSinUsuarios);
this.tbody.appendChild(tr)
}
}
/**
* Poner datos actuaales en los campos del formulario de modificación.
* @param {Object} padre Objeto con los datos.
*/
editar(padre) {
this.mostrarOcultarCrud(false, true);
this.idUsuario = padre.id;
this.inputsModificar[0].value = padre.nombre;
this.inputsModificar[1].value = padre.apellidos;
this.inputsModificar[2].value = padre.correo;
this.inputsModificar[3].value = padre.telefono;
this.inputsModificar[4].value = padre.dni;
this.inputsModificar[5].value = padre.iban;
this.inputsModificar[6].value = padre.titular;
this.inputsModificar[7].value = padre.fechaFirmaMandato;
this.inputsModificar[8].value = padre.referenciaUnicaMandato;
}
/**
* Limpia los campos del formulario modificación.
*/
cancelarModificacion() {
for (let input of this.inputsModificar)
input.value = '';
this.mostrarOcultarCrud(true, false);
}
/**
* Informar al usuario de la modificación exitosa.
* @param {Boolean} activar Activa o no mensaje éxito.
*/
exitoModificacion(activar) {
this.bloquearBotones(false);
this.formModificar.classList.remove('was-validated');
this.divCargandoModificar.style.display = 'none';
this.divExitoModificar.style.display = activar ? 'block' : 'none';
}
/**
* Aviso de error de modificación de datos al usuario.
* @param {Object} e Error.
*/
errorModificacion(e) {
this.formModificar.classList.remove('was-validated');
this.divCargandoModificar.style.display = 'none';
this.bloquearBotones(false);
if (e != null) {
if (e == 'Error: 500 - Internal Server Error 1') {
this.divErrorModificar.innerHTML = '<p>Ya existe una cuenta con esa dirección de correo.</p>';
}
else {
this.divErrorModificar.innerHTML = '<p>' + e + '</p>';
}
this.divErrorModificar.style.display = 'block';
window.scrollTo(0, document.body.scrollHeight);
}
else {
this.divErrorModificar.style.display = 'none';
}
}
/**
* Bloquear/desbloquear botones.
* @param {Boolean} bloquear Bloquear o no.
*/
bloquearBotones(bloquear) {
this.btnActualizar.disabled = bloquear;
this.btnCancelarMod.disabled = bloquear;
}
/**
* Valida los campos del formulario y realiza el proceso de modificar.
*/
validarFormulario() {
let cont;
let total = this.inputsModificar.length;
for (cont=0; cont<total; cont++) {
if (!this.inputsModificar[cont].checkValidity()) break;
}
this.formModificar.classList.add('was-validated');
if (cont == total) {
const datos = {
'id': this.idUsuario,
'nombre': this.inputsModificar[0].value,
'apellidos': this.inputsModificar[1].value,
'correo': this.inputsModificar[2].value,
'telefono': this.inputsModificar[3].value,
'dni': this.inputsModificar[4].value,
'iban': this.inputsModificar[5].value,
'titular': this.inputsModificar[6].value,
'fechaMandato': this.inputsModificar[7].value,
'mandatoUnico': this.inputsModificar[8].value
};
if (this.divErrorModificar.style.display == 'block')
this.divErrorModificar.style.display = 'none';
this.bloquearBotones(true);
this.divCargandoModificar.style.display = 'block';
this.controlador.modificarPadre(datos);
}
}
mostrar(ver) {
super.mostrar(ver);
if (ver) this.inicializar(); // Al volver a mostrar la vista, refrescar listado.
if (this.divExitoModificar.style.display == 'block')
this.divExitoModificar.style.display = 'none';
if (this.divErrorModificar.style.display == 'block')
this.divErrorModificar.style.display = 'none';
}
}