15/08/23 -14h

recette2
cherif 2023-08-15 14:29:28 +02:00
parent b2fb47e297
commit d2c079fe6a
3 changed files with 397 additions and 119 deletions

View File

@ -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";
document.getElementsByName("session_status")[0].disabled = true;
document.getElementsByName("session_status")[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";
}
document.getElementsByName("session_etape")[0].disabled = true;
document.getElementsByName("session_etape")[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";
document.getElementsByName("session_status")[0].disabled = false;
document.getElementsByName("session_status")[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";
}
document.getElementsByName("session_etape")[0].disabled = false;
document.getElementsByName("session_etape")[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,48 +3693,191 @@ const DisplayPartnerSession = (props) => {
<div style={{ "border": "None" }}>
<div style={{ height: 500, width: '100%' }}>
<DataGrid
//checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
<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',
},
handleClick_edit_session_From_Line(newSelectionModel);
}}
selectionModel={selectionModel}
>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
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,
statut: JSON.parse(item).session_status,
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,
handleClick_edit_session_From_Line(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,
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,
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,
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
//disableSelectionOnClick
components={{
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';
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
}}*/
rowsPerPageOptions={[10]}
//disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
sx={datagridSx}
/>
/>
</Box>
<br />
</div>
@ -3843,12 +4034,13 @@ const DisplayPartnerSession = (props) => {
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "green" }}>Actif &nbsp;</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',
@ -3860,18 +4052,47 @@ const DisplayPartnerSession = (props) => {
},
}}
disabled={false}
inputProps={{
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 />

View File

@ -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,43 +986,86 @@ const DistplayPartnerTraningsPage = (props) => {
</div>}
{String(myApiResponse) === "True" &&
<div style={{ height: 700, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
//console.log("ch selected--" + newSelectionModel);
<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',
},
}}
selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rowss.map((item, index) => (
>
<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,
internal_url: JSON.parse(item).internal_url,
zone_diffusion: JSON.parse(item).zone_diffusion_str,
external_code: JSON.parse(item).external_code,
title: parse((JSON.parse(item).title).replace(/(<([^>]+)>)/ig, '')),
url: JSON.parse(item).url,
price: JSON.parse(item).price,
description: parse((JSON.parse(item).description).replace(/(<([^>]+)>)/ig, '')),
published: JSON.parse(item).published,
lms_class_code: JSON.parse(item).lms_class_code,
}
))}
{
id: index,
internal_url: JSON.parse(item).internal_url,
zone_diffusion: JSON.parse(item).zone_diffusion_str,
external_code: JSON.parse(item).external_code,
title: parse((JSON.parse(item).title).replace(/(<([^>]+)>)/ig, '')),
url: JSON.parse(item).url,
price: JSON.parse(item).price,
description: parse((JSON.parse(item).description).replace(/(<([^>]+)>)/ig, '')),
published: JSON.parse(item).published,
lms_class_code: JSON.parse(item).lms_class_code,
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
columns={columns}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
rowsPerPageOptions={[10]}
disableSelectionOnClick
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" }}>

View File

@ -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>