Release 1.5

Ajout de filtrage par groupe de TD/TP sur la page des étudiants inscrits au semestre

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 
 

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 => (
+    <div style={groupStyles}>
+        <span>{data.label}</span>
+        <span style={groupBadgeStyles}>{data.options.length}</span>
+    </div>
+);
 
 /** 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 (
             <div className="wrapper">
                 <h1 id="pageTitle">Liste des étudiants</h1>
                 <div className="container">
+                    <Select
+                        defaultValue={this.state.selectOptions[0]}
+                        options={this.state.selectOptions}
+                        formatGroupLabel={formatGroupLabel}
+                        onChange={this.handleSelectChange.bind(this)}
+                    />
                     {this.state.students.length !== 0 ?
                         this.state.students.map((students) => {
                             // Creation du tableau de deux colonnes