import React, { useRef, useState, useEffect } from "react"; import axios from "axios"; import Button from '@mui/material/Button'; import SendIcon from '@mui/icons-material/Send'; import { getCookie } from 'react-use-cookie'; import { useHistory } from "react-router-dom"; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import excel_icone from "../mysy_img/excel_icone.png"; import participants from "../mysy_img/participants.png"; import Box from '@mui/material/Box'; import Footer from "./Fotter"; import { DataGrid, GridToolbar, frFR, GridCellParams } from '@mui/x-data-grid'; import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint, FcDeleteDatabase } from "react-icons/fc"; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import AddParnerClient from "./AddPartnerClient"; //import { FcHome} from "react-icons/fc"; import { alpha } from '@mui/material/styles'; import { gridClasses } from '@mui/x-data-grid'; import { AiOutlineUserAdd } from "react-icons/ai"; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import InputAdornment from '@mui/material/InputAdornment'; import { AiFillCloseCircle } from "react-icons/ai"; import { CiTrash } from "react-icons/ci"; import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md"; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; import { FcOrganization, FcBusinessman, FcDepartment } from "react-icons/fc"; import Autocomplete from '@mui/material/Autocomplete'; import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import { makeStyles } from "@material-ui/core/styles"; import Paper from '@material-ui/core/Paper'; import Draggable from 'react-draggable'; import { IconButton } from '@material-ui/core'; import Module_Alert_Confirmation from "./Module_Alert_Confirmation"; function PaperComponent(props) { return ( ); } const useStyles = makeStyles((theme) => ({ dialog: { position: 'absolute', // left: 10, top: 400 }, paper: { overflowY: 'unset', }, customizedButton: { position: 'absolute', left: '98%', top: '-3%', backgroundColor: 'lightgray', color: 'gray', }, })); const Partner_Client = (props) => { const classes = useStyles(); const history = useHistory(); const [rows_list_clients, setrows_list_clients] = useState([]); const [selectionModel, setSelectionModel] = React.useState([]); const [selected_id, setselected_id] = useState(""); function ExpandableCell_50({ value }) { const [expanded, setExpanded] = React.useState(false); return ( ); } function Display_Colunm_text({ value }) { return (
{value} 
); } const columns_clients = [ { field: 'id', headerName: 'id', hide: true }, { field: '_id', headerName: '_id', hide: true }, { field: 'raison_sociale', headerName: 'Raison sociale', Width: 200, flex: 1, hide: false, editable: false, renderCell: (params) => , }, { field: 'nom', headerName: 'nom', width: 100, hide: false, editable: false, Width: 200, flex: 1, renderCell: (params) => , }, { field: 'email', headerName: 'email', width: 100, width: 200, flex: 1, renderCell: (params) => , }, { field: 'telephone', headerName: 'Téléphone', width: 100, hide: false, editable: false, width: 100, renderCell: (params) => , }, { field: 'adr_adresse', headerName: 'Adresse', width: 100, hide: true, editable: false, width: 100, renderCell: (params) => , }, { field: 'adr_code_postal', headerName: 'Code Postal', width: 100, hide: false, editable: false, width: 100, renderCell: (params) => , }, { field: 'adr_ville', headerName: 'Ville', width: 100, hide: false, editable: false, renderCell: (params) => , }, { field: 'adr_pays', headerName: 'Pays', width: 100, hide: true, editable: false, renderCell: (params) => , }, { field: 'siret', headerName: 'Siret', width: 100, hide: true, editable: false, renderCell: (params) => , }, { field: 'website', headerName: 'Siteweb', width: 100, hide: true, editable: false, renderCell: (params) => , }, { field: 'is_company', headerName: 'Société', width: 100, hide: true, editable: false, renderCell: (params) => , }, { field: 'intranet_account_id', headerName: 'Intranet', width: 100, hide: false, editable: false, renderCell: (cellValues) => ( ) }, { field: 'is_prospect', headerName: 'Pros/Cli', width: 100, hide: false, editable: false, renderCell: (cellValues) => { return (
{String(cellValues.row.is_prospect) === "1" && "Pros."}  {String(cellValues.row.is_prospect) !== "1" && "Cli."} 
); }, }, { field: "detail", headerName: 'Voir détail', renderCell: (cellValues) => { return (
{ setgridline_id(cellValues.row.id) handleClick_edit_session_From_Line(cellValues.row.id); }}>
); } }, { field: "delete", headerName: 'Supprimer', renderCell: (cellValues) => { return ( { // handleClick_delete(event, cellValues); }} > } modal nested position="center center" > {close => (
MySy Information
{' '} En confirmant cette opération, le client sera définitivement supprimé.
Avant, assurez-vous de n'avoir aucun stagiaire, un devis ou commande rattaché au client.
)}
); } }, ] const [rowSelectionModel, setRowSelectionModel] = React.useState([]); const myRef_add_client = useRef(null) const myRef_head = useRef(null) const [Edite_Client, setEdite_Client] = useState(""); const [Client_email, setClient_email] = useState(""); function handleClick_modifier(event, cellValues) { var clientmail = String(cellValues.row.email); setClient_email(clientmail); setEdite_Client("1"); window.scrollTo({ top: 600, left: 0, behavior: "smooth", }); } function handleClick_add_new_client(event, cellValues) { setEdite_Client("2"); window.scrollTo({ top: 600, left: 0, behavior: "smooth", }); } function handleClick_supprimer(event, cellValues) { var clientmail = String(cellValues.row.email); var client_id = String(cellValues.row._id); Delete_Client_Data(client_id); } const [Delete_Client_Data_api, setDelete_Client_Data_api] = useState(); const [Delete_Client_Data_message, setDelete_Client_Data_message] = useState(); const [Delete_Client_Data_result, setDelete_Client_Data_result] = useState(); function Delete_Client_Data(local_client_id) { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("_id", local_client_id); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Delete_Given_Partner_Client/"; axios.post(myurl, form).then(res => { //console.log(" In Delete_Client_Data res.data.status = " + res.data.status); //console.log(" In Delete_Client_Data res.data.message r_class = " + res.data.message); if (String(res.data.status) === String("true")) { setDelete_Client_Data_api("true"); setDelete_Client_Data_result(res.data.message); Get_List_Partner_Clients(); setSelectionModel([]); setEdite_Client(); // alert(res.data.message); setdisplay_alert_mysy("1"); setalert_message(res.data.message); setalert_type("success"); } else if (String(res.data.status) === String("Err_Connexion")) { alert(res.data.message); history.push("/Connexion"); } else { setDelete_Client_Data_api("false"); setDelete_Client_Data_message(res.data.message); // alert(res.data.message); setdisplay_alert_mysy("1"); setalert_message(res.data.message); setalert_type("error"); } }).catch((error) => { console.warn('Not good man :( Delete_Client_Data = ', error); setDelete_Client_Data_api("false"); alert(" Impossible de supprimer le client"); }) } const [Get_List_Partner_Clients_api, setGet_List_Partner_Clients_api] = useState(); const [Get_List_Partner_Clients_message, setGet_List_Partner_Clients_message] = useState(); const [Get_List_Partner_Clients_result, setGet_List_Partner_Clients_result] = useState([]); function Get_List_Partner_Clients(event) { 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_Partner_List_Partner_Client/"; axios.post(myurl, form).then(res => { //console.log(" In Get_List_Partner_Clients res.data.status = " + res.data.status); //console.log(" In Get_List_Partner_Clients res.data.message r_class = " + res.data.message); if (String(res.data.status) === String("true")) { setGet_List_Partner_Clients_api("true"); setGet_List_Partner_Clients_result(res.data.message); setrows_list_clients(res.data.message); } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); } else { setGet_List_Partner_Clients_api("false"); setGet_List_Partner_Clients_message(res.data.message); } }).catch((error) => { console.warn('Not good man :( Get_List_Partner_Clients = ', error); setGet_List_Partner_Clients_api("false"); //setmyApimyApiMessage("") }) } const [Get_List_Partner_Clients_With_Filter_api, setGet_List_Partner_Clients_With_Filter_api] = useState(); const [Get_List_Partner_Clients_With_Filter_message, setGet_List_Partner_Clients_With_Filter_message] = useState(); const [Get_List_Partner_Clients_With_Filter_result, setGet_List_Partner_Clients_With_Filter_result] = useState(); function Get_List_Partner_Clients_With_Filter(event) { var form = new FormData(); // Recuperation des parametres var filtre1 = p_filtre1; var filtre2 = p_filtre2; var filtre1_value = ""; var filtre2_value = ""; // Recuperation des valeurs de filtres if (p_filtre1_value) { filtre1_value = p_filtre1_value; form.append(filtre1, filtre1_value); } if (p_filtre2_value) { filtre2_value = p_filtre2_value; form.append(filtre2, filtre2_value); } const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Partner_List_Partner_Client_with_filter_Like/"; axios.post(myurl, form).then(res => { //console.log(" In Get_List_Partner_Clients_With_Filter res.data.status = " + res.data.status); //console.log(" In Get_List_Partner_Clients_With_Filter res.data.message r_class = " + res.data.message); if (String(res.data.status) === String("true")) { setGet_List_Partner_Clients_With_Filter_api("true"); setGet_List_Partner_Clients_With_Filter_result(res.data.message); setrows_list_clients(res.data.message); } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); } else { setGet_List_Partner_Clients_With_Filter_api("false"); setGet_List_Partner_Clients_With_Filter_message(res.data.message); //alert(res.data.message) setdisplay_alert_mysy("1"); setalert_message(res.data.message); setalert_type("error"); } }).catch((error) => { console.warn('Not good man :( Get_List_Partner_Clients_With_Filter = ', error); setGet_List_Partner_Clients_With_Filter_api("false"); alert(" Impossible de récupérer la liste des client"); //setmyApimyApiMessage("") }) } function close_detail_client() { setSelectionModel([]); setselected_id(""); setgridline_id(""); setEdite_Client("0"); window.scrollTo({ top: 0, behavior: "smooth", }); } useEffect(() => { //menu_info(); Get_List_Partner_Clients(); if (props.object_key && String(props.object_key).length > 3) { handleClick_edit_session_From_Props(props.object_key); } else { window.scrollTo({ top: 0, behavior: "smooth", }); } }, []); const [part_client_file_name, setpart_client_file_name] = useState(); function submenu_import_part_client_mass() { setpart_client_file_name(); setliste_part_client_file_change_api(); hiddenFileInput.current.click(); } const hiddenFileInput = React.useRef(null); const [liste_part_client_file_change_api, setliste_part_client_file_change_api] = useState(); const [liste_part_client_file_change_result, setliste_part_client_file_change_result] = useState(); const [liste_part_client_file_change_message, setliste_part_client_file_change_message] = useState(); const liste_part_client_file_change = event => { 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; } setpart_client_file_name(event.target.files[0].name); const formData = new FormData(); formData.append('File', fileUploaded); //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA'); const stored_cookie = getCookie('tokenmysypart'); formData.append("token", stored_cookie); //console.log("token = " + stored_cookie); fetch( process.env.REACT_APP_API_URL + "myclass/api/Add_Partner_Client_mass/", { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { if (String(result['status']) === String("true")) { //console.log('Success:', result['message']); setliste_part_client_file_change_result(result['message']); setliste_part_client_file_change_api("true"); // alert(result['message']); setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("success"); Get_List_Partner_Clients(); } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setliste_part_client_file_change_message(result['message']); setliste_part_client_file_change_api("false"); // alert(result['message']); setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("error"); } }) .catch((error) => { console.error('Error:', error); setliste_part_client_file_change_api("false"); }); }; const datagridSx = { borderRadius: 2, marginRight: 1, marginLeft: 1, border: 0, "& .MuiDataGrid-main": { borderRadius: 0 }, /*'& div[data-rowIndex][role="row"]:nth-of-type(5n-4)': { color: "blue", fontSize: 18, //risky minHeight: "60px !important", height: 60, "& div": { minHeight: "60px !important", height: 60, lineHeight: "59px !important" } }, "& .MuiDataGrid-virtualScrollerRenderZone": { "& .MuiDataGrid-row": { "&:nth-child(2n)": { backgroundColor: "rgba(235, 235, 235, .7)" } } },*/ "& .MuiDataGrid-columnHeaders": { backgroundColor: "#c8cfd5", color: "black", fontSize: 16 } }; function handleClick_edit_session_From_Line(selected_row_id) { if (rows_list_clients[selected_row_id]) { //console.log(" OKKKKK "); var line = JSON.parse(rows_list_clients[selected_row_id]); var clientmail = String(line.email); var client_id = String(line._id); setselected_id(client_id); setClient_email(clientmail); setEdite_Client("1"); window.scrollTo({ top: 800, left: 0, behavior: "smooth", }); } } function handleClick_edit_session_From_Props(props_client_id) { setselected_id(props_client_id); setEdite_Client("1"); window.scrollTo({ top: 800, left: 0, behavior: "smooth", }); } const [p_filtre1, setp_filtre1] = useState(""); const [p_filtre1_value, setp_filtre1_value] = useState(""); const [p_filtre2, setp_filtre2] = useState(); const [p_filtre2_value, setp_filtre2_value] = useState(); function clean_all_filters() { setp_filtre1(""); setp_filtre1_value(""); setp_filtre2(""); setp_filtre2_value(""); Get_List_Partner_Clients(); } function father_scroll_to_top() { window.scrollTo({ top: 0, left: 0, behavior: "smooth", }); } const [gridline_id, setgridline_id] = useState(""); const myRef_detail_client = useRef(null) function Show_Detailled_client_Data() { Dialog_client_handleClose_buton(); handleClick_edit_session_From_Line(gridline_id); } const [selected_row_data_json_age, setselected_row_data_json_age] = useState(""); const [fiche_client_id, setfiche_client_id] = React.useState(""); const [Dialog_client_message, setDialog_client_message] = React.useState(false); const [Dialog_client_open, setDialog_client_open] = React.useState(false); function Dialog_client_handle_change(message) { setDialog_client_message(message); setDialog_client_open(true); } const Dialog_client_handleClose_buton = () => { setDialog_client_open(false); }; const Dialog_client_handleClose = () => { setDialog_client_open(false); }; const New_Option_Filter = [ { "id": "nom", "label": "Nom ", "value": "nom" }, { "id": "email", "label": "Email ", "value": "email" }, { "id": "", "label": "", "value": "" }, { "id": "1", "label": "", "value": "1" }, // Cette ligne pour couvrir l'ajout d'une ligne de filter. C'est fait expres. ] const [display_alert_mysy, setdisplay_alert_mysy] = useState(""); const [alert_message, setalert_message] = useState(""); const [alert_type, setalert_type] = useState(""); function clear_alert_message() { setalert_message(""); } function clear_alert_type() { setalert_type(""); } function clear_display_alert_mysy() { setdisplay_alert_mysy(""); } return (
{/*** Affichage des messages d'alerte*/} {display_alert_mysy && String(display_alert_mysy) === "1" && } {/*** FIN Affichage des messages d'alerte*/} {String(gridline_id) !== "" && null} PaperProps={{ className: classes.paper, // Apply the paper style style: { overflowY: 'unset', position: 'absolute', top: '7rem', margin: "2px", }, }} hideBackdrop={true} disableScrollLock classes={{ paper: classes.dialog }} PaperComponent={PaperComponent} aria-labelledby="draggable-dialog-title" > client
Type
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 &&
{String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) === "1" && } {String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) === "0" && } {String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) === "2" && } {String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) !== "0" && String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) !== "1" && String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) !== "2" && ""}
}
Raison Sociale
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 && String(gridline_id) !== "" &&
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).raison_socile}
}
Nom
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 &&
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).nom}
}
E-mail
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 &&
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).email}
}
Compte Intranet
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 && JSON.parse(Get_List_Partner_Clients_result[gridline_id]).intranet_account_id && String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).intranet_account_id).length > 5 &&
Oui
} {(Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0) && (!JSON.parse(Get_List_Partner_Clients_result[gridline_id]).intranet_account_id || String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).intranet_account_id).length <= 5) &&
Non
}
Téléphone
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 &&
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).telephone}
}
Adresse postale
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 &&
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).adr_adresse}
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).adr_code_postal} {JSON.parse(Get_List_Partner_Clients_result[gridline_id]).adr_pays}
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).adr_pays.toUpperCase()}
}
Site Web
{Get_List_Partner_Clients_result && selected_id && String(selected_id).length > 0 &&
{JSON.parse(Get_List_Partner_Clients_result[gridline_id]).website}
}
 
}

