diff --git a/src/components/DisplayUserGoals.js b/src/components/DisplayUserGoals.js index 1a45607..3d82327 100644 --- a/src/components/DisplayUserGoals.js +++ b/src/components/DisplayUserGoals.js @@ -73,6 +73,7 @@ function DisplayUserGoals(props) { form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_user_objectif/"; + fetch(myurl, { method: 'POST', @@ -80,7 +81,7 @@ function DisplayUserGoals(props) { }) .then((data) => data.json()) .then((data) => { - console.log('Getlistgoals : Success:', data['message'], "data['status'] = ", data['status']); + //console.log('Getlistgoals : Success:', data['message'], "data['status'] = ", data['status']); if (String(data['status']) === 'true') { setlistgoals_api("true"); diff --git a/src/components/ProfilObjectif.js b/src/components/ProfilObjectif.js index 31dd9a1..4e00b89 100644 --- a/src/components/ProfilObjectif.js +++ b/src/components/ProfilObjectif.js @@ -6,6 +6,7 @@ import DisplayUserGoals from "./DisplayUserGoals"; import { IoCloseCircleOutline, IoAddCircleOutline } from "react-icons/io5"; import { Button, Form, FormGroup, Label } from "reactstrap"; import UpdateUserGoals from "./UpdateUserGoals"; +import UpdateUserProfil from "./UpdateUserProfil"; function ProfilObjectif() { const history = useHistory(); @@ -20,6 +21,7 @@ function ProfilObjectif() {
+

diff --git a/src/components/UpdateUserGoals.js b/src/components/UpdateUserGoals.js index 6e60255..d119a24 100644 --- a/src/components/UpdateUserGoals.js +++ b/src/components/UpdateUserGoals.js @@ -14,7 +14,6 @@ import { AiTwotoneEdit, AiTwotoneSave } from "react-icons/ai"; import { useHistory } from "react-router-dom"; import { format } from 'date-fns'; import DatePicker from "react-datepicker"; - import "react-datepicker/dist/react-datepicker.css"; import { Editor } from '@tinymce/tinymce-react'; @@ -80,7 +79,7 @@ function UpdateUserGoals(props) { ) .then((response) => response.json()) .then((result) => { - console.log('Success:', result['message'], "result['status'] = ", result['status']); + //console.log('Success:', result['message'], "result['status'] = ", result['status']); if (String(result['status']) === String("true")) { setrecorddata_api("true"); setrecorddata_api_result(result['message']); diff --git a/src/components/UpdateUserProfil.js b/src/components/UpdateUserProfil.js index e69de29..1ffa399 100644 --- a/src/components/UpdateUserProfil.js +++ b/src/components/UpdateUserProfil.js @@ -0,0 +1,320 @@ +import React, { useRef, useState, useEffect, } from "react"; +import { useForm } from "react-hook-form"; +import { Button, } from "reactstrap"; +import axios from "axios"; +import Box from '@mui/material/Box'; +import InputLabel from '@mui/material/InputLabel'; +import InputAdornment from '@mui/material/InputAdornment'; +import FormControl from '@mui/material/FormControl'; +import TextField from '@mui/material/TextField'; +import AccountCircle from '@mui/icons-material/AccountCircle'; +import moment from "moment"; +import { getCookie } from 'react-use-cookie'; +import { AiTwotoneEdit, AiTwotoneSave } from "react-icons/ai"; +import { useHistory } from "react-router-dom"; +import { format } from 'date-fns'; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +import { Editor } from '@tinymce/tinymce-react'; +import MenuItem from '@mui/material/MenuItem'; + + + +function UpdateUserProfil(props) { + + const [myclasslevel, setmyclasslevel] = useState("n/a"); + const [fiedsupdated, setfiedsupdated] = useState(false); + + const [datamodification, setdatamodification] = useState("0"); + function DataUpdated() { + setdatamodification("1"); + } + + const handleChangeSupportTraining = (event) => { + const name = event.target.name; + const value = event.target.value; + + setmyclasslevel(value); + + } + + const support_training_list = [ + { + value: 'avant_bac', + label: 'Avant Bac', + }, + { + value: 'bac', + label: 'BAC', + }, + { + value: 'bac_3', + label: 'BAC+3', + }, + { + value: 'bac_5', + label: 'BAC+5', + }, + { + value: 'bac_6', + label: 'Apres Bac+5', + }, + + ]; + + + const [recorddata_api, setrecorddata_api] = useState(); + const [recorddata_api_message, setrecorddata_api_message] = useState(); + const [recorddata_api_result, setrecorddata_api_result] = useState([]); + function RecordData() { + const formData = new FormData(); + const url = process.env.REACT_APP_API_URL + "myclass/api/add_update_user_profile/"; + + var name = document.getElementsByName("name")[0].value; + var class_level = document.getElementsByName("class_level")[0].value; + var nb_lang = document.getElementsByName("nb_lang")[0].value; + + const stored_cookie = getCookie('tokenmysych'); + + formData.append('token', stored_cookie); + formData.append('name', name); + formData.append('etude_level', class_level); + formData.append('nb_lang', nb_lang); + + + fetch( + url, + { + method: 'POST', + body: formData, + } + ) + .then((response) => response.json()) + .then((result) => { + console.log('Success:', result['message'], "result['status'] = ", result['status']); + if (String(result['status']) === String("true")) { + setrecorddata_api("true"); + setrecorddata_api_result(result['message']); + + + + } + else { + setrecorddata_api("false"); + setrecorddata_api_message(result['message']); + } + }) + .catch((error) => { + console.error('Error:', error); + setrecorddata_api("false"); + }); + + + }; + + useEffect(() => { + GetUserProfilData(); + window.scrollTo(0, 0); + }, []); + + + const [GetUserProfilData_api, setGetUserProfilData_api] = useState(); + const [GetUserProfilData_api_message, setGetUserProfilData_api_message] = useState(); + const [GetUserProfilData_api_result, setGetUserProfilData_api_result] = useState([]); + function GetUserProfilData() { + + + const formData = new FormData(); + const url = process.env.REACT_APP_API_URL + "myclass/api/Get_user_profile/"; + + const stored_cookie = getCookie('tokenmysych'); + formData.append('token', stored_cookie); + + var name = props.name_obj; + + + axios.post(url, formData).then(res => { + if (String(res.data.status) === String("true")) { + //console.log(" In GetUserProfilData res.data.status = " + res.data.status); + console.log(" In GetUserProfilData res.data.message = " + res.data.message); + setGetUserProfilData_api("true"); + + var mylocalobj = JSON.parse(res.data.message); + + if (mylocalobj) { + + if (mylocalobj.name) { + document.getElementsByName("name")[0].value = mylocalobj.name; + document.getElementsByName("name")[0].disabled = true; + document.getElementsByName("name")[0].style.backgroundColor = "#ECEFF1"; + } + + + if (mylocalobj.etude_level) { + setmyclasslevel(mylocalobj.etude_level); + document.getElementsByName("class_level")[0].disabled = true; + document.getElementsByName("class_level")[0].style.backgroundColor = "#ECEFF1"; + } + + if (mylocalobj.nb_lang) { + document.getElementsByName("nb_lang")[0].value = mylocalobj.nb_lang; + document.getElementsByName("nb_lang")[0].disabled = true; + document.getElementsByName("nb_lang")[0].style.backgroundColor = "#ECEFF1"; + } + + } else { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + + } + } + else { + setGetUserProfilData_api("true"); + setGetUserProfilData_api_message(res.data.message); + } + + + }).catch((error) => { + console.warn(' GetUserProfilData : Not good man :( mysearchtext = ', error); + setGetUserProfilData_api("false"); + + }) + } + + + function editefields() { + + document.getElementsByName("name")[0].disabled = false; + document.getElementsByName("name")[0].style.backgroundColor = "#ffffff"; + + document.getElementsByName("class_level")[0].disabled = false; + document.getElementsByName("class_level")[0].style.backgroundColor = "#ffffff"; + + + document.getElementsByName("nb_lang")[0].disabled = false; + document.getElementsByName("nb_lang")[0].style.backgroundColor = "#ffffff"; + + } + + function updateprofile() { + setfiedsupdated(true); + editefields(); + } + + return ( +
+ + +

Votre profils

+ + + {String(recorddata_api) === String("true") &&
Le profil a été ajouté/mise à jour
} + + {String(recorddata_api) === String("false") &&
{recorddata_api_message}
} + + + + +
+ +
+ +
+ +
+ +
+ + {support_training_list.map((option) => ( + + {option.label}  
+
+ ))} +
+
+ +
+ +
+ + + +
+
+ + {fiedsupdated &&
/!\ Pensez à enregistrer les modifications
} + + {fiedsupdated &&
+
+ +
+
+ +
+
+ } + + {!fiedsupdated &&
+ +
+ +
+
+ } + + +
+ +
); +} +export default UpdateUserProfil; \ No newline at end of file diff --git a/src/styles/components/_userprofil.scss b/src/styles/components/_userprofil.scss new file mode 100644 index 0000000..893edb3 --- /dev/null +++ b/src/styles/components/_userprofil.scss @@ -0,0 +1,140 @@ +.updateuserprofil { + .h1_transparent { + color: transparent; + font-size: 0.1rem; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + @media only screen and (max-width: 600px) {} + + @media only screen and (min-width: 601px) and (max-width: 991px) {} + + @media only screen and (min-width: 992px) and (max-width: 1199px) {} + + @media only screen and (min-width: 1200px) { + + .div_row { + float: left; + //border:0px solid black; + //border-width: 0.01rem; + width: 100%; + margin-bottom: 1rem; + border-radius: 1rem; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 48%; + border-radius: 1rem; + } + + .div_row_droite { + float: right; + //border:0px solid black; + border-width: 0.01rem; + width: 48%; + border-radius: 1rem; + } + + .titre1 { + font-family: "Quicksand", "Signika", sans-serif; + font-size: medium; + text-align: center; + margin-bottom: 0.8rem; + color: white; + cursor: pointer; + font-style: italic; + background-color: gray; + font-weight: normal; + } + + .bton_enreg { + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: #81BC3A; + color: white; + } + + .bton_annnule { + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: white; + color: red; + } + + .training_text { + padding: 5px; + float: left; + height: 220px !important; + min-height: 220px !important; + max-height: 220px !important; + margin-bottom: 10px; + width: 100%; + } + + .plus_produit_desabled { + width: 100% !important; + margin-right: 2rem !important; + margin-bottom: 1rem !important; + max-height: 200px !important; + } + + .titre_training_text { + font-size: small; + padding-left: 5px; + width: 50%; + } + + .tox-statusbar__branding { + display: none !important; + } + + .training_caract { + width: 30%; + padding: 5px; + float: left; + } + + .disabled_style { + //background-color: #ECEFF1; + font-size: small !important; + color: black; + width: 80% !important; + height: 2rem !important; + margin: 5px !important; + } + + .css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input, + .css-161vxw-MuiOutlinedInput-notchedOutline { + font-size: small !important; + } + + input { + font-size: small !important; + padding-top: 0.2rem; + padding-bottom: 0.2rem; + } + + .css-17nr37i-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.MuiSelect-select { + font-size: small; + } + + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 3daf9a4..94deeea 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -56,4 +56,5 @@ @import "./components/inscription"; @import "./components/gestionadministrative"; @import "./components/toggleswitch"; -@import "./components/updateusergoals"; \ No newline at end of file +@import "./components/updateusergoals"; +@import "./components/userprofil" \ No newline at end of file