07/04/2024 - 19h19

recette2
cherif 2024-04-07 19:05:54 +02:00
parent dd228700f6
commit 1facc7163b
3 changed files with 256 additions and 81 deletions

View File

@ -41,6 +41,10 @@ import { TransitionProps } from '@mui/material/transitions';
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5";
import Autocomplete from '@mui/material/Autocomplete';
import { gridClasses } from '@mui/x-data-grid';
import { PiDotsThree } from "react-icons/pi";
import Link from '@mui/material/Link';
const Partner_Config_Formulaires = (props) => {
@ -70,11 +74,11 @@ const Partner_Config_Formulaires = (props) => {
const columns = [
{ field: '_id', headerName: '_id', hide: true },
{ field: 'id', headerName: 'id', hide: true },
{ field: 'code', headerName: 'code', flex: 1, hide: false, editable: false },
{ field: 'nom', headerName: 'nom', flex: 1, hide: false, editable: false },
{ field: 'type', headerName: 'Type', flex: 1, hide: false, editable: false },
{ field: 'description', headerName: 'description', flex: 1, hide: true, editable: false },
{ field: 'commentaire', headerName: 'commentaire', flex: 1, hide: true, editable: false },
{ field: 'code', headerName: 'code', flex: 1, hide: false, editable: false , renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'nom', headerName: 'nom', flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'type', headerName: 'Type', flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'description', headerName: 'description', flex: 1, hide: true, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'commentaire', headerName: 'commentaire', flex: 1, hide: true, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{
@ -142,12 +146,43 @@ const Partner_Config_Formulaires = (props) => {
function ExpandableCell_50({ value }) {
const [expanded, setExpanded] = React.useState(false);
return (
<nav>
{value && <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
{expanded ? value : String(value).slice(0, 50)}&nbsp;
{value.length > 50 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<Link
type="button"
component="button"
sx={{ fontSize: 'inherit' }}
onClick={() => setExpanded(!expanded)}
>
{expanded ? <nav> <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
</Link>
)}
</div>}
{!value && <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
&nbsp;
</div>
}
</nav>
);
}
const columns_question = [
{ field: '_id', headerName: '_id', hide: true },
{ field: 'id', headerName: 'id', hide: true },
{ field: 'question', headerName: 'question', flex: 1, hide: false, editable: false },
{ field: 'type', headerName: 'type', flex: 1, hide: false, editable: false },
{ field: 'max_note', headerName: 'max_note', flex: 1, hide: true, editable: false },
{ field: 'question', headerName: 'question', flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'type', headerName: 'type', flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'max_note', headerName: 'max_note', flex: 1, hide: true, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{
field: "delete", headerName: 'Supprimer',
@ -691,7 +726,6 @@ const Partner_Config_Formulaires = (props) => {
{ "id": "note", "label": "Note ", "value": "note" },
{ "id": "bool", "label": "Oui/Non", "value": "bool" },
{ "id": "entier", "label": "Entier", "value": "entier" },
{ "id": "qcm", "label": "QCM", "value": "qcm" },
{ "id": "", "label": "", "value": "" },
]
@ -1494,41 +1528,37 @@ const Partner_Config_Formulaires = (props) => {
width: '100%',
paddingRight: '1px',
// Gestion des cellule "statut"
'& .cell--status--encours': {
backgroundColor: '#E6F7C8',
color: '#1a3e72',
fontWeight: 'light',
},
'& .cell--status--traite': {
backgroundColor: '#E6CEAA',
color: '#F9E79F',
fontWeight: 'light',
},
"& .MuiDataGrid-columnHeaders": {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 14
},
'& .line--statut--selected': {
backgroundColor: '#FBF2EF',
color: 'black',
},
'& .line--statut--pair': {
backgroundColor: 'rgba(235, 235, 235, .7)',
color: 'black',
},
'& .line--statut--impair': {
backgroundColor: '#FFFFFF',
color: 'black',
}, [`& .${gridClasses.cell}`]: {
py: 1,
},
}}
>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
/* if (newSelectionModel.length === 1)
handleClick_edit_config_From_Line(newSelectionModel);
if (newSelectionModel.length !== 1) {
setp_detail_config_valeur();
setp_detail_config_point();
setconfig_data_changed();
setconfig_data_edit_mode();
setdisplay_detail_config();
}*/
}}
selectionModel={selectionModel}
@ -1662,9 +1692,9 @@ const Partner_Config_Formulaires = (props) => {
value={p_detail_from_code}
/>
</div>
{ New_Option_type_Formulaire.length > 0 && <div className="session_caract"> Type <br />
{New_Option_type_Formulaire.length > 0 && <div className="session_caract"> Type <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
@ -1676,11 +1706,11 @@ const Partner_Config_Formulaires = (props) => {
}}
disabled={false}
className="disabled_style"
value={New_Option_type_Formulaire.filter((data) => (data).value === String(p_detail_from_type))[0].label}
value={New_Option_type_Formulaire.filter((data) => (data).value === String(p_detail_from_type))[0].label}
/>
</div>}
<div className="session_caract"> Nom <br />
@ -1750,8 +1780,13 @@ const Partner_Config_Formulaires = (props) => {
<div className="div_row" style={{ "padding": "10px" }}>
Questionnaire <br />
<div className="div_row" style={{ "textAlign": "right", "marginTop": "0.5rem" }}>
<Button className="bton_emarge" style={{ "minWidth": "10rem" }} onClick={(event) => {
Ajouter_Question();
}}>Ajout 1 Question </Button>
</div>
{p_detail_from_list_question && p_detail_from_list_question.length > 0 && <div style={{ height: 550, width: '100%', paddingRight: '5px' }}>
&nbsp;
@ -1761,23 +1796,21 @@ const Partner_Config_Formulaires = (props) => {
width: '100%',
paddingRight: '1px',
// Gestion des cellule "statut"
'& .cell--status--encours': {
backgroundColor: '#E6F7C8',
color: '#1a3e72',
fontWeight: 'light',
},
'& .cell--status--traite': {
backgroundColor: '#E6CEAA',
color: '#F9E79F',
fontWeight: 'light',
},
"& .MuiDataGrid-columnHeaders": {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 14
},
'& .line--statut--pair': {
backgroundColor: 'rgba(235, 235, 235, .7)',
color: 'black',
},
'& .line--statut--impair': {
backgroundColor: '#FFFFFF',
color: 'black',
}, [`& .${gridClasses.cell}`]: {
py: 1,
},
}}
>
@ -2012,14 +2045,12 @@ const Partner_Config_Formulaires = (props) => {
</div>
<div className="div_row" style={{ "padding": "10px" }}>
Questionnaire <br />
<div className="div_row" style={{ "textAlign": "right", "marginTop": "0.5rem" }}>
<Button className="bton_emarge" onClick={(event) => {
<Button className="bton_emarge" style={{ "minWidth": "10rem" }} onClick={(event) => {
Ajouter_Question();
}}>Ajouter &nbsp;</Button>
}}>Ajout 1 Question </Button>
</div>
{p_detail_from_list_question && p_detail_from_list_question.length > 0 && <div style={{ height: 550, width: '100%', paddingRight: '5px' }}>
@ -2030,23 +2061,21 @@ const Partner_Config_Formulaires = (props) => {
width: '100%',
paddingRight: '1px',
// Gestion des cellule "statut"
'& .cell--status--encours': {
backgroundColor: '#E6F7C8',
color: '#1a3e72',
fontWeight: 'light',
},
'& .cell--status--traite': {
backgroundColor: '#E6CEAA',
color: '#F9E79F',
fontWeight: 'light',
},
"& .MuiDataGrid-columnHeaders": {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 14
},
'& .line--statut--pair': {
backgroundColor: 'rgba(235, 235, 235, .7)',
color: 'black',
},
'& .line--statut--impair': {
backgroundColor: '#FFFFFF',
color: 'black',
}, [`& .${gridClasses.cell}`]: {
py: 1,
},
}}
>

View File

@ -158,14 +158,14 @@ function SurveyDocument() {
document.getElementsByName(key)[0].style.backgroundColor = "#FFFFFF";
if( String(val).length === 0 ){
if (String(val).length === 0) {
document.getElementsByName(key)[0].style.backgroundColor = "#F9E79F";
is_empty_field = 1;
}
}
if( is_empty_field === 1 ){
if (is_empty_field === 1) {
alert(" Le questionnaire n'est pas correctement rempli");
return;
}
@ -231,20 +231,27 @@ function SurveyDocument() {
<div style={{ "width": "80%", "marginLeft": "10%", "background": "#F2F4F4", overflow: "auto", "paddingBottom": "1rem" }}>
<br />
<div className="question_box_introduction">
{JSON.parse(get_Given_Survey_Data_result).message_introduction}
</div>
<br />
<div className="question_box_entete">
Formation : {JSON.parse(get_Given_Survey_Data_result).class_title} <br />
session_code : {JSON.parse(get_Given_Survey_Data_result).session_code} <br />
session_title : {JSON.parse(get_Given_Survey_Data_result).session_title} <br />
session_code_date_debut : {JSON.parse(get_Given_Survey_Data_result).session_code_date_debut} <br />
session_code_date_fin : {JSON.parse(get_Given_Survey_Data_result).session_code_date_fin} <br />
Code Session : {JSON.parse(get_Given_Survey_Data_result).session_code} <br />
Titre Session : {JSON.parse(get_Given_Survey_Data_result).session_title} <br />
Date but : {JSON.parse(get_Given_Survey_Data_result).session_code_date_debut} <br />
Date fin : {JSON.parse(get_Given_Survey_Data_result).session_code_date_fin} <br />
</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) => (
JSON.parse(get_Given_Survey_Data_result).list_questions.map((question, index) => (
<div>
<div className="question_box">
{question.question} <br />
<nav style={{ width: "100%", "float": "left" }}> <nav style={{ width: "5%", "float": "left" }}> N° {index + 1}. </nav> <nav style={{ fontSize: '16px', "fontWeight": '600', "float": "left", 'color': '#34495E' }}> {question.question} </nav> </nav><br />
{question.type && String(question.type) === "text" &&
@ -278,24 +285,36 @@ function SurveyDocument() {
</div>
}
{question.type && String(question.type) === "entier" && question.max_note &&
{question.type && String(question.type) === "entier" &&
<div id={question._id}
name={question._id}>
name={question._id}>
<TextField
margin="dense"
fullWidth
type="integer"
name={question._id}
id={question._id}
type="number"
InputLabelProps={{
shrink: true,
}}
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}>
name={question._id}>
<FormControl>
<RadioGroup
@ -346,7 +365,9 @@ function SurveyDocument() {
</div>
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }} >
<Button variant="contained" className="bton_annule" onClick={"annule_edit_formulaire"}>Annuler
<Button variant="contained" className="bton_annule" onClick={(event) => {
history.push("/");
}} >Annuler
</Button>
</div>
</div>

View File

@ -706,6 +706,43 @@
.DialogContent_width {
width: 200px !important;
}
.question_box {
box-shadow: 10px 10px 10px 10px rgb(0 0 0 / 15%);
width: 90%;
margin-left: 5%;
border-radius: 5px;
background: white;
padding: 10px;
margin-top: 2rem;
margin-bottom: 1rem;
}
.question_box_entete {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: center;
color:#464b5e;
}
.question_box_introduction {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: left;
color:#464b5e;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
@ -1322,6 +1359,43 @@
width: 500px !important;
}
.question_box {
box-shadow: 10px 10px 10px 10px rgb(0 0 0 / 15%);
width: 90%;
margin-left: 5%;
border-radius: 5px;
background: white;
padding: 10px;
margin-top: 2rem;
margin-bottom: 1rem;
}
.question_box_entete {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: center;
color:#464b5e;
}
.question_box_introduction {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: left;
color:#464b5e;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -1843,6 +1917,43 @@
width: 500px !important;
}
.question_box {
box-shadow: 10px 10px 10px 10px rgb(0 0 0 / 15%);
width: 90%;
margin-left: 5%;
border-radius: 5px;
background: white;
padding: 10px;
margin-top: 2rem;
margin-bottom: 1rem;
}
.question_box_entete {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: center;
color:#464b5e;
}
.question_box_introduction {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: left;
color:#464b5e;
}
}
@media only screen and (min-width: 1200px) {
@ -2512,6 +2623,20 @@
padding: 10px;
margin-bottom: 1rem;
text-align: center;
color:#464b5e;
}
.question_box_introduction {
width: 90%;
margin-left: 5%;
border-radius: 5px;
line-height: 2rem;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
margin-bottom: 1rem;
text-align: left;
color:#464b5e;
}
}