ScoDocMobile/src/ScoDoc/GestionSemestre/Etudiants.js

import React, {Component} from "react";
import {LazyLoadImage} from 'react-lazy-load-image-component';
import '../Style.css'
import {Link} from "react-router-dom";
import {getJson} from "../Request";
import {Spinner} from "react-bootstrap";
import Select from "react-select";

// CONSTANTES DE STYLE SELECT GROUP
const groupStyles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
};
const groupBadgeStyles = {
    backgroundColor: '#EBECF0',
    borderRadius: '2em',
    color: '#172B4D',
    display: 'inline-block',
    fontSize: 12,
    fontWeight: 'normal',
    lineHeight: '1',
    minWidth: 1,
    padding: '0.16666666666667em 0.5em',
    textAlign: 'center',
};

const formatGroupLabel = data => (
    <div style={groupStyles}>
        <span>{data.label}</span>
        <span style={groupBadgeStyles}>{data.options.length}</span>
    </div>
);

/** Page de présentation des étudiants inscrits au semestre */
class Etudiants extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // Liste des étudiants inscrits au semestre
            students: [],
            // Gestion du select
            selectOptions: [{label: "Groupe: Aucun", value: "Default"}],
            id: "",
            name: '',
        };
    }


    componentWillMount() {
        this.getData()
    }

    componentDidUpdate(prevProps) {
        if (prevProps !== this.props) {
            if (this.props.students.length && this.state.students.length === 0) {
                const dat = this.props.students.map((x,i) => {
                    return i % 2 === 0 ? this.props.students.slice(i, i+2) : null;
                }).filter(x => x != null);
                this.setState({ students: dat});
            }
        }
    }

    /**
     * Recupère la liste des groupes du semestre depuis l'API
     */
    getData() {
        let dept = window.location.href.split('/')[7]
        let sem = window.location.href.split('/')[9]
        let BASE_URL = window.$api_url
        getJson(BASE_URL + dept + '/Scolarite/formsemestre_partition_list?format=json&formsemestre_id=' + sem)
            .then(res => {
                // eslint-disable-next-line array-callback-return
                res.data.map((part) => {
                    // Ajout de la catégorie
                    let new_part = {label: part.partition_name, options: []}
                    // Ajout des groupes
                    // eslint-disable-next-line array-callback-return
                    part.group.map((group) => {
                        new_part.options.push({label: group.group_name, value: group.group_id})
                    })
                    // Ajout au state
                    let joined = this.state.selectOptions.concat(new_part);
                    this.setState({ selectOptions: joined})
                })
            })
    }

    /**
     * Recupère la liste des étudiants dans un groupe depuis l'API
     */
    getStudents() {
        let dept = window.location.href.split('/')[7]
        let group = this.state.id
        let BASE_URL = window.$api_url
        getJson(BASE_URL + dept + '/Scolarite/groups_view?with_codes=1&format=json&group_ids=' + group)
            .then(res => {
                const dat = res.data.map((x,i) => {
                    return i % 2 === 0 ? res.data.slice(i, i+2) : null;
                }).filter(x => x != null);
                this.setState({students: dat});
            })
    }

    /**
     * Gestion des données du Select
     */
    handleSelectChange(e){
        this.setState({id:e.value, name:e.label}, () => {
            if (this.state.id !== "Default") {this.getStudents()}
            else {
                if (this.props.students.length) {
                    const dat = this.props.students.map((x,i) => {
                        return i % 2 === 0 ? this.props.students.slice(i, i+2) : null;
                    }).filter(x => x != null);
                    this.setState({ students: dat});
                }
            }
        })
    }

    render() {
        return (
            <div className="wrapper">
                <h1 id="pageTitle">Liste des étudiants</h1>
                <div className="container">
                    <Select
                        defaultValue={this.state.selectOptions[0]}
                        options={this.state.selectOptions}
                        formatGroupLabel={formatGroupLabel}
                        onChange={this.handleSelectChange.bind(this)}
                    />
                    {this.state.students.length !== 0 ?
                        this.state.students.map((students) => {
                            // Creation du tableau de deux colonnes
                            return (
                                <div className="row justify-content-center">
                                {students.map((etud, index) => {
                                    return (
                                        <div className="col" key={index} id="wrapDept">
                                            <Link to={`/${window.location.href.split('/')[7]}/Scolarite/Etudiant/${etud.etudid}`}>
                                                {/* Recuperation de la photo de l'etudiant */}
                                                    <LazyLoadImage
                                                    alt={`${etud.nom_disp} ${etud.prenom}`}
                                                    src={`/ScoDoc/${window.location.href.split('/')[7]}/Scolarite/Notes/get_photo_image?etudid=${etud.etudid}`}
                                                    width="102"
                                                    height="128"
                                                    className="d-inline-block align-top"
                                                    />{' '}<br/>
                                                    {etud.nom_disp} {etud.prenom}
                                            </Link>
                                        </div>
                                    )
                                })}
                            </div>
                            )
                        })
                    :
                        <div className="row justify-content-center">
                            <Spinner animation="border"/>
                        </div>
                    }
                </div>
            </div>
        )
    }
}

export default Etudiants