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'; function UpdateUserGoals(props) { const [fields1desabled, setfields1desabled] = useState(true); const url = process.env.REACT_APP_API_URL + "myclass/api/add_update_user_objectif/"; const [defaultdate, setdefaultdate] = useState(new Date().setDate(new Date().getDate() + 10)); const [mindate, setmindate] = useState(new Date().setDate(new Date().getDate() + 1)); const history = useHistory(); const editorRef_description = useRef(null); const [datamodification, setdatamodification] = useState("0"); const [field_description, setfield_description] = useState(""); useEffect(() => { getGolData(); window.scrollTo(0, 0); }, [props.name_obj]); function cleanField() { document.getElementsByName("name")[0].value = ""; document.getElementsByName("domaine")[0].value = ""; document.getElementsByName("niveau")[0].value = ""; } 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_objectif/"; var name = document.getElementsByName("name")[0].value; var date_souhaite = format(StartDate, 'dd/MM/yyyy') var domaine = document.getElementsByName("domaine")[0].value; var niveau = document.getElementsByName("niveau")[0].value; var description_new = ""; if (editorRef_description.current) { description_new = editorRef_description.current.getContent(); } const stored_cookie = getCookie('tokenmysych'); formData.append('token', stored_cookie); formData.append('name', name); formData.append('description', description_new); formData.append('date_souhaite', date_souhaite); formData.append('domaine', domaine); formData.append('niveau', niveau); 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']); history.push({ pathname: "/mysy-user-account/", state: { menu: "profil_objectif" } }); { window.location.reload() } } else { setrecorddata_api("false"); setrecorddata_api_message(result['message']); } }) .catch((error) => { console.error('Error:', error); setrecorddata_api("false"); }); }; const [getGolData_api, setgetGolData_api] = useState(); const [getGolData_api_message, setgetGolData_api_message] = useState(); const [getGolData_api_result, setgetGolData_api_result] = useState([]); function getGolData() { cleanField(); const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/get_user_objectif/"; const stored_cookie = getCookie('tokenmysych'); formData.append('token', stored_cookie); var name = props.name_obj; formData.append('name', name); //alert( "stored_user = "+stored_user); axios.post(url, formData).then(res => { if (String(res.data.status) === String("true")) { //console.log(" In getGolData res.data.status = " + res.data.status); //console.log(" In getGolData res.data.message = " + res.data.message); setgetGolData_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.description) { setfield_description(mylocalobj.description); } if (mylocalobj.domaine) { document.getElementsByName("domaine")[0].value = mylocalobj.domaine; document.getElementsByName("domaine")[0].disabled = true; document.getElementsByName("domaine")[0].style.backgroundColor = "#ECEFF1"; } if (mylocalobj.date_souhaite) { var va = new Date(moment(mylocalobj.date_souhaite, "DD/MM/YYYY")) setStartDate(va); } if (mylocalobj.niveau) { document.getElementsByName("niveau")[0].value = mylocalobj.niveau; document.getElementsByName("niveau")[0].disabled = true; document.getElementsByName("niveau")[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 { setgetGolData_api("true"); setgetGolData_api_message(res.data.message); } }).catch((error) => { console.warn('getGolData : Not good man :( mysearchtext = ', error); setgetGolData_api("false"); }) } const [fiedsupdated, setfiedsupdated] = useState(false); function updateBox() { setfiedsupdated(true); } const [editfields, seteditfields] = useState(false); function enablefieds1() { document.getElementsByName("domaine")[0].disabled = false; document.getElementsByName("niveau")[0].disabled = false; document.getElementsByName("domaine")[0].style.background = "#fff"; document.getElementsByName("niveau")[0].style.background = "#fff"; seteditfields(true); } function desablefield1() { document.getElementsByName("name")[0].disabled = true; //document.getElementsByName("date_souhaite")[0].disabled = true; document.getElementsByName("domaine")[0].disabled = true; document.getElementsByName("niveau")[0].disabled = true; document.getElementsByName("name")[0].style.background = "#ECEFF1"; //document.getElementsByName("date_souhaite")[0].style.background = "#ECEFF1"; document.getElementsByName("domaine")[0].style.background = "#ECEFF1"; document.getElementsByName("niveau")[0].style.background = "#ECEFF1"; seteditfields(false); } const [StartDate, setStartDate] = useState(new Date()); const [mydate_val, setmydate_val] = useState(); const handleChangeDate = (date) => { //alert(" date = " + format(date, 'dd/MM/yyyy')); setStartDate(date); setfiedsupdated(true); } const [editor_tochange, seteditor_tochange] = useState(""); function editor_keyup() { seteditor_tochange("1"); } function DataUpdated() { setdatamodification("1"); } return (