ScoDocMobile/src/ScoDoc/GestionSemestre/Absences.js

import React, {Component} from "react";
import {Button, Spinner, Col} from 'react-bootstrap'
import '../Style.css'
import SaisieAbs from "./Absences/SaisieAbs";
import SupprAbs from "./Absences/SupprAbs";
import JustAbs from "./Absences/JustAbs";
import {getJson} from "../Request";

/** Page de gestion des absences */
class Absences extends Component {
    constructor(props){
        super(props)
        this.state = {
            // Gestion des fenetres modales
            // Ajout d'absences
            isOpen: false,
            // Suppression
            isDelOpen: false,
            // Justification
            isJustOpen: false,
            // Données de la liste des absences
            abs: [],
            absjust: [],
            // Données d'une absence selectionnée
            data: {},
            // En cours de recuperation de données
            loading: false
        }
    }

    // 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()}
    }

    /**
     * Gère l'ouverture des Modal
     * @param key {String} - Correspond au type de modal [isOpen, isDelOpen, isJustOpen]
     * @param data {Object} - Objet contenant les données à transmettre
     */
    openModal(key, data) {
        this.setState({[key]: true}, () => setTimeout(() => {
            this.setState({[key]: false})
        }, 500))
        if (data) {this.setState({data: data})}
    }

    /**
     * Recupère les données d'absences depuis l'API
     */
    getData() {
        let dept = window.location.href.split('/')[7]
        let BASE_URL = window.$api_url
        if (this.state.id !== "") {
            // Recuperation des absences non-justifiées
            getJson(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&absjust_only=0&etudid=" + this.props.id)
                .then(res => this.setState({abs: res.data}));
            // Recuperation des absences justifiées
            getJson(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&absjust_only=1&etudid=" + this.props.id)
                .then(res => this.setState({absjust: res.data, loading: false}));
        }
    }

    render() {
        return (
            <div className="wrapper">
                {this.props.id !== "" &&
                    // Gestion du modal de saisie
                    <SaisieAbs open={this.state.isOpen} etudid={this.props.id}/>
                } {this.props.id !== "" &&
                    // Gestion du modal de suppression
                    <SupprAbs open={this.state.isDelOpen} etudid={this.props.id} data={this.state.data}/>
                } {this.props.id !== "" &&
                    // Gestion du modal de justification
                    <JustAbs open={this.state.isJustOpen} etudid={this.props.id} data={this.state.data}/>
                }
                <h1 id="pageTitle">Gestion des absences</h1>
                {this.props.name !== "" &&
                <div className="col-sm" id="wrapDept">
                    <h4>Absences de {this.props.name + " "}
                        <Button variant="primary" size="sm" style={{"margin-right": "2px"}}
                                onClick={() => this.openModal('isOpen', null)}>
                            <span>+</span>
                        </Button>
                        <Button variant="secondary" size="sm" style={{"margin-left": "2px"}}
                                onClick={() => this.getData()}>
                            <span>🗘</span>
                        </Button>
                    </h4>
                    {this.state.loading === true &&
                        <Spinner animation="border"/>
                    }
                    {(this.state.abs.length + this.state.absjust.length === 0 && this.props.name !== "" && this.state.loading === false) &&
                        <h6>Aucune absence de l'étudiant.e</h6>
                    }
                    {this.state.abs.map((abs) => {
                        return (
                            <div className="col-sm" id="wrapDept">
                                <Col>
                                    <h5>{abs.datedmy} | {abs.matin}</h5>
                                    {abs.motif !== "" &&
                                    <span>Motif: {abs.motif}</span>
                                    } {abs.exams !== "" &&
                                <span>Exam a rattraper: {abs.exams}</span>
                                }
                                </Col>
                                <Col>
                                    {abs.motif === "" &&
                                    <Button variant="primary" size="sm" style={{"margin-right": "2px"}}
                                            onClick={() => this.openModal('isJustOpen', {
                                                date: abs.datedmy,
                                                demijournee: abs.ampm
                                            })}>
                                        Justifier
                                    </Button>
                                    }
                                    <Button variant="danger" size="sm" style={{"margin-left": "2px"}}
                                            onClick={() => this.openModal('isDelOpen', {
                                                date: abs.datedmy,
                                                demijournee: abs.ampm
                                            })}>
                                        Supprimer
                                    </Button>
                                </Col>
                            </div>
                        )
                    })}
                    {this.state.absjust.map((abs) => {
                        return (
                            <div className="col-sm" id="wrapDept">
                                <Col>
                                    <h5>{abs.datedmy} | {abs.matin}</h5>
                                    {abs.motif !== "" &&
                                    <span>Motif: {abs.motif}</span>
                                    } {abs.exams !== "" &&
                                <span>Exam a rattraper: {abs.exams}</span>
                                }
                                </Col>
                                <Col>
                                    <Button variant="danger" size="sm" style={{"margin-left": "2px"}}
                                            onClick={() => this.openModal('isDelOpen', {
                                                date: abs.datedmy,
                                                demijournee: abs.ampm
                                            })}>
                                        Supprimer
                                    </Button>
                                </Col>
                            </div>
                        )
                    })}
                </div>
                }
            </div>
        )
    }
}

export default Absences