Source: vistas/vistagestionalumnos.js

/**
 Vista con el listado de alumnos de un ciclo.
 **/
import { Vista } from './vista.js'

export class VistaGestionAlumnos extends Vista{
  /**
   Constructor de la clase.
   @param {Object} controlador Controlador de la vista.
   @param {Node} base Nodo al que se añadirá la vista.
   **/
  constructor (controlador, base) {
    super(controlador)
    this.base = base
    this.cursos = []

    // Cogemos referencias a los elementos del interfaz
    this.listaAlumnos = document.getElementById('gestionAlumnosListado')
    this.listaAlumnosSelect = document.getElementById('selectCursoListadoAlumnos')

    // Asociamos eventos
    this.listaAlumnosSelect.addEventListener("change",this.cargarFiltrado.bind(this))

    // Ejecutar metodos necesarios

  }

  /**
   * Carga los cursos en el select de la vista.
   */
  cargarFiltroCursos(){
    if (this.cursos.length === 0) {
      this.controlador.getCursos()
        .then(cursos => {

          let option1 = document.createElement('option')
          this.listaAlumnosSelect.appendChild(option1)
          option1.value = ''
          option1.textContent = 'Seleccione'
          option1.disabled = 'true'

          for (let i = 0; i < cursos.length; i++) {
            this.cursos[i] = cursos[i]
            let option = document.createElement('option')
            this.listaAlumnosSelect.appendChild(option)
            option.value = cursos[i].codigo
            option.textContent = cursos[i].codigo
          }
        })
        .catch(error => console.log(error))
    }
  }

  /**
   * Carga los alumnos en el listado filtrados por curso.
   */
  cargarFiltrado(){
    this.listaAlumnos.innerHTML = ''
    const curso = this.listaAlumnosSelect.value
    this.controlador.getAlumnosByCurso(curso)
      .then(alumnos => {
        if (alumnos.length > 0){
          for(let i=0; i<alumnos.length; i++){
              this.crearDivAlumno(alumnos[i])
          }
        } else {
          const div = document.createElement('div')
          this.base.appendChild(div)
          div.textContent = 'No hay ningún alumno que coincida.'
        }
      })
  }

  /**
   Crea el div asociado a un alumno y lo añade a la base.
   @param alumno {Alumno} Datos del alumno.
   **/
  crearDivAlumno (alumno){

    const div = document.createElement('div')
    this.listaAlumnos.appendChild(div)

    const spanAlumno = document.createElement('span')
    div.appendChild(spanAlumno)
    spanAlumno.classList.add('alumno')
    spanAlumno.textContent = `${alumno.nombre} ${alumno.apellidos} `
    spanAlumno.addEventListener("click", () => this.modificarAlumno(alumno))

    const spanAlumnoEmail = document.createElement('span')
    div.appendChild(spanAlumnoEmail)
    spanAlumnoEmail.textContent = `/ ${alumno.email}`

    const spanIconos = document.createElement('span')
    div.appendChild(spanIconos)
    spanIconos.classList.add('iconos')

    const spanIconoBorrar = document.createElement('img')
    spanIconos.appendChild(spanIconoBorrar)
    spanIconoBorrar.classList.add('icono')
    spanIconoBorrar.src = 'iconos/delete.svg'
    spanIconoBorrar.addEventListener("click", () => this.borrarAlumno(alumno.id, alumno.nombre))

  }

  /**
   * Borra el alumno seleccionado.
   * @param alumnoId {Number} Identificador del alumno.
   */
  borrarAlumno(alumnoId, alumnoNombre) {
    this.controlador.eliminarAlumno(alumnoId, alumnoNombre)
  }


  /**
   * Redirige a la vista para modificar el alumno.
   * @param alumno {} Datos modificables del alumno.
   */
  modificarAlumno (alumno) {
    this.controlador.mostrarModificarAlumno(alumno, this.cursos)
  }

}