import React, { useRef, useState, useEffect } from "react";
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 { gridClasses } from '@mui/x-data-grid';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import Box from '@mui/material/Box';
import 'react-tooltip/dist/react-tooltip.css'
import { FcCancel, FcApproval, FcAcceptDatabase, } from "react-icons/fc";
import 'reactjs-popup/dist/index.css';
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import { CiTrash } from "react-icons/ci";
import "react-datepicker/dist/react-datepicker.css";
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import { useParams } from 'react-router-dom'
import Header from "./Header";
import Footer from "./Fotter";
import Link from '@mui/material/Link';
import { PiDotsThree } from "react-icons/pi";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import Display_Action_And_Class from "./Display_Action_And_Class";
function UpdateAttendeeList() {
const history = useHistory();
const { client_id, session_id, partner_owner_recid } = useParams();
const [isLoading, setLoading] = useState();
const [tab_variable, settab_variable] = useState([]);
function ExpandableCell_50({ value }) {
const [expanded, setExpanded] = React.useState(false);
return (
{value &&
{expanded ? value : String(value).slice(0, 50)}
{value.length > 50 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
setExpanded(!expanded)}
>
{expanded ?
Réduire :
Voir }
)}
}
{!value &&
}
);
}
const [rowss_preinsc, setRows_preinsc] = useState([]);
const [selectionModel_preinsc, setselectionModel_preinsc] = React.useState([]);
const columns_preinscrit = [
{ field: 'id', headerName: 'id', hide: true },
{ field: '_id', headerName: '_id', hide: true },
{
field: 'civilite', headerName: 'Civ.', minWidth: 100, flex: 1, maxWidth: 100, hide: false, editable: true,
type: "singleSelect",
valueOptions: [
{ value: 'm', label: 'M' },
{ value: 'mme', label: 'Mme' },
{ value: 'neutre', label: 'Neutre' }
],
renderCell: (params) => {
return (
{params.value && String(params.value) === "m" && "M"}
{params.value && String(params.value) === "mme" && "Mme"}
{params.value && String(params.value) === "neutre" && "Neutre"}
);
}
},
{ field: 'nom', headerName: 'nom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => , },
{ field: 'prenom', headerName: 'prenom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => , },
{ field: 'email', headerName: 'email', minWidth: 150, flex: 1, editable: true, renderCell: (params) => , },
]
const [document_checked, setdocument_checked] = useState("0");
const [Getall_Client_Communication_Contact_api, setGetall_Client_Communication_Contact_api] = useState();
const [Getall_Client_Communication_Contact_message, setGetall_Client_Communication_Contact_message] = useState();
const [Getall_Client_Communication_Contact_result, setGetall_Client_Communication_Contact_result] = useState([]);
function Getall_Client_Communication_Contact(event) {
var form = new FormData();
form.append("_id", client_id);
form.append("partner_owner_recid", partner_owner_recid);
//console.log(" ### Getall_Client_Communication_Contact form = ", form)
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Partner_Client_Communication_Contact_NO_TOKEN/";
setLoading(true);
axios.post(myurl, form).then(res => {
setLoading(false);
if (String(res.data.status) === String("true")) {
//console.log(" In Getall_Client_Communication_Contact res.data.status = " + res.data.status);
//console.log(" In Getall_Client_Communication_Contact res.data.message r_class = " + res.data.message);
setGetall_Client_Communication_Contact_api("true");
setGetall_Client_Communication_Contact_result(res.data.message);
setdocument_checked("1");
}
else {
setGetall_Client_Communication_Contact_api("false");
setGetall_Client_Communication_Contact_message(res.data.message);
alert(res.data.message);
setdocument_checked("1");
}
}).catch((error) => {
setLoading(false);
console.warn('Not good man :( Getall_Client_Communication_Contact = ', error);
setGetall_Client_Communication_Contact_api("false");
alert(" Impossible de recuperer la liste des stagiaires")
setdocument_checked("1");
//setmyApimyApiMessage("")
})
}
const [Partner_Recid, setPartner_Recid] = useState("");
const [class_internal_url, setclass_internal_url] = useState("");
const [New_Getall_TrainingParticipant_result, setNew_Getall_TrainingParticipant_result] = useState([]);
const [Getall_TrainingParticipant_api, setGetall_TrainingParticipant_api] = useState();
const [Getall_TrainingParticipant_message, setGetall_TrainingParticipant_message] = useState();
const [Getall_TrainingParticipant_result, setGetall_TrainingParticipant_result] = useState([]);
function Getall_TrainingParticipant(event) {
var form = new FormData();
form.append("client_rattachement_id", client_id);
form.append("session_id", session_id);
form.append("partner_owner_recid", partner_owner_recid);
form.append("status", "0");
//console.log(" ### Getall_TrainingParticipant form = ", form)
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Statgaire_List_Partner_with_filter_FOR_ONLY_INSCRIPTION_NO_TOKEN/";
setLoading(true);
axios.post(myurl, form).then(res => {
setLoading(false);
if (String(res.data.status) === String("true")) {
//console.log(" In Getall_TrainingParticipant res.data.status = " + res.data.status);
//console.log(" In Getall_TrainingParticipant res.data.message r_class = " + res.data.message);
setGetall_TrainingParticipant_api("true");
setGetall_TrainingParticipant_result(res.data.message);
setRows_preinsc(res.data.message);
var new_data2 = [];
const new_data = res.data.message.map((x) => {
//---
var localid = JSON.parse(x).id;
var local_id = JSON.parse(x)._id;
var local_nom = JSON.parse(x).nom;
var local_prenom = JSON.parse(x).prenom;
var local_email = JSON.parse(x).email;
var local_civilite = JSON.parse(x).civilite;
setPartner_Recid(String(JSON.parse(x).partner_owner_recid))
setclass_internal_url(String(JSON.parse(x).class_internal_url))
//---
var node = {
"_id": local_id,
"id": localid,
"nom": local_nom,
"prenom": local_prenom,
"email": local_email,
"civilite": local_civilite,
};
new_data2.push(node);
// return {"_id": " + str(local_id) + ", "label": " + local_courrier_template_ref_interne + '" , "courrier_template_ref_interne": "' + local_courrier_template_ref_interne + '", "nom_champ_technique": "' + local_nom_champ_technique + '", "nom_champ_fonctionel": "' + local_nom_champ_fonctionel + '","valide": "1" };
});
if (new_data2.length > 0) {
setNew_Getall_TrainingParticipant_result(new_data2);
}
}
else {
setGetall_TrainingParticipant_api("false");
setGetall_TrainingParticipant_message(res.data.message);
alert(res.data.message);
}
}).catch((error) => {
setLoading(false);
console.warn('Not good man :( Getall_TrainingParticipant = ', error);
setGetall_TrainingParticipant_api("false");
alert(" Impossible de recuperer la liste des stagiaires")
//setmyApimyApiMessage("")
})
}
useEffect(() => {
Getall_TrainingParticipant();
Getall_Client_Communication_Contact();
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, [])
function OnchangeCellDataGrid(params) {
// params = la nouvelle lignes
var num_line = params.id; // ==> Id de la ligne changé
var colomn = params.field; // ==> colonne de la ligne changé
var new_value = params.value; // ==> la nouvelle valeur
const updatedData = New_Getall_TrainingParticipant_result.map((x) => {
var localid = (x).id;
if (String(num_line) === String(localid) && colomn === "nom") {
var tmp = {};
tmp['id'] = (x).id;
tmp['_id'] = (x)._id;
tmp['nom'] = new_value;
tmp['prenom'] = (x).prenom;
tmp['email'] = (x).email;
tmp['civilite'] = (x).civilite;
return tmp;
}
if (String(num_line) === String(localid) && colomn === "prenom") {
var tmp = {};
tmp['id'] = (x).id;
tmp['_id'] = (x)._id;
tmp['nom'] = (x).nom;
tmp['prenom'] = new_value;
tmp['email'] = (x).email;
tmp['civilite'] = (x).civilite;
return tmp;
}
if (String(num_line) === String(localid) && colomn === "civilite") {
var tmp = {};
tmp['id'] = (x).id;
tmp['_id'] = (x)._id;
tmp['nom'] = (x).nom;
tmp['prenom'] = (x).prenom;
tmp['email'] = (x).email;
tmp['civilite'] = new_value;
return tmp;
}
if (String(num_line) === String(localid) && colomn === "email") {
var tmp = {};
tmp['id'] = (x).id;
tmp['_id'] = (x)._id;
tmp['nom'] = (x).nom;
tmp['prenom'] = (x).prenom;
tmp['email'] = new_value;
tmp['civilite'] = (x).civilite;
return tmp;
}
var tmp = {};
tmp['id'] = (x).id;
tmp['_id'] = (x)._id;
tmp['nom'] = (x).nom;
tmp['prenom'] = (x).prenom;
tmp['email'] = (x).email;
tmp['civilite'] = (x).civilite;
return tmp;
});
console.log(" ### updatedData = ", updatedData);
setNew_Getall_TrainingParticipant_result([]);
setNew_Getall_TrainingParticipant_result(updatedData);
}
const [Record_New_Attendee_Data_api, setRecord_New_Attendee_Data_api] = useState();
const [Record_New_Attendee_Data_message, setRecord_New_Attendee_Data_message] = useState();
const [Record_New_Attendee_Data_result, setRecord_New_Attendee_Data_result] = useState([]);
function Record_New_Attendee_Data() {
var form = new FormData();
const myJSON = JSON.stringify(tab_variable);
const new_attende_dat_JSON = JSON.stringify(New_Getall_TrainingParticipant_result);
// console.log(" Record_New_Attendee_Data New_Getall_TrainingParticipant_result = ", New_Getall_TrainingParticipant_result);
const stored_cookie = getCookie('tokenmysypart');
form.append("client_id", client_id);
form.append("session_id", session_id);
form.append("list_attendee_data", new_attende_dat_JSON);
form.append("partner_recid", Partner_Recid);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Client_Update_Liste_Attendee_No_Token/";
setLoading(true);
axios.post(myurl, form).then(res => {
console.log(" In Record_New_Attendee_Data res.data.status = " + res.data.status);
console.log(" In Record_New_Attendee_Data res.data.message r_class = " + res.data.message);
setLoading(false);
if (String(res.data.status) === String("true")) {
alert(res.data.message);
history.push("/");
}
else {
setRecord_New_Attendee_Data_api("false");
setRecord_New_Attendee_Data_message(res.data.message);
alert(res.data.message);
}
}).catch((error) => {
setLoading(false);
console.warn('Record_New_Attendee_Data : Not good man :( Record_New_Attendee_Data = ' + error);
setRecord_New_Attendee_Data_api("false");
alert(" Impossible de mettre à jour les données des participants ");
})
}
return (
{isLoading &&
}
{Getall_Client_Communication_Contact_result && Getall_Client_Communication_Contact_result.length > 0 &&
Bonjour {JSON.parse(Getall_Client_Communication_Contact_result).civilite} {JSON.parse(Getall_Client_Communication_Contact_result).nom}
Merci de completer les informations des participants à session de formation ci-dessous.
{Getall_TrainingParticipant_result && Getall_TrainingParticipant_result.length > 0 &&
Formation : {JSON.parse(Getall_TrainingParticipant_result[0]).title}
Code Session : {JSON.parse(Getall_TrainingParticipant_result[0]).title}
Titre Session : {JSON.parse(Getall_TrainingParticipant_result[0]).session_titre}
Date début : {JSON.parse(Getall_TrainingParticipant_result[0]).date_du}
Date fin : {JSON.parse(Getall_TrainingParticipant_result[0]).date_au}
}
}
{New_Getall_TrainingParticipant_result && New_Getall_TrainingParticipant_result.length > 0 &&
{
setselectionModel_preinsc(newSelectionModel);
//console.log("ch selected--" + newSelectionModel);
}}
selectionModel={selectionModel_preinsc}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={New_Getall_TrainingParticipant_result.map((item, index) => (
{
id: index,
_id: item._id,
nom: item.nom,
prenom: (item).prenom,
email: (item).email,
civilite: (item).civilite,
}
))}
columns={columns_preinscrit}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
getEstimatedRowHeight={() => 200}
getRowHeight={() => "auto"}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 50,
},
[`& .${gridClasses.cell}`]: {
py: 1,
},
}}
/>
Mettre à jour
}
modal
nested
position="center center"
>
{close => (
×
MySy Information
{' '}
En confirmant cette opération, les données des préinscrits seront mises à jour.
{
Record_New_Attendee_Data(event);
close();
}}> Valider
{
//console.log('modal closed ');
close();
}}
>
Annuler
)}
{
history.push("/");
}} >Annuler
{class_internal_url && String(class_internal_url).length > 2 &&
}
}
{String(document_checked) === "1" && (!Getall_TrainingParticipant_result || Getall_TrainingParticipant_result.length <= 0) &&
Le document est invalide
}
);
}
export default UpdateAttendeeList;