Modifications mineures des pages existantes
Ajout de la barre de recherche fonctionnelle Ajout de la page GestionSemestre
This commit is contained in:
parent
c6d537354f
commit
f117c7a983
|
@ -42,4 +42,7 @@ Pour éviter des erreurs 404 liées à l'arborescence React:
|
||||||
Pages de login et choix du département
|
Pages de login et choix du département
|
||||||
|
|
||||||
### /Scolarité
|
### /Scolarité
|
||||||
Choix de la formation et barre de recherche d'élèves
|
Choix de la formation et barre de recherche d'élèves
|
||||||
|
|
||||||
|
### /Scolarité/GestionSem
|
||||||
|
Page principale de la gestion d'un semestre
|
|
@ -1,6 +1,7 @@
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import React, {Component} from "react";
|
import React, {Component} from "react";
|
||||||
import './Style.css'
|
import './Style.css'
|
||||||
|
import SearchStudent from "./SearchStudent";
|
||||||
|
|
||||||
class ChoixDept extends Component {
|
class ChoixDept extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
@ -17,6 +18,10 @@ class ChoixDept extends Component {
|
||||||
Département Génie Civil
|
Département Génie Civil
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="wrapDept">
|
||||||
|
<h3>Recherche d'élèves</h3>
|
||||||
|
<SearchStudent/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
import {Component} from "react";
|
||||||
|
import {Tabs, Tab} from "react-bootstrap"
|
||||||
|
import Acceuil from "./GestionSemestre/Acceuil";
|
||||||
|
import Absences from "./GestionSemestre/Absences";
|
||||||
|
import Eleves from "./GestionSemestre/Eleves";
|
||||||
|
import ScoNavBar from "./ScoNavBar";
|
||||||
|
|
||||||
|
class GestionSemestre extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ScoNavBar/>
|
||||||
|
<div className="wrapper">
|
||||||
|
<Tabs defaultActiveKey="Acceuil" id="controlled-tab-example">
|
||||||
|
<Tab eventKey="Acceuil" title="Acceuil">
|
||||||
|
<Acceuil />
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="Absences" title="Absences">
|
||||||
|
<Absences />
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="Eleves" title="Eleves">
|
||||||
|
<Eleves />
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GestionSemestre
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {Component} from "react";
|
||||||
|
|
||||||
|
class Absences extends Component {
|
||||||
|
render() {
|
||||||
|
return (<div>Absences</div>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Absences
|
|
@ -0,0 +1,39 @@
|
||||||
|
import React, {Component} from "react";
|
||||||
|
|
||||||
|
class Acceuil extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
semestre: {},
|
||||||
|
students: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=SEM144', {
|
||||||
|
method: 'GET',
|
||||||
|
verify: false,
|
||||||
|
credentials: 'include',
|
||||||
|
})
|
||||||
|
.then(response =>
|
||||||
|
response.json().then(data => ({
|
||||||
|
data: data,
|
||||||
|
status: response.status
|
||||||
|
})
|
||||||
|
).then(res => {
|
||||||
|
this.setState({ semestre: res.data[0]});
|
||||||
|
console.log(res.data)
|
||||||
|
console.log(this.state.semestre)
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="wrapper">
|
||||||
|
<h1>{this.state.semestre.titre}</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Acceuil
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {Component} from "react";
|
||||||
|
|
||||||
|
class Eleves extends Component {
|
||||||
|
render() {
|
||||||
|
return (<div>Eleves</div>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Eleves
|
|
@ -1,5 +1,4 @@
|
||||||
import React, {Component} from "react";
|
import React, {Component} from "react";
|
||||||
import {Link} from "react-router-dom";
|
|
||||||
import './Style.css'
|
import './Style.css'
|
||||||
import ChoixDept from "./ChoixDept";
|
import ChoixDept from "./ChoixDept";
|
||||||
|
|
||||||
|
|
|
@ -1,23 +1,18 @@
|
||||||
import React, {Component} from "react";
|
import React, {Component} from "react";
|
||||||
import {Link, Redirect} from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import './Style.css'
|
import './Style.css'
|
||||||
import ScoNavBar from "./ScoNavBar";
|
import ScoNavBar from "./ScoNavBar";
|
||||||
import {Accordion, Card, Button, Toast} from 'react-bootstrap'
|
import SearchStudent from './SearchStudent'
|
||||||
|
import {Accordion, Card, Button} from 'react-bootstrap'
|
||||||
|
|
||||||
class Scolarite extends Component {
|
class Scolarite extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
search: "",
|
|
||||||
// Status possibles:
|
|
||||||
// 0: Vide - 1: Pas de resultat - 2: Plusieurs resultats
|
|
||||||
search_status: 0,
|
|
||||||
semestres: [],
|
semestres: [],
|
||||||
students: [],
|
students: [],
|
||||||
toast: false
|
toast: false
|
||||||
};
|
};
|
||||||
this.handleChangeSearch = this.handleChangeSearch.bind(this);
|
|
||||||
this.searchStudent = this.searchStudent.bind(this);
|
|
||||||
this.dismissToast = this.dismissToast.bind(this);
|
this.dismissToast = this.dismissToast.bind(this);
|
||||||
this.getData = this.getData.bind(this);
|
this.getData = this.getData.bind(this);
|
||||||
}
|
}
|
||||||
|
@ -50,41 +45,6 @@ class Scolarite extends Component {
|
||||||
this.setState({toast: false})
|
this.setState({toast: false})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChangeSearch(e) {
|
|
||||||
this.setState({ search: e.target.value });
|
|
||||||
}
|
|
||||||
|
|
||||||
searchStudent(e) {
|
|
||||||
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/search_etud_by_name?format=json', {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({term: this.state.search})
|
|
||||||
})
|
|
||||||
.then(response =>
|
|
||||||
response.json().then(data => ({
|
|
||||||
data: data,
|
|
||||||
status: response.status
|
|
||||||
})
|
|
||||||
).then(res => {
|
|
||||||
this.setState({ students: res.data });
|
|
||||||
console.log(this.state.students)
|
|
||||||
}));
|
|
||||||
let result = 0
|
|
||||||
console.log(this.state.students)
|
|
||||||
if (result === 0) {
|
|
||||||
this.setState({search_status: 1, toast: true});
|
|
||||||
} else if (result === 1) {
|
|
||||||
// Redirection sur la page de l'étudiant
|
|
||||||
return <Redirect to="/" />
|
|
||||||
} else {
|
|
||||||
this.setState({search_status: 2});
|
|
||||||
// Liste des élèves trouvés avec liens
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -102,14 +62,18 @@ class Scolarite extends Component {
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Accordion.Collapse eventKey="0">
|
<Accordion.Collapse eventKey="0">
|
||||||
<Card.Body>
|
<Card.Body>
|
||||||
{this.state.semestres.map((sem, index) => (
|
{this.state.semestres.map((sem, index) => {
|
||||||
<div className="col-12" key={index} id="wrapDept">
|
return (
|
||||||
<Link to="/">
|
<div className="col-12" key={index} id="wrapDept">
|
||||||
|
{sem.etat !== 0 ?
|
||||||
|
<Link to="/Scolarite/GestionSem">
|
||||||
<h3>{sem.titre} [{sem.modalite}]</h3>
|
<h3>{sem.titre} [{sem.modalite}]</h3>
|
||||||
<p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
|
<p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
: null}
|
||||||
))}
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Accordion.Collapse>
|
</Accordion.Collapse>
|
||||||
</Card>
|
</Card>
|
||||||
|
@ -121,19 +85,7 @@ class Scolarite extends Component {
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Accordion.Collapse eventKey="1">
|
<Accordion.Collapse eventKey="1">
|
||||||
<Card.Body>
|
<Card.Body>
|
||||||
<div className="input-group">
|
<SearchStudent />
|
||||||
<input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
|
|
||||||
<div className="input-group-append">
|
|
||||||
<button type="button" className="btn waves-effect waves-light btn-primary" onClick={this.searchStudent}>
|
|
||||||
Rechercher
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{this.state.toast === true &&
|
|
||||||
<Toast onClick={this.dismissToast} style={{opacity: "70%"}}>
|
|
||||||
<Toast.Body>Aucun élève trouvé</Toast.Body>
|
|
||||||
</Toast>
|
|
||||||
}
|
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Accordion.Collapse>
|
</Accordion.Collapse>
|
||||||
</Card>
|
</Card>
|
||||||
|
@ -147,7 +99,7 @@ class Scolarite extends Component {
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,84 @@
|
||||||
|
import React, {Component} from "react";
|
||||||
|
import {Redirect} from "react-router-dom";
|
||||||
|
import {Row, Col} from "react-bootstrap"
|
||||||
|
|
||||||
|
class SearchStudent extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
students: [],
|
||||||
|
// Status possibles:
|
||||||
|
// 0: Vide - 1: Pas de resultat - 2: Plusieurs resultats
|
||||||
|
search_status: 0,
|
||||||
|
};
|
||||||
|
this.handleChangeSearch = this.handleChangeSearch.bind(this)
|
||||||
|
this.searchStudent = this.searchStudent.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChangeSearch(e) {
|
||||||
|
this.setState({ search: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
searchStudent() {
|
||||||
|
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/search_etud_by_name?term=' + this.state.search +'&format=json', {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then(response =>
|
||||||
|
response.json().then(data => ({data: data,})
|
||||||
|
).then(res => {
|
||||||
|
this.setState({ students: res.data });
|
||||||
|
console.log(this.state.students)
|
||||||
|
}))
|
||||||
|
.then(res => {
|
||||||
|
if (this.state.students.length === 0) {
|
||||||
|
this.setState({search_status: 1, toast: true});
|
||||||
|
} else if (this.state.students.length === 1) {
|
||||||
|
return <Redirect to="/" />
|
||||||
|
} else {
|
||||||
|
this.setState({search_status: 2, toast: false});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setState({searched: true})
|
||||||
|
}
|
||||||
|
|
||||||
|
result() {
|
||||||
|
console.log(this.state.students)
|
||||||
|
|
||||||
|
if (this.state.toast === true) {
|
||||||
|
return (
|
||||||
|
<div id="wrapDept">
|
||||||
|
Aucun élève trouvé
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else if (this.state.search_status === 2) {
|
||||||
|
return (
|
||||||
|
<div id="wrapDept">
|
||||||
|
<Col>
|
||||||
|
{this.state.students.map((student, index) => {
|
||||||
|
return (<Row><span>{student.label}</span></Row>);
|
||||||
|
})}
|
||||||
|
</Col>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="wrapper">
|
||||||
|
<div className="input-group">
|
||||||
|
<input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
|
||||||
|
<div className="input-group-append">
|
||||||
|
<button type="button" className="btn waves-effect waves-light btn-primary" onClick={this.searchStudent}>
|
||||||
|
Rechercher
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{this.result()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchStudent
|
|
@ -1,8 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Switch, Route} from 'react-router-dom';
|
import {Switch, Route} from 'react-router-dom';
|
||||||
import Scolarite from './ScoDoc/Scolarite.js'
|
import Scolarite from './ScoDoc/Scolarite.js'
|
||||||
import ChoixDept from './ScoDoc/ChoixDept.js'
|
|
||||||
import Login from './ScoDoc/Login'
|
import Login from './ScoDoc/Login'
|
||||||
|
import GestionSemestre from "./ScoDoc/GestionSemestre";
|
||||||
|
|
||||||
|
|
||||||
const Main = () => {
|
const Main = () => {
|
||||||
|
@ -10,6 +10,7 @@ const Main = () => {
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path='/' component={Login}/>
|
<Route exact path='/' component={Login}/>
|
||||||
<Route exact path='/Scolarite' component={Scolarite}/>
|
<Route exact path='/Scolarite' component={Scolarite}/>
|
||||||
|
<Route exact path='/Scolarite/GestionSem' component={GestionSemestre}/>
|
||||||
</Switch>
|
</Switch>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue