diff --git a/README.md b/README.md index 29d9d61..d98cc66 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,13 @@ ## Description -Version mobile de l'application web ScoDoc (v1.3) +Version mobile de l'application web ScoDoc (v1.5) ### Fonctionnalités: - Login - Choix de département / formation - Affichage des profils étudiants -- Recherche d'élèves +- Recherche d'élèves | Filtrage par groupe de TD/TP - Affichage des bulletins de notes - Gestion des absences diff --git a/src/ScoDoc/GestionSemestre/Etudiants.js b/src/ScoDoc/GestionSemestre/Etudiants.js index 63ad610..6178fc4 100644 --- a/src/ScoDoc/GestionSemestre/Etudiants.js +++ b/src/ScoDoc/GestionSemestre/Etudiants.js @@ -4,6 +4,33 @@ 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 => ( +
+ {data.label} + {data.options.length} +
+); /** Page de présentation des étudiants inscrits au semestre */ class Etudiants extends Component { @@ -12,16 +39,21 @@ class Etudiants extends Component { this.state = { // Liste des étudiants inscrits au semestre students: [], + // Gestion du select + selectOptions: [{label: "Filtre: Aucun", value: "Default"}], + id: "", + name: '', }; } + componentWillMount() { - // this.getData() + this.getData() } componentDidUpdate(prevProps) { if (prevProps !== this.props) { - if (this.props.students.length) { + 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); @@ -31,27 +63,74 @@ class Etudiants extends Component { } /** - * Recupère la liste des étudiants inscrits au semestre depuis l'API + * 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/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem) + 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 => { - // Gestion des données sous forme de tableau a deux colonnes 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}); + 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 (

Liste des étudiants

+