04/01/2024 - 22:00

recette2
cherif 2024-01-04 22:12:31 +01:00
parent 4eb51c6049
commit a6ee53b5be
4 changed files with 308 additions and 143 deletions

View File

@ -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,7 +1757,7 @@ const DistplayPartnerTraningsPage = (props) => {
</div>}
{String(myApiResponse) === "True" &&
<div style={{ height: "800px", width: '100%', paddingRight: '10px' }}>
&nbsp;
{/*!createtraining && <div className='div_row' >
@ -1792,23 +1899,62 @@ const DistplayPartnerTraningsPage = (props) => {
</div>
<div className="div_row"> &nbsp; </div>
&nbsp;
{!createtraining && <div className='div_row' >
<div className='div_row' >
<Button variant="outlined" onClick={"submenu_import_session"} className="detail_class_submenu bton_import_excel"
id='menu_import_participant' name='menu_import_participant'>Import Excel &nbsp;
<img src={excel_icone} alt="ajout csv" className="icon_excel" />
<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 &nbsp; <GrDocumentCsv style={{"fontSize":"large"}}/> <SendIcon />
</Button>
<input type="file"
accept=".csv"
ref={hiddenFileInput_formation}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission}
/>
&nbsp;
<Button variant="outlined" onClick={Createtraining}
className="detail_class_submenu bton_add_session"
id='menu_import_participant' name='menu_import_participant' style={{ "marginRight": "10px" }}>Formation &nbsp;
id='menu_import_participant' name='menu_import_participant' style={{ "marginRight": "10px" }}>Ajout 1 Formation &nbsp;
<img src={add_plus} alt="ajout session" className="icon_plus" />
</Button>
</div>}
<br/>
{formation_file_name && <nav className="okUpdateData"><i>{formation_file_name}</i></nav>}
</div>}
<a href='/sample/template_import_formations.csv' download><nav style={{ "fontSize": "14px" }}>Télécharger un fichier modèle</nav></a>
</div>
<div className="import_excel_text">
<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%" }}> &nbsp; </div>
</div>
</div>
<br />
<div className="div_row">

View File

@ -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" /> &nbsp;</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">

View File

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

View File

@ -482,6 +482,11 @@
width: 100%;
}
.icon_excel {
width: 10%;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
@ -920,6 +925,10 @@
width: 50%;
}
.icon_excel {
width: 10%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -1358,6 +1367,10 @@
width: 40%;
}
.icon_excel {
width: 10%;
}
}
@media only screen and (min-width: 1200px) {
@ -1792,6 +1805,10 @@
width: 20% !important;
}
.icon_excel {
width: 10%;
}
}
// end media