15/08/23 -14h
parent
b2fb47e297
commit
d2c079fe6a
|
@ -1,26 +1,15 @@
|
|||
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 { FcViewDetails, FcDisapprove } from "react-icons/fc";
|
||||
import 'react-tooltip/dist/react-tooltip.css'
|
||||
|
@ -28,32 +17,19 @@ 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 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";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import ToggleSwitch from "./ToggleSwitch";
|
||||
import { format } from 'date-fns'
|
||||
import moment from "moment";
|
||||
import Select from 'react-select'
|
||||
import tick_ko from "../mysy_img/tick_KO.png";
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import { AiFillCloseCircle } from "react-icons/ai";
|
||||
import Visibility from '@mui/icons-material/Visibility';
|
||||
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Box from '@mui/material/Box';
|
||||
import { Typography, LinearProgress } from '@mui/material';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DisplayPartnerSession = (props) => {
|
||||
const history = useHistory();
|
||||
|
@ -110,23 +86,87 @@ const DisplayPartnerSession = (props) => {
|
|||
|
||||
const [selectedtraining, setselectedtraining] = useState([])
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(() => ({
|
||||
height: "20px",
|
||||
width: "60px",
|
||||
borderRadius: "2px",
|
||||
backgroundColor: " #ebf5fb",
|
||||
"& .MuiLinearProgress-bar": {
|
||||
backgroundColor: "#1bd900",
|
||||
transition: "none",
|
||||
transformOrigin: "left",
|
||||
},
|
||||
}));
|
||||
|
||||
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: 'statut', headerName: 'Statut', hide: false },
|
||||
{ field: 'code_session', headerName: 'Code session', hide: false, width: 150, },
|
||||
{
|
||||
field: 'statut', headerName: 'Statut', hide: false,
|
||||
valueFormatter: (params) => {
|
||||
if (String(params.value) === "0")
|
||||
return "Actif";
|
||||
else if (String(params.value) === "1")
|
||||
return "Inactif";
|
||||
else
|
||||
return "???";
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'etape', headerName: 'Etape', hide: false, width: 150,
|
||||
valueFormatter: (params) => {
|
||||
if (String(params.value) === "0")
|
||||
return "Projet";
|
||||
else if (String(params.value) === "1")
|
||||
return "Planification";
|
||||
else if (String(params.value) === "2")
|
||||
return "Planifiée";
|
||||
else if (String(params.value) === "3")
|
||||
return "Terminée";
|
||||
else if (String(params.value) === "4")
|
||||
return "Facturée";
|
||||
else if (String(params.value) === "-1")
|
||||
return "Annulée";
|
||||
else
|
||||
return "???";
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{ field: 'date_debut', headerName: 'Date debut', hide: false },
|
||||
{ field: 'date_fin', headerName: 'Datefin', 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: 'distantiel', headerName: 'Distantiel', width: 50, hideable: false, flex: 1 },
|
||||
{ field: 'presentiel', headerName: 'Presentiel', width: 50, flex: 1 },
|
||||
{ field: 'formateur', headerName: 'Formateur', width: 150, flex: 1, hide: true, hideable: true, },
|
||||
{ field: 'nb_participant', headerName: 'Nb Parti.', width: 100, align: "center", flex: 1 },
|
||||
{
|
||||
field: 'taux_replissage', headerName: 'Replissage', width: 100, align: "center", flex: 0.8,
|
||||
align: "left",
|
||||
renderCell: (params) => {
|
||||
return (
|
||||
<>
|
||||
<BorderLinearProgress
|
||||
color="success"
|
||||
sx={{ color: "#1bd900" }}
|
||||
variant="determinate"
|
||||
value={(params?.row.taux_replissage*100).toFixed(2)}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>{`${(params?.row.taux_replissage*100).toFixed(0)}%`}</Typography>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ field: 'nb_inscrit', headerName: 'Inscrits', width: 100, align: "center", flex: 1, hide: true, hideable: true, },
|
||||
{ field: 'nb_preinscrit', headerName: 'Preinscrits', width: 100, align: "center", flex: 1, hide: true, hideable: true, },
|
||||
{ field: 'prix_session', headerName: 'Prix', width: 100, align: "center", flex: 1 },
|
||||
{ field: 'title', headerName: 'Formation', width: 100, align: "center", flex: 1 },
|
||||
{ field: 'domaine', headerName: 'Domaine', width: 100, align: "center", flex: 1 },
|
||||
{ field: 'title', headerName: 'Formation', width: 100, align: "center", flex: 1, hide: true, hideable: true, },
|
||||
{ field: 'domaine', headerName: 'Domaine', width: 100, align: "center", flex: 1, hide: true, hideable: true, },
|
||||
{ field: 'duration', headerName: 'Durée', width: 100, align: "center", flex: 1 },
|
||||
{ field: 'duration_unit', headerName: 'unité', width: 100, align: "center", flex: 1 },
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
@ -1594,11 +1634,15 @@ const DisplayPartnerSession = (props) => {
|
|||
document.getElementsByName("code_session")[0].disabled = true;
|
||||
document.getElementsByName("code_session")[0].style.backgroundColor = "#ECEFF1";
|
||||
|
||||
if (document.getElementsByName("session_status")[0]) {
|
||||
document.getElementsByName("session_status")[0].disabled = true;
|
||||
document.getElementsByName("session_status")[0].style.backgroundColor = "#ECEFF1";
|
||||
}
|
||||
|
||||
if (document.getElementsByName("session_etape")[0]) {
|
||||
document.getElementsByName("session_etape")[0].disabled = true;
|
||||
document.getElementsByName("session_etape")[0].style.backgroundColor = "#ECEFF1";
|
||||
}
|
||||
|
||||
document.getElementsByName("sessiondatedebut")[0].disabled = true;
|
||||
document.getElementsByName("sessiondatedebut")[0].style.backgroundColor = "#ECEFF1";
|
||||
|
@ -1654,11 +1698,15 @@ const DisplayPartnerSession = (props) => {
|
|||
document.getElementsByName("code_session")[0].disabled = false;
|
||||
document.getElementsByName("code_session")[0].style.backgroundColor = "#FFFFFF";
|
||||
|
||||
if (document.getElementsByName("session_status")[0]) {
|
||||
document.getElementsByName("session_status")[0].disabled = false;
|
||||
document.getElementsByName("session_status")[0].style.backgroundColor = "#FFFFFF";
|
||||
}
|
||||
|
||||
if (document.getElementsByName("session_etape")[0]) {
|
||||
document.getElementsByName("session_etape")[0].disabled = false;
|
||||
document.getElementsByName("session_etape")[0].style.backgroundColor = "#FFFFFF";
|
||||
}
|
||||
|
||||
|
||||
document.getElementsByName("sessiondatedebut")[0].disabled = false;
|
||||
|
@ -3645,8 +3693,83 @@ const DisplayPartnerSession = (props) => {
|
|||
<div style={{ "border": "None" }}>
|
||||
|
||||
<div style={{ height: 500, width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: 500,
|
||||
width: '100%',
|
||||
'& .cell--presentiel': {
|
||||
backgroundColor: '#a2cf6e',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'& .cell--distantiel': {
|
||||
backgroundColor: '#ffac33',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
|
||||
|
||||
'& .cell--etape--projet': {
|
||||
backgroundColor: '#E6F7C8',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
'& .cell--etape--planification': {
|
||||
backgroundColor: '#E6CEAA',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
'& .cell--etape--planifie': {
|
||||
backgroundColor: '#F4ECF7',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
'& .cell--etape--termine': {
|
||||
backgroundColor: '#D6EAF8',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
'& .cell--etape--facture': {
|
||||
backgroundColor: '#D5F5E3',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
'& .cell--etape--annule': {
|
||||
backgroundColor: '#566573',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
|
||||
|
||||
'& .line--etape--projet': {
|
||||
backgroundColor: 'yellow',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--etape--planification': {
|
||||
backgroundColor: 'red',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--etape--planifie': {
|
||||
backgroundColor: 'blue',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--etape--termine': {
|
||||
backgroundColor: 'orange',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--etape--facture': {
|
||||
backgroundColor: '#D5F5E3',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--etape--annule': {
|
||||
backgroundColor: '#566573',
|
||||
color: 'white',
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
<DataGrid
|
||||
//checkboxSelection
|
||||
checkboxSelection
|
||||
onSelectionModelChange={(newSelectionModel) => {
|
||||
setSelectionModel(newSelectionModel);
|
||||
|
||||
|
@ -3665,12 +3788,15 @@ const DisplayPartnerSession = (props) => {
|
|||
distantiel: JSON.parse(item).distantiel,
|
||||
presentiel: JSON.parse(item).presentiel,
|
||||
statut: JSON.parse(item).session_status,
|
||||
etape: JSON.parse(item).session_etape,
|
||||
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,
|
||||
taux_replissage: JSON.parse(item).taux_replissage,
|
||||
nb_inscrit: JSON.parse(item).nb_inscrit,
|
||||
nb_preinscrit: JSON.parse(item).nb_preinscrit,
|
||||
duration: JSON.parse(item).duration_concat,
|
||||
|
||||
}
|
||||
))}
|
||||
|
@ -3685,8 +3811,73 @@ const DisplayPartnerSession = (props) => {
|
|||
Toolbar: GridToolbar,
|
||||
}}
|
||||
sx={datagridSx}
|
||||
getCellClassName={(params) => {
|
||||
//field === 'distantiel'
|
||||
if (params.field === 'distantiel' && String(params.value) === "1") {
|
||||
return 'cell--distantiel';
|
||||
}
|
||||
if (params.field === "presentiel" && String(params.value) == "1") {
|
||||
return 'cell--presentiel';
|
||||
}
|
||||
|
||||
|
||||
//field === "etape"
|
||||
if (params.field === "etape" && String(params.value) == "0") {
|
||||
return 'cell--etape--projet';
|
||||
}
|
||||
|
||||
if (params.field === "etape" && String(params.value) == "1") {
|
||||
return 'cell--etape--planification';
|
||||
}
|
||||
|
||||
if (params.field === "etape" && String(params.value) == "2") {
|
||||
return 'cell--etape--planifie';
|
||||
}
|
||||
|
||||
if (params.field === "etape" && String(params.value) == "3") {
|
||||
return 'cell--etape--termine';
|
||||
}
|
||||
|
||||
if (params.field === "etape" && String(params.value) == "4") {
|
||||
return 'cell--etape--facture';
|
||||
}
|
||||
|
||||
if (params.field === "etape" && String(params.value) == "-1") {
|
||||
return 'cell--etape--annule';
|
||||
}
|
||||
|
||||
}}
|
||||
/*getRowClassName={(params) => {
|
||||
console.log(" params.row.etape = ", params.row.etape);
|
||||
if (String(params.row.etape) === "-1") {
|
||||
console.log("annule");
|
||||
return 'line--etape--annule';
|
||||
}
|
||||
if (String(params.row.etape) === "0") {
|
||||
console.log("projet - red");
|
||||
return 'line--etape--projet';
|
||||
}
|
||||
if (String(params.row.etape) === "1") {
|
||||
console.log("planification - yellow");
|
||||
return 'line--etape--planification';
|
||||
}
|
||||
if (String(params.row.etape) === "2") {
|
||||
console.log("planifie");
|
||||
return 'line--etape--planifie';
|
||||
}
|
||||
if (String(params.row.etape) === "3") {
|
||||
console.log("termine - orange");
|
||||
return 'line--etape--termine';
|
||||
}
|
||||
if (String(params.row.etape) === "4") {
|
||||
console.log("facture");
|
||||
return 'line--etape--facture';
|
||||
}
|
||||
|
||||
}}*/
|
||||
|
||||
/>
|
||||
</Box>
|
||||
<br />
|
||||
|
||||
</div>
|
||||
|
@ -3843,12 +4034,13 @@ const DisplayPartnerSession = (props) => {
|
|||
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "green" }}>Actif </MenuItem>
|
||||
</TextField>
|
||||
</div>}
|
||||
{!edit_session_form && <div className="session_caract">Statut a * <br />
|
||||
{!edit_session_form && String(p_session_status) === "1" && <div className="session_caract">Statut a * <br />
|
||||
<TextField
|
||||
|
||||
name="session_status_not_change_font"
|
||||
id="session_status_not_change_font"
|
||||
value={p_session_status_label}
|
||||
className="disabled_style enable_style"
|
||||
style={{"background":"yellow"}}
|
||||
style={{ "background": "#D2E6AA" }}
|
||||
sx={{
|
||||
backgroundColor: '#ffd60a',
|
||||
border: '3px solid #001d3d',
|
||||
|
@ -3865,13 +4057,42 @@ const DisplayPartnerSession = (props) => {
|
|||
sx: {
|
||||
color: 'black',
|
||||
paddingLeft: '15px',
|
||||
fontSize: '20px',
|
||||
//fontSize: '20px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>}
|
||||
|
||||
{!edit_session_form && <div className="session_caract">Statut a * <br />
|
||||
{!edit_session_form && String(p_session_status) === "0" && <div className="session_caract">Statut a * <br />
|
||||
<TextField
|
||||
name="session_status_not_change_font"
|
||||
id="session_status_not_change_font"
|
||||
value={p_session_status_label}
|
||||
className="disabled_style enable_style"
|
||||
style={{ "background": "#F0785E" }}
|
||||
sx={{
|
||||
backgroundColor: '#ffd60a',
|
||||
border: '3px solid #001d3d',
|
||||
}}
|
||||
InputLabelProps={{
|
||||
sx: {
|
||||
color: '#003566',
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
}}
|
||||
disabled={false}
|
||||
|
||||
inputProps={{
|
||||
sx: {
|
||||
color: 'black',
|
||||
paddingLeft: '15px',
|
||||
//fontSize: '20px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>}
|
||||
|
||||
{/*!edit_session_form && <div className="session_caract">Statut a * <br />
|
||||
<TextField
|
||||
name="session_status"
|
||||
id="session_status"
|
||||
|
@ -3894,7 +4115,7 @@ const DisplayPartnerSession = (props) => {
|
|||
|
||||
/>
|
||||
|
||||
</div>}
|
||||
</div>*/}
|
||||
|
||||
|
||||
{edit_session_form && <div className="session_caract">Etape <br />
|
||||
|
|
|
@ -22,6 +22,7 @@ import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
|
|||
import { LuScreenShare, LuScreenShareOff } from "react-icons/lu";
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
const DistplayPartnerTraningsPage = (props) => {
|
||||
|
||||
|
@ -985,6 +986,31 @@ const DistplayPartnerTraningsPage = (props) => {
|
|||
</div>}
|
||||
{String(myApiResponse) === "True" &&
|
||||
<div style={{ height: 700, width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: 300,
|
||||
width: '100%',
|
||||
'& .cell--published': {
|
||||
backgroundColor: '#a2cf6e',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'& .cell--unpublished': {
|
||||
backgroundColor: '#ffac33',
|
||||
color: '#1a3e72',
|
||||
fontWeight: 'light',
|
||||
},
|
||||
'& .line--published': {
|
||||
backgroundColor: '#E6F7C8',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--unpublished': {
|
||||
backgroundColor: '#FAD7A0',
|
||||
color: 'black',
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
<DataGrid
|
||||
checkboxSelection
|
||||
onSelectionModelChange={(newSelectionModel) => {
|
||||
|
@ -1018,10 +1044,28 @@ const DistplayPartnerTraningsPage = (props) => {
|
|||
components={{
|
||||
Toolbar: GridToolbar,
|
||||
}}
|
||||
getCellClassName={(params) => {
|
||||
if (params.field === 'published' && String(params.value) === "1") {
|
||||
return 'cell--published';
|
||||
}
|
||||
|
||||
if (params.field === "published" && String(params.value) !== "1") {
|
||||
return 'cell--unpublished'
|
||||
}
|
||||
|
||||
}}
|
||||
getRowClassName={(params) => {
|
||||
if (String(params.row.published) === "1") {
|
||||
return 'line--published';
|
||||
}
|
||||
|
||||
if (String(params.row.published) !== "1") {
|
||||
return 'line--unpublished';
|
||||
}
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
</Box>
|
||||
|
||||
<br />
|
||||
{selectionModel && selectionModel.length >= 1 && <div style={{ "width": "50%", "float": "left" }}>
|
||||
|
|
|
@ -694,6 +694,14 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
|
|||
backgroundColor: 'black',
|
||||
color: 'white',
|
||||
},
|
||||
'& .line--true': {
|
||||
backgroundColor: 'red',
|
||||
color: 'white',
|
||||
},
|
||||
'& .line--false': {
|
||||
backgroundColor: 'yellow',
|
||||
color: 'white',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DataGrid
|
||||
|
@ -719,7 +727,12 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
|
|||
return params.value >= 15 ? 'hot' : 'cold';
|
||||
}}
|
||||
|
||||
|
||||
//getRowClassName={(params) => `line--${params.row.status}`}
|
||||
getRowClassName={(params) => {
|
||||
if ( params.row.status === true) {
|
||||
return 'line--true';
|
||||
}
|
||||
}}
|
||||
|
||||
/>
|
||||
</Box>
|
||||
|
|
Loading…
Reference in New Issue