Ela_Front/src/components/Module_Email_Management.js

669 lines
27 KiB
JavaScript

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 '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 Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
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, sliderClasses } 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 img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
//import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
//import interactionPlugin from "@fullcalendar/interaction";
//import timeGridPlugin from "@fullcalendar/timegrid";
import allLocales from '@fullcalendar/core/locales-all'
import { RepeatOnRounded } from "@mui/icons-material";
import { alignPropType } from "react-bootstrap/esm/types";
import ToggleSwitch from "./ToggleSwitch";
import ToggleSwitch_v2_mysy from "./ToggleSwitch_v2_mysy";
import ToggleSwitch_v3_mysy from "./ToggleSwitch_v3_mysy";
import Autocomplete from '@mui/material/Autocomplete';
import FullCalendar, { formatDate } from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { FcSearch } from "react-icons/fc";
import { Fab } from "@material-ui/core";
import {
ListItem,
ListItemText,
useTheme,
} from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { TreeView } from '@mui/x-tree-view/TreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { IoMdAddCircle, IoIosRemoveCircleOutline } from "react-icons/io";
import { FcViewDetails, FcDisapprove, FcInfo } from "react-icons/fc";
import { convertNwSeToNeSw } from "google-map-react";
const Module_Email_Management = (props) => {
const myconntected_employee_id = props.conntected_employee_id;
const [selected_employee_id, setselected_employee_id] = useState(props.conntected_employee_id);
const history = useHistory();
const [isLoading, setLoading] = useState();
const [Dialog_1_message, setDialog_1_message] = React.useState(false);
const [Dialog_1_open, setDialog_1_open] = React.useState(false);
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 = () => {
setselected_courrier_template_id("");
setDialog_1_open(false);
};
const [field_suivi_eval, setfield_suivi_eval] = useState("");
const editorRef_suivi_eval = useRef(null);
const [editorRef_suivi_eval_limite, seteditorRef_suivi_eval_limite] = useState(2000);
const [editor_tochange, seteditor_tochange] = useState("");
function editor_keyup() {
seteditor_tochange("1");
}
const [datamodification, setdatamodification] = useState("0");
function DataUpdated() {
setdatamodification("1");
}
const [p_detail_cible, setp_detail_cible] = useState("");
const [p_detail_contenu_doc, setp_detail_contenu_doc] = useState("");
const [p_detail_nom, setp_detail_nom] = useState("");
const [p_detail_ref_interne, setp_detail_ref_interne] = useState("");
const [p_detail_sujet, setp_detail_sujet] = useState("");
const [p_detail_type_doc, setp_detail_type_doc] = useState("");
const [p_detail_duplicate, setp_detail_duplicate] = useState("");
const [p_detail_joint_pdf, setp_detail_joint_pdf] = useState(false);
const [p_detail_default_version, setp_detail_default_version] = useState(false);
const [p_detail_edition_par_client, setp_detail_edition_par_client] = useState(false);
const [p_one_detail_cible, setp_one_detail_cible] = useState("");
const [p_one_detail_contenu_doc, setp_one_detail_contenu_doc] = useState("");
const [p_one_detail_nom, setp_one_detail_nom] = useState("");
const [p_one_detail_ref_interne, setp_one_detail_ref_interne] = useState("");
const [p_one_detail_sujet, setp_one_detail_sujet] = useState("");
const [p_one_detail_type_doc, setp_one_detail_type_doc] = useState("");
const [p_one_detail_duplicate, setp_one_detail_duplicate] = useState("");
const [p_one_detail_edit_by_client, setp_one_detail_edit_by_client] = useState("");
const [p_one_detail_courrier_template_type_document_ref_interne, setp_one_detail_courrier_template_type_document_ref_interne] = useState("");
const [original_courrier_template_id, setoriginal_courrier_template_id] = React.useState("");
const [field_corp_mail, set_field_corp_mail] = useState("");
const [field_corp_mail_initial_value, set_field_corp_mail_initial_value] = useState("");
const [one_field_corp_mail, setone_field_corp_mail] = useState("");
const [one_field_corp_mail_initial_value, setone_field_corp_mail_initial_value] = useState("");
const one_editorRef_programme = useRef(null);
const [one_editorRef_programme_limite, setone_editorRef_programme_limite] = useState(1000);
const [field_programme, setfield_programme] = useState("");
const [field_programme_initial_value, setfield_programme_initial_value] = useState("");
const [one_field_programme, setone_field_programme] = useState("");
const [one_field_programme_initial_value, setone_field_programme_initial_value] = useState("");
const one_editorRef_corp_mail = useRef(null);
const [one_editorRef_corp_mail_limite, setone_editorRef_corp_mail_limite] = useState(1000);
const [partner_document_data_changed, setpartner_document_data_changed] = useState("");
const [New_Get_Partner_List_SendEmail_Document_result, setNew_Get_Partner_List_SendEmail_Document_result] = useState([]);
const [Get_Partner_List_SendEmail_Document_api, setGet_Partner_List_SendEmail_Document_api] = useState();
const [Get_Partner_List_SendEmail_Document_message, setGet_Partner_List_SendEmail_Document_message] = useState();
const [Get_Partner_List_SendEmail_Document_result, setGet_Partner_List_SendEmail_Document_result] = useState();
function Get_Partner_List_SendEmail_Document(ref_interne_document) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("ref_interne", ref_interne_document);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_List_Partner_Document_with_filter/";
setLoading(true);
axios.post(myurl, form).then(res => {
//console.log(" In Get_Partner_List_SendEmail_Document res.data.status = " + res.data.status);
//console.log(" In Get_Partner_List_SendEmail_Document res.data.message r_class = " + res.data.message);
setLoading(false);
if (String(res.data.status) === String("true")) {
setGet_Partner_List_SendEmail_Document_api("true");
setGet_Partner_List_SendEmail_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_ref_interne = JSON.parse(x).ref_interne;
var local_nom = JSON.parse(x).nom;
var local_sujet = JSON.parse(x).sujet;
var local_type_doc = JSON.parse(x).type_doc;
var local_cible = JSON.parse(x).cible;
var local_joint_pdf = JSON.parse(x).joint_pdf;
var local_contenu_doc = JSON.parse(x).contenu_doc;
//---
var node = {
"_id": local_id,
"id": localid,
"label": local_nom,
"ref_interne": local_ref_interne,
"nom": local_nom,
"sujet": local_sujet,
"type_doc": local_type_doc,
"cible": local_cible,
"joint_pdf": local_joint_pdf,
"contenu_doc": local_contenu_doc,
};
new_data2.push(node);
// console.log(" ## node = ", node)
});
if (new_data2.length > 0)
setNew_Get_Partner_List_SendEmail_Document_result(new_data2);
}
else {
setGet_Partner_List_SendEmail_Document_api("false");
setGet_Partner_List_SendEmail_Document_message(res.data.message);
alert(res.data.message);
}
}).catch((error) => {
setLoading(false);
console.warn('Not good man :( Get_Partner_List_SendEmail_Document = ', error);
setGet_Partner_List_SendEmail_Document_api("false");
alert("Impossible de récupérer les modèles de convocations");
//setmyApimyApiMessage("")
})
}
const [Get_Given_Partner_Document_Data_By_id_api, setGet_Given_Partner_Document_Data_By_id_api] = useState();
const [Get_Given_Partner_Document_Data_By_id_message, setGet_Given_Partner_Document_Data_By_id_message] = useState();
const [Get_Given_Partner_Document_Data_By_id_result, setGet_Given_Partner_Document_Data_By_id_result] = useState();
function Get_Given_Partner_Document_Data_By_id(local_id) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("_id", local_id);
//console.log(" ## form = ", form);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Given_Partner_Document/";
setLoading(true);
axios.post(myurl, form).then(res => {
if (String(res.data.status) === "true") {
//console.log(" In Get_Given_Partner_Document_Data_By_id res.data.status = " + res.data.status);
// console.log(" In Get_Given_Partner_Document_Data_By_id res.data.message r_class = " + res.data.message);
setLoading(false);
setGet_Given_Partner_Document_Data_By_id_api("true");
setGet_Given_Partner_Document_Data_By_id_result(res.data.message);
if (res.data.message.length > 0) {
var mylocal_document = JSON.parse(res.data.message);
if (mylocal_document._id)
setoriginal_courrier_template_id(mylocal_document._id);
if (mylocal_document.nom)
setp_one_detail_nom(mylocal_document.nom);
if (mylocal_document.type_doc)
setp_one_detail_type_doc(mylocal_document.type_doc);
if (mylocal_document.cible)
setp_one_detail_cible(mylocal_document.cible);
if (mylocal_document.ref_interne) {
setp_one_detail_ref_interne(mylocal_document.ref_interne);
}
if (mylocal_document.courrier_template_type_document_ref_interne) {
setp_one_detail_courrier_template_type_document_ref_interne(mylocal_document.courrier_template_type_document_ref_interne);
} else {
setp_one_detail_courrier_template_type_document_ref_interne("");
}
if (mylocal_document.sujet) {
setp_one_detail_sujet(mylocal_document.sujet);
}
setp_detail_joint_pdf(false)
if (mylocal_document.joint_pdf) {
if (String(mylocal_document.joint_pdf) === "1")
setp_detail_joint_pdf(true)
}
if (mylocal_document.duplicate) {
setp_one_detail_duplicate(mylocal_document.duplicate);
}
else {
setp_one_detail_duplicate("0");
}
if (mylocal_document.edit_by_client) {
setp_one_detail_edit_by_client(mylocal_document.edit_by_client);
}
else {
setp_one_detail_edit_by_client("0");
}
setfield_programme("");
// set_field_corp_mail("");
if (mylocal_document.contenu_doc) {
setone_field_programme(String(mylocal_document.contenu_doc));
setone_field_programme_initial_value(String(mylocal_document.contenu_doc));
set_field_corp_mail(String(mylocal_document.contenu_doc));
one_editorRef_programme.current.insertContent(String(mylocal_document.contenu_doc));
}
/* set_field_corp_mail("");
if (mylocal_document.corps_mail) {
setone_field_corp_mail(String(mylocal_document.corps_mail));
setone_field_corp_mail_initial_value(String(mylocal_document.corps_mail));
}*/
if (document.getElementById('myRef')) {
//myRef.current.scrollIntoView({ behavior: "smooth" });
var divh = document.getElementById('myRef').offsetTop;
window.scrollTo({
top: divh,
behavior: "smooth",
});
}
} else {
alert(" Aucun document recuperé");
}
} else if (String(res.data.status) === String("Err_Connexion")) {
alert('Erreur: ' + res.data.message);
history.push("/Connexion");
}
else {
setGet_Given_Partner_Document_Data_By_id_api("false");
setGet_Given_Partner_Document_Data_By_id_message(res.data.message);
alert(res.data.message);
}
}).catch((error) => {
setLoading(false);
console.warn('Not good man :( Get_Given_Partner_Document_Data_By_id = ', error);
setGet_Given_Partner_Document_Data_By_id_api("false");
alert(" Impossible de recuperer le modèle initial");
//setmyApimyApiMessage("")
})
}
useEffect(() => {
Get_Partner_List_SendEmail_Document("SENDEMAIL_MODELE");
if( props.email_destinataire){
setemail_destinataire(props.email_destinataire)
}
if( props.email_cc){
setemail_cc(props.email_cc)
}
if( props.email_bcc){
setemail_bcc(props.email_bcc)
}
}, [])
const [selected_courrier_template_id, setselected_courrier_template_id] = useState("");
const editorRef_programme = useRef(null);
const [editorRef_programme_limite, seteditorRef_programme] = useState(1000);
const [email_destinataire, setemail_destinataire] = useState("");
const [email_cc, setemail_cc] = useState("");
const [email_bcc, setemail_bcc] = useState("");
const [email_sujet, setemail_sujet] = useState("");
return (
<div className="module_email_management">
{isLoading && <div className="loader-container">
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
</div>}
<Dialog
onClose={Dialog_1_handleClose}
className="module_email_management"
PaperProps={{
sx: {
width: "400px",
maxWidth: "400px!important",
},
}}
open={Dialog_1_open}
>
<DialogTitle></DialogTitle>
<DialogContent style={{ "width": "400px" }}>
<DialogContentText>
{Dialog_1_message}
</DialogContentText>
</DialogContent>
<DialogActions>
<div className="div_row">
<div className="div_row_gauche">
<Button onClick={(e) => {
if (selected_courrier_template_id && String(selected_courrier_template_id) !== "") {
setfield_programme("");
Get_Given_Partner_Document_Data_By_id(selected_courrier_template_id);
} else {
setfield_programme("");
set_field_corp_mail("");
}
Dialog_1_handleClose_buton();
}} className="bton_enreg_dialog">Confirmer</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'center' }}>
<Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
</div>
</div>
</DialogActions>
</Dialog>
<div>
<div className="titre1"> Gestion Email </div>
<div className="session_caract_Dialog" style={{ "marginBottom": '0px' }} > Choisir un modèle de courrier
{New_Get_Partner_List_SendEmail_Document_result && <Autocomplete
disablePortal
id="competence_nom"
name="competence_nom"
fullWidth
options={New_Get_Partner_List_SendEmail_Document_result}
onChange={(event, value) => {
if (value && value._id) {
setselected_courrier_template_id(value._id);
var msg = "Vous allez modifier le coprs de l'email ! ";
setDialog_1_message(msg);
setDialog_1_open(true);
} else {
setselected_courrier_template_id("");
var msg = "Vous allez modifier le coprs de l'email ! ";
setDialog_1_message(msg);
setDialog_1_open(true);
}
}}
renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}
/>
}
/>}
</div>
<div className="session_caract_Dialog" style={{ "marginBottom": '1px' }}>
<div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', height: '2.5rem', paddingTop: '20px' }}>
Email
</div>
<div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
<TextField
margin="dense"
id="email_dest"
type="text"
fullWidth
value={email_destinataire}
onChange={(e) => {
setemail_destinataire(e.target.value);
}
}
/>
</div>
</div>
<div className="session_caract_Dialog" style={{ "marginBottom": '0px' }}>
<div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', height: '2.5rem', paddingTop: '20px' }}>
CC
</div>
<div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
<TextField
margin="dense"
id="email_dest"
type="text"
fullWidth
value={email_cc}
onChange={(e) => {
setemail_cc(e.target.value);
}
}
/>
</div>
</div>
<div className="session_caract_Dialog" style={{ "marginBottom": '1px' }}>
<div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', height: '2.5rem', paddingTop: '20px' }}>
BCC
</div>
<div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
<TextField
margin="dense"
id="email_dest"
type="text"
fullWidth
value={email_bcc}
onChange={(e) => {
setemail_bcc(e.target.value);
}
}
/>
</div>
</div>
<div className="session_caract_Dialog" style={{ "marginBottom": '1px' }}>
<div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', height: '2.5rem', paddingTop: '20px' }}>
Sujet
</div>
<div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
<TextField
margin="dense"
id="email_dest"
type="text"
fullWidth
value={email_sujet}
onChange={(e) => {
setemail_sujet(e.target.value);
}
}
/>
</div>
</div>
<div className="session_caract_Dialog" style={{ "marginBottom": '0px' }}>
<div style={{ "textAlign": 'left', "width": '100%' }}>
<Editor
id="detail_document_principal"
name="detail_document_principal"
onInit={(evt, editor) => one_editorRef_programme.current = editor}
//initialValue={field_programme_initial_value}
onKeyUp={editor_keyup}
value={field_programme}
onEditorChange={(newValue, editor) => {
setfield_programme(one_editorRef_programme.current.getContent());
setpartner_document_data_changed("1");
}}
init={{
resize: false,
height: 500,
menubar: true,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount',
'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
],
toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
'alignleft aligncenter alignright alignjustify | ' +
'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }'
}}
/>
</div>
</div>
<div className="div_row">
<div className="div_row_gauche">
<Button onClick={(e) => {
}} className="bton_enreg_dialog">Envoyer</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'center' }}>
<Button onClick={(e) => {
setselected_courrier_template_id("");
setemail_destinataire("");
setemail_cc("");
setemail_bcc("");
props.fathuer_close_function();
}} className="bton_annule_dialog" >Annuler</Button>
</div>
</div>
</div>
</div>
)
}
export default Module_Email_Management;