Ela_Front/src/components/DisplayPartnerSession.js

388 lines
18 KiB
JavaScript

import React, { useRef, useState, useEffect } from "react";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import Button from '@mui/material/Button';
import axios from "axios";
import DeleteIcon from '@mui/icons-material/Delete';
import { getCookie, setCookie } from 'react-use-cookie';
import { Alert } from "@mui/material";
import { AiTwotoneEdit, AiTwotoneSave } from "react-icons/ai";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import Abonnement from "./Abonnement";
import { ConstructionOutlined, PropaneSharp } from "@mui/icons-material";
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 { RichTextEditor } from '@mantine/rte';
import { Editor } from '@tinymce/tinymce-react';
import { IoArrowUndoCircle } from "react-icons/io5";
import { GrUserAdmin, GrOrderedList } from "react-icons/gr";
import parse from 'html-react-parser';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import GestionAdministrative from "./GestionAdministrative";
import { IoMdAddCircle, IoIosRemoveCircleOutline } from "react-icons/io";
import { Fab } from "@material-ui/core";
import { ConsoleView } from "react-device-detect";
import fileDownload from 'js-file-download'
import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5";
import { AiOutlineUserAdd } from "react-icons/ai";
import PartnerClientActivite from "./PartnerClient_Activite";
import { CiCoffeeBean, CiDesktop, CiFileOff } from "react-icons/ci";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import { BsEye, BsFileText } from "react-icons/bs";
import { AiOutlineEdit } from "react-icons/ai";
import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc";
const DisplayPartnerSession = (props) => {
const history = useHistory();
const [submenu, setsubmenu] = useState("");
const [rowss, setRows] = useState([]);
const [actionmass_preinsc_val, setactionmass_preinsc_val] = useState();
const columns = [
{ field: 'id', headerName: 'id', hide: true },
{ field: 'class_internal_url', headerName: 'class_internal_url', hide: true },
{ field: 'code_session', headerName: 'code_session', hide: false },
{ field: 'date_debut', headerName: 'date_debut', hide: false },
{ field: 'date_fin', headerName: 'Code date_fin', width: 100, hideable: false, flex: 1 },
{ field: 'distantiel', headerName: 'distantiel', width: 100, hideable: false, flex: 1 },
{ field: 'presentiel', headerName: 'presentiel', width: 150, flex: 1 },
{ field: 'formateur', headerName: 'formateur', width: 150, flex: 1 },
{ field: 'nb_participant', headerName: 'nb_participant', width: 100, align: "center", flex: 1 },
{ field: 'prix_session', headerName: 'prix_session', width: 100, align: "center", flex: 1 },
{ field: 'title', headerName: 'title', width: 100, align: "center", flex: 1 },
{ field: 'domaine', headerName: 'domaine', width: 100, align: "center", flex: 1 },
{ field: 'duration', headerName: 'duration', width: 100, align: "center", flex: 1 },
{ field: 'duration_unit', headerName: 'duration_unit', width: 100, align: "center", flex: 1 },
{
field: "management", headerName: 'Gestion',
renderCell: (cellValues) => {
return (
<Button
onClick={(event) => {
//handleClickManagement(event, cellValues);
}}
>
<BsFileText />
</Button>
);
}
},
{
field: "visual", headerName: 'Visualiser',
renderCell: (cellValues) => {
return (
<Button
onClick={(event) => {
// Visualiser(event, cellValues);
}}
>
<BsEye />
</Button>
);
}
},
{
field: "Print", headerName: 'Editer',
renderCell: (cellValues) => {
return (
<Button
onClick={(event) => {
//handleClick(event, cellValues);
}}
>
<AiOutlineEdit />
</Button>
);
}
},
{
field: "push_to_lms", headerName: 'Push Elearning',
renderCell: (cellValues) => {
return (
<nav>
<Popup
trigger={<Button
onClick={(event) => {
//handlepush_to_lms(event, cellValues);
}}
>
{cellValues.row.lms_class_code && String(cellValues.row.lms_class_code).length > 2 && <CiFileOff />}
{cellValues.row.lms_class_code && String(cellValues.row.lms_class_code).length <= 2 && <CiDesktop />}
{!cellValues.row.lms_class_code && <CiDesktop />}
</Button>}
modal
nested
position="center center"
>
{close => (
<div>
<button className="gest_close" onClick={close}>
&times;
</button>
<div className="gest_header"> MySy Information </div>
<div className="gest_content">
{' '}
/!\ Important : Confirmer la publication de la formation dans l'eapce E-Learning.
Vous allez écraser d'eventuelles informations déjà présente dans le e-Learning, pour cette formation.
</div>
<div className="gest_actions">
<div style={{ "width": "45%", "float": "left" }}>
<button className="gest_bton_popup" onClick={(event) => {
//handlepush_to_lms(event, cellValues);
close();
}}> Valider </button>
</div>
<div style={{ "width": "45%", "float": "right" }}>
<button
className="gest_bton_popup"
onClick={() => {
//console.log('modal closed ');
close();
}}
>
Annuler
</button>
</div>
</div>
</div>
)}
</Popup>
</nav>
);
}
},
]
const [Getall_TrainingSession_api, setGetall_TrainingSession_api] = useState();
const [Getall_TrainingSession_message, setGetall_TrainingSession_message] = useState();
const [Getall_TrainingSession_result, setGetall_TrainingSession_result] = useState();
function Getall_TrainingSession(event) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetAllValideSessionPartner_List/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
console.log(" In Getall_TrainingSession res.data.status = " + res.data.status);
console.log(" In Getall_TrainingSession res.data.message r_class = " + res.data.message);
setGetall_TrainingSession_api("true");
setGetall_TrainingSession_result(res.data.message);
setRows(res.data.message);
}
else {
setGetall_TrainingSession_api("false");
setGetall_TrainingSession_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( Getall_TrainingSession = ', error);
setGetall_TrainingSession_api("false");
//setmyApimyApiMessage("")
})
}
useEffect(() => {
Getall_TrainingSession();
}, [])
async function actionmass_preinsc_Traitemet() {
}
const [selectionModel, setSelectionModel] = React.useState([]);
const actionmass_preinsc = (event) => {
const value = event.target.value;
if (String(value) === "valider" || String(value) === "refuser") {
setactionmass_preinsc_val(value);
}
else {
setactionmass_preinsc_val();
}
}
return (
<div className="displaypartnersession">
<h2> Les sessions de formation </h2>
<div style={{ "textAlign": "left", "float": "left", "width": "100%" }} id="participant_menu_tab">
<Button variant="outlined" onClick={"submenu_preinscrit"} className="detail_class_submenu" id='menu_preinscrit' name='menu_preinscrit'>Preinscription</Button>
<Button variant="outlined" onClick={"submenu_inscrit"} className="detail_class_submenu" id='menu_inscrit' name='menu_inscrit'>Inscription</Button>
<Button variant="outlined" onClick={"submenu_emargement"} className="detail_class_submenu" id='menu_emarge' name='menu_emarge'>Liste émargement</Button>
<Button variant="outlined" onClick={"submenu_evaluation"} className="detail_class_submenu" id='menu_eval' name='menu_eval'>Les avis</Button>
<div className="session_data">
<div className="detail_class_submenu_data" style={{ "border": "None" }}>
<div style={{ height: 500, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
//console.log("ch selected--" + newSelectionModel);
}}
selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rowss.map((item, index) => (
{
id: index,
class_internal_url: JSON.parse(item).class_internal_url,
code_session: JSON.parse(item).code_session,
date_debut: JSON.parse(item).date_debut,
date_fin: JSON.parse(item).date_fin,
distantiel: JSON.parse(item).distantiel,
presentiel: JSON.parse(item).presentiel,
formateur: JSON.parse(item).formateur,
nb_participant: JSON.parse(item).nb_participant,
title: JSON.parse(item).title,
domaine: JSON.parse(item).domaine,
duration: JSON.parse(item).duration,
duration_unit: JSON.parse(item).duration_unit,
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
/>
<br />
{selectionModel && selectionModel.length >= 1 &&
<div className="div_row" style={{ "border": "none" }}>
<div className="block_en_mass">
<nav className='traitement_mass'>Traitement en masse</nav>
&nbsp;<select
id={"actionmass_preinsc"} name={"actionmass_preinsc"}
onChange={actionmass_preinsc}
className="action_mass">
<option selected value="n/a">Choisir une action</option>
<option value="valider">Valider</option>
<option value="refuser">Refuser</option>
</select> &nbsp;
{actionmass_preinsc_val &&
<Popup
trigger={<Button className="bton_traiter_en_mass" >
<FcAcceptDatabase /> Traiter
</Button>}
modal
nested
position="center center"
>
{close => (
<div>
<button className="gest_close" onClick={close}>
&times;
</button>
<div className="gest_header"> MySy Information </div>
<div className="gest_content">
{' '}
Confirmer l'action <b> {actionmass_preinsc_val} </b> en masse.
</div>
<div className="gest_actions">
<div style={{ "width": "45%", "float": "left" }}>
<button className="gest_bton_popup" onClick={(event) => {
actionmass_preinsc_Traitemet();
close();
}}> Valider </button>
</div>
<div style={{ "width": "45%", "float": "right" }}>
<button
className="gest_bton_popup"
onClick={() => {
//console.log('modal closed ');
close();
}}
>
Annuler
</button>
</div>
</div>
</div>
)}
</Popup>
}
<br />
</div>
</div>}
<br />
{/* <Button variant="contained" onClick={GetAllClass_new}>Contained</Button>*/}
</div>
</div>
</div>
</div>
</div>
);
}
export default DisplayPartnerSession;