26/09/23 - 19h

recette2
cherif 2023-09-26 19:08:35 +02:00
parent 9692ca5cca
commit dec52dec34
4 changed files with 955 additions and 23 deletions

20
package-lock.json generated
View File

@ -95,6 +95,7 @@
"react-facebook": "^8.1.4", "react-facebook": "^8.1.4",
"react-google-login": "^5.2.2", "react-google-login": "^5.2.2",
"react-google-maps": "^9.4.5", "react-google-maps": "^9.4.5",
"react-grid-system": "^8.1.9",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-hook-form": "^7.27.0", "react-hook-form": "^7.27.0",
"react-icons": "^4.10.1", "react-icons": "^4.10.1",
@ -35299,6 +35300,17 @@
"loose-envify": "^1.0.0" "loose-envify": "^1.0.0"
} }
}, },
"node_modules/react-grid-system": {
"version": "8.1.9",
"resolved": "https://registry.npmjs.org/react-grid-system/-/react-grid-system-8.1.9.tgz",
"integrity": "sha512-EdyhAUkc1kJKNZpefIe8UwSJe1JFqKviyv6f2MBFopNYAZDHHYu+zyjQJ7tPJUtcGU1qA47WsCDiN8cSUGtfWA==",
"dependencies": {
"prop-types": "15.8.1"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.x || ^18.x"
}
},
"node_modules/react-helmet": { "node_modules/react-helmet": {
"version": "6.1.0", "version": "6.1.0",
"license": "MIT", "license": "MIT",
@ -69160,6 +69172,14 @@
} }
} }
}, },
"react-grid-system": {
"version": "8.1.9",
"resolved": "https://registry.npmjs.org/react-grid-system/-/react-grid-system-8.1.9.tgz",
"integrity": "sha512-EdyhAUkc1kJKNZpefIe8UwSJe1JFqKviyv6f2MBFopNYAZDHHYu+zyjQJ7tPJUtcGU1qA47WsCDiN8cSUGtfWA==",
"requires": {
"prop-types": "15.8.1"
}
},
"react-helmet": { "react-helmet": {
"version": "6.1.0", "version": "6.1.0",
"requires": { "requires": {

View File

@ -90,6 +90,7 @@
"react-facebook": "^8.1.4", "react-facebook": "^8.1.4",
"react-google-login": "^5.2.2", "react-google-login": "^5.2.2",
"react-google-maps": "^9.4.5", "react-google-maps": "^9.4.5",
"react-grid-system": "^8.1.9",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-hook-form": "^7.27.0", "react-hook-form": "^7.27.0",
"react-icons": "^4.10.1", "react-icons": "^4.10.1",

View File

@ -38,6 +38,11 @@ import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText'; import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import { TransitionProps } from '@mui/material/transitions'; import { TransitionProps } from '@mui/material/transitions';
import { Checkbox } from "@mui/material";
import { ElectricScooterRounded } from "@mui/icons-material";
import { Container, Row, Col } from 'react-grid-system';
const Employes = (props) => { const Employes = (props) => {
const history = useHistory(); const history = useHistory();
@ -48,6 +53,13 @@ const Employes = (props) => {
const [rows_affectations, setrows_affectations] = useState([]); const [rows_affectations, setrows_affectations] = useState([]);
const [selectionModel_affectations, setSelectionModel_affectations] = React.useState([]); const [selectionModel_affectations, setSelectionModel_affectations] = React.useState([]);
const [rows_acces_right, setrows_acces_right] = useState([]);
const [selectionModel_acces_right, setselectionModel_acces_right] = React.useState([]);
var date_today_90j = new Date(); var date_today_90j = new Date();
date_today_90j.setDate(date_today_90j.getDate() + 90); date_today_90j.setDate(date_today_90j.getDate() + 90);
@ -253,6 +265,167 @@ const Employes = (props) => {
] ]
const columns_employee_acces_right = [
{ field: '_id', headerName: '_id', hide: true },
{ field: 'id', headerName: 'id', hide: true },
{ field: 'module', headerName: 'Module', flex: 1, hideable: false, },
{
field: 'read', headerName: 'Lecture', width: 150, hide: false, editable: true, type: 'boolean',
},
{
field: 'write', headerName: 'Modification', width: 150, hide: false, editable: true, type: 'boolean',
},
]
const columns_employee_acces_right_v2 = [
{ field: '_id', headerName: '_id', hide: true },
{ field: 'id', headerName: 'id', hide: true },
{ field: 'module', headerName: 'Module', flex: 1, hideable: false, },
{
field: 'read', headerName: 'Lecture', width: 150, hide: false, editable: true, type: 'boolean',
},
{
field: "write",
headername: "write",
rendercell: (params) => (
<checkbox
checked={params.rows?.confirmed}
onchange={() => handleconfirmchange(params.row.rowid)}
/>
)
}
]
const [tabledata, settabledata] = useState([]);
const [rows_acces_right_v2, setrows_acces_right_v2] = useState([]);
function handleconfirmchange(clickedrow) {
const updateddata = rows_acces_right_v2.map((x) => {
if (x.rowid === clickedrow) {
return {
...x,
confirmed: true
};
}
return x;
});
setrows_acces_right_v2(updateddata);
}
const columns_employee_acces_right_disabled = [
{ field: '_id', headerName: '_id', hide: true },
{ field: 'id', headerName: 'id', hide: true },
{ field: 'module', headerName: 'Module', flex: 1, hideable: false, },
{
field: 'read', headerName: 'Lecture', width: 150, hide: false, editable: false, type: 'boolean',
},
{
field: 'write', headerName: 'Modification', width: 150, hide: false, editable: false, type: 'boolean',
},
]
const [Getall_Employee_Acces_Right_api, setGetall_Employee_Acces_Right_api] = useState();
const [Getall_Employee_Acces_Right_message, setGetall_Employee_Acces_Right_message] = useState();
const [Getall_Employee_Acces_Right_result, setGetall_Employee_Acces_Right_result] = useState();
function Getall_Employee_Acces_Right(local_employe_id) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("user_id", local_employe_id);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Matrix_Acces_Right/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In Getall_Employee_Acces_Right res.data.status = " + res.data.status);
//console.log(" In Getall_Employee_Acces_Right res.data.message r_class = " + res.data.message);
setGetall_Employee_Acces_Right_api("true");
setGetall_Employee_Acces_Right_result(res.data.message);
setrows_acces_right(res.data.message);
}
else {
setGetall_Employee_Acces_Right_api("false");
setGetall_Employee_Acces_Right_message(res.data.message);
alert(res.data.message)
}
}).catch((error) => {
console.warn('Not good man :( Getall_Employee_Acces_Right = ', error);
setGetall_Employee_Acces_Right_api("false");
alert(" Impossible de recuperer la matrice des droits d'acces de l'employé");
//setmyApimyApiMessage("")
})
}
const [Getall_Profil_Acces_Right_api, setGetall_Profil_Acces_Right_api] = useState();
const [Getall_Profil_Acces_Right_message, setGetall_Profil_Acces_Right_message] = useState();
const [Getall_Profil_Acces_Right_result, setGetall_Profil_Acces_Right_result] = useState();
function Getall_Profil_Acces_Right(local_profile_name) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("profile_name", local_profile_name);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Matrix_Acces_Right_By_Profil/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In Getall_Profil_Acces_Right res.data.status = " + res.data.status);
//console.log(" In Getall_Profil_Acces_Right res.data.message r_class = " + res.data.message);
setGetall_Profil_Acces_Right_api("true");
setGetall_Profil_Acces_Right_result(res.data.message);
setrows_acces_right(res.data.message);
}
else {
setGetall_Profil_Acces_Right_api("false");
setGetall_Profil_Acces_Right_message(res.data.message);
alert(res.data.message)
}
}).catch((error) => {
console.warn('Not good man :( Getall_Profil_Acces_Right = ', error);
setGetall_Profil_Acces_Right_api("false");
alert(" Impossible de recuperer la matrice des droits d'acces du profile");
//setmyApimyApiMessage("")
})
}
function clean_all_filters() { function clean_all_filters() {
setp_filtre1(); setp_filtre1();
setp_filtre1_value(); setp_filtre1_value();
@ -296,12 +469,94 @@ const Employes = (props) => {
}; };
const [Dialog_1_message_profil_access_right, setDialog_1_message_profil_access_right] = React.useState(false);
const [Dialog_1_open_profil_access_right, setDialog_1_open_profil_access_right] = React.useState(false);
function Dialog_1_handle_change_profil_access_right(message, profile_name) {
setDialog_1_message_profil_access_right(message);
setDialog_1_open_profil_access_right(true);
}
const Dialog_1_handleClose_buton_profil_access_right = () => {
//alert(" Utiliser le bouton 'fermer' ");
//setOpen(false);
};
const Dialog_1_handle_OK_buton_profil_access_right = () => {
setp_user_profil(p_user_profil_tmp);
setp_user_profil_changed("1");
Getall_Profil_Acces_Right(p_user_profil_tmp);
Enable_acces_right_datagrid();
setacces_right_data_changed("1");
setDialog_1_open_profil_access_right(false);
};
const Dialog_1_handleCancel_buton_profil_access_right = () => {
document.getElementsByName("one_detail_profil")[0].value = "";
setDialog_1_open_profil_access_right(false);
Disable_acces_right_datagrid();
};
const [Check_User_Access_Right_api, setCheck_User_Access_Right_api] = useState();
const [Check_User_Access_Right_message, setCheck_User_Access_Right_message] = useState();
const [Check_User_Access_Right_result, setCheck_User_Access_Right_result] = useState();
async function Check_User_Access_Right(local_module_name, local_action) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("module_name", local_module_name);
form.append("action", local_action);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Is_User_Has_Right_To_Action/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In Check_User_Access_Right res.data.status = " + res.data.status);
//console.log(" In Check_User_Access_Right res.data.message r_class = " + res.data.message);
setCheck_User_Access_Right_api("true");
setCheck_User_Access_Right_result(res.data.message);
return 1;
}
else {
setCheck_User_Access_Right_api("false");
setCheck_User_Access_Right_message(res.data.message);
alert(res.data.message)
return 0;
}
}).catch((error) => {
console.warn('Not good man :( Check_User_Access_Right = ', error);
setCheck_User_Access_Right_api("false");
alert(" Impossible de recuperer la matrice des droits d'acces de l'employé");
return 0;
//setmyApimyApiMessage("")
})
}
useEffect(() => { useEffect(() => {
Getall_Training_Employee_No_Filter(); Getall_Training_Employee_No_Filter();
Get_List_Managers(); Get_List_Managers();
Get_List_RH_Profils(); Get_List_RH_Profils();
Get_Employee_Related_Target_Collection_Data(); Get_Employee_Related_Target_Collection_Data();
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []) }, [])
@ -331,9 +586,14 @@ const Employes = (props) => {
} }
Getall_Employee_Affectation(employe_id); Getall_Employee_Affectation(employe_id);
Getall_Employee_Acces_Right(employe_id);
} }
function handleClick_edit_acces_right_From_Line(selected_row_id) {
}
const [Add_new_affectation, setAdd_new_affectation] = useState(); const [Add_new_affectation, setAdd_new_affectation] = useState();
const [selected_affectation_id, set_selected_affectation_id] = useState(); const [selected_affectation_id, set_selected_affectation_id] = useState();
@ -1764,8 +2024,8 @@ const Employes = (props) => {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Add_Ressource_Humaine/"; var myurl = process.env.REACT_APP_API_URL + "myclass/api/Add_Ressource_Humaine/";
axios.post(myurl, form).then(res => { axios.post(myurl, form).then(res => {
console.log(" In Add_One_Employee_Data res.data.status = " + res.data.status); //console.log(" In Add_One_Employee_Data res.data.status = " + res.data.status);
console.log(" In Add_One_Employee_Data res.data.message r_class = " + res.data.message); //console.log(" In Add_One_Employee_Data res.data.message r_class = " + res.data.message);
if (String(res.data.status) === String("true")) { if (String(res.data.status) === String("true")) {
setAdd_One_Employee_Data_api("true"); setAdd_One_Employee_Data_api("true");
@ -1872,11 +2132,94 @@ const Employes = (props) => {
} }
async function submenu_droit_acces() { async function submenu_droit_acces() {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("module_name", 'employe');
form.append("action", 'read');
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Is_User_Has_Right_To_Action/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In Check_User_Access_Right res.data.status = " + res.data.status);
//console.log(" In Check_User_Access_Right res.data.message r_class = " + res.data.message);
setCheck_User_Access_Right_api("true");
setCheck_User_Access_Right_result(res.data.message);
setsubmenu("droit_acces"); setsubmenu("droit_acces");
sleep(5);
if (document.getElementById("droit_acces")) {
document.getElementById("droit_acces").style.backgroundColor = "#104277";
document.getElementById("droit_acces").style.color = "white";
}
if (document.getElementById("detail_employe")) {
document.getElementById("detail_employe").style.backgroundColor = "#d8edfc";
document.getElementById("detail_employe").style.color = "black";
}
if (document.getElementById("affectation")) {
document.getElementById("affectation").style.backgroundColor = "#d8edfc";
document.getElementById("affectation").style.color = "black";
}
setSelectionModel_affectations([]);
setdisplay_affectation("0");
setAdd_new_affectation("");
clean_affectation_fields();
clean_nouvelle_affectation_fields();
}
else {
setCheck_User_Access_Right_api("false");
setCheck_User_Access_Right_message(res.data.message);
alert(res.data.message)
}
}).catch((error) => {
console.warn('Not good man :( Check_User_Access_Right = ', error);
setCheck_User_Access_Right_api("false");
alert(" Impossible de recuperer la matrice des droits d'acces de l'employé");
//setmyApimyApiMessage("")
})
}
async function submenu_droit_acces_orig() {
/***
* Verifier que le user à acces a la lecture à minima de ce sous menu
*/
let val = await Check_User_Access_Right('employe', 'read');
await sleep(50);
if (String(Check_User_Access_Right_api) === "true")
setsubmenu("droit_acces");
else {
console.log(" IICheck_User_Access_Right_api = ", Check_User_Access_Right_api);
return;
}
await sleep(5); await sleep(5);
console.log(" IICheck_User_Access_Right_api = ", Check_User_Access_Right_api);
/*if (!edit_session_form) { /*if (!edit_session_form) {
desableSessionFields(); desableSessionFields();
}*/ }*/
@ -2303,6 +2646,185 @@ const Employes = (props) => {
}) })
} }
const [p_user_profil, setp_user_profil] = useState();
const [p_user_profil_tmp, setp_user_profil_tmp] = useState();
const [p_user_profil_changed, setp_user_profil_changed] = useState();
const [acces_right_data_changed, setacces_right_data_changed] = useState();
const [acces_right_data_edit_mode, setacces_right_data_edit_mode] = useState();
const [acces_right_data_edit_mode_boolean, setacces_right_data_edit_mode_boolean] = useState(false);
const [warning_bg_color, setwarning_bg_color] = useState('');
function Enable_acces_right_datagrid() {
setacces_right_data_edit_mode("1");
setacces_right_data_edit_mode_boolean(true);
setacces_right_data_changed();
setwarning_bg_color('#fffff0 ');
}
function Disable_acces_right_datagrid() {
setacces_right_data_edit_mode();
setacces_right_data_edit_mode_boolean(false);
setacces_right_data_changed();
setwarning_bg_color('');
}
const [Update_user_access_right_Data_api, setUpdate_user_access_right_Data_api] = useState();
const [Update_user_access_right_Data_message, setUpdate_user_access_right_Data_message] = useState();
const [Update_user_access_right_Data_result, setUpdate_user_access_right_Data_result] = useState();
function Update_user_access_right_Data() {
var form = new FormData();
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("user_id", selected_id);
form.append("tab_access", rows_acces_right);
console.log(" form == ", form);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Add_Update_User_Access_Right/";
axios.post(myurl, form).then(res => {
//console.log(" In Update_user_access_right_Data res.data.status = " + res.data.status);
//console.log(" In Update_user_access_right_Data res.data.message r_class = " + res.data.message);
if (String(res.data.status) === String("true")) {
setUpdate_user_access_right_Data_api("true");
setUpdate_user_access_right_Data_result(res.data.message);
setacces_right_data_edit_mode();
alert(" La mise à jour été correctement faite.");
}
else {
setUpdate_user_access_right_Data_api("false");
setUpdate_user_access_right_Data_message(res.data.message);
alert(res.data.message);
}
}).catch((error) => {
console.warn('UpdateStagiaireData : Not good man :( Update_user_access_right_Data = ' + error);
setUpdate_user_access_right_Data_api("false");
alert(" Impossible de mettre à jour les droits d'acces de l'employé");
})
}
const [acces_right_data_tmp_data, setacces_right_data_tmp_data] = useState([]);
const [tableData, setTableData] = useState();
const access_right_datagrid_changed = (event) => {
var myid = String(event.target.id);
var tab = myid.split('_');
var module_nom = tab[0];
var module_acces = tab[1]
//console.log(" #### myid=", myid, " module_nom = ", module_nom, " module_acces = ", module_acces);
const updatedData = rows_acces_right.map((x) => {
var localid = JSON.parse(x).id;
var local_id = JSON.parse(x)._id;
var local_write = JSON.parse(x).write;
var local_read = JSON.parse(x).read
if (JSON.parse(x).module_name === module_nom && module_acces === "read") {
var new_valeur_read = "false";
if (String(local_read) === "false")
new_valeur_read = "true";
return '{"_id": "' + local_id + '", "module_name": "' + module_nom + '", "valide": "1", "locked": "0", "id": "' + localid + '", "read": "' + new_valeur_read + '", "write": "' + local_write + '"}';
}
if (JSON.parse(x).module_name === module_nom && module_acces === "write") {
var new_valeur_write = "false";
if (String(local_write) === "false")
new_valeur_write = "true";
return '{"_id": "' + local_id + '", "module_name": "' + module_nom + '", "valide": "1", "locked": "0", "id": "' + localid + '", "read": ' + local_read + ', "write": "' + new_valeur_write + '"}';
}
return x;
});
//console.log(" #### changed updatedData=", updatedData);
//console.log(" #### changed rows_acces_right=", rows_acces_right);
setrows_acces_right(updatedData);
};
function OnchangeCellDataGrid(params) {
var num_line = params.id;
var colomn = params.field;
var new_value = params.value;
//console.log(" €€€ rows_acces_right[num_line]", rows_acces_right[num_line]);
var module_nom = JSON.parse(rows_acces_right[num_line]).module_name;
var module_acces = colomn;
//console.log(" la ligne qui nous interresse est : module_nom = ", module_nom, " module_acces = ", module_acces);
const updatedData = rows_acces_right.map((x) => {
var localid = JSON.parse(x).id;
var local_id = JSON.parse(x)._id;
var local_write_txt = JSON.parse(x).write;
var local_write = false;
if (String(local_write_txt) === "true")
local_write = true;
var local_read_txt = JSON.parse(x).read
var local_read = false;
if (String(local_read_txt) === "true")
local_read = true;
if (JSON.parse(x).module_name === module_nom && module_acces === "read") {
return '{"_id": "' + local_id + '", "module_name": "' + module_nom + '", "valide": "1", "locked": "0", "id": "' + localid + '", "read": ' + new_value + ', "write": ' + local_write + '}';
}
if (JSON.parse(x).module_name === module_nom && module_acces === "write") {
return '{"_id": "' + local_id + '", "module_name": "' + module_nom + '", "valide": "1", "locked": "0", "id": "' + localid + '", "read": ' + local_read + ', "write": ' + new_value + '}';
}
return x;
});
//console.log(" #### changed updatedData=", updatedData);
//console.log(" #### changed rows_acces_right=", rows_acces_right);
setrows_acces_right(updatedData);
setacces_right_data_changed("1");
}
return ( return (
<div className="employes"> <div className="employes">
@ -2326,6 +2848,28 @@ const Employes = (props) => {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
<Dialog
open={Dialog_1_open_profil_access_right}
onClose={Dialog_1_handleClose_buton_profil_access_right}
>
<DialogTitle>MySy Information</DialogTitle>
<DialogContent>
<DialogContentText>
{Dialog_1_message_profil_access_right}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={Dialog_1_handle_OK_buton_profil_access_right}>OK</Button>
<Button onClick={Dialog_1_handleCancel_buton_profil_access_right}>Annuler</Button>
</DialogActions>
</Dialog>
<h3> Vos employés </h3> <h3> Vos employés </h3>
<div className="div_row"> <div className="div_row">
<div className="titre1"> Utilisez les filtres !</div> <div className="titre1"> Utilisez les filtres !</div>
@ -3807,7 +4351,11 @@ const Employes = (props) => {
height: 300, height: 300,
width: '100%', width: '100%',
paddingRight: '1px', paddingRight: '1px',
"& .MuiDataGrid-columnHeaders": {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 14
},
}} }}
@ -4352,6 +4900,291 @@ const Employes = (props) => {
<Button variant="outlined" onClick={submenu_droit_acces} className="detail_class_submenu" id='droit_acces' name='droit_acces'>Droits d'acces </Button> <Button variant="outlined" onClick={submenu_droit_acces} className="detail_class_submenu" id='droit_acces' name='droit_acces'>Droits d'acces </Button>
<Button variant="outlined" onClick={submenu_affectation} className="detail_class_submenu" id='affectation' name='affectation'>Affectation </Button> <Button variant="outlined" onClick={submenu_affectation} className="detail_class_submenu" id='affectation' name='affectation'>Affectation </Button>
</div> </div>
<nav style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}> Droits d'acces système </nav>
<div className="session_data" style={{ "background": warning_bg_color }}>
<div className="session_caract"> Profil<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="one_detail_profil"
id="one_detail_profil"
select
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_user_profil}
onChange={(e) => {
setp_user_profil_tmp(e.target.value);
Dialog_1_handle_change_profil_access_right(" Vous êtes sur le point de mettre à jour les droits de l'utilisateur. Pensez à enregistrer pour finaliser l'opération. ", e.target.value);
}}
>
{Get_List_RH_Profils_result &&
Get_List_RH_Profils_result.map((myprofil) => (
<MenuItem key={JSON.parse(myprofil).profil_nom} value={JSON.parse(myprofil).profil_nom}
style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
{JSON.parse(myprofil).profil_nom}&nbsp;&nbsp;
</MenuItem>
))}
</TextField>
</div>
<div className="session_data" style={{ "marginLeft": "10px", "marginRight": "10px", width: '98%', }}>
<div style={{ "border": "None", "marginLeft": "10px", "marginRight": "10px", width: '98%', }}>
{String(acces_right_data_edit_mode) === "1" &&
<div style={{ height: 550, width: '98%', paddingRight: '1px', "marginLeft": "10px", "marginRight": "10px", }}>
&nbsp;
<Box
sx={{
height: 500,
width: '100%',
paddingRight: '1px',
"& .MuiDataGrid-columnHeaders": {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 14
},
}}
>
<DataGrid
//checkboxSelection
onCellEditCommit={OnchangeCellDataGrid}
editMode="cell"
onSelectionModelChange={(newSelectionModel) => {
setselectionModel_acces_right(newSelectionModel);
if (newSelectionModel.length === 1)
handleClick_edit_acces_right_From_Line(newSelectionModel);
if (newSelectionModel.length !== 1) {
setedite_affectation_form();
setdisplay_affectation();
}
}}
selectionModel={selectionModel_acces_right}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rows_acces_right.map((item, index) => (
{
id: index,
_id: JSON.parse(item)._id,
poste: JSON.parse(item).poste,
module: JSON.parse(item).module_name,
read: JSON.parse(item).read,
write: JSON.parse(item).write,
}
))}
columns={columns_employee_acces_right}
pageSize={10}
className="datagridclass"
disabled={true}
rowsPerPageOptions={[10]}
//disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
/>
</Box>
<br />
</div>
}
{/*String(acces_right_data_edit_mode) === "1" &&
<div style={{ height: 400, width: "100%", "marginLeft": "1rem", "marginRight": "1rem" }}>
<Container fluid>
<Row>
<Col sm={4}>
Module
</Col>
<Col sm={4}>
Lecture
</Col>
<Col sm={4}>
Ecriture
</Col>
</Row>
<br />
{rows_acces_right &&
rows_acces_right.map((module) => (
<Row>
<Col sm={4}>
{JSON.parse(module).module_name}
</Col>
<Col sm={4}>
{String(JSON.parse(module).read)}
{String(JSON.parse(module).read) === "true" &&
<input type="checkbox"
onChange={access_right_datagrid_changed}
id={JSON.parse(module).module_name + "_read"}
name={JSON.parse(module).module_name + "_read"}
checked />
}
{String(JSON.parse(module).read) !== "true" &&
<input type="checkbox"
onChange={access_right_datagrid_changed}
id={JSON.parse(module).module_name + "_read"}
name={JSON.parse(module).module_name + "_read"}
checked={false}
/>
}
</Col>
<Col sm={4}>
{String(JSON.parse(module).write)}
{String(JSON.parse(module).write) === "true" &&
<input type="checkbox"
onChange={access_right_datagrid_changed}
id={JSON.parse(module).module_name + "_write"}
name={JSON.parse(module).module_name + "_write"}
checked />
}
{String(JSON.parse(module).write) !== "true" &&
<input type="checkbox"
onChange={access_right_datagrid_changed}
id={JSON.parse(module).module_name + "_write"}
name={JSON.parse(module).module_name + "_write"}
checked={false}
/>
}
</Col>
</Row>
))}
</Container>
</div>
*/}
{String(acces_right_data_edit_mode) !== "1" &&
<div style={{ height: 550, width: '100%', paddingRight: '1px', "marginLeft": "10px", "marginRight": "10px", }}>
&nbsp;
<Box
sx={{
height: 500,
width: '100%',
paddingRight: '1px',
"& .MuiDataGrid-columnHeaders": {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 14
},
}}
>
<DataGrid
//checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setselectionModel_acces_right(newSelectionModel);
if (newSelectionModel.length === 1)
handleClick_edit_acces_right_From_Line(newSelectionModel);
if (newSelectionModel.length !== 1) {
setedite_affectation_form();
setdisplay_affectation();
}
}}
selectionModel={selectionModel_acces_right}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rows_acces_right.map((item, index) => (
{
id: index,
_id: JSON.parse(item)._id,
poste: JSON.parse(item).poste,
module: JSON.parse(item).module_name,
read: JSON.parse(item).read,
write: JSON.parse(item).write,
}
))}
columns={columns_employee_acces_right_disabled}
pageSize={10}
className="datagridclass"
disabled={true}
rowsPerPageOptions={[10]}
//disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
/>
</Box>
<br />
</div>}
</div>
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{String(acces_right_data_changed) === "1" && String(acces_right_data_edit_mode) === "1" && <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
/!\ Pensez à enregistrer les modifications
</div>}
<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
{String(acces_right_data_changed) === "1" && String(acces_right_data_edit_mode) === "1" && <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="bton_enreg" onClick={Update_user_access_right_Data}>Enregistrer les modifications
</Button>
</div>}
{String(acces_right_data_edit_mode) === "1" && <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }} >
<Button variant="contained" className="bton_annule" onClick={Disable_acces_right_datagrid}>Annuler
</Button>
</div>}
</div>
{String(acces_right_data_edit_mode) !== "1" && <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="bton_edit" onClick={Enable_acces_right_datagrid}>Editer
</Button>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
</div>} </div>}

