04/01/2024 - 22:00
parent
4eb51c6049
commit
a6ee53b5be
|
@ -7,7 +7,7 @@ import Button from '@mui/material/Button';
|
|||
import Select from 'react-select'
|
||||
import { getCookie } from 'react-use-cookie';
|
||||
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
|
||||
|
||||
import excel_icone from "../mysy_img/excel_icone.png";
|
||||
import Popup from 'reactjs-popup';
|
||||
import 'reactjs-popup/dist/index.css';
|
||||
import { AiFillCloseCircle, } from "react-icons/ai";
|
||||
|
@ -33,6 +33,9 @@ import DialogContent from '@mui/material/DialogContent';
|
|||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import ToggleSwitch from "./ToggleSwitch";
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import { GrDocumentCsv } from "react-icons/gr";
|
||||
|
||||
const DistplayPartnerTraningsPage = (props) => {
|
||||
|
||||
const history = useHistory();
|
||||
|
@ -51,6 +54,110 @@ const DistplayPartnerTraningsPage = (props) => {
|
|||
const [createtraining, setcreatetraining] = useState(false);
|
||||
|
||||
|
||||
const changeHandler2 = (event) => {
|
||||
Closecreatetraining();
|
||||
setapiexcelimportmessage();
|
||||
setformation_file_name();
|
||||
sethandleSubmission_api();
|
||||
hiddenFileInput_formation.current.click();
|
||||
};
|
||||
|
||||
const [formation_file_name, setformation_file_name] = useState();
|
||||
|
||||
const hiddenFileInput_formation = React.useRef(null);
|
||||
|
||||
const [excelimportmessage, setexcelimportmessage] = useState("");
|
||||
const [apiexcelimportmessage, setapiexcelimportmessage] = useState("");
|
||||
|
||||
const [handleSubmission_api, sethandleSubmission_api] = useState();
|
||||
const [handleSubmission_result, sethandleSubmission_result] = useState();
|
||||
const [handleSubmission_message, sethandleSubmission_message] = useState();
|
||||
|
||||
const handleSubmission = event => {
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
const fileUploaded = event.target.files[0];
|
||||
let file_size = event.target.files[0].size;
|
||||
let file_type = event.target.files[0].type;
|
||||
|
||||
//console.log("file_size = ",file_size," file_type = ",file_type);
|
||||
if (file_size > 1000000) {
|
||||
alert("Le fichier ne doit pas dépasser un 1 Méga octets");
|
||||
return;
|
||||
}
|
||||
|
||||
setformation_file_name(event.target.files[0].name);
|
||||
|
||||
//console.log(" import du ficier ", event.target.files[0].name);
|
||||
|
||||
|
||||
formData.append('File', fileUploaded);
|
||||
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
|
||||
const stored_cookie = getCookie('tokenmysypart');
|
||||
|
||||
|
||||
formData.append("token", stored_cookie);
|
||||
|
||||
//console.log("token = " + stored_cookie); theme_name
|
||||
setLoading(true);
|
||||
fetch(
|
||||
process.env.REACT_APP_API_URL + "myclass/api/add_class_mass/",
|
||||
{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
}
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((result) => {
|
||||
//console.log('Success:', result['message']);
|
||||
setexcelimportmessage(result['message']);
|
||||
setmyApiResponse("true");
|
||||
setapiexcelimportmessage(result['status']);
|
||||
setLoading(false);
|
||||
if (String(result['status']) === String("true")) {
|
||||
|
||||
sethandleSubmission_api("true");
|
||||
GetAllClass_new();
|
||||
var local_message = result['message']; // + " Vous allez être redirigé vers la liste des formations"
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
|
||||
alert(local_message);
|
||||
//history.push("/Partner/affichage");
|
||||
//window.location.reload();
|
||||
//return;
|
||||
|
||||
} else if (String(result['status']) === String("Err_Connexion")) {
|
||||
alert('Erreur: ' + result['message']);
|
||||
history.push("/Connexion");
|
||||
}
|
||||
|
||||
else {
|
||||
sethandleSubmission_api("false");
|
||||
sethandleSubmission_message(result['message']);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
alert(result['message']);
|
||||
console.log(" 000000000000000&")
|
||||
|
||||
|
||||
}
|
||||
//alert("result['status'] " + result['status']);
|
||||
})
|
||||
.catch((error) => {
|
||||
setLoading(false);
|
||||
setmyApiResponse("false");
|
||||
setapiexcelimportmessage("-1");
|
||||
sethandleSubmission_api("false");
|
||||
alert(" Impossible d'importer/mettre à jour les formations");
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function handleClick(event, cellValues) {
|
||||
|
||||
|
@ -1650,10 +1757,10 @@ const DistplayPartnerTraningsPage = (props) => {
|
|||
</div>}
|
||||
|
||||
|
||||
{String(myApiResponse) === "True" &&
|
||||
<div style={{ height: "800px", width: '100%', paddingRight: '10px' }}>
|
||||
|
||||
{/*!createtraining && <div className='div_row' >
|
||||
|
||||
<div style={{ height: "800px", width: '100%', paddingRight: '10px' }}>
|
||||
|
||||
{/*!createtraining && <div className='div_row' >
|
||||
|
||||
<Button variant="outlined" onClick={Createtraining}
|
||||
className="detail_class_submenu bton_add_session"
|
||||
|
@ -1662,153 +1769,192 @@ const DistplayPartnerTraningsPage = (props) => {
|
|||
</Button>
|
||||
|
||||
</div>*/}
|
||||
<div className="session_data">
|
||||
<div style={{ "border": "None", paddingRight: '10px' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "500px",
|
||||
width: '100%',
|
||||
paddingRight: '2px',
|
||||
'& .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',
|
||||
},
|
||||
<div className="session_data">
|
||||
<div style={{ "border": "None", paddingRight: '10px' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "500px",
|
||||
width: '100%',
|
||||
paddingRight: '2px',
|
||||
'& .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',
|
||||
},
|
||||
|
||||
|
||||
'& .line--statut--selected': {
|
||||
backgroundColor: '#FBF2EF',
|
||||
color: 'black',
|
||||
},
|
||||
'& .line--statut--selected': {
|
||||
backgroundColor: '#FBF2EF',
|
||||
color: 'black',
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
<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,
|
||||
_id: JSON.parse(item)._id,
|
||||
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, '')),
|
||||
domain: JSON.parse(item).domaine,
|
||||
metier: JSON.parse(item).metier,
|
||||
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,
|
||||
duration: JSON.parse(item).duration,
|
||||
duration_unit: JSON.parse(item).duration_unit,
|
||||
duration_in_hour: JSON.parse(item).duration_in_hour,
|
||||
presentiel: JSON.parse(item).presentiel.presentiel,
|
||||
distanciel: JSON.parse(item).presentiel.distantiel,
|
||||
cible: JSON.parse(item).pourqui,
|
||||
currecny: JSON.parse(item).currecny,
|
||||
|
||||
}
|
||||
))}
|
||||
|
||||
columns={columns}
|
||||
pageSize={10}
|
||||
className="datagridclass"
|
||||
|
||||
onRowDoubleClick={(newSelectionModel) => {
|
||||
setgridline_id(newSelectionModel.row.id);
|
||||
Closecreatetraining();
|
||||
closeTrainingForm();
|
||||
|
||||
var al = JSON.parse(rowss[newSelectionModel.row.id])
|
||||
|
||||
setselected_row_data_json(JSON.parse(rowss[newSelectionModel.row.id]));
|
||||
|
||||
|
||||
setreftrainingtoupdate(newSelectionModel.row.internal_url);
|
||||
setexternalcodetraining_toupdate(newSelectionModel.row.external_code);
|
||||
setDialog_formation_open(true);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
rowsPerPageOptions={[10]}
|
||||
disableSelectionOnClick
|
||||
components={{
|
||||
Toolbar: GridToolbar,
|
||||
}}
|
||||
sx={datagridSx}
|
||||
getCellClassName={(params) => {
|
||||
if (params.field === 'published' && String(params.value) === "1") {
|
||||
return 'cell--published';
|
||||
}
|
||||
|
||||
if (params.field === "published" && String(params.value) !== "1") {
|
||||
return 'cell--unpublished'
|
||||
}
|
||||
|
||||
}}
|
||||
>
|
||||
<DataGrid
|
||||
checkboxSelection
|
||||
getRowClassName={(params) => {
|
||||
|
||||
onSelectionModelChange={(newSelectionModel) => {
|
||||
setSelectionModel(newSelectionModel);
|
||||
//console.log("ch selected--" + newSelectionModel);
|
||||
}}
|
||||
selectionModel={selectionModel}
|
||||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
|
||||
rows={rowss.map((item, index) => (
|
||||
|
||||
{
|
||||
id: index,
|
||||
_id: JSON.parse(item)._id,
|
||||
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, '')),
|
||||
domain: JSON.parse(item).domaine,
|
||||
metier: JSON.parse(item).metier,
|
||||
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,
|
||||
duration: JSON.parse(item).duration,
|
||||
duration_unit: JSON.parse(item).duration_unit,
|
||||
duration_in_hour: JSON.parse(item).duration_in_hour,
|
||||
presentiel: JSON.parse(item).presentiel.presentiel,
|
||||
distanciel: JSON.parse(item).presentiel.distantiel,
|
||||
cible: JSON.parse(item).pourqui,
|
||||
currecny: JSON.parse(item).currecny,
|
||||
|
||||
}
|
||||
))}
|
||||
|
||||
columns={columns}
|
||||
pageSize={10}
|
||||
className="datagridclass"
|
||||
|
||||
onRowDoubleClick={(newSelectionModel) => {
|
||||
setgridline_id(newSelectionModel.row.id);
|
||||
Closecreatetraining();
|
||||
closeTrainingForm();
|
||||
|
||||
var al = JSON.parse(rowss[newSelectionModel.row.id])
|
||||
|
||||
setselected_row_data_json(JSON.parse(rowss[newSelectionModel.row.id]));
|
||||
|
||||
|
||||
setreftrainingtoupdate(newSelectionModel.row.internal_url);
|
||||
setexternalcodetraining_toupdate(newSelectionModel.row.external_code);
|
||||
setDialog_formation_open(true);
|
||||
|
||||
}
|
||||
// Pour la gestion de la couleur de zone double cliquée
|
||||
if (String(params.row.id) === String(gridline_id)) {
|
||||
return 'line--statut--selected';
|
||||
}
|
||||
|
||||
rowsPerPageOptions={[10]}
|
||||
disableSelectionOnClick
|
||||
components={{
|
||||
Toolbar: GridToolbar,
|
||||
}}
|
||||
sx={datagridSx}
|
||||
getCellClassName={(params) => {
|
||||
if (params.field === 'published' && String(params.value) === "1") {
|
||||
return 'cell--published';
|
||||
}
|
||||
if (String(params.row.published) === "1") {
|
||||
return 'line--published';
|
||||
}
|
||||
|
||||
if (params.field === "published" && String(params.value) !== "1") {
|
||||
return 'cell--unpublished'
|
||||
}
|
||||
if (String(params.row.published) !== "1") {
|
||||
return 'line--unpublished';
|
||||
}
|
||||
|
||||
}}
|
||||
getRowClassName={(params) => {
|
||||
}}
|
||||
|
||||
// Pour la gestion de la couleur de zone double cliquée
|
||||
if (String(params.row.id) === String(gridline_id)) {
|
||||
return 'line--statut--selected';
|
||||
}
|
||||
|
||||
if (String(params.row.published) === "1") {
|
||||
return 'line--published';
|
||||
}
|
||||
|
||||
if (String(params.row.published) !== "1") {
|
||||
return 'line--unpublished';
|
||||
}
|
||||
|
||||
}}
|
||||
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
<div className="div_row"> </div>
|
||||
</div>
|
||||
<div className="div_row"> </div>
|
||||
|
||||
<div className='div_row' >
|
||||
|
||||
<Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu" style={{
|
||||
"background": "#c8cfd5",
|
||||
"minWidth": "15rem", "color": "black", "width": "auto"
|
||||
}}
|
||||
id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer des formations <GrDocumentCsv style={{"fontSize":"large"}}/> <SendIcon />
|
||||
</Button>
|
||||
|
||||
<input type="file"
|
||||
accept=".csv"
|
||||
ref={hiddenFileInput_formation}
|
||||
style={{ display: 'none' }}
|
||||
name="liste_formation_file"
|
||||
onChange={handleSubmission}
|
||||
/>
|
||||
|
||||
{!createtraining && <div className='div_row' >
|
||||
<Button variant="outlined" onClick={Createtraining}
|
||||
className="detail_class_submenu bton_add_session"
|
||||
id='menu_import_participant' name='menu_import_participant' style={{ "marginRight": "10px" }}>Ajout 1 Formation
|
||||
<img src={add_plus} alt="ajout session" className="icon_plus" />
|
||||
</Button>
|
||||
|
||||
<br/>
|
||||
{formation_file_name && <nav className="okUpdateData"><i>{formation_file_name}</i></nav>}
|
||||
|
||||
<Button variant="outlined" onClick={"submenu_import_session"} className="detail_class_submenu bton_import_excel"
|
||||
id='menu_import_participant' name='menu_import_participant'>Import Excel
|
||||
<img src={excel_icone} alt="ajout csv" className="icon_excel" />
|
||||
</Button>
|
||||
<a href='/sample/template_import_formations.csv' download><nav style={{ "fontSize": "14px" }}>Télécharger un fichier modèle</nav></a>
|
||||
|
||||
|
||||
<Button variant="outlined" onClick={Createtraining}
|
||||
className="detail_class_submenu bton_add_session"
|
||||
id='menu_import_participant' name='menu_import_participant' style={{ "marginRight": "10px" }}>Formation
|
||||
<img src={add_plus} alt="ajout session" className="icon_plus" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>}
|
||||
<div className="import_excel_text">
|
||||
|
||||
</div>}
|
||||
<nav className="titre1"> Comment utiliser le fichier d'import des formations ? </nav>
|
||||
<nav style={{ "color": "orange" }}>
|
||||
Dans le fichier à importer, seules les colonnes suivantes sont obligatoires :
|
||||
<ul>
|
||||
<li>external_code : C'est le code de la formation chez vous, editeur de la formation </li>
|
||||
<li> titre : Le titre de la formation </li>
|
||||
<li> domaine : Le domaine au quel est rattaché la formation</li>
|
||||
<li> description : La descriptin de la formation</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Pour le reste, <br />
|
||||
<ul>
|
||||
<li> Il s'agit d'un fichier csv. Les colonnes sont separées par des ";"</li>
|
||||
<li> A l'interieur d'une même colonne, les informations sont separées par des ";" </li>
|
||||
<li> Champ 'Metier' : les valeurs acceptées sont : IT, RH, vente, dev_perso, Graphisme, Management, Digital, Office, Autre</li>
|
||||
<li> ...</li>
|
||||
</ul>
|
||||
<a href='/sample/MySy_Import_formation_csv.pdf' download>Télécharger le guide complet pour plus d'informations</a><br />
|
||||
<br/>
|
||||
</div>
|
||||
<div style={{ "width": "50%" }}> </div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div className="div_row">
|
||||
|
|
|
@ -1198,9 +1198,11 @@ const Partner = (props) => {
|
|||
|
||||
<div class="separator"> Mes Formations </div>
|
||||
|
||||
{/*
|
||||
{String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> CREER FORMATION</div>}
|
||||
{String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> CREER FORMATION</div>}
|
||||
<hr className="my_hr" />
|
||||
*/}
|
||||
|
||||
{String(menu) !== "affichage" && <div className="sousmenu" onClick={DiplaytrainingList} > <FcList className="icone_menu" /> MES FORMATIONS</div>}
|
||||
{String(menu) === "affichage" && <div className="sousmenu_selected" onClick={DiplaytrainingList} ><FcList className="icone_menu" /> MES FORMATIONS</div>}
|
||||
|
@ -1769,12 +1771,12 @@ const Partner = (props) => {
|
|||
|
||||
<div> <hr /> </div>
|
||||
|
||||
<Tooltip className="tooltip_css" id="tooltip_id_7" />
|
||||
{/* <Tooltip className="tooltip_css" id="tooltip_id_7" />
|
||||
<a data-tooltip-id="tooltip_id_7" data-tooltip-html="CREER FORMATION">
|
||||
{String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> </div>}
|
||||
{String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> </div>}
|
||||
</a>
|
||||
<hr className="my_hr" />
|
||||
<hr className="my_hr" />*/}
|
||||
|
||||
<Tooltip className="tooltip_css" id="tooltip_id_8" />
|
||||
<a data-tooltip-id="tooltip_id_8" data-tooltip-html="MES FORMATIONS">
|
||||
|
|
|
@ -935,7 +935,7 @@
|
|||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 6%;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
|
||||
|
@ -1604,7 +1604,7 @@
|
|||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 6%;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
|
||||
|
@ -2164,7 +2164,7 @@
|
|||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 4%;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.bton_envoyer {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mysy_spinner {
|
||||
border-radius: 5px;
|
||||
border: 1px solid black;
|
||||
|
@ -480,7 +480,12 @@
|
|||
background: #c8cfd5;
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
@ -918,7 +923,11 @@
|
|||
background: #c8cfd5;
|
||||
color: black;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -1356,6 +1365,10 @@
|
|||
background: #c8cfd5;
|
||||
color: black;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1790,6 +1803,10 @@
|
|||
background: #c8cfd5;
|
||||
color: black;
|
||||
width: 20% !important;
|
||||
}
|
||||
|
||||
.icon_excel {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue