Ela_Front/src/components/DisplayPartnerTrainingsPagi...

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