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 } from "react-icons/fc";
import Autocomplete from '@mui/material/Autocomplete';
const Partner_Client = (props) => {
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 (
{value &&
{expanded ? value : String(value).slice(0, 50)}
{value.length > 50 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
setExpanded(!expanded)}
>
{expanded ?
Réduire :
Voir }
)}
}
{!value &&
}
);
}
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: '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.
{
handleClick_supprimer(event, cellValues);
//console.log('modal closed ');
close();
}}> Valider
{
//console.log('modal closed ');
close();
}}
>
Annuler
)}
);
}
},
]
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);
}
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);
}
}).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)
}
}).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']);
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']);
}
})
.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.
]
return (
{String(gridline_id) !== "" &&
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" && Société }
{String(JSON.parse(Get_List_Partner_Clients_result[gridline_id]).is_company) === "0" && Particulier }
{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" &&
""}
}
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}
}
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,
}
))}
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,
}
}}
/>
{/* Contained */}
Télécharger un fichier modèle
{part_client_file_name}
{String(liste_part_client_file_change_api) === String("true") &&
Les client ont été correctement importés }
{String(liste_part_client_file_change_api) === String("false") &&
{liste_part_client_file_change_message} }
{String(Edite_Client) === "1" &&
Detail client / Financeur : {Client_email}
}
{String(Edite_Client) === "2" &&
Detail client / Financeur : {Client_email}
}
)
}
export default Partner_Client;