View File

@ -88,8 +88,8 @@ import { darken, lighten, styled } from '@mui/material/styles';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import { makeStyles } from '@mui/styles'; import { makeStyles } from '@mui/styles';
import Checkbox from '@mui/material/Checkbox';
import { Container, Row, Col } from 'react-grid-system';
// pour le payement stripe : https://stripe.com/docs/payments/quickstart?client=react&lang=python // pour le payement stripe : https://stripe.com/docs/payments/quickstart?client=react&lang=python
const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p'); const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p');
@ -236,7 +236,17 @@ const TestUrl = (props) => {
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((data) => data.json())
.then((data) => {
settabledata(
data.map((x, index) => ({
...x,
rowid: index,
confirmed: false
}))
);
});
}, []); }, []);
@ -658,6 +668,55 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
}), }),
); );
function handleconfirmchange(clickedrow) {
const updateddata = tabledata.map((x) => {
if (x.rowid === clickedrow) {
return {
...x,
confirmed: true
};
}
return x;
});
settabledata(updateddata);
}
const paymentOptions = [
{ value: "paid", label: "Paid" },
{ value: "unpaid", label: "Un Paid" },
];
const columns_bibi = [
{ field: "title", headername: "title", width: 200 },
{ field: "body", headername: "body", width: 400 },
{
field: "payment_status",
headerName: "Payment Status",
type: 'singleSelect',
valueOptions: paymentOptions,
valueFormatter: ({ id, value, field }) => {
const option = paymentOptions.find(
({ value: optionValue }) => optionValue === value
);
return option.label;
},
},
{
field: "confirmed",
headername: "confirmed",
rendercell: (params) => (
<Checkbox
checked={params.rows?.confirmed}
onchange={() => handleconfirmchange(params.row.rowid)}
/>
)
}
];
const [tabledata, settabledata] = useState([]);
return ( return (
<div className="test_page2"> <div className="test_page2">
<Helmet> <Helmet>
@ -671,6 +730,25 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
<div className="div_mobile"> <div className="div_mobile">
&nbsp; &nbsp;
<div style={{ height: 400, width: "70%" }}>
<Container>
<Row>
<Col sm={4}>
One of three columns
</Col>
<Col sm={4}>
One of three columns
</Col>
<Col sm={4}>
One of three columns
</Col>
</Row>
</Container>
</div>
<Box <Box
sx={{ sx={{
height: 300, height: 300,