d50beeb4d7
Ajout de la documentation des fonctions avec JsDoc (En Markdown) Ajout de spinners de chargement Ajout de liens vers les absences et le bulletin depuis le profil étudiant Affichage des groupes de TD sur le profil étudiant Reduction/Optimisation du nombre de requetes Optimisations mineures (TODO: Changements des logins en nom/prénom sur l'acceuil de la gestion du semestre)
166 lines
7.2 KiB
JavaScript
166 lines
7.2 KiB
JavaScript
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 |