import React, { useRef, useState, useEffect } from "react"; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; 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 CheckOut from "./CheckOut"; import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid'; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import { Editor } from '@tinymce/tinymce-react'; import parse from 'html-react-parser'; import { FcViewDetails, FcDisapprove } from "react-icons/fc"; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import add_plus from "../mysy_img/plus.png"; import excel_icone from "../mysy_img/excel_icone.png"; import participants from "../mysy_img/participants.png"; import fileDownload from 'js-file-download' import Autocomplete from '@mui/material/Autocomplete'; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { format } from 'date-fns' import moment from "moment"; import InputAdornment from '@mui/material/InputAdornment'; import { AiFillCloseCircle } from "react-icons/ai"; import Box from '@mui/material/Box'; import { Typography, LinearProgress } from '@mui/material'; import styled from 'styled-components'; import { CiTrash } from "react-icons/ci"; import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md"; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import { TransitionProps } from '@mui/material/transitions'; import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import { useParams } from 'react-router-dom' import Header from "./Header"; import Footer from "./Fotter"; import { FcInfo } from "react-icons/fc"; import { Document, Page } from 'react-pdf' import { gridClasses } from '@mui/x-data-grid'; import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; function Emarge_QR_Code() { const history = useHistory(); const { session_id, partner_owner_recid, my_safe_token } = useParams(); const [isLoading, setLoading] = useState(); const [selected_emargement_id, setselected_emargement_id] = useState(""); const [get_E_Document_PDF, setget_E_Document_PDF] = useState(); const [selected_e_doc_id, setselected_e_doc_id] = useState(); const [selected_e_doc_email, setselected_e_doc_email] = useState(); const [selected_e_doc_secret, setselected_e_doc_secret] = useState(); const [is_valide_e_document, setis_valide_e_document] = useState(false); function ExpandableCell_50({ value }) { const [expanded, setExpanded] = React.useState(false); return ( ); } function Display_Colunm_text({ value }) { return (
{value} 
); } const columns_sequence = [ { field: 'id', headerName: 'id', hide: true }, { field: '_id', headerName: '_id', hide: true }, { field: 'session_id', headerName: 'session_id', hide: true }, { field: 'class_title', headerName: 'Formation', minWidth: 200, minWidth: 200, flex: 1, renderCell: (params) => , }, { field: 'code_session', headerName: 'Session', minWidth: 200, minWidth: 200, flex: 1, renderCell: (params) => , }, { field: 'sequence_start', headerName: 'Du', minWidth: 100, minWidth: 200, flex: 1, renderCell: (params) => , }, { field: 'sequence_end', headerName: 'Au', minWidth: 100, minWidth: 200, flex: 1, renderCell: (params) => , }, ] const [selectionModel_sequence, setselectionModel_sequence] = React.useState([]); const [New_Emargement_Data, setNew_Emargement_Data] = useState([]); const [get_E_Document_api, setget_E_Document_api] = useState(); const [get_E_Document_message, setget_E_Document_message] = useState(); const [get_E_Document_result, setget_E_Document_result] = useState(); function get_E_Document() { var myurl = process.env.REACT_APP_API_URL + "myclass/api/Check_Emargement_QR_Code_From_Inscription_No_Token/"; var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("partner_owner_recid", partner_owner_recid); form.append("my_safe_token", my_safe_token); form.append("session_id", session_id); form.append("user_email", user_email); setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); //console.log(" get_E_Document : In test res.data.status = " + res.data.status); console.log(" get_E_Document: res.data.message.img = " + res.data.message); if (String(res.data.status) === "true") { setget_E_Document_api("true"); setis_valide_e_document(true); setget_E_Document_result(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_sequence_start = JSON.parse(x).sequence_start; var local_sequence_end = JSON.parse(x).sequence_end; var local_email = JSON.parse(x).email; var local_class_title = JSON.parse(x).class_title; var local_code_session = JSON.parse(x).code_session; //--- var node = { "_id": local_id, "id": localid, "label": local_email + " " + local_sequence_start + " " + local_sequence_end, "sequence_start": local_sequence_start, "sequence_end": local_sequence_end, "email": local_email, "class_title": local_class_title, "code_session": local_code_session, }; new_data2.push(node); }); if (new_data2.length > 0) setNew_Emargement_Data(new_data2); setDialog_1_open(false); } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); return; } else { setget_E_Document_api("false"); seterreur_recup_e_doc(res.data.message); get_E_Document_message(res.data.message) alert(res.data.message); } }).catch((error) => { setLoading(false); console.warn('get_E_Document ee: Not good man :( = ', error); setget_E_Document_api("false"); get_E_Document_message(" Impossible de recuperer le E-Document") }) } function GetSelectedRows_Emarg_Ids() { var tab_tmp = [] for (var i = 0; i < selectionModel_sequence.length; i++) { var myid = parseInt(String(selectionModel_sequence[i])); //var line = JSON.parse(rowss[myid]); tab_tmp.push(myid); } return tab_tmp; } const [Signature_E_Document_api, setSignature_E_Document_api] = useState(); const [Signature_E_Document_message, setSignature_E_Document_message] = useState(); const [Signature_E_Document_result, setSignature_E_Document_result] = useState(); function Signature_E_Document(local_option) { var myurl = process.env.REACT_APP_API_URL + "myclass/api/Update_Emargement_QR_Code_From_Inscription_No_Token/"; var liste_formation = GetSelectedRows_Emarg_Ids(); var tab_emargement = []; for (var i = 0; i < liste_formation.length; i++) { var line = JSON.parse(get_E_Document_result[liste_formation[i]]); tab_emargement.push(line._id) } var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("partner_owner_recid", partner_owner_recid); form.append("my_safe_token", my_safe_token); form.append("tab_emargement_ids", tab_emargement); form.append("is_present", local_option); if (isimgclassSelectedfile) form.append('signature_img', isimgclassSelected); else form.append('signature_img', ""); //console.log(" isimgclassSelected #### = ", isimgclassSelected); setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); //console.log(" Signature_E_Document : In test res.data.status = " + res.data.status); // console.log(" Signature_E_Document: res.data.message.img = " + res.data.message); if (String(res.data.status) === "true") { setSignature_E_Document_api("true"); //setDialog_Message_open(true); // alert(" Le document a été correctement signé"); } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); return; } else { setSignature_E_Document_api("false"); Signature_E_Document_message(res.data.message); seterreur_recup_e_doc(res.data.message); alert(res.data.message); } }).catch((error) => { setLoading(false); console.warn('Signature_E_Document ee: Not good man :( = ', error); setSignature_E_Document_api("false"); Signature_E_Document_message(" Impossible de signer le E-Document") }) } useEffect(() => { // setselected_e_doc_id(document_id); // get_E_Document(); window.scrollTo({ top: 0, behavior: "smooth", }); }, []) const [user_nom, setuser_nom] = React.useState(""); const [user_prenom, setuser_prenom] = React.useState(""); const [user_email, setuser_email] = React.useState(""); const [erreur_recup_e_doc, seterreur_recup_e_doc] = React.useState(); const [Dialog_1_message, setDialog_1_message] = React.useState(false); const [Dialog_1_open, setDialog_1_open] = React.useState(true); function Dialog_1_handle_change_participant_session(message) { setDialog_1_message(message); setDialog_1_open(true); } const Dialog_1_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_1_handleClose_buton = () => { setDialog_1_open(false); history.push("/"); }; const [Dialog_Message_message, setDialog_Message_message] = React.useState(false); const [Dialog_Message_open, setDialog_Message_open] = React.useState(false); function Dialog_Message_handle_change_participant_session(message) { setDialog_Message_message(message); setDialog_Message_open(true); } const Dialog_Message_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_Message_handleClose_buton = () => { setDialog_Message_open(false); history.push("/"); }; const [Dialog_SIGN_VALIDATION_open, setDialog_SIGN_VALIDATION_open] = React.useState(false); const Dialog_SIGN_VALIDATION_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_SIGN_VALIDATION_handleClose_buton = () => { setDialog_SIGN_VALIDATION_open(false); history.push("/"); }; const [isimgclassSelected, setisimgclassSelected] = useState(false); const [isimgclassSelected_recid, setisimgclassSelected_recid] = useState(""); const [isimgclassSelectedfile, setisimgclassSelectedfile] = useState(false); const [userimgclassprofil, setuserimgclassprofil] = useState(); const [userimgclassprofilchanged, setuserimgclassprofilchanged] = useState(""); const imglogoclasschangeHandler = (event) => { let file_size = event.target.files[0].size; //or if you like to have name and type //console.log(event.target.files); let file_name = event.target.files[0].name; let file_type = event.target.files[0].type; //alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a); if (file_size > 1000000) { alert("L'image ne doit pas dépasser un 1 Méga octets"); return; } setisimgclassSelected(event.target.files[0]); setisimgclassSelectedfile(true); setuserimgclassprofil(URL.createObjectURL(event.target.files[0])); setuserimgclassprofilchanged("1"); }; const [isimgclassSaved, setisimgclassSaved] = useState(""); const [isimgclassSaved_message, setisimgclassSaved_message] = useState(""); return (
{/* POUR SIGNATURE E-DOCUMENT */} {!erreur_recup_e_doc && Signature } {erreur_recup_e_doc && Signature - Identifiants invalides }
Email { setselected_e_doc_email(e.target.value); } } />
Clé de signature { setselected_e_doc_secret(e.target.value); } } />
{/* FIN POUR SIGNATURE E-DOCUMENT */} {/* POUR OUVERTURE E-DOCUMENT */} {!erreur_recup_e_doc && Authentification } {erreur_recup_e_doc && Authentification - Identifiants invalides }
Email { setuser_email(e.target.value); } } />
Télephone { setselected_e_doc_secret(e.target.value); } } />
{/* FIN POUR OUVERTURE E-DOCUMENT */} Information
Le document a été signée. Vous allez recevoir le document par email
 
{isLoading &&
}

Emargement électronique



{is_valide_e_document &&
{New_Emargement_Data && New_Emargement_Data.length > 0 &&
  { setselectionModel_sequence(newSelectionModel); }} selectionModel={selectionModel_sequence} localeText={frFR.components.MuiDataGrid.defaultProps.localeText} rows={New_Emargement_Data.map((item, index) => ( { id: index, _id: (item)._id, sequence_start: (item).sequence_start, sequence_end: (item).sequence_end, session_id: (item).session_id, class_title: (item).class_title, code_session: (item).code_session, } ))} columns={columns_sequence} pageSize={10} className="datagridclass" onRowDoubleClick={(newSelectionModel) => { }} rowsPerPageOptions={[10]} //disableSelectionOnClick components={{ Toolbar: GridToolbar, }} //sx={datagridSx} getCellClassName={(params) => { }} getRowClassName={(params) => { }} />
}
 


{} {isimgclassSelected && String(isimgclassSaved) === "0" && }
 
{ }}>J'etais présent } modal nested position="center center" > {close => (
MySy Information
{' '} En confirmant cette opération, vous validez votre présence aux {selectionModel_sequence.length} séquence(s)
)}
} {!is_valide_e_document &&
 
}
 
); } export default Emarge_QR_Code;