ScoDocMobile/src/ScoDoc/GestionSemestre/Bulletin.js

import React, {Component} from "react";
import {Table, Button, Dropdown, Spinner} from "react-bootstrap"
import '../Style.css'
import {get, getJson} from "../Request";

/** Page de présentation des bulletins étudiants */
class Bulletin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bltn: {},
            datue: {},
            loaded: false,
            loading: false
        };
        this.getData = this.getData.bind(this);
    }

    /**
     * Recupère les données de bulletin 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/Notes/formsemestre_bulletinetud?formsemestre_id=' + sem +'&etudid=' +
            this.props.id +'&format=json')
            .then(res => {
                // Recuperation des données du bulletin
                this.setState({ bltn: res.data }, () => {
                    // Recuperation d'un tableau CodeUE | NomUE
                    let ls = {}
                    for (let elm in this.state.bltn.decision_ue) {
                        elm = this.state.bltn.decision_ue[elm]
                        ls[elm.acronyme] = elm.titre
                    }
                    this.setState({datue: ls}, () => {
                        // Marquage du bulletin comme "chargé"
                        this.setState({loaded: true, loading: false})
                    })
                })
            })
    }

    /**
     * Recupère les données de bulletin en tant que "blob" pour un PDF depuis l'API
     */
    getPdf() {
        let BASE_URL = window.$api_url
        let dept = window.location.href.split('/')[7]
        let sem = window.location.href.split('/')[9]
        get(BASE_URL + dept + "/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=" + sem +
            "&etudid=" + this.props.id + "&format=pdf&version=selectedevals")
            .then(res => res.blob())
            .then(blob => {
                let file = window.URL.createObjectURL(blob);
                window.location.assign(file);
            });
    }

    // Recuperation des données en cas de changement de props (dans notre cas, changement d'étudiant.e)
    componentDidUpdate(prevProps) {
        if (prevProps.id !== this.props.id) {
            this.setState({loading: true})
            this.getData();
        }
    }

    // Recuperation des données lors du chargement de la page si un étudiant est selectionné
    componentDidMount() {
        if (this.props.id !== "") {this.getData()}
    }

    render() {
        return (
            <div className="wrapper">
                <div style={{"margin-bottom": "20px"}}>
                    <h1 id="pageTitle">Bulletins de notes</h1>
                </div>
                {this.state.loading === true && this.state.loaded === false &&
                    <Spinner animation="border"/>
                }
                {this.state.loaded === true &&
                <div>
                    <Table responsive="sm">
                        <thead>
                            <tr>
                                <th colSpan="3"/>
                                <th>Note/20</th>
                            </tr>
                            <tr className="bigRow">
                                <th colSpan="3">Moyenne générale</th>
                                <th>
                                    <Dropdown>
                                        <Dropdown.Toggle variant="primary" size="sm" id="dropdown-basic">
                                            {this.state.bltn.note.value}
                                        </Dropdown.Toggle>

                                        <Dropdown.Menu>
                                            <Dropdown.Item href="#">Min: {this.state.bltn.note.min}</Dropdown.Item>
                                            <Dropdown.Item href="#">Max: {this.state.bltn.note.max}</Dropdown.Item>
                                            <Dropdown.Item href="#">Classement: {this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
                                        </Dropdown.Menu>
                                    </Dropdown>
                                </th>
                            </tr>
                        </thead>
                        {this.state.bltn.ue.map((ue) => {
                            return (
                                <tbody>
                                    <tr className="ueRow">
                                        <td colSpan="3">{ue.acronyme} - {this.state.datue[ue.acronyme]}</td>
                                        <td>
                                            <Dropdown>
                                                <Dropdown.Toggle variant="primary" size="sm" id={ue.acronyme}>
                                                    {ue.note.value}
                                                </Dropdown.Toggle>

                                                <Dropdown.Menu>
                                                    <Dropdown.Item href="#">Min: {ue.note.min}</Dropdown.Item>
                                                    <Dropdown.Item href="#">Max: {ue.note.max}</Dropdown.Item>
                                                    <Dropdown.Item href="#">Classement: {ue.rang}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
                                                </Dropdown.Menu>
                                            </Dropdown>
                                        </td>
                                    </tr>
                                    {ue.module.map((mod) => {
                                        return (
                                            <tr>
                                                <td colSpan="3">{mod.titre.replace("&apos;", "'")}</td>
                                                <td>
                                                    <Dropdown>
                                                        <Dropdown.Toggle variant="primary" size="sm" id={mod.code}>
                                                            {mod.note.value}
                                                        </Dropdown.Toggle>

                                                        <Dropdown.Menu>
                                                            <Dropdown.Item href="#">Min: {mod.note.min}</Dropdown.Item>
                                                            <Dropdown.Item href="#">Max: {mod.note.max}</Dropdown.Item>
                                                            <Dropdown.Item href="#">Classement: {mod.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
                                                            <Dropdown.Item href="#">Coefficient: {mod.coefficient}</Dropdown.Item>
                                                        </Dropdown.Menu>
                                                    </Dropdown>
                                                </td>
                                            </tr>
                                        )
                                    })}
                                </tbody>
                            )
                        })}
                    </Table>
                    <div>
                        <Button className="btn-primary" onClick={() => {this.getPdf()}}>Version PDF</Button>
                    </div>
                </div>
                }
            </div>
        )
    }
}

export default Bulletin