620 lines
21 KiB
JavaScript
620 lines
21 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { MdCancel } from "react-icons/md";
|
|
import { AiOutlineEdit } from "react-icons/ai";
|
|
import TrainingForm from "./AddClassManual"
|
|
import TextField from '@mui/material/TextField';
|
|
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 Footer from "./Fotter";
|
|
import tick_ko from "../mysy_img/tick_KO.png";
|
|
|
|
import { AiFillCloseCircle, } from "react-icons/ai";
|
|
import parse from 'html-react-parser'
|
|
import { BsEye, BsFileText } from "react-icons/bs";
|
|
|
|
const DistplayPartnerTraningsPage = (props) => {
|
|
|
|
const [myApiResponse, setmyApiResponse] = useState("false");
|
|
const filters = [
|
|
{ value: 'external_code', label: 'Code Formation' },
|
|
{ value: 'title', label: 'Titre' },
|
|
{ value: 'certif', label: 'Certification' }
|
|
]
|
|
|
|
const [selectedfilt1, setselectedfilt1] = useState("");
|
|
const [selectedfilt2, setselectedfilt2] = useState("");
|
|
const [selectedfilt3, setselectedfilt3] = useState("");
|
|
const [reftrainingtoupdate, setreftrainingtoupdate] = useState();
|
|
const [externalcodetraining_toupdate, setexternalcodetraining_toupdate] = useState();
|
|
const [updatetraining, setupdatetraining] = useState(false);
|
|
|
|
|
|
|
|
function handleClick(event, cellValues) {
|
|
Edittraining(event, cellValues);
|
|
//console.log(cellValues);
|
|
}
|
|
|
|
const [selectionModel, setSelectionModel] = React.useState([]);
|
|
const [rowss, setRows] = useState([]);
|
|
const [tableData, setTableData] = useState([])
|
|
|
|
const [refreshgrid, setrefreshgrid] = useState("")
|
|
function GetAllClass_WOfilter(event) {
|
|
var form = new FormData();
|
|
|
|
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
|
|
const stored_cookie = getCookie('tokenmysypart');
|
|
form.append("token", stored_cookie);
|
|
|
|
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class/";
|
|
|
|
//alert(" laaa");
|
|
fetch(myurl,
|
|
{
|
|
method: 'POST',
|
|
body: form,
|
|
})
|
|
.then((data) => data.json())
|
|
.then((data) => {
|
|
console.log('GetAllClass_WOfilter : Success:', data['message'], "data['status'] = ", data['status']);
|
|
setTableData(data['message']);
|
|
setRows(data['message']);
|
|
|
|
//alert(" GetAllClass_WOfilter OKK "+refreshgrid);
|
|
setrefreshgrid("1");
|
|
|
|
|
|
}).catch((error) => {
|
|
console.error('GetAllClass_WOfilter Error:', error);
|
|
setmyApiResponse("false");
|
|
});
|
|
|
|
}
|
|
|
|
function GetAllClass_new(event) {
|
|
|
|
var form = new FormData();
|
|
|
|
// Recuperation des parametres
|
|
var filtre1 = selectedfilt1;
|
|
var filtre2 = selectedfilt2;
|
|
var filtre3 = selectedfilt3;
|
|
|
|
var filtre1_value = "";
|
|
var filtre2_value = "";
|
|
var filtre3_value = "";
|
|
|
|
// Recuperation des valeurs de filtres
|
|
|
|
if (selectedfilt1) {
|
|
filtre1_value = document.getElementsByName("filtre1")[0].value;
|
|
form.append(filtre1, filtre1_value);
|
|
}
|
|
|
|
if (selectedfilt2) {
|
|
filtre2_value = document.getElementsByName("filtre2")[0].value;
|
|
form.append(filtre2, filtre2_value);
|
|
}
|
|
|
|
if (selectedfilt3) {
|
|
filtre3_value = document.getElementsByName("filtre3")[0].value;
|
|
form.append(filtre3, filtre3_value);
|
|
}
|
|
|
|
//console.log(" filtres1 = " + filtre1 + " = " + filtre1_value);
|
|
//console.log(" filtres2 = " + filtre2 + " = " + filtre2_value);
|
|
//console.log(" filtres3 = " + filtre3 + " = " + filtre3_value);
|
|
|
|
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
|
|
const stored_cookie = getCookie('tokenmysypart');
|
|
form.append("token", stored_cookie);
|
|
|
|
var myurl = process.env.REACT_APP_API_URL + "myclass/api/find_partner_class_like/";
|
|
|
|
//alert(" laaa");
|
|
fetch(myurl,
|
|
{
|
|
method: 'POST',
|
|
body: form,
|
|
})
|
|
.then((data) => data.json())
|
|
.then((data) => {
|
|
//console.log('Success:', data['message'], "data['status'] = ", data['status']);
|
|
setTableData(data['message']);
|
|
setRows(data['message']);
|
|
if (String(data['status']) === String("false")) {
|
|
//console.log("erreur rrrr:" + data['status'])
|
|
setmyApiResponse("False");
|
|
|
|
}
|
|
else {
|
|
setmyApiResponse("True");
|
|
|
|
}
|
|
|
|
}).catch((error) => {
|
|
console.error('Error:', error);
|
|
setmyApiResponse("false");
|
|
});
|
|
|
|
}
|
|
const columns = [
|
|
{ field: 'id', headerName: 'id', hide: true },
|
|
{ field: 'zone_diffusion', headerName: 'zone_diffusion', hide: true },
|
|
{ field: 'internal_url', headerName: 'internal_url', hide: true },
|
|
{ field: 'external_code', headerName: 'Code Formation', width: 200, hideable: false, flex: 1 },
|
|
{ field: 'title', headerName: 'Titre', width: 100, hideable: false, flex: 1 },
|
|
{ field: 'url', headerName: 'lien', width: 150, flex: 1 },
|
|
{ field: 'description', headerName: 'Description', width: 150, flex: 1 },
|
|
{ field: 'price', headerName: 'Prix', width: 100, align: "center", flex: 1 },
|
|
{ field: 'published', headerName: 'Publié', width: 100, align: "center", flex: 1 },
|
|
{
|
|
field: "management", headerName: 'Gestion',
|
|
renderCell: (cellValues) => {
|
|
return (
|
|
|
|
<Button
|
|
|
|
onClick={(event) => {
|
|
handleClickManagement(event, cellValues);
|
|
}}
|
|
>
|
|
<BsFileText />
|
|
|
|
</Button>
|
|
|
|
);
|
|
}
|
|
},
|
|
{
|
|
field: "visual", headerName: 'Visualiser',
|
|
renderCell: (cellValues) => {
|
|
return (
|
|
|
|
<Button
|
|
|
|
onClick={(event) => {
|
|
Visualiser(event, cellValues);
|
|
}}
|
|
>
|
|
<BsEye />
|
|
|
|
</Button>
|
|
|
|
);
|
|
}
|
|
},
|
|
{
|
|
field: "Print", headerName: 'Editer',
|
|
renderCell: (cellValues) => {
|
|
return (
|
|
|
|
<Button
|
|
|
|
onClick={(event) => {
|
|
handleClick(event, cellValues);
|
|
}}
|
|
>
|
|
<AiOutlineEdit />
|
|
|
|
</Button>
|
|
|
|
);
|
|
}
|
|
},
|
|
|
|
]
|
|
|
|
|
|
function Visualiser(event, cellValues) {
|
|
window.open(
|
|
"/Display-Detail-formation/" + cellValues.row.internal_url,
|
|
'_blank'
|
|
);
|
|
}
|
|
|
|
|
|
function handleClickManagement(event, cellValues) {
|
|
window.open(
|
|
"/GestionAdministrative/" + cellValues.row.internal_url,
|
|
'_blank'
|
|
);
|
|
}
|
|
|
|
|
|
function Edittraining(event, cellValues) {
|
|
|
|
setreftrainingtoupdate(cellValues.row.internal_url);
|
|
setexternalcodetraining_toupdate(cellValues.row.external_code);
|
|
setupdatetraining(true);
|
|
|
|
}
|
|
|
|
function selectedFilter1(event) {
|
|
setselectedfilt1(event.value);
|
|
}
|
|
|
|
function selectedFilter2(event) {
|
|
setselectedfilt2(event.value);
|
|
}
|
|
|
|
function selectedFilter3(event) {
|
|
setselectedfilt3(event.value);
|
|
}
|
|
|
|
function CancelFiltre2(event) {
|
|
setselectedfilt2("");
|
|
}
|
|
|
|
function CancelFiltre3(event) {
|
|
setselectedfilt3("");
|
|
}
|
|
|
|
function closeTrainingForm() {
|
|
setupdatetraining(false);
|
|
}
|
|
|
|
const [selectedtraining, setselectedtraining] = useState([])
|
|
|
|
function GetSelectedRowsTraining() {
|
|
///alert(" les lignes slected sont : " + selectionModel + " nb item = " + selectionModel.length);
|
|
//const selectedRowsData = selectionModel.map((id) => rowss.find((row) => row.id === id));
|
|
//console.log(rowss[0]);
|
|
var tab_tmp = []
|
|
for (var i = 0; i < selectionModel.length; i++) {
|
|
var myid = parseInt(String(selectionModel[i]));
|
|
var line = JSON.parse(rowss[myid]);
|
|
tab_tmp.push(line.internal_url);
|
|
//console.log(rowss[myid]['external_code']);
|
|
}
|
|
setselectedtraining(tab_tmp);
|
|
return tab_tmp;
|
|
|
|
}
|
|
|
|
function Unpublish_class(tab_class) {
|
|
|
|
var url = process.env.REACT_APP_API_URL + "myclass/api/unpublish_class/";
|
|
|
|
|
|
for (var i = 0; i < tab_class.length; i++) {
|
|
//console.log(" position = "+i+" val = "+tab_class[i]);
|
|
//alert(" debut desactivation de la formation " + tab_class[i]);
|
|
var formData = new FormData();
|
|
const stored_cookie = getCookie('tokenmysypart');
|
|
formData.append("token", stored_cookie);
|
|
formData.append("internal_url", tab_class[i]);
|
|
fetch(
|
|
url,
|
|
{
|
|
method: 'POST',
|
|
body: formData,
|
|
}
|
|
)
|
|
.then((response) => response.json())
|
|
.then((result) => {
|
|
//console.log('Success:', result['message'], "result['status'] = ", result['status']);
|
|
|
|
if (String(result['status']) === String("true")) {
|
|
//alert(" OK pour la formation :" + tab_class[i]);
|
|
}
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
//alert(" KOO pour la formation :" + tab_class[i]);
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
function Publish_class(tab_class) {
|
|
|
|
var url = process.env.REACT_APP_API_URL + "myclass/api/pusblish_class/";
|
|
|
|
for (var i = 0; i < tab_class.length; i++) {
|
|
|
|
//alert(" debut desactivation de la formation " + tab_class[i]);
|
|
//console.log(" NB = "+i+" id = "+tab_class[i]);
|
|
var formData = new FormData();
|
|
const stored_cookie = getCookie('tokenmysypart');
|
|
formData.append("token", stored_cookie);
|
|
formData.append("internal_url", tab_class[i]);
|
|
fetch(
|
|
url,
|
|
{
|
|
method: 'POST',
|
|
body: formData,
|
|
}
|
|
)
|
|
.then((response) => response.json())
|
|
.then((result) => {
|
|
//console.log('Success:', result['message'], "result['status'] = ", result['status']);
|
|
|
|
if (String(result['status']) === String("true")) {
|
|
//alert(" OK pour la formation :" + tab_class[i]);
|
|
}
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
//alert(" KOO pour la formation :" + tab_class[i]);
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
function Delete_class(tab_class) {
|
|
|
|
var url = process.env.REACT_APP_API_URL + "myclass/api/disable_class/";
|
|
|
|
for (var i = 0; i < tab_class.length; i++) {
|
|
|
|
//alert(" debut desactivation de la formation " + tab_class[i]);
|
|
var formData = new FormData();
|
|
const stored_cookie = getCookie('tokenmysypart');
|
|
formData.append("token", stored_cookie);
|
|
formData.append("internal_url", tab_class[i]);
|
|
fetch(
|
|
url,
|
|
{
|
|
method: 'POST',
|
|
body: formData,
|
|
}
|
|
)
|
|
.then((response) => response.json())
|
|
.then((result) => {
|
|
console.log('Success:', result['message'], "result['status'] = ", result['status']);
|
|
|
|
if (String(result['status']) === String("true")) {
|
|
//alert(" OK pour la formation :" + tab_class[i]);
|
|
}
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
//alert(" KOO pour la formation :" + tab_class[i]);
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function ActionMass(e) {
|
|
|
|
// On vide le datagrid pour faire un refresj
|
|
setRows([]);
|
|
//return;
|
|
|
|
var actionenmasse = ""
|
|
if (document.getElementById("actionmass")) {
|
|
actionenmasse = document.getElementById("actionmass").value;
|
|
}
|
|
|
|
var liste_formation = GetSelectedRowsTraining();
|
|
|
|
|
|
|
|
if (String(actionenmasse) === String("depublier")) {
|
|
|
|
Unpublish_class(liste_formation);
|
|
GetAllClass_WOfilter();
|
|
}
|
|
|
|
else if (String(actionenmasse) === String("publier")) {
|
|
Publish_class(liste_formation);
|
|
GetAllClass_WOfilter();
|
|
}
|
|
|
|
else if (String(actionenmasse) === String("supprimer")) {
|
|
Delete_class(liste_formation);
|
|
GetAllClass_WOfilter();
|
|
}
|
|
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
//GetAllClass();
|
|
GetAllClass_new();
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
function Clearselectedfilt1() {
|
|
setselectedfilt1("");
|
|
}
|
|
|
|
return (
|
|
|
|
<div className='displaypartnertrainingpagination'>
|
|
{/*String(myApiResponse) === String("False") && <div className="parter_div_droite">
|
|
|
|
<div className="koUpdateData"> Impossible de contacter l'hote distant </div>
|
|
|
|
</div>
|
|
|
|
*/}
|
|
|
|
{updatetraining && <div>
|
|
|
|
<div className='detail_training'>
|
|
<TrainingForm mytrainingclass={{
|
|
'ref': reftrainingtoupdate, 'class_external_code': externalcodetraining_toupdate
|
|
}} ispending={props.ispending} currentpack={props.currentpack} closeTrainingForm={closeTrainingForm}/>
|
|
</div>
|
|
|
|
|
|
<hr />
|
|
<div onClick={closeTrainingForm} className="parter_div_filtrer_center">
|
|
<AiFillCloseCircle alt="Fermer detail formation" />FERMER
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
|
|
|
|
<div>
|
|
<div>
|
|
|
|
<div className="titre1"> Utilisez les filtres !</div>
|
|
|
|
<div className="parter_div_filtrer_row">
|
|
|
|
<div className="parter_div_filtrer_row_gauche">
|
|
<Select options={filters} onChange={selectedFilter1} />
|
|
</div>
|
|
<div className="parter_div_filtrer_row_droite">
|
|
{!!selectedfilt1 &&
|
|
|
|
<div> <TextField
|
|
name="filtre1"
|
|
defaultValue=""
|
|
variant="filled"
|
|
size="small"
|
|
className='myTextField'
|
|
placeholder="Entrez une valeur"
|
|
/> <img src={tick_ko} alt="OK" className="tick_ok_ko" onClick={Clearselectedfilt1} />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
{!!selectedfilt1 &&
|
|
<div className="parter_div_filtrer_row">
|
|
|
|
<div className="parter_div_filtrer_row_gauche">
|
|
<Select options={filters} onChange={selectedFilter2} />
|
|
</div>
|
|
<div className="parter_div_filtrer_row_droite">
|
|
{!!selectedfilt2 &&
|
|
<div>
|
|
<TextField
|
|
name="filtre2"
|
|
defaultValue=""
|
|
variant="filled"
|
|
size="small"
|
|
className='myTextField'
|
|
placeholder="Entrez une valeur"
|
|
/> <img src={tick_ko} alt="OK" className="tick_ok_ko" onClick={CancelFiltre2} />
|
|
|
|
|
|
</div>
|
|
|
|
}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
}
|
|
|
|
{!!selectedfilt2 &&
|
|
<div className="parter_div_filtrer_row">
|
|
|
|
<div className="parter_div_filtrer_row_gauche">
|
|
<Select options={filters} onChange={selectedFilter3} />
|
|
</div>
|
|
<div className="parter_div_filtrer_row_droite">
|
|
{!!selectedfilt3 &&
|
|
<div>
|
|
<TextField
|
|
name="filtre3"
|
|
defaultValue=""
|
|
variant="filled"
|
|
size="small"
|
|
className='myTextField'
|
|
placeholder="Entrez une valeur"
|
|
/> <img src={tick_ko} alt="OK" className="tick_ok_ko" onClick={CancelFiltre3} />
|
|
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
}
|
|
|
|
|
|
<div className="parter_div_filtrer_row">
|
|
<Button variant="contained" onClick={GetAllClass_new} className="bton_rechercher">Rechercher </Button>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
</div>
|
|
|
|
|
|
{myApiResponse === "False" && <div className='koUpdateData'>
|
|
Impossible de traiter la demande
|
|
</div>}
|
|
{myApiResponse === "True" &&
|
|
<div style={{ height: 700, width: '100%' }}>
|
|
<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,
|
|
}
|
|
))}
|
|
|
|
columns={columns}
|
|
pageSize={10}
|
|
className="datagridclass"
|
|
|
|
rowsPerPageOptions={[10]}
|
|
disableSelectionOnClick
|
|
components={{
|
|
Toolbar: GridToolbar,
|
|
}}
|
|
|
|
|
|
/>
|
|
|
|
|
|
<br />
|
|
{selectionModel && selectionModel.length >= 1 && <div style={{ "width": "50%", "float": "left" }}>
|
|
<nav className='traitement_mass'>Traitement en masse</nav>
|
|
<select
|
|
id={"actionmass"} name={"actionmass"}
|
|
onChange={ActionMass}
|
|
className="action_mass">
|
|
<option selected value="n/a">Action</option>
|
|
<option value="publier">Publier</option>
|
|
<option value="depublier">Depublier</option>
|
|
<option value="supprimer">Supprimer</option>
|
|
</select>
|
|
</div>
|
|
|
|
}
|
|
</div>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
}
|
|
|
|
export default DistplayPartnerTraningsPage; |