ScoDocMobile/src/ScoDoc/GestionSemestre/Bulletin.js

import React, {Component} from "react";
import Select from "react-select";
import {Table, Button, Dropdown} from "react-bootstrap"
import '../Style.css'

class Bulletin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bltn: {},
            datue: {},
            loaded: false
        };
        this.getData = this.getData.bind(this);
        this.getJsonData = this.getJsonData.bind(this);
    }

    getJsonData () {
        this.setState({bltn: require('..\\..\\json\\bltn.json')}, () => {
            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}, () => {
                this.setState({loaded: true})
            })
        })

    }

    getData() {
        let dept = window.location.href.split('/')[6]
        let sem = window.location.href.split('/')[8]
        let BASE_URL = window.$api_url
        fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=' +
            sem +'&etudid=' + this.props.id +'&format=json', {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then(response =>
                response.json().then(data => ({
                        data: data,
                        status: response.status
                    })
                ).then(res => {
                    this.setState({ bltn: res.data }, () => {
                        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}, () => {
                            this.setState({loaded: true})
                        })
                    })
                })
            );
    }

    getPdf() {
        let BASE_URL = window.$api_url
        let dept = window.location.href.split('/')[6]
        let sem = window.location.href.split('/')[8]
        fetch( BASE_URL + dept + "/Scolarite/Notes/formsemestre_bulletinetud?" +
            "formsemestre_id=" + sem + "&etudid=" + this.props.id + "&format=pdf&version=selectedevals", {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then( res => res.blob() )
            .then( blob => {
                let file = window.URL.createObjectURL(blob);
                window.location.assign(file);
            });
    }

    componentDidUpdate(prevProps) {
        if (prevProps.id !== this.props.id) {
            this.getData();
        }
    }

    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.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, index) => {
                            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, index) => {
                                        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