From d2c079fe6a997ee104c31f9b606145355b0c6bfe Mon Sep 17 00:00:00 2001 From: cherif Date: Tue, 15 Aug 2023 14:29:28 +0200 Subject: [PATCH] 15/08/23 -14h --- src/components/DisplayPartnerSession.js | 395 ++++++++++++++---- .../DisplayPartnerTrainingsPagination.js | 106 +++-- src/components/TestUrl.js | 15 +- 3 files changed, 397 insertions(+), 119 deletions(-) diff --git a/src/components/DisplayPartnerSession.js b/src/components/DisplayPartnerSession.js index 013ae75..1ccc1c3 100644 --- a/src/components/DisplayPartnerSession.js +++ b/src/components/DisplayPartnerSession.js @@ -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 ( + <> + + {`${(params?.row.taux_replissage*100).toFixed(0)}%`} + + ); + }, + }, + { 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) => {
- { - setSelectionModel(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} - - /> + /> +
@@ -3843,12 +4034,13 @@ const DisplayPartnerSession = (props) => { Actif  
} - {!edit_session_form &&
Statut a *
+ {!edit_session_form && String(p_session_status) === "1" &&
Statut a *
{ }, }} disabled={false} - + inputProps={{ sx: { color: 'black', paddingLeft: '15px', - fontSize: '20px', + //fontSize: '20px', }, }} />
} - {!edit_session_form &&
Statut a *
+ {!edit_session_form && String(p_session_status) === "0" &&
Statut a *
+ +
} + + {/*!edit_session_form &&
Statut a *
{ /> -
} +
*/} {edit_session_form &&
Etape
diff --git a/src/components/DisplayPartnerTrainingsPagination.js b/src/components/DisplayPartnerTrainingsPagination.js index 02b062c..d121762 100644 --- a/src/components/DisplayPartnerTrainingsPagination.js +++ b/src/components/DisplayPartnerTrainingsPagination.js @@ -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) => {
} {String(myApiResponse) === "True" &&
- { - setSelectionModel(newSelectionModel); - //console.log("ch selected--" + 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'; + } + }} - /> - + /> +
{selectionModel && selectionModel.length >= 1 &&
diff --git a/src/components/TestUrl.js b/src/components/TestUrl.js index 4352b9f..3af6225 100644 --- a/src/components/TestUrl.js +++ b/src/components/TestUrl.js @@ -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', + }, }} > = 15 ? 'hot' : 'cold'; }} - + //getRowClassName={(params) => `line--${params.row.status}`} + getRowClassName={(params) => { + if ( params.row.status === true) { + return 'line--true'; + } + }} />