Release 1.5
Ajout de filtrage par groupe de TD/TP sur la page des étudiants inscrits au semestre
This commit is contained in:
parent
3725d508ab
commit
ef3c3ce7b8
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user