From 9bf1850405eb470f12a19e777cb529fe67fd3b8c Mon Sep 17 00:00:00 2001 From: adriano Date: Mon, 7 Nov 2022 17:51:20 -0300 Subject: [PATCH] =?UTF-8?q?FINALIZA=C3=87AO=20DA=20IMPORTA=C3=87=C3=83O=20?= =?UTF-8?q?DE=20CSV=20PARA=20INSERIR=20CONTATOS=20EM=20MASSA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Modal/index.js | 65 ++++++ frontend/src/pages/Contacts/index.js | 299 ++++++++++++++++++++----- 2 files changed, 311 insertions(+), 53 deletions(-) create mode 100644 frontend/src/components/Modal/index.js diff --git a/frontend/src/components/Modal/index.js b/frontend/src/components/Modal/index.js new file mode 100644 index 0000000..df86ed1 --- /dev/null +++ b/frontend/src/components/Modal/index.js @@ -0,0 +1,65 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +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'; + + + +const Modal = (props) => { + const [open, setOpen] = React.useState(props.open); + const [scroll, /*setScroll*/] = React.useState('paper'); + + + const handleClose = () => { + setOpen(false); + }; + + const descriptionElementRef = React.useRef(null); + React.useEffect(() => { + if (open) { + const { current: descriptionElement } = descriptionElementRef; + if (descriptionElement !== null) { + descriptionElement.focus(); + } + } + }, [open]); + + return ( + + + + {props.modal_header} + + + + + TESTANDO + + + + + + + + + + ); +} + +export default Modal \ No newline at end of file diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js index 59faab2..44f1265 100644 --- a/frontend/src/pages/Contacts/index.js +++ b/frontend/src/pages/Contacts/index.js @@ -36,15 +36,9 @@ import { AuthContext } from "../../context/Auth/AuthContext"; import { Can } from "../../components/Can"; import apiBroker from "../../services/apiBroker"; +import fileDownload from 'js-file-download' -import { - FormControlLabel, - Hidden, - Menu, - MenuItem, - Switch, -} from "@material-ui/core"; - + const reducer = (state, action) => { @@ -121,18 +115,95 @@ const Contacts = () => { const [confirmOpen, setConfirmOpen] = useState(false); const [hasMore, setHasMore] = useState(false); - const [file, setFile] = useState() + + const [onQueueStatus, setOnQueueProcessStatus] = useState(undefined) + + const [zipfile, setZipFile] = useState() + + + async function handleChange(event) { + + try { + + if (event.target.files[0].size > 1024 * 1024 * 4){ + alert('Arquivo não pode ser maior que 4 MB!') + return + } + + const formData = new FormData(); + formData.append("adminId", user.id); + formData.append("baseURL", process.env.REACT_APP_BACKEND_URL_PRIVATE,); + formData.append("frontURL", process.env.REACT_APP_FRONTEND_URL); + formData.append("identifier", 'contacts_insert_csv'); + formData.append("file", event.target.files[0]); + + const config = { + headers: { + 'content-type': 'multipart/form-data', + }, + }; + + const bulk_contact_insert = await apiBroker.post("/contacts/bulk/insert", formData, config); + + console.log(bulk_contact_insert.data) + + const onQueueStatus = bulk_contact_insert.data.queueStatus + + setOnQueueProcessStatus(onQueueStatus) + // history.go(0); + } catch (err) { + toastError(err); + } - function handleChange(event) { - - console.log('THE FILE: ', event.target.files[0]) - - setFile(event.target.files[0]) } + useEffect(() => { + + + + const delayDebounceFn = setTimeout(() => { + + const fetchReportOnQueue = async () => { + try { + + const insertOnQueue = await apiBroker.get("/contacts/status/insert/onqueue", { + params: { + adminId: user.id, + baseURL: process.env.REACT_APP_BACKEND_URL_PRIVATE, + identifier: 'contacts_insert_csv' + } + }); + + if (insertOnQueue && insertOnQueue.data) { + + console.log('insertOnQueue: ', insertOnQueue.data) + console.log('data.app.file: ', insertOnQueue.data.app.file) + + setZipFile(insertOnQueue.data.app.file) + setOnQueueProcessStatus(insertOnQueue.data.app.status) + } + else { + setOnQueueProcessStatus('empty') + } + + + } catch (err) { + console.log(err); + } + }; + + fetchReportOnQueue(); + + }, 500); + return () => clearTimeout(delayDebounceFn); + + }, [user]) + + + useEffect(() => { dispatch({ type: "RESET" }); setPageNumber(1); @@ -142,9 +213,6 @@ const Contacts = () => { if (searchParam.trim().length > 0 && searchParam.endsWith(' ')) { - - - return } @@ -180,6 +248,24 @@ const Contacts = () => { useEffect(() => { const socket = openSocket(process.env.REACT_APP_BACKEND_URL); + socket.on("contactsBulkInsertOnQueueStatus", (data) => { + if (data.action === 'update') { + + if (String(data.insertOnQueue.adminId) === String(user.id)) { + + // console.log('-----------------> THE FILE: ', data.insertOnQueue) + + setZipFile(data.insertOnQueue.file) + setOnQueueProcessStatus(data.insertOnQueue.queueStatus) + + if (data.insertOnQueue.queueStatus === "success") { + history.go(0); + } + } + + } + }) + socket.on("contact", (data) => { if (data.action === "update" || data.action === "create") { dispatch({ type: "UPDATE_CONTACTS", payload: data.contact }); @@ -193,7 +279,7 @@ const Contacts = () => { return () => { socket.disconnect(); }; - }, []); + }, [user, history]); const removeExtraSpace = (str) => { @@ -258,32 +344,6 @@ const Contacts = () => { } }; - const handleImportCSVContact = async () => { - console.log('kkkkkkkkkkk') - try { - - const formData = new FormData(); - const filename = `${new Date().getTime()}.mp3`; - formData.append("medias", filename); - formData.append("body", filename); - formData.append("fromMe", true); - - const config = { - headers: { - 'content-type': 'multipart/form-data', - }, - }; - - const bulk_contact_insert = await apiBroker.post("/contacts/bulk/insert", formData, config); - - - // await api.post("/contacts/csv/import"); - - history.go(0); - } catch (err) { - toastError(err); - } - }; const loadMore = () => { setPageNumber((prevState) => prevState + 1); @@ -300,6 +360,133 @@ const Contacts = () => { } }; + + const handleDownload = async () => { + + setOnQueueProcessStatus('downloading') + + try { + + let res = await apiBroker.get(`/contacts/download/${zipfile}`, { responseType: 'blob' }); + + if (res) { + fileDownload(res.data, `${zipfile}`); + setOnQueueProcessStatus('empty') + } + + + } catch (err) { + console.log(err); + } + + + } + + + const handleError = async () => { + + try { + + alert('Não foi possível inserir a planilha de contatos! Tente novamente ou entre em contato com o suporte.') + + let res = await apiBroker.get(`/contacts/error/insert/onqueue`, { + params: { + adminId: user.id, + baseURL: process.env.REACT_APP_BACKEND_URL_PRIVATE, + identifier: 'contacts_insert_csv' + } + }); + + if (res) { + setOnQueueProcessStatus('empty') + } + + + } catch (err) { + console.log(err); + } + + + } + + + + const renderSwitch = (param) => { + switch (param) { + case 'empty': + return ( + <> + + + + + + {/* */} + ); + + case 'pending' || 'processing': + return ( + <> + PROCESSING... + ); + + case 'success': + return ( + <> + + ); + case 'error': + return ( + <> + + ); + case 'downloading': + return ( + <> + DOWNLOADING... + ); + + + default: + return (<>WAITING...); + } + } + return ( { ( - + yes={() => ( + + + <> + {renderSwitch(onQueueStatus)} + + + // )} />