30/08/23 - 17h

recette2
cherif 2023-08-30 17:22:49 +02:00
parent 7515b837a6
commit 0eca4bd722
1 changed files with 924 additions and 13 deletions

View File

@ -156,6 +156,8 @@ const Materiels = (props) => {
useEffect(() => { useEffect(() => {
Getall_Training_Materiel_No_Filter(); Getall_Training_Materiel_No_Filter();
Get_Materiel_Related_Target_Collection_Data();
}, []) }, [])
const myRef = useRef(null) const myRef = useRef(null)
@ -167,7 +169,7 @@ const Materiels = (props) => {
const [display_detail_materiel, setdisplay_detail_materiel] = React.useState(); const [display_detail_materiel, setdisplay_detail_materiel] = React.useState();
const hiddenFileInput_session = React.useRef(null); const hiddenFileInput_session = React.useRef(null);
const [Employee_data_changed, setEmployee_data_changed] = useState(); const [materiel_data_changed, setmateriel_data_changed] = useState();
const [add_One_Materiel, setadd_One_Materiel] = useState(); const [add_One_Materiel, setadd_One_Materiel] = useState();
@ -393,7 +395,7 @@ const Materiels = (props) => {
} }
async function submenu_detail_materiel() { async function submenu_detail_materiel() {
setsubmenu("detail_employe"); setsubmenu("detail_materiel");
await sleep(5); await sleep(5);
/*if (!edit_session_form) { /*if (!edit_session_form) {
@ -441,6 +443,610 @@ const Materiels = (props) => {
} }
function Display_Detail_Employe_Data(materiel_id) {
//clearDetailAttendeFields();
setadd_One_Materiel();
setdisplay_detail_materiel("1");
Get_Materiel_Data(materiel_id);
get_Materiel_Images(materiel_id);
}
const [materiel_data_edit_mode, setmateriel_data_edit_mode] = useState("");
function disable_Materiel_DetailFields() {
setmateriel_data_edit_mode("0");
if (document.getElementsByName("detail_nom")[0]) {
document.getElementsByName("detail_nom")[0].disabled = true;
document.getElementsByName("detail_nom")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_prenom")[0]) {
document.getElementsByName("detail_prenom")[0].disabled = true;
document.getElementsByName("detail_prenom")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_mail")[0]) {
document.getElementsByName("detail_mail")[0].disabled = true;
document.getElementsByName("detail_mail")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_tel")[0]) {
document.getElementsByName("detail_tel")[0].disabled = true;
document.getElementsByName("detail_tel")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_adresse")[0]) {
document.getElementsByName("detail_adresse")[0].disabled = true;
document.getElementsByName("detail_adresse")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_code_postal")[0]) {
document.getElementsByName("detail_code_postal")[0].disabled = true;
document.getElementsByName("detail_code_postal")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_ville")[0]) {
document.getElementsByName("detail_ville")[0].disabled = true;
document.getElementsByName("detail_ville")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_civilite")[0]) {
document.getElementsByName("detail_civilite")[0].disabled = true;
document.getElementsByName("detail_civilite")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_tel_mobile")[0]) {
document.getElementsByName("detail_tel_mobile")[0].disabled = true;
document.getElementsByName("detail_tel_mobile")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_pays")[0]) {
document.getElementsByName("detail_pays")[0].disabled = true;
document.getElementsByName("detail_pays")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_linkedin")[0]) {
document.getElementsByName("detail_linkedin")[0].disabled = true;
document.getElementsByName("detail_linkedin")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_facebook")[0]) {
document.getElementsByName("detail_facebook")[0].disabled = true;
document.getElementsByName("detail_facebook")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_twitter")[0]) {
document.getElementsByName("detail_twitter")[0].disabled = true;
document.getElementsByName("detail_twitter")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_profil")[0]) {
document.getElementsByName("detail_profil")[0].disabled = true;
document.getElementsByName("detail_profil")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_fonction")[0]) {
document.getElementsByName("detail_fonction")[0].disabled = true;
document.getElementsByName("detail_fonction")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_ismanager")[0]) {
document.getElementsByName("detail_ismanager")[0].disabled = true;
document.getElementsByName("detail_ismanager")[0].style.backgroundColor = "#ECEFF1";
}
if (document.getElementsByName("detail_resp_hierarchie_id")[0]) {
document.getElementsByName("detail_resp_hierarchie_id")[0].disabled = true;
document.getElementsByName("detail_resp_hierarchie_id")[0].style.backgroundColor = "#ECEFF1";
}
}
function Enable_Materiel_DetailFields() {
setmateriel_data_edit_mode("1");
document.getElementsByName("detail_nom")[0].disabled = false;
document.getElementsByName("detail_nom")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_prenom")[0].disabled = false;
document.getElementsByName("detail_prenom")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_mail")[0].disabled = false;
document.getElementsByName("detail_mail")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_tel")[0].disabled = false;
document.getElementsByName("detail_tel")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_adresse")[0].disabled = false;
document.getElementsByName("detail_adresse")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_code_postal")[0].disabled = false;
document.getElementsByName("detail_code_postal")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_ville")[0].disabled = false;
document.getElementsByName("detail_ville")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_civilite")[0].disabled = false;
document.getElementsByName("detail_civilite")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_tel_mobile")[0].disabled = false;
document.getElementsByName("detail_tel_mobile")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_pays")[0].disabled = false;
document.getElementsByName("detail_pays")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_linkedin")[0].disabled = false;
document.getElementsByName("detail_linkedin")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_facebook")[0].disabled = false;
document.getElementsByName("detail_facebook")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_twitter")[0].disabled = false;
document.getElementsByName("detail_twitter")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_profil")[0].disabled = false;
document.getElementsByName("detail_profil")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_fonction")[0].disabled = false;
document.getElementsByName("detail_fonction")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_ismanager")[0].disabled = false;
document.getElementsByName("detail_ismanager")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("detail_resp_hierarchie_id")[0].disabled = false;
document.getElementsByName("detail_resp_hierarchie_id")[0].style.backgroundColor = "#FFFFFF";
}
function Annule_Materiel_DetailFields() {
setisimgclassSelected();
setuserimgclassprofil();
setisimgclassSelected_recid();
Get_Materiel_Data(selected_id);
get_Materiel_Images(selected_id);
setmateriel_data_changed("");
setmateriel_data_edit_mode("");
}
const [Get_Materiel_Data_api, setGet_Materiel_Data_api] = useState();
const [Get_Materiel_Data_message, setGet_Materiel_Data_message] = useState();
const [Get_Materiel_Data_result, setGet_Materiel_Data_result] = useState();
function Get_Materiel_Data(materiel_id) {
setmateriel_data_changed("");
setmateriel_data_edit_mode("");
setisimgclassSelected();
setuserimgclassprofil();
setisimgclassSelected_recid();
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("_id", materiel_id);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Given_Ressource_Materielle/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === "true") {
//console.log(" In Get_Materiel_Data res.data.status = " + res.data.status);
//console.log(" In Get_Materiel_Data res.data.message r_class = " + res.data.message);
setGet_Materiel_Data_api("true");
setGet_Materiel_Data_result(res.data.message);
if (res.data.message.length > 0) {
var mylocal_materiel = JSON.parse(res.data.message);
document.getElementsByName("detail_ref_interne")[0].value = "";
if (mylocal_materiel.ref_interne)
setp_detail_ref_interne(mylocal_materiel.ref_interne);
document.getElementsByName("detail_nom")[0].value = "";
if (mylocal_materiel.nom)
setp_detail_nom(mylocal_materiel.nom);
document.getElementsByName("detail_description")[0].value = "";
if (mylocal_materiel.description)
setp_detail_description(mylocal_materiel.description);
document.getElementsByName("detail_detail")[0].value = "";
if (mylocal_materiel.detail)
setp_detail_detail(mylocal_materiel.detail);
document.getElementsByName("detail_famille")[0].value = "";
if (mylocal_materiel.famille)
setp_detail_famille(mylocal_materiel.famille);
document.getElementsByName("detail_marque")[0].value = "";
if (mylocal_materiel.marque)
setp_detail_marque(mylocal_materiel.marque);
document.getElementsByName("detail_type")[0].value = "";
if (mylocal_materiel.type)
setp_detail_type(mylocal_materiel.type);
document.getElementsByName("detail_prix_achat")[0].value = "";
if (mylocal_materiel.prix_achat)
setp_detail_prix_achat(mylocal_materiel.prix_achat);
document.getElementsByName("detail_fournisseur")[0].value = "";
if (mylocal_materiel.fournisseur)
setp_detail_fournisseur(mylocal_materiel.fournisseur);
document.getElementsByName("detail_qty_stock")[0].value = "";
if (mylocal_materiel.qty_stock)
setp_detail_qty_stock(mylocal_materiel.qty_stock);
disable_Materiel_DetailFields();
} else {
alert(" Aucun materiel recuperé");
}
} else if (String(res.data.status) === String("Err_Connexion")) {
alert('Erreur: ' + res.data.message);
history.push("/Connexion");
}
else {
setGet_Materiel_Data_api("false");
setGet_Materiel_Data_message(res.data.message);
alert(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( Get_Materiel_Data = ', error);
setGet_Materiel_Data_api("false");
alert(" Impossible de recuperer les données du materiel");
//setmyApimyApiMessage("")
})
}
const [selected_id, setselected_id] = useState("");
const [selected_employe_email, setselected_employe_email] = useState("");
function handleClick_edit_materiel_From_Line(selected_row_id) {
submenu_detail_materiel();
var line = JSON.parse(rowss[selected_row_id]);
//console.log("### line = ", line);
var materiel_id = line._id;
setselected_id(materiel_id);
//console.log(" ### employe_id = ", employe_id);
Display_Detail_Employe_Data(materiel_id);
if (myRef.current) {
myRef.current.scrollIntoView({ behavior: "smooth" });
}
Getall_Materiel_Affectation(materiel_id);
}
const [Getall_Materiel_Affectation_api, setGetall_Materiel_Affectation_api] = useState();
const [Getall_Materiel_Affectation_message, setGetall_Materiel_Affectation_message] = useState();
const [Getall_Materiel_Affectation_result, setGetall_Materiel_Affectation_result] = useState();
function Getall_Materiel_Affectation(local_materiel_id) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("rm_id", local_materiel_id);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_List_Ressource_Materielle_Affectation/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In Getall_Materiel_Affectation res.data.status = " + res.data.status);
//console.log(" In Getall_Materiel_Affectation res.data.message r_class = " + res.data.message);
setGetall_Materiel_Affectation_api("true");
setGetall_Materiel_Affectation_result(res.data.message);
setrows_affectations(res.data.message);
}
else {
setGetall_Materiel_Affectation_api("false");
setGetall_Materiel_Affectation_message(res.data.message);
alert(res.data.message)
}
}).catch((error) => {
console.warn('Not good man :( Getall_Materiel_Affectation = ', error);
setGetall_Materiel_Affectation_api("false");
alert(" Impossible de recuperer les affectations du materiel");
//setmyApimyApiMessage("")
})
}
const [Get_Materiel_Related_Target_Collection_Data_api, setGet_Materiel_Related_Target_Collection_Data_api] = useState();
const [Get_Materiel_Related_Target_Collection_Data_message, setGet_Materiel_Related_Target_Collection_Data_message] = useState();
const [Get_Materiel_Related_Target_Collection_Data_result, setGet_Materiel_Related_Target_Collection_Data_result] = useState();
function Get_Materiel_Related_Target_Collection_Data() {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Related_Target_Materiel_Collection_Data/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In Get_Materiel_Related_Target_Collection_Data res.data.status = " + res.data.status);
//console.log(" In Get_Materiel_Related_Target_Collection_Data res.data.message r_class = " + res.data.message);
setGet_Materiel_Related_Target_Collection_Data_api("true");
setGet_Materiel_Related_Target_Collection_Data_result(res.data.message);
}
else {
setGet_Materiel_Related_Target_Collection_Data_api("false");
setGet_Materiel_Related_Target_Collection_Data_message(res.data.message);
alert(res.data.message)
}
}).catch((error) => {
console.warn('Not good man :( Get_Materiel_Related_Target_Collection_Data = ', error);
setGet_Materiel_Related_Target_Collection_Data_api("false");
alert(" Impossible de recuperer les cibles d'affectation");
//setmyApimyApiMessage("")
})
}
const [isimgclassdeleted, setisimgclassdeleted] = useState("");
const [isimgclassdeleted_message, setisimgclassdeleted_message] = useState("");
const [isimgclassSaved, setisimgclassSaved] = useState("");
const [isimgclassSaved_message, setisimgclassSaved_message] = useState("");
const [userimgclassprofil, setuserimgclassprofil] = useState();
const [userimgclassprofilchanged, setuserimgclassprofilchanged] = useState("");
function removeRecodedLogoImage() {
if (!isimgclassSelected_recid || String(isimgclassSelected_recid).length < 3) {
alert(" Image incorrecte. Impossible de la supprimer ");
return;
}
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("image_recid", isimgclassSelected_recid);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/DeleteImage_Ressource_Materielle/",
{
method: 'POST',
body: form,
}
).then((response) => response.json())
.then((result) => {
console.log(' removeRecodedClassImage : status:', result['status']);
console.log('removeRecodedClassImage : Success:', result['message']);
if (String(result['status']) === String("true")) {
setisimgclassSelected("");
setisimgclassSelected_recid("");
setisimgclassSelectedfile("");
setuserimgclassprofil("");
get_Materiel_Images();
}
else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
return;
}
else {
alert(result['message']);
}
})
.catch((error) => {
console.error('Error:', error);
alert(" Impossible de supprimer l'image ");
});
}
const imglogoclasschangeHandler = (event) => {
let file_size = event.target.files[0].size;
//or if you like to have name and type
//console.log(event.target.files);
let file_name = event.target.files[0].name;
let file_type = event.target.files[0].type;
//alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a);
if (file_size > 1000000) {
alert("L'image ne doit pas depasser un 1 Méga octets");
return;
}
setisimgclassSelected(event.target.files[0]);
setisimgclassSelectedfile(true);
setuserimgclassprofil(URL.createObjectURL(event.target.files[0]));
setuserimgclassprofilchanged("1");
};
const [record_materiel_Image_api, setrecord_materiel_Image_api] = useState();
const [record_materiel_Image_message, setrecord_materiel_Image_message] = useState();
const [record_materiel_Image_result, setrecord_materiel_Image_result] = useState();
function record_materiel_Image(l) {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/Update_Ressource_Materielle_Image/";
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
formData.append("rh_id", selected_id);
formData.append('file_img', isimgclassSelected);
formData.append('file_img_recid', isimgclassSelected_recid);
//console.log(" ### formData = ", formData);
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")) {
setrecord_materiel_Image_api("true");
setuserimgclassprofilchanged("");
alert(" L'image à jour a été mise enregistrée ");
} else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
} else {
setrecord_materiel_Image_api("false");
alert(" Erreur : " + result['message']);
}
})
.catch((error) => {
console.error('Error:', error);
setrecord_materiel_Image_api("false");
alert(" Erreur : Impossible d'enregistrer l'image ");
});
};
const [get_Materiel_Images_api, setget_Materiel_Images_api] = useState();
const [get_Materiel_Images_message, setget_Materiel_Images_message] = useState();
const [get_Materiel_Images_result, setget_Materiel_Images_result] = useState();
function get_Materiel_Images(material_id) {
setisimgclassSelected();
setuserimgclassprofil();
setisimgclassSelected_recid();
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecoded_Materielle_Image_from_front/";
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("rm_id", material_id);
axios.post(myurl, form).then(res => {
//console.log(" get_Materiel_Images : In test res.data.status = " + res.data.status);
// console.log(" get_Materiel_Images: res.data.message.img = " + res.data.message);
if (String(res.data.status) === "true") {
setget_Materiel_Images_api("true");
if (JSON.parse(res.data.message).logo_img) {
var partner_logo_img = "data:image/png;base64," + JSON.parse(res.data.message).logo_img;
setisimgclassSelected(partner_logo_img);
setuserimgclassprofil(partner_logo_img);
setisimgclassSelected_recid(JSON.parse(res.data.message).logo_img_recid);
}
}
else if (String(res.data.status) === String("Err_Connexion")) {
alert('Erreur: ' + res.data.message);
history.push("/Connexion");
return;
}
else {
setget_Materiel_Images_api("false");
get_Materiel_Images_message(res.data.message)
alert(res.data.message);
}
}).catch((error) => {
console.warn('get_Materiel_Images ee: Not good man :( = ', error);
setget_Materiel_Images_api("false");
get_Materiel_Images_message(" Impossible de recuperer l'image du materiel")
})
}
const [isimgclassSelected, setisimgclassSelected] = useState(false);
const [isimgclassSelected_recid, setisimgclassSelected_recid] = useState("");
const [isimgclassSelectedfile, setisimgclassSelectedfile] = useState(false);
const [p_detail_ref_interne, setp_detail_ref_interne] = useState();
const [p_detail_nom, setp_detail_nom] = useState();
const [p_detail_description, setp_detail_description] = useState();
const [p_detail_detail, setp_detail_detail] = useState();
const [p_detail_famille, setp_detail_famille] = useState();
const [p_detail_marque, setp_detail_marque] = useState();
const [p_detail_type, setp_detail_type] = useState();
const [p_detail_prix_achat, setp_detail_prix_achat] = useState();
const [p_detail_fournisseur, setp_detail_fournisseur] = useState();
const [p_detail_qty_stock, setp_detail_qty_stock] = useState();
// ------------
const [p_one_detail_ref_interne, setp_one_detail_ref_interne] = useState();
const [p_one_detail_nom, setp_one_detail_nom] = useState();
const [p_one_detail_description, setp_one_detail_description] = useState();
const [p_one_detail_detail, setp_one_detail_detail] = useState();
const [p_one_detail_famille, setp_one_detail_famille] = useState();
const [p_one_detail_marque, setp_one_detail_marque] = useState();
const [p_one_detail_type, setp_one_detail_type] = useState();
const [p_one_detail_prix_achat, setp_one_detail_prix_achat] = useState();
const [p_one_detail_fournisseur, setp_one_detail_fournisseur] = useState();
const [p_one_detail_qty_stock, setp_one_detail_qty_stock] = useState();
return ( return (
<div className="materiels"> <div className="materiels">
<Dialog <Dialog
@ -843,16 +1449,16 @@ const Materiels = (props) => {
> >
<DataGrid <DataGrid
checkboxSelection checkboxSelection
/*onSelectionModelChange={(newSelectionModel) => { onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel); setSelectionModel(newSelectionModel);
if (newSelectionModel.length === 1) if (newSelectionModel.length === 1)
handleClick_edit_employee_From_Line(newSelectionModel); handleClick_edit_materiel_From_Line(newSelectionModel);
if (newSelectionModel.length !== 1) { if (newSelectionModel.length !== 1) {
setsubmenu(); setsubmenu();
setdisplay_detail_employe(); setdisplay_detail_materiel();
setadd_One_Employee(); setadd_One_Materiel();
} }
}}*/ }}
selectionModel={selectionModel} selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
@ -963,7 +1569,7 @@ const Materiels = (props) => {
</div> </div>
<div className="div_row"> &nbsp;</div> <div className="div_row"> &nbsp;</div>
<div className="div_row"> <div className="div_row">
<Button variant="outlined" ref={myRef} onClick={submenu_detail_materiel} className="detail_materiel" id='detail_materiel' name='detail_employe'>Détail Materiel</Button> <Button variant="outlined" ref={myRef} onClick={submenu_detail_materiel} className="detail_class_submenu" id='detail_materiel' name='detail_materiel'>Détail Materiel</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>
@ -971,6 +1577,311 @@ const Materiels = (props) => {
</div> </div>
submenu = {submenu} <br/>
add_One_Materiel = {add_One_Materiel} <br />
{String(submenu) === "detail_materiel" && String(add_One_Materiel) !== "1" && <div className="div_row">
<nav style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}> Détail Materiel </nav>
<div className="div_row" style={{ "border": "None" }}>
<div className="div_row_gauche">
<div className="div_row_bis" style={{ "marginBottom": "10px", "marginTop": "1rem" }} >
<div className="div_row_gauche_image">
<img class="img_class_logo" src={userimgclassprofil} /><br />
</div>
<div className="div_row_droite_image">
<input type="file" id="files_img_class" accept="image/*" onChange={imglogoclasschangeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} /><br />
{<nav>
<label for="files_img_class" className="bton_image_class">Charger une photo</label><br />
{String(userimgclassprofilchanged) === "1" &&
<nav className="bton_image_class" onClick={record_materiel_Image}>Enregistrer la photo<br /> </nav>
}
{String(isimgclassSelected_recid) && String(isimgclassSelected_recid).length > 3 &&
<nav className="bton_supprime_image_class" onClick={removeRecodedLogoImage}>Supprimer la photo<br /> </nav>
}
{String(userimgclassprofilchanged) === "1" &&
<div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer la photo
</div>}
</nav>}
{/*isimgclassSelected && <Button variant="outlined" onClick={sendClassImage} className="bton_image_class">Enregistrer image</Button>*/}
{isimgclassdeleted && String(isimgclassdeleted) === "1" && <nav className="koUpdateData"> {isimgclassdeleted_message}</nav>}
{isimgclassdeleted && String(isimgclassdeleted) === "0" && <nav className="okUpdateData"> {isimgclassdeleted_message}</nav>}
{isimgclassSelected && String(isimgclassSaved) === "0" && <nav className="koUpdateData"> {isimgclassSaved_message}</nav>}
</div>
</div>
<div className="div_row_bis tips_img_class">
<li>
L'image doit etre carrée.
</li>
<li>
Les formats autorisés sont : <i>['jpg', 'jpeg', 'png', 'jpe', 'webp']</i>
</li>
<li>
Les dimensions recommandées: 128pixels X 128pixels -- 144pixels X 144pixels -- 168pixels X 168pixels<br />
Les dimensions maximales sont de 256pixels X 256pixels
</li>
<li>
La taille de l'image ne doit pas depasser 1 mega octet
</li>
</div>
</div>
</div>
<div className="session_data" >
<div className="session_caract"> Ref. Interne<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_ref_interne"
id="detail_ref_interne"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_ref_interne}
onChange={(e) => {
setp_detail_ref_interne(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Nom<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_nom"
id="detail_nom"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_nom}
onChange={(e) => {
setp_detail_nom(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Description<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_description"
id="detail_description"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_description}
onChange={(e) => {
setp_detail_description(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Detail<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_detail"
id="detail_detail"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_detail}
onChange={(e) => {
setp_detail_detail(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Famille<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_famille"
id="detail_famille"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_famille}
onChange={(e) => {
setp_detail_famille(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Marque<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_marque"
id="detail_marque"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_marque}
onChange={(e) => {
setp_detail_marque(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Type<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_type"
id="detail_type"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_type}
onChange={(e) => {
setp_detail_type(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Prix d'achat (estimé)<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_prix_achat"
id="detail_prix_achat"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_prix_achat}
onChange={(e) => {
setp_detail_prix_achat(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Fournisseur<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_fournisseur"
id="detail_fournisseur"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_fournisseur}
onChange={(e) => {
setp_detail_fournisseur(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> Qté en stock<br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="detail_qty_stock"
id="detail_qty_stock"
InputLabelProps={{
shrink: true,
}}
disabled={false}
className="disabled_style"
value={p_detail_qty_stock}
onChange={(e) => {
setp_detail_qty_stock(e.target.value);
setmateriel_data_changed("1");
}
}
/>
</div>
</div>
</div>}
{String(submenu) === "detail_materiel" && String(add_One_Materiel) === "1" && <div className="div_row">
<h3> Ajout nouveau materiel </h3>
</div>}
{String(submenu) === "affectation" && <div className="div_row">
<h3> Affectation d'un materiel </h3>
</div>}
</div > </div >
); );
} }