- Edit src/App.js and save to reload.
-
+
+
+
);
}
diff --git a/src/components/CreateEmployeeComponent.js b/src/components/CreateEmployeeComponent.js
new file mode 100644
index 0000000..7d936e4
--- /dev/null
+++ b/src/components/CreateEmployeeComponent.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import EmployeeService from '../servises/EnseignantService';
+import { withRouter } from './withRouter';
+class CreateEmployeeComponent extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ firstName: '',
+ lastName: '',
+ emailId: '',
+ gender: ''
+ }
+ this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this);
+ this.changeLastNameHandler = this.changeLastNameHandler.bind(this);
+ this.changeEmailIdHandler = this.changeEmailIdHandler.bind(this);
+ this.changeGenderIdHandler = this.changeGenderIdHandler.bind(this);
+ this.saveEmployee = this.saveEmployee.bind(this)
+ }
+ changeFirstNameHandler(event) {
+ this.setState({ firstName: event.target.value })
+
+ }
+ changeLastNameHandler(event) {
+ this.setState({ lastName: event.target.value })
+
+ }
+ changeEmailIdHandler(event) {
+ this.setState({ emailId: event.target.value })
+
+ }
+ changeGenderIdHandler(event) {
+ this.setState({ gender: event.target.value })
+ }
+
+ saveEmployee = (e) => {
+ e.preventDefault();
+
+ let employee = { firstName: this.state.firstName, lastName: this.state.lastName, emailId: this.state.emailId, gender: this.state.gender };
+ console.log('employee=>' + JSON.stringify(employee));
+ EmployeeService.createEmployees(employee).then(res => {
+ this.props.navigate('/employees');
+ });
+ }
+ cancel() {
+ this.props.navigate('/employees');
+ }
+ render() {
+ return (
+
+
+ {/*} />*/}
+ } />
+ } />
+ } />
+ } />
+ }/>
+ }/>
+ }/>
+
+
+
+
+ );
+ }
+}
+
+export default withRouter(CreateEmployeeComponent);
\ No newline at end of file
diff --git a/src/components/EnseignantC.js b/src/components/EnseignantC.js
new file mode 100644
index 0000000..8765da3
--- /dev/null
+++ b/src/components/EnseignantC.js
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import Modal from 'react-modal';
+
+
+const Enseignant = () => {
+ const [enseignants, setEnseignants] = useState([]);
+
+ useEffect(() => {
+ axios.get('http://localhost:9001/enseignant-service/enseignants')
+ .then(res => setEnseignants(res.data))
+ .catch(err => console.log(err));
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+ Add Employee
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Male
+ Female
+
+
+
+
+
+
+
+
)}
+
+
+ export default Enseignant;
diff --git a/src/components/Final.js b/src/components/Final.js
new file mode 100644
index 0000000..45847f7
--- /dev/null
+++ b/src/components/Final.js
@@ -0,0 +1,195 @@
+import React, { Component } from 'react';
+import PieChat from './PieChat';
+import Modal from 'react-modal';
+import EmployeeService from '../servises/EnseignantService';
+import { withRouter } from './withRouter';
+import ListEmployeeComponent from './ListEmployeeComponent';
+import PieChart, {
+ Legend,
+ Export,
+ Series,
+ Label,
+ Font,
+ Connector,
+} from 'devextreme-react/pie-chart';
+
+class Final extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showModal: false,
+ showAddModal: false,
+ firstName: '',
+ lastName: '',
+ emailId: '',
+ gender: '',
+ count: [],
+ counttest:[]
+ };
+ this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this);
+ this.changeLastNameHandler = this.changeLastNameHandler.bind(this);
+ this.changeEmailIdHandler = this.changeEmailIdHandler.bind(this);
+ this.changeGenderIdHandler = this.changeGenderIdHandler.bind(this);
+ this.saveEmployee = this.saveEmployee.bind(this)
+ this.handleOpenModal = this.handleOpenModal.bind(this);
+ this.handleCloseModal = this.handleCloseModal.bind(this);
+ this.handleOpenAddModal = this.handleOpenAddModal.bind(this);
+ this.handleCloseAddModal = this.handleCloseAddModal.bind(this);
+ }
+
+ /*componentDidMount() {
+ EmployeeService.getNbrePerGender().then((res) => {
+ this.setState({ count: res.data });
+ });
+
+ }*/
+ componentDidMount(){
+ this.updateStats();
+ }
+ updateStats=async()=>{
+ const res=await EmployeeService.getNbrePerGender();
+ this.setState({count:res.data});
+ }
+
+ handleOpenModal() {
+ this.setState({ showModal: true });
+ }
+
+ handleCloseModal() {
+ this.setState({ showModal: false });
+ this.componentDidMount();
+
+
+ }
+ handleOpenAddModal() {
+ this.setState({ showAddModal: true });
+ }
+
+ handleCloseAddModal() {
+ //this.componentDidMount();
+ this.setState({ showAddModal: false ,firstName: '',
+ lastName: '',
+ emailId: '',
+ gender: '',});
+ }
+ changeFirstNameHandler(event) {
+ this.setState({ firstName: event.target.value })
+
+ }
+ changeLastNameHandler(event) {
+ this.setState({ lastName: event.target.value })
+
+ }
+ changeEmailIdHandler(event) {
+ this.setState({ emailId: event.target.value })
+
+ }
+ changeGenderIdHandler(event) {
+ this.setState({ gender: event.target.value })
+ }
+
+ async saveEmployee(/* = (e) =>*/) {
+ //e.preventDefault();
+
+ let employee = { firstName: this.state.firstName, lastName: this.state.lastName, emailId: this.state.emailId, gender: this.state.gender };
+ console.log('employee=>' + JSON.stringify(employee));
+ // EmployeeService.createEmployees(employee);
+ /* EmployeeService.getNbrePerGender().then((res) => {
+ this.setState({ counttest: res.data });
+ });
+ console.log(this.state.count);
+ console.log(this.state.counttest);
+ this.handleCloseAddModal();*/
+ await EmployeeService.createEmployees(employee);
+ await this.updateStats();
+ this.handleCloseAddModal();
+
+
+
+ }
+
+ render() {
+ return (
+ enseignant List
+
+ {/**/}
+
+
+
+
+
+
+
+
+
+ | + enseignant First name + | ++ enseignant Last name + | ++ enseignant Email ID + | ++ Gender + | ++ Actions + | +
|---|---|---|---|---|
| {enseignant.nom} | +{enseignant.prenom} | +{enseignant.cin} | +{enseignant.email} | + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+
+}
+function customizeText(arg) {
+ return `${arg.valueText} (${arg.percentText})`;
+}
+
+export default Final;
\ No newline at end of file
diff --git a/src/components/FooterComponent.js b/src/components/FooterComponent.js
new file mode 100644
index 0000000..2f14f21
--- /dev/null
+++ b/src/components/FooterComponent.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import EmployeeService from '../servises/EnseignantService';
+
+class FooterComponent extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+
+ }
+ }
+
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+ Add Employee
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Male
+ Female
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default FooterComponent;
\ No newline at end of file
diff --git a/src/components/HeaderComponent.js b/src/components/HeaderComponent.js
new file mode 100644
index 0000000..f4b7657
--- /dev/null
+++ b/src/components/HeaderComponent.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class HeaderComponent extends Component {
+ constructor(props){
+ super(props)
+ this.state={
+
+ }
+ }
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+export default HeaderComponent;
\ No newline at end of file
diff --git a/src/components/ListEmployeeComponent.js b/src/components/ListEmployeeComponent.js
new file mode 100644
index 0000000..b68c64e
--- /dev/null
+++ b/src/components/ListEmployeeComponent.js
@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import UpdateEmployeeComponent from './UpdateEmployeeComponent';
+import { withRouter } from './withRouter';
+import Modal from 'react-modal';
+import EnseignantService from '../servises/EnseignantService';
+
+
+class ListEmployeeComponent extends Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ enseignant: [],
+ showModal: false,
+ prenom: '',
+ nomame: '',
+ email: '',
+ cin:''
+
+ }
+
+ /*this.addEmployee = this.addEmployee.bind(this);
+ this.editEmployee = this.editEmployee.bind(this);
+ this.deleteEmployee = this.deleteEmployee.bind(this);
+ /////////////////////////////////////////////////////////:
+ this.handleOpenModal = this.handleOpenModal.bind(this);
+ this.handleCloseModal = this.handleCloseModal.bind(this);
+ /////////////////////////////////
+ this.changeprenomHandler = this.changeprenomHandler.bind(this);
+ this.changenomameHandler = this.changenomameHandler.bind(this);
+ this.changeemailHandler = this.changeemailHandler.bind(this);
+*/
+
+ }
+ ////////////////////////////////////////:
+ handleOpenModal(id) {
+ EnseignantService.getenseignantById(id).then((res) => {
+ let employee = res.data;
+ this.setState({
+ prenom: employee.prenom,
+ nomame: employee.nomame,
+ email: employee.email,
+ cin:employee.cin
+ });
+ });
+ this.setState({ showModal: true });
+ }
+
+ handleCloseModal() {
+ this.setState({ showModal: false });
+ this.componentDidMount();
+ }
+ ///////////////////////////////////////:
+ componentDidMount() {
+ EnseignantService.getenseignant().then((res) => {
+ this.setState({ enseignant: res.data });
+ });
+
+ }
+
+ /*addEmployee() {
+ this.props.navigate('/add-employee')
+
+
+ //call router
+
+ }
+ editEmployee(id) {
+
+ this.props.navigate(`/update-employee/${id}`)
+
+
+
+ }
+ deleteEmployee(id) {
+ enseignantervice.deleteEmployee(id).then(res => {
+ this.setState({ enseignant: this.state.enseignant.filter(employee => employee.id !== id) });
+ });
+
+ }*/
+ //////////////////////
+ changeprenomHandler(event) {
+ this.setState({ prenom: event.target.value })
+
+ }
+ changenomameHandler(event) {
+ this.setState({ nom: event.target.value })
+
+ }
+ changeemailHandler(event) {
+ this.setState({ email: event.target.value })
+
+ }
+ /* updateEmployee = (e) => {
+ e.preventDefault();
+
+ let employee = { prenom: this.state.prenom, nomame: this.state.nomame, email: this.state.email };
+ console.log('employee=>' + JSON.stringify(employee));
+ enseignantervice.updateEmployee(employee, this.state.id).then(res=>{
+ this.handleCloseModal();
+ });
+
+ }*/
+
+ render() {
+ return (
+
+
+ )
+ }
+}
+
+export default withRouter(ListEmployeeComponent);
\ No newline at end of file
diff --git a/src/components/ModalInClassComponents.js b/src/components/ModalInClassComponents.js
new file mode 100644
index 0000000..c089fe9
--- /dev/null
+++ b/src/components/ModalInClassComponents.js
@@ -0,0 +1,58 @@
+import Modal from 'react-modal';
+
+import React, { Component } from 'react';
+import ListEmployeeComponent from './ListEmployeeComponent';
+import PieChat from './PieChat';
+import CreateEmployeeComponent from './CreateEmployeeComponent';
+
+class ModalInClassComponents extends Component {
+ constructor() {
+ super();
+ this.state = {
+ showModal: false,
+ showAddModal:false
+ };
+ this.handleOpenModal = this.handleOpenModal.bind(this);
+ this.handleCloseModal = this.handleCloseModal.bind(this);
+ this.handleOpenAddModal = this.handleOpenAddModal.bind(this);
+ this.handleCloseAddModal = this.handleCloseAddModal.bind(this);
+ }
+ handleOpenModal() {
+ this.setState({ showModal: true });
+ }
+
+ handleCloseModal() {
+ this.setState({ showModal: false });
+ }
+ handleOpenAddModal() {
+ this.setState({ showAddModal: true });
+ }
+
+ handleCloseAddModal() {
+ this.setState({ showAddModal: false });
+ }
+ render() {
+ return (
+ enseignant List
+
+ {/**/}
+
+
+
+
+
+
+
+
+
+ | + enseignant First name + | ++ enseignant Last name + | ++ enseignant Email ID + | ++ Gender + | ++ Actions + | +
|---|---|---|---|---|
| {employee.prenom} | +{employee.nomame} | +{employee.email} | +{employee.gender} | +
+
+
+
+
+ {/*
+
+
+
+
+ Update Employee+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+ */}
+ |
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ModalInClassComponents;
\ No newline at end of file
diff --git a/src/components/PieChat.js b/src/components/PieChat.js
new file mode 100644
index 0000000..51ad2a5
--- /dev/null
+++ b/src/components/PieChat.js
@@ -0,0 +1,177 @@
+/*import React, { Component } from 'react';
+import PieChart, {
+ Series,
+ Label,
+ Legend,
+} from 'devextreme-react/pie-chart';
+import EmployeeService from '../servises/EmployeeService';
+
+
+class PieChat extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ count: []
+ }
+ }
+
+ componentDidMount() {
+ EmployeeService.getNbrePerGender().then((res) => {
+ this.setState({ count: res.data });
+ });
+ }
+
+
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default PieChat;
+*/
+/*import React, { Component } from 'react';
+
+import SelectBox from 'devextreme-react/select-box';
+import PieChart, {
+ Series,
+ Label,
+ Margin,
+ Export,
+ Legend,
+ Animation,
+} from 'devextreme-react/pie-chart';
+import EmployeeService from '../servises/EmployeeService';
+
+
+const resolveModes = ['shift', 'hide', 'none'];
+
+class PieChat extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ resolveMode: resolveModes[0],
+ count:[]
+ };
+ this.setResolveMode = this.setResolveMode.bind(this);
+ }
+ componentDidMount() {
+ EmployeeService.getNbrePerGender().then((res) => {
+ this.setState({ count: res.data });
+ });
+}
+
+ render() {
+ return (
+ hello
+
+
+ Options
+
+ Label Overlapping Resolution Mode
+
+
+
+ );
+ }
+}
+
+export default withRouter(UpdateEmployeeComponent);
\ No newline at end of file
diff --git a/src/components/withRouter.js b/src/components/withRouter.js
new file mode 100644
index 0000000..3fc8cb4
--- /dev/null
+++ b/src/components/withRouter.js
@@ -0,0 +1,20 @@
+import { useNavigate, useParams } from 'react-router-dom';
+
+export const withRouter = (Component) => {
+ const Wrapper = (props) => {
+ const navigate = useNavigate();
+
+ const params = useParams();
+
+
+ return (
+
+
+
+
+
+
+
+ Update Employee
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+