import React, { useRef, useState, useEffect } from "react"; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import Button from '@mui/material/Button'; import axios from "axios"; import { getCookie, setCookie } from 'react-use-cookie'; import { useHistory } from "react-router-dom"; import CheckOut from "./CheckOut"; import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid'; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import { Editor } from '@tinymce/tinymce-react'; import parse from 'html-react-parser'; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import add_plus from "../mysy_img/plus.png"; import excel_icone from "../mysy_img/excel_icone.png"; import participants from "../mysy_img/participants.png"; import fileDownload from 'js-file-download' import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { format } from 'date-fns' import moment from "moment"; import InputAdornment from '@mui/material/InputAdornment'; import { AiFillCloseCircle } from "react-icons/ai"; import Box from '@mui/material/Box'; import { Typography, LinearProgress, sliderClasses } from '@mui/material'; import styled from 'styled-components'; import { CiTrash } from "react-icons/ci"; import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md"; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import { TransitionProps } from '@mui/material/transitions'; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; //import FullCalendar from "@fullcalendar/react"; import daygridPlugin from "@fullcalendar/daygrid"; //import interactionPlugin from "@fullcalendar/interaction"; //import timeGridPlugin from "@fullcalendar/timegrid"; import allLocales from '@fullcalendar/core/locales-all' import { RepeatOnRounded } from "@mui/icons-material"; import { alignPropType } from "react-bootstrap/esm/types"; import ToggleSwitch from "./ToggleSwitch"; import ToggleSwitch_v2_mysy from "./ToggleSwitch_v2_mysy"; import Autocomplete from '@mui/material/Autocomplete'; import FullCalendar, { formatDate } from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; import interactionPlugin from "@fullcalendar/interaction"; import { FcSearch } from "react-icons/fc"; import { Fab } from "@material-ui/core"; import { ListItem, ListItemText, useTheme, } from "@mui/material"; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { TreeView } from '@mui/x-tree-view/TreeView'; import { TreeItem } from '@mui/x-tree-view/TreeItem'; import { IoMdAddCircle, IoIosRemoveCircleOutline } from "react-icons/io"; import { FcViewDetails, FcDisapprove, FcInfo } from "react-icons/fc"; import Draggable, { DraggableCore } from 'react-draggable'; import update from "immutability-helper"; const Test_Drag_Drop = (props) => { const history = useHistory(); const [isLoading, setLoading] = useState(); const [task_column, settask_column] = useState(""); const [task_column_data, settask_column_data] = useState(""); const eventHandler = (e, data) => { //console.log('Event Type', e.type); //console.log({ e, data }); if (String(e.type) === "mouseup") { console.log('Event Type', e.type); var al = data.lastX; console.log('data lastX', al); console.log(" col1_left = ", col1_left); console.log(" col2_left = ", col2_left); console.log(" col3_left = ", col3_left); const new_data = Getall_Partner_CRM_Opport_Step_result.map((x) => { var local_code = JSON.parse(x).code; var myoffsets = document.getElementById(local_code).getBoundingClientRect(); if (parseFloat(String(data.lastX)) > parseFloat(String(myoffsets.left))) { settask_column(local_code); } }); } } const [col1_left, setcol1_left] = useState(0); const [col2_left, setcol2_left] = useState(0); const [col3_left, setcol3_left] = useState(0); useEffect(() => { Getall_Partner_CRM_Opport_Step(); }, []); const [table_step, settable_step] = useState(); const New_step_x = [{"step":"nouveau"}, {"step":"qualifie"}, {"step":"proposition"}, {"step":"gagne"}, {"step":"perdu"}] const [New_Getall_Partner_CRM_Opport_Step_result, setNew_Getall_Partner_CRM_Opport_Step_result] = useState([]); const [Getall_Partner_CRM_Opport_Step_api, setGetall_Partner_CRM_Opport_Step_api] = useState(); const [Getall_Partner_CRM_Opport_Step_message, setGetall_Partner_CRM_Opport_Step_message] = useState(); const [Getall_Partner_CRM_Opport_Step_result, setGetall_Partner_CRM_Opport_Step_result] = useState(); function Getall_Partner_CRM_Opport_Step(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_CRM_List_Opportunite_Etape/"; setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); if (String(res.data.status) === String("true")) { //console.log(" In Getall_Partner_CRM_Opport_Step res.data.status = " + res.data.status); //console.log(" In Getall_Partner_CRM_Opport_Step res.data.message r_class = " + res.data.message); setGetall_Partner_CRM_Opport_Step_api("true"); setGetall_Partner_CRM_Opport_Step_result(res.data.message); let table = "
" + local_description + " | "; //--- var node = { "_id": local_id, "id": localid, "label": local_code, "code": local_code, "description": local_description, "rang": local_rang }; new_data2.push(node); var node = { "_id": "", "id": "", "label": "", "code": "", "description": "", "rang": "" }; new_data2.push(node); }); table += "
"; tmp = tmp + 1; }); table += " |