572 lines
23 KiB
JavaScript
572 lines
23 KiB
JavaScript
import React, { useRef, useState, useEffect } from "react";
|
|
import TextField from '@mui/material/TextField';
|
|
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
|
|
import Button from '@mui/material/Button';
|
|
import axios from "axios";
|
|
import { getCookie, setCookie } from 'react-use-cookie';
|
|
import { useHistory } from "react-router-dom";
|
|
import Rating from '@mui/material/Rating';
|
|
|
|
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
|
|
|
|
import 'react-tooltip/dist/react-tooltip.css'
|
|
|
|
import 'reactjs-popup/dist/index.css';
|
|
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
|
import { useParams } from 'react-router-dom'
|
|
|
|
import RadioGroup from '@mui/material/RadioGroup';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import FormControl from '@mui/material/FormControl';
|
|
|
|
import Radio from '@mui/material/Radio';
|
|
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
|
|
import Display_Action_And_Class from "./Display_Action_And_Class";
|
|
import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
|
|
|
|
function SurveyDocument() {
|
|
|
|
const history = useHistory();
|
|
const { survey_id } = useParams();
|
|
const [isLoading, setLoading] = useState();
|
|
|
|
|
|
const [tab_variable, settab_variable] = useState([]);
|
|
|
|
|
|
const [get_Given_Survey_Data_api, setget_Given_Survey_Data_api] = useState();
|
|
const [get_Given_Survey_Data_message, setget_Given_Survey_Data_message] = useState();
|
|
const [get_Given_Survey_Data_result, setget_Given_Survey_Data_result] = useState([]);
|
|
function get_Given_Survey_Data() {
|
|
|
|
|
|
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Given_Survey_Data_No_Token/";
|
|
|
|
var form = new FormData();
|
|
const stored_cookie = getCookie('tokenmysypart');
|
|
//form.append("token", stored_cookie);
|
|
form.append("survey_id", survey_id);
|
|
|
|
|
|
|
|
setLoading(true);
|
|
axios.post(myurl, form).then(res => {
|
|
|
|
setLoading(false);
|
|
//console.log(" get_Given_Survey_Data : In test res.data.status = " + res.data.status);
|
|
// console.log(" get_Given_Survey_Data: res.data.message = " + res.data.message);
|
|
|
|
if (String(res.data.status) === "true") {
|
|
setget_Given_Survey_Data_api("true");
|
|
setget_Given_Survey_Data_result(res.data.message);
|
|
|
|
var new_data2 = {};
|
|
|
|
const new_data = JSON.parse(res.data.message).list_questions.map((x) => {
|
|
var obj_name = x._id;
|
|
var local_node = {}
|
|
new_data2[String(obj_name)] = "";
|
|
|
|
});
|
|
|
|
settab_variable(new_data2);
|
|
|
|
|
|
}
|
|
else if (String(res.data.status) === String("Err_Connexion")) {
|
|
alert('Erreur: ' + res.data.message);
|
|
history.push("/Connexion");
|
|
return;
|
|
}
|
|
else {
|
|
setget_Given_Survey_Data_api("false");
|
|
setget_Given_Survey_Data_message(res.data.message)
|
|
// alert(res.data.message);
|
|
setdisplay_alert_mysy("1");
|
|
setalert_message(res.data.message);
|
|
setalert_type("error");
|
|
|
|
}
|
|
}).catch((error) => {
|
|
setLoading(false);
|
|
console.warn('get_Given_Survey_Data ee: Not good man :( = ', error);
|
|
setget_Given_Survey_Data_api("false");
|
|
setget_Given_Survey_Data_message(" Impossible de recuperer les données")
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
get_Given_Survey_Data();
|
|
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}, [])
|
|
|
|
|
|
const [Record_Survey_Data_api, setRecord_Survey_Data_api] = useState();
|
|
const [Record_Survey_Data_message, setRecord_Survey_Data_message] = useState();
|
|
const [Record_Survey_Data_result, setRecord_Survey_Data_result] = useState();
|
|
function Record_Survey_Data() {
|
|
var form = new FormData();
|
|
|
|
const myJSON = JSON.stringify(tab_variable);
|
|
|
|
|
|
form.append("survey_id", survey_id);
|
|
form.append("list_response", myJSON);
|
|
|
|
var is_empty_field = 0;
|
|
|
|
// console.log(" tab_variable = ", tab_variable);
|
|
|
|
|
|
|
|
for (let i = 0; i < Object.keys(tab_variable).length; i++) {
|
|
|
|
var key = Object.keys(tab_variable)[i];
|
|
var val = tab_variable[key];
|
|
|
|
document.getElementsByName(key)[0].style.backgroundColor = "#FFFFFF";
|
|
|
|
if (String(val).length === 0) {
|
|
document.getElementsByName(key)[0].style.backgroundColor = "#F9E79F";
|
|
is_empty_field = 1;
|
|
}
|
|
|
|
}
|
|
|
|
if (is_empty_field === 1) {
|
|
// alert(" Le questionnaire n'est pas correctement rempli");
|
|
setdisplay_alert_mysy("1");
|
|
setalert_message("Le questionnaire n'est pas correctement rempli");
|
|
setalert_type("error");
|
|
return;
|
|
}
|
|
|
|
|
|
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Record_Survey_Data_No_Token/";
|
|
|
|
setLoading(true);
|
|
axios.post(myurl, form).then(res => {
|
|
//console.log(" In Record_Survey_Data res.data.status = " + res.data.status);
|
|
//console.log(" In Record_Survey_Data res.data.message r_class = " + res.data.message);
|
|
|
|
setLoading(false);
|
|
if (String(res.data.status) === String("true")) {
|
|
|
|
|
|
// alert(res.data.message)
|
|
setdisplay_alert_mysy("1");
|
|
setalert_message(res.data.message);
|
|
setalert_type("success");
|
|
|
|
history.push("/");
|
|
}
|
|
else {
|
|
setRecord_Survey_Data_api("false");
|
|
setRecord_Survey_Data_message(res.data.message);
|
|
// alert(res.data.message);
|
|
setdisplay_alert_mysy("1");
|
|
setalert_message(res.data.message);
|
|
setalert_type("error");
|
|
}
|
|
|
|
}).catch((error) => {
|
|
setLoading(false);
|
|
console.warn('Record_Survey_Data : Not good man :( Record_Survey_Data = ' + error);
|
|
setRecord_Survey_Data_api("false");
|
|
alert(" Impossible d'enregistrer le formulaire ");
|
|
|
|
})
|
|
}
|
|
|
|
|
|
|
|
function change_survey_data(e) {
|
|
|
|
var tmp = tab_variable;
|
|
|
|
tmp[String(e.name)] = e.value;
|
|
|
|
settab_variable(tmp)
|
|
|
|
}
|
|
|
|
const [value, setValue] = React.useState('female');
|
|
|
|
const handleChange = (event) => {
|
|
setValue(event.target.value);
|
|
};
|
|
|
|
|
|
|
|
const [selected_qcm_value, setselected_qcm_value] = React.useState('');
|
|
const handleChange_qcm = (event) => {
|
|
|
|
|
|
|
|
document.getElementsByName(event.target.name)[0].value = event.target.value;
|
|
|
|
// setselected_qcm_value(event.target.value);
|
|
change_survey_data(event.target);
|
|
};
|
|
|
|
const [selected_checkbox_value, setselected_checkbox_value] = React.useState('');
|
|
const handleChange_checkbox = (event) => {
|
|
var tmp_variable = tab_variable;
|
|
var tab = String(event.target.name).split(":");
|
|
|
|
var al = String(tab[0]);
|
|
|
|
if (event.currentTarget.checked) {
|
|
// console.log('checked');
|
|
if (!tmp_variable[al] || String(tmp_variable[al]) === "") {
|
|
//console.log(" première action ");
|
|
var t = [];
|
|
t.push(String(tab[1]));
|
|
} else {
|
|
//console.log(" PASSS première action ");
|
|
var t = tmp_variable[al];
|
|
t.push(String(tab[1]));
|
|
}
|
|
|
|
|
|
tmp_variable[al] = t;
|
|
|
|
//console.log(" sortirrr tmp_variable = ", tmp_variable);
|
|
settab_variable(tmp_variable);
|
|
|
|
//console.log(" ### sortir settab_variable = ", tab_variable);
|
|
|
|
|
|
}
|
|
else {
|
|
console.log('not checked');
|
|
|
|
if (!tmp_variable[al] || String(tmp_variable[al]) === "") {
|
|
console.log(" première action ");
|
|
|
|
} else {
|
|
|
|
|
|
|
|
var new_variable = []
|
|
for (let i = 0; i < tmp_variable[al].length; i++) {
|
|
if (String(tmp_variable[al][i]) !== String(tab[1])) {
|
|
new_variable.push(String(tmp_variable[al][i]))
|
|
|
|
}
|
|
}
|
|
|
|
tmp_variable[al] = new_variable;
|
|
|
|
|
|
|
|
settab_variable(tmp_variable);
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
|
|
const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
|
|
const [alert_message, setalert_message] = useState("");
|
|
const [alert_type, setalert_type] = useState("");
|
|
|
|
function clear_alert_message() {
|
|
setalert_message("");
|
|
}
|
|
function clear_alert_type() {
|
|
setalert_type("");
|
|
}
|
|
function clear_display_alert_mysy() {
|
|
setdisplay_alert_mysy("");
|
|
}
|
|
|
|
return (
|
|
<div className="surveydocument">
|
|
|
|
|
|
{isLoading && <div className="loader-container">
|
|
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
|
|
</div>}
|
|
|
|
{/*** Affichage des messages d'alerte*/}
|
|
{display_alert_mysy && String(display_alert_mysy) === "1" &&
|
|
<Module_Alert_Confirmation alert_message={alert_message}
|
|
alert_type={alert_type}
|
|
clear_alert_message={clear_alert_message}
|
|
clear_alert_type={clear_alert_type}
|
|
clear_display_alert_mysy={clear_display_alert_mysy}
|
|
/>
|
|
}
|
|
{/*** FIN Affichage des messages d'alerte*/}
|
|
|
|
<div className="div_row">
|
|
|
|
</div>
|
|
{String(get_Given_Survey_Data_api) === "true" && <div style={{ "textAlign": "left", }}>
|
|
|
|
|
|
|
|
<div className="block_text_and_survey">
|
|
<br />
|
|
<div className="question_box_introduction">
|
|
Bonjour {JSON.parse(get_Given_Survey_Data_result).prenom} {JSON.parse(get_Given_Survey_Data_result).nom}
|
|
|
|
<nav>
|
|
{JSON.parse(get_Given_Survey_Data_result).message_introduction}
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
{String(JSON.parse(get_Given_Survey_Data_result).survey_type) === "pos" && <div className="question_box_entete">
|
|
Questionnaire de positionnement
|
|
</div>}
|
|
|
|
|
|
{String(JSON.parse(get_Given_Survey_Data_result).survey_type) === "hot_eval" && <div className="question_box_entete">
|
|
Questionnaire d'évaluation
|
|
</div>}
|
|
|
|
{String(JSON.parse(get_Given_Survey_Data_result).survey_type) === "cold_eval" && <div className="question_box_entete">
|
|
Questionnaire d'évaluation
|
|
</div>}
|
|
|
|
{String(JSON.parse(get_Given_Survey_Data_result).survey_type) === "human_eval" && <div className="question_box_entete">
|
|
Questionnaire d'évaluation pour le formateur <b> {JSON.parse(get_Given_Survey_Data_result).related_rh_data_civilite && JSON.parse(get_Given_Survey_Data_result).related_rh_data_civilite}.
|
|
{JSON.parse(get_Given_Survey_Data_result).related_rh_data_nom && JSON.parse(get_Given_Survey_Data_result).related_rh_data_nom}
|
|
{JSON.parse(get_Given_Survey_Data_result).related_rh_data_prenom && JSON.parse(get_Given_Survey_Data_result).related_rh_data_prenom} </b>
|
|
</div>}
|
|
|
|
{String(JSON.parse(get_Given_Survey_Data_result).survey_type) === "autre_eval" && <div className="question_box_entete">
|
|
Questionnaire d'évaluation
|
|
</div>}
|
|
|
|
<div className="question_box_entete" style={{textAlign:'left', fontSize:'14px'}}>
|
|
{JSON.parse(get_Given_Survey_Data_result).class_title && <nav> <b> Formation</b>: {JSON.parse(get_Given_Survey_Data_result).class_title} </nav>}
|
|
{/*JSON.parse(get_Given_Survey_Data_result).session_code && <nav> <u>Code Session</u>: {JSON.parse(get_Given_Survey_Data_result).session_code} </nav>*/}
|
|
{JSON.parse(get_Given_Survey_Data_result).session_title && <nav> <b>Titre Session</b>: {JSON.parse(get_Given_Survey_Data_result).session_title} </nav>}
|
|
{JSON.parse(get_Given_Survey_Data_result).session_code_date_debut && <nav> <b> Date début</b>: {JSON.parse(get_Given_Survey_Data_result).session_code_date_debut} </nav>}
|
|
{JSON.parse(get_Given_Survey_Data_result).session_code_date_fin && <nav> <b> Date fin</b>: {JSON.parse(get_Given_Survey_Data_result).session_code_date_fin} </nav>}
|
|
</div>
|
|
|
|
{JSON.parse(get_Given_Survey_Data_result).list_questions && JSON.parse(get_Given_Survey_Data_result).list_questions.length > 0 &&
|
|
JSON.parse(get_Given_Survey_Data_result).list_questions.map((question, index) => (
|
|
<div>
|
|
<div className="question_box">
|
|
<nav style={{ width: "100%", "float": "left" }}>
|
|
|
|
<nav className="question_text"> N° {index + 1}. {question.question} </nav> </nav><br />
|
|
|
|
{question.type && String(question.type) === "text" &&
|
|
<TextField
|
|
margin="dense"
|
|
name={question._id}
|
|
fullWidth
|
|
type="text"
|
|
componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }}
|
|
multiline={true}
|
|
rows={2}
|
|
onChange={(e) => {
|
|
change_survey_data(e.target);
|
|
}}
|
|
|
|
/>}
|
|
|
|
{question.type && String(question.type) === "note" && question.max_note &&
|
|
<div id={question._id}
|
|
name={question._id}>
|
|
<Rating
|
|
id={question._id}
|
|
name={question._id}
|
|
precision={0.5}
|
|
defaultValue={0}
|
|
componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }}
|
|
max={parseInt(question.max_note)}
|
|
onChange={(e) => {
|
|
change_survey_data(e.target);
|
|
}}
|
|
/>
|
|
|
|
</div>
|
|
}
|
|
|
|
|
|
|
|
|
|
{question.type && String(question.type) === "entier" &&
|
|
<div id={question._id}
|
|
name={question._id}>
|
|
|
|
|
|
<TextField
|
|
name={question._id}
|
|
id={question._id}
|
|
|
|
type="number"
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }}
|
|
inputProps={{ min: "0", step: "1" }}
|
|
disabled={false}
|
|
onChange={(e) => {
|
|
change_survey_data(e.target);
|
|
}}
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
}
|
|
{question.type && String(question.type) === "bool" &&
|
|
<div id={question._id}
|
|
name={question._id}>
|
|
<FormControl>
|
|
|
|
<RadioGroup
|
|
row
|
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
|
|
|
onChange={(e) => {
|
|
change_survey_data(e.target);
|
|
}}
|
|
name={question._id}
|
|
>
|
|
<FormControlLabel componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }} value="oui" control={<Radio />} label="Oui" />
|
|
<FormControlLabel componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }} value="non" control={<Radio />} label="Non" />
|
|
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</div>
|
|
}
|
|
|
|
|
|
{question.type && String(question.type) === "qcm" &&
|
|
<div id={question._id}
|
|
name={question._id}>
|
|
<FormControl>
|
|
|
|
<RadioGroup
|
|
aria-labelledby="demo-controlled-radio-buttons-group"
|
|
name={question._id}
|
|
//value={selected_qcm_value}
|
|
onChange={handleChange_qcm}
|
|
>
|
|
{question.list_choix &&
|
|
question.list_choix.map((list_choix, index) => (
|
|
|
|
<FormControlLabel componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }} value={list_choix.reponse_qcm}
|
|
control={<Radio />}
|
|
label={index + ". " + list_choix.reponse_qcm} />
|
|
))}
|
|
</RadioGroup>
|
|
</FormControl>
|
|
|
|
|
|
</div>}
|
|
|
|
|
|
{question.type && String(question.type) === "checkbox" &&
|
|
<div id={question._id}
|
|
name={question._id}>
|
|
<FormControl>
|
|
|
|
<RadioGroup
|
|
aria-labelledby="demo-controlled-radio-buttons-group"
|
|
|
|
>
|
|
{question.list_case_cocher &&
|
|
question.list_case_cocher.map((case_cocher, index) => (
|
|
<FormControlLabel componentsProps={{ typography: { fontFamily: 'DM Sans', fontSize: '14px' } }} control={<Checkbox />} id={question._id + ":" + case_cocher.reponse_checkbox} name={question._id + ":" + case_cocher.reponse_checkbox} onChange={handleChange_checkbox} label={index + ". " + case_cocher.reponse_checkbox} />
|
|
|
|
))}
|
|
</RadioGroup>
|
|
</FormControl>
|
|
|
|
|
|
</div>}
|
|
|
|
|
|
</div>
|
|
|
|
{/*
|
|
Question : {question.question} <br />
|
|
Type : {question.type} <br />
|
|
{question.max_note && question.max_note} <br />
|
|
|
|
*/}
|
|
</div>
|
|
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
<div className="block_bton_envoyer">
|
|
<br />
|
|
|
|
<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
|
|
|
|
<div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
|
|
|
|
<Button variant="contained" className="bton_enreg" onClick={Record_Survey_Data}>Envoyer
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }} >
|
|
<Button variant="contained" className="bton_annule" onClick={(event) => {
|
|
history.push("/");
|
|
}} >Annuler
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div className="div_row" style={{ "border": "None" }}>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/*<div className="block_detail_formation">
|
|
<br />
|
|
|
|
{get_Given_Survey_Data_result && get_Given_Survey_Data_result.length > 0 && JSON.parse(get_Given_Survey_Data_result).class_internal_url &&
|
|
String(JSON.parse(get_Given_Survey_Data_result).class_internal_url).length > 5 && <div className="question_box_entete">
|
|
<Display_Action_And_Class classId={JSON.parse(get_Given_Survey_Data_result).class_internal_url} action={""} />
|
|
|
|
</div>}
|
|
</div>*/}
|
|
|
|
</div>}
|
|
|
|
{String(get_Given_Survey_Data_api) === "false" && <div style={{ height: "40vh", fontFamily:'DM Sans', fontSize:'16px', fontWeight:'600',
|
|
textAlign:'center', padding:'20px', paddingTop:'10rem', color:"orange"
|
|
}}>
|
|
|
|
/!\ Ce document est invalide ou une réponse a déjà été enregistrée pour ce questionnaire. /!\
|
|
</div>}
|
|
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SurveyDocument; |