From 118fa7398def31c48ddfa448a6805c797c2b1e9e Mon Sep 17 00:00:00 2001 From: adriano Date: Mon, 29 Aug 2022 10:55:07 -0300 Subject: [PATCH] =?UTF-8?q?Remo=C3=A7=C3=A3o=20de=20console.log=20e=20desa?= =?UTF-8?q?ble=20do=20botao=20csv=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Report/MTable/index.js | 19 +- frontend/src/pages/Report/index.js | 291 ++++-------------- 2 files changed, 58 insertions(+), 252 deletions(-) diff --git a/frontend/src/components/Report/MTable/index.js b/frontend/src/components/Report/MTable/index.js index d2f7c55..f294b41 100644 --- a/frontend/src/components/Report/MTable/index.js +++ b/frontend/src/components/Report/MTable/index.js @@ -19,20 +19,17 @@ const MTable = (props) => { }; const [selectedRow, setSelectedRow] = useState(null); - - //const dataLoad = props.data.map((dt) => { return { ...dt }}); + const dataLoad = props.data.map(({ user, ...others }) => ({ ...others, 'user': user ? user : { name: 'Aguardando atendente', email: '' } })); const columnsLoad = props.columns.map((column) => { return { ...column } }); - useEffect(() => { + // useEffect(() => { - console.log(`You have clicked the button ${selectedRow} times`) + // console.log(`You have clicked the button ${selectedRow} times`) - // console.log('TABLE REF: ', tableRef) - - }, [selectedRow]); + // }, [selectedRow]); useEffect(() => { @@ -76,10 +73,7 @@ const MTable = (props) => { if (props.removeClickRow) { return } - - console.log(selectedRow.tableData.id); - console.log(selectedRow); - console.log(selectedRow.messages); + setSelectedRow(selectedRow.tableData.id) if (props.hasChild) { @@ -89,8 +83,7 @@ const MTable = (props) => { user={selectedRow.user.name} clientContactNumber={selectedRow.contact.number} />) } - - console.log('props.hasChild: ', props.hasChild) + //evt.stopPropagation() } diff --git a/frontend/src/pages/Report/index.js b/frontend/src/pages/Report/index.js index 8a3d620..7a05945 100644 --- a/frontend/src/pages/Report/index.js +++ b/frontend/src/pages/Report/index.js @@ -1,8 +1,7 @@ -import React, { useState, useEffect, useReducer, useContext, useRef } from "react"; +import React, { useState, useEffect, useReducer, useContext } from "react"; import MainContainer from "../../components/MainContainer"; import api from "../../services/api"; -import SelectField from "../../components/Report/SelectField"; -//import { data } from '../../components/Report/MTable/data'; +import SelectField from "../../components/Report/SelectField"; import DatePicker1 from '../../components/Report/DatePicker' import DatePicker2 from '../../components/Report/DatePicker' import MTable from "../../components/Report/MTable"; @@ -21,95 +20,19 @@ import LogoutIcon from '@material-ui/icons/CancelOutlined'; import apiBroker from "../../services/apiBroker"; import fileDownload from 'js-file-download' - -import fs from 'fs' - -import { CSVLink } from "react-csv"; - -// import CircularProgress from '@mui/material/CircularProgress'; - -import openSocket from "socket.io-client"; -import { set } from "date-fns"; + +import openSocket from "socket.io-client"; const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }] -let columns = [ - { - key: 'ticket.whatsapp.name', - label: 'Loja', - - }, - - { - key: 'id', - label: 'id Mensagem', - }, - - { - key: 'ticket.id', - label: 'id Conversa', - }, - - { - key: 'ticket.contact.name', - label: 'Cliente', - }, - - { - key: 'ticket.user.name', - label: 'Atendente', - }, - { - key: 'body', - label: 'Mensagem', - }, - { - key: 'fromMe', - label: 'Sentido', - }, - { - key: 'createdAt', - label: 'Criada', - }, - { - key: 'ticket.contact.number', - label: 'Telefone cliente', - }, - { - key: 'ticket.queue.name', - label: 'Fila', - }, - { - key: 'ticket.status', - label: 'Status', - }, - { - key: 'ticket.statusChatEnd', - label: 'Status de encerramento', - } - -] - -// - - - - - - - - + const reducerQ = (state, action) => { if (action.type === "DELETE_USER_STATUS") { const userId = action.payload; - - //console.log('Entrou no delete user status userId: ', userId) - - const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); - - // console.log('>>>>>>>>>>>>>>>>>>>>> userIndex: ', userIndex) + + const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); if (userIndex !== -1) { state.splice(userIndex, 1); @@ -146,24 +69,16 @@ const reducerQ = (state, action) => { let onlineUser = action.payload let index = -1 - - // console.log('sssssssssstate: ', state, ' | ONLINE USERS: onlineUser.userId ', onlineUser.userId) - + if (onlineUser.sumOpen || onlineUser.sumClosed) { index = state.findIndex((e) => ((onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId))) } else { index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`) } + - //console.log(' *********************** index: ', index) - - - - if (index !== -1) { - - // console.log('ENTROU NO INDEX') - + if (index !== -1) { if (!("statusOnline" in state[index])) { state[index].statusOnline = onlineUser @@ -186,11 +101,9 @@ const reducerQ = (state, action) => { if (onlineUser.sumOpen) { - if ("sumOpen" in state[index]) { - // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count) + if ("sumOpen" in state[index]) { state[index].sumOpen['count'] = onlineUser.sumOpen.count - } else if (!("sumOpen" in state[index])) { - // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') + } else if (!("sumOpen" in state[index])) { state[index].sumOpen = onlineUser.sumOpen } @@ -198,11 +111,9 @@ const reducerQ = (state, action) => { if (onlineUser.sumClosed) { - if ("sumClosed" in state[index]) { - // console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count) + if ("sumClosed" in state[index]) { state[index].sumClosed['count'] = onlineUser.sumClosed.count - } else if (!("sumClosed" in state[index])) { - // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') + } else if (!("sumClosed" in state[index])) { state[index].sumClosed = onlineUser.sumClosed } @@ -308,10 +219,7 @@ let columnsData = [ { title: 'Status de encerramento', field: 'statusChatEnd' }]; -const Report = () => { - - const csvLink = useRef() - +const Report = () => { const { user: userA } = useContext(AuthContext); @@ -326,15 +234,12 @@ const Report = () => { const [pageNumber, setPageNumber] = useState(1); - const [users, dispatch] = useReducer(reducer, []); - //const [columns, setColums] = useState([]) + const [users, dispatch] = useReducer(reducer, []); const [startDate, setDatePicker1] = useState(new Date()) const [endDate, setDatePicker2] = useState(new Date()) const [userId, setUser] = useState(null) - const [query, dispatchQ] = useReducer(reducerQ, []) - - const [dataCSV, setDataCSV] = useState([]) - const [isMount, setIsMount] = useState(true); + const [query, dispatchQ] = useReducer(reducerQ, []) + const [reportOption, setReport] = useState('1') const [reporList,] = useState(report) @@ -363,17 +268,13 @@ const Report = () => { const fetchUsers = async () => { try { - - //console.log('profile: ', profile) - + const { data } = await api.get("/users/", { params: { searchParam, pageNumber, profile }, }); - dispatch({ type: "LOAD_USERS", payload: data.users }); - //setHasMore(data.hasMore); - //setLoading(false); - + dispatch({ type: "LOAD_USERS", payload: data.users }); + //setLoading(false); } catch (err) { console.log(err); @@ -400,12 +301,8 @@ const Report = () => { if (reportOption === '1') { - const { data } = await api.get("/reports/", { params: { userId, startDate, endDate, pageNumber: pageNumberTickets }, }); - - // console.log('dataQuery: ', data) - // console.log('pageNumberTickets: ', pageNumberTickets) - - // dispatchQ({ type: "RESET" }) + const { data } = await api.get("/reports/", { params: { userId, startDate, endDate, pageNumber: pageNumberTickets }, }); + dispatchQ({ type: "LOAD_QUERY", payload: data.tickets }); setHasMore(data.hasMore); @@ -466,8 +363,7 @@ const Report = () => { const reportValue = (data) => { setReport(data) - - // console.log(' data: ', data) + } useEffect(() => { @@ -506,10 +402,7 @@ const Report = () => { else { setOnQueueProcessStatus('empty') } - - console.log('>>>>> queryOnqueue: ', queryOnQueue.data) - - + } catch (err) { console.log(err); @@ -521,16 +414,16 @@ const Report = () => { }, 500); return () => clearTimeout(delayDebounceFn); - }, []) + }, [ userA ]) const handleCSVDownload = async () => { - try { - + try { + let res = await apiBroker.get(`/reports/download/${csvFile}`, { responseType: 'blob' }); - if (res) { + if (res) { fileDownload(res.data, `${csvFile}`); setOnQueueProcessStatus('empty') @@ -555,7 +448,7 @@ const Report = () => { { app: { adminId: userA.id, - baseURL: process.env.REACT_APP_BACKEND_URL, + baseURL: process.env.REACT_APP_BACKEND_URL, frontURL: process.env.REACT_APP_FRONTEND_URL, identifier: 'csv' }, @@ -564,21 +457,11 @@ const Report = () => { startDate: startDate, endDate: endDate } - }); - - console.log('dataQuery messages: ', querySavedOnQueue.data.queueStatus) + }); const onQueueStatus = querySavedOnQueue.data.queueStatus - setOnQueueProcessStatus(onQueueStatus) - - // if (onQueueStatus.data.length > 0) { - - // let dataCSVFormat = queueStatus.data; - - - // setIsMount(false); - // } + setOnQueueProcessStatus(onQueueStatus) } catch (err) { console.log(err); @@ -589,22 +472,7 @@ const Report = () => { } - - - - - useEffect(() => { - - if (isMount) { - return; - } - - csvLink.current.link.click() - - }, [dataCSV, isMount, csvLink]); - - - + useEffect(() => { @@ -613,7 +481,7 @@ const Report = () => { socket.on("queryOnQueueStatus", (data) => { if (data.action === 'update') { - if (String(data.queryOnQueue.adminId) === String(userA.id)) { + if (String(data.queryOnQueue.adminId) === String(userA.id)) { setCsvFile(data.queryOnQueue.file) setOnQueueProcessStatus(data.queryOnQueue.queueStatus) @@ -624,8 +492,7 @@ const Report = () => { }) if (reportOption === '2') { - - // const socket = openSocket(process.env.REACT_APP_BACKEND_URL); + socket.on("onlineStatus", (data) => { @@ -633,9 +500,7 @@ const Report = () => { let dateToday = `${date[2]}-${date[1]}-${date[0]}` if (data.action === "logout" || (data.action === "update" && - ((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) { - - //console.log('UPDATE FROM ONLINE/OFFLINE LOGED USERS: ', data.userOnlineTime, ' | data.action : ', data.action) + ((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) { dispatchQ({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime }); @@ -648,16 +513,11 @@ const Report = () => { socket.on("user", (data) => { - if (data.action === "delete") { - // console.log(' entrou no delete user: ', data) + if (data.action === "delete") { dispatch({ type: "DELETE_USER", payload: +data.userId }); } - }); - - - // return () => { - // socket.disconnect(); - // }; + }); + } else if (reportOption === "1") { @@ -670,30 +530,10 @@ const Report = () => { }; - }, [reportOption, startDate, endDate, userId]); + }, [reportOption, startDate, endDate, userId, userA]); + - - // const handleDeleteRows = (id) => { - - // let _data = [...dataRows]; - - // _data.forEach(rd => { - // _data = _data.filter(t => t.id !== id); - // }); - // setData(_data); - - // }; - - - useEffect(() => { - - //if (!loading) { - - - // setData(query.map(({ scheduleReminder, ...others }) => ( - // { ...others, 'scheduleReminder': `${others.statusChatEndId}` === '3' ? 'Agendamento' : 'Lembrete' } - // ))) - // } + useEffect(() => { setData(query.map((column) => { return { ...column } })) @@ -721,18 +561,12 @@ const Report = () => { if (!hasMore || loading) return; - const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; - - // console.log('scrollTop: ', scrollTop, - // ' | scrollHeight: ', scrollHeight, - // ' | clientHeight: ', clientHeight, - // ' | scrollHeight - (scrollTop + 1): ', scrollHeight - (scrollTop + 1)) + const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; if (scrollHeight - (scrollTop + 1) < clientHeight) { loadMore(); - - // e.currentTarget.scrollTo(0, 200); + } }; @@ -743,6 +577,7 @@ const Report = () => { return ( <> ); @@ -802,7 +637,7 @@ const Report = () => {
- {reportOption === '1' && + {reportOption === '1' &&
{renderSwitch(onQueueStatus)}
@@ -820,10 +655,7 @@ const Report = () => { - {reportOption === '1' && - - //
- //
+ {reportOption === '1' && <> @@ -893,8 +725,7 @@ const Report = () => { ] } - data={dataRows} - // icons={tableIcons} + data={dataRows} actions={[ (rowData) => { @@ -908,9 +739,7 @@ const Report = () => { icon: LogoutIcon, tooltip: 'deslogar', disable: false, - onClick: (event, rowData) => { - - // console.log(' ROW DATA INFO: ', rowData, ' | rowData: ', rowData.id) + onClick: (event, rowData) => { handleLogouOnlineUser(rowData.id) } } @@ -927,8 +756,7 @@ const Report = () => { selection: false, paging: false, padding: 'dense', - sorting: true, - //loadingType: 'linear', + sorting: true, searchFieldStyle: { width: 300, }, @@ -942,22 +770,7 @@ const Report = () => { rowStyle: { fontSize: 14, - } - - - // cellStyle: (rowData) => { - // return { - // fontSize: 12, - // color: "#fff", - - // }; - // } - - - - - - + } }} />