Vos clients & Organismes Financeurs

Utilisez les filtres !
{New_Option_Filter && New_Option_Filter.length > 0 && (data).value === String(p_filtre1))[0].label} options={New_Option_Filter} onChange={(event, value) => { if (value && value.value) { setp_filtre1(value.value); } }} renderInput={(params) => } />}
{p_filtre1 && { setp_filtre1_value(e.target.value); }} InputProps={{ endAdornment: ( { setp_filtre1_value(""); }} /> ), }} /> }
{p_filtre1 && } {p_filtre1 && }
{p_filtre2 &&
{New_Option_Filter && New_Option_Filter.length > 0 && (data).value === String(p_filtre2))[0].label} options={New_Option_Filter} onChange={(event, value) => { if (value && value.value) { setp_filtre2(value.value); } }} renderInput={(params) => } />} {/* { setp_filtre2(e.target.value) }} > Nom    Email   */}
{String(p_filtre2).length > 3 && setp_filtre2_value(e.target.value)} InputProps={{ endAdornment: ( { setp_filtre2_value(""); }} /> ), }} />}
{String(p_filtre2).length > 3 && }
} {
}
  ( { id: index, _id: JSON.parse(item)._id, email: JSON.parse(item).email, nom: JSON.parse(item).nom, raison_sociale: JSON.parse(item).raison_sociale, telephone: JSON.parse(item).telephone, adr_adresse: JSON.parse(item).adr_adresse, adr_code_postal: JSON.parse(item).adr_code_postal, adr_ville: JSON.parse(item).adr_ville, adr_pays: JSON.parse(item).adr_pays, siret: JSON.parse(item).siret, website: JSON.parse(item).website, is_company: JSON.parse(item).is_company, is_prospect: JSON.parse(item).is_prospect, intranet_account_id: JSON.parse(item).intranet_account_id, } ))} columns={columns_clients} pageSize={10} className="datagridclass" rowsPerPageOptions={[10]} //disableSelectionOnClick checkboxSelection components={{ Toolbar: GridToolbar, }} //sx={datagridSx} onSelectionModelChange={(newSelectionModel) => { setSelectionModel(newSelectionModel); /* if (newSelectionModel.length === 1){ handleClick_edit_session_From_Line(newSelectionModel); } else{ setEdite_Client(); }*/ }} selectionModel={selectionModel} onRowDoubleClick={(newSelectionModel) => { //console.log(" 01 GRRRR newSelectionModel.row._id = ", newSelectionModel.row._id); setgridline_id(newSelectionModel.row.id); setselected_id(newSelectionModel.row._id); //handleClick_edit_session_From_Line(newSelectionModel.row.id); //console.log(" GRRRR newSelectionModel.row._id = ", newSelectionModel.row._id); setDialog_client_open(true); }} getRowClassName={(params) => { // Pour la gestion de la couleur de zone double cliquée if (String(params.row.id) === String(gridline_id)) { return 'line--statut--selected'; } else if (parseInt(String(params.row.id)) % 2 === 0) { return 'line--statut--pair'; } else if (parseInt(String(params.row.id)) % 2 !== 0) { return 'line--statut--impair'; } }} sx={{ "& .MuiDataGrid-cellContent": { minHeight: 100, } }} />

{/* */}

Télécharger un fichier modèle
{part_client_file_name}
{String(liste_part_client_file_change_api) === String("true") && } {String(liste_part_client_file_change_api) === String("false") && }
{String(Edite_Client) === "1" &&
Detail client / Financeur : {Client_email}
} {String(Edite_Client) === "2" &&
Detail client / Financeur : {Client_email}
 
}
) } export default Partner_Client;