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 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";
import SignatureCanvas from 'react-signature-canvas';
import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
import { IconButton } from '@material-ui/core';
import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
function PaperComponent(props) {
return (
);
}
const useStyles = makeStyles((theme) => ({
dialog: {
position: 'absolute',
// left: 10,
top: 400
},
paper: {
overflowY: 'unset',
},
customizedButton: {
position: 'absolute',
left: '98%',
top: '-3%',
backgroundColor: 'lightgray',
color: 'gray',
},
}));
function Emarge_QR_Code() {
const classes = useStyles();
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 (
{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 &&
}
);
}
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);
form.append("signature_img_selected", userimgclassprofil);
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");
alert(res.data.message);
history.push("/");
//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("");
function reader(file, callback) {
const fr = new FileReader();
fr.onload = () => callback(null, fr.result);
fr.onerror = (err) => callback(err);
fr.readAsDataURL(file);
}
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");
reader(event.target.files[0], (err, res) => {
//console.log(res); // Base64 `data:image/...` String result.
setuserimgclassprofil(res);
});
};
const [isimgclassSaved, setisimgclassSaved] = useState("");
const [isimgclassSaved_message, setisimgclassSaved_message] = useState("");
const [Dialog_SIGN_MANUSCRITE_open, setDialog_SIGN_MANUSCRITE_open] = React.useState(false);
const Dialog_SIGN_MANUSCRITE_handleClose = () => {
//alert(" Utiliser le bouton 'fermer' ");
//setOpen(false);
};
const Dialog_SIGN_MANUSCRITE_handleClose_buton = () => {
setDialog_SIGN_MANUSCRITE_open(false);
};
const signatureCanvasRef = useRef(null);
// API method examples
const checkIfEmpty = () => {
const isEmpty = signatureCanvasRef.current.isEmpty();
if (signatureCanvasRef) {
setuserimgclassprofil(signatureCanvasRef.current.toDataURL());
setisimgclassSelected(signatureCanvasRef.current.toDataURL())
}
setuserimgclassprofilchanged("1");
Dialog_SIGN_MANUSCRITE_handleClose_buton();
};
const clearCanvas = () => {
signatureCanvasRef.current.clear();
};
const [pad_signature_img, setpad_signature_img] = React.useState("");
return (
{/* POUR SIGNATURE MANUSCRITE */}
null}
PaperProps={{
className: classes.paper, // Apply the paper style
style: {
overflowY: 'unset',
position: 'absolute',
top: '7rem',
margin: "2px",
},
}}
hideBackdrop={true}
disableScrollLock
classes={{
paper: classes.dialog
}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
Signature Manuscrite
{
clearCanvas();
}}>Effacer
{/* FIN POUR SIGNATURE MANUSCRITE */}
{/* 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
Guide d'utilisation :
Pour vous permettre d’émarger électroniquement, MySy Training Technology met à disposition ce module.
Comment ça marche :
étape 1 – Vous accédez au document d'émargement à l’aide de votre adresse email
étape 2 – Apres l’ouverture du document, le système affichera la liste des séquences à émarger
étape 3 – Sélectionnez les lignes l’aide de la case à cocher qui se trouve à gauche du tableau
étape 4 – Ajoutez l’image (fichier png) de votre signature manuelle (cette action est optionnelle)
étape 5 – Cliquez sur « j’étais présent » ou « j’etais absent » pour finaliser l’émargement.
{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) => {
}}
/>
}
{
Charger une signature
{String(userimgclassprofilchanged) === "1" &&
{
setuserimgclassprofil("");
setuserimgclassprofilchanged("");
}}>Supprimer la signature
}
L'image doit etre carrée.
Les formats autorisés sont : ['jpg', 'jpeg', 'png', 'jpe', 'webp']
La taille de l'image ne doit pas dépasser 1 mega octet
}
{
setDialog_SIGN_MANUSCRITE_open(true);
}}>Signer manuellement
{isimgclassSelected && String(isimgclassSaved) === "0" &&
{isimgclassSaved_message} }
{
Signature_E_Document(1);
}}>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)
{
Signature_E_Document(1);
close();
}}
> Valider
{
//console.log('modal closed ');
close();
}}
>
Annuler
)}
{
Signature_E_Document(0);
}}>J'etais Absent
}
{!is_valide_e_document &&
}
);
}
export default Emarge_QR_Code;