adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Finalização do relatorio carregado sob demanda

pull/18/head
adriano 2022-07-28 14:55:23 -03:00
parent 75fd79fc8d
commit ffcefe8f12
14 changed files with 588 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
backend/src/controllers/ReportController.ts
View File

@ -24,6 +24,7 @@ type IndexQuery = {
userId: string; userId: string;
startDate: string; startDate: string;
endDate: string; endDate: string;
pageNumber: string;
}; };
@ -33,13 +34,17 @@ export const reportUserByDateStartDateEnd = async (req: Request, res: Response):
throw new AppError("ERR_NO_PERMISSION", 403); throw new AppError("ERR_NO_PERMISSION", 403);
} }
const { userId, startDate, endDate } = req.query as IndexQuery const { userId, startDate, endDate, pageNumber } = req.query as IndexQuery
console.log('PAGE NUMBER: ', pageNumber)
const data_query = await ShowTicketReport(userId, startDate, endDate); const { tickets, count, hasMore } = await ShowTicketReport({userId, startDate, endDate, pageNumber});
return res.status(200).json(data_query); // return res.status(200).json(data_query);
return res.status(200).json({ tickets, count, hasMore });
}; };

2
backend/src/database/seeds/20220221193811-create-scheduling-data.ts
View File

@ -6,7 +6,7 @@ module.exports = {
"StatusChatEnds", "StatusChatEnds",
[ [
{ {
name: "SEM RETORNO DO CLIENTE", name: "FINALIZADO",
createdAt: new Date(), createdAt: new Date(),
updatedAt: new Date() updatedAt: new Date()
}, },

31
backend/src/helpers/SchedulingNotifySendMessage.ts
View File

@ -13,6 +13,8 @@ const fastFolderSize = require('fast-folder-size')
const { promisify } = require('util') const { promisify } = require('util')
const fs = require('fs') const fs = require('fs')
const { exec } = require("child_process");
let scheduler_monitor: any; let scheduler_monitor: any;
let timeInterval = 5 let timeInterval = 5
@ -53,6 +55,35 @@ const monitor = async () => {
} }
exec("df -h /", (error: any, stdout: any, stderr: any) => {
if (error) {
console.log(`exec error: ${error.message}`);
return;
}
if (stderr) {
console.log(`exec stderr: ${stderr}`);
return;
}
stdout = stdout.split(/\r?\n/)
stdout = stdout[1].trim().split(/\s+/)
// DISK SPACE MONITORING
const io = getIO();
io.emit("diskSpaceMonit", {
action: "update",
diskSpace: {
size: stdout[1],
used: stdout[2],
available: stdout[3],
use: stdout[4]
}
});
});
// WHATS SESSION SIZE MONITORING // WHATS SESSION SIZE MONITORING
const whatsapps = await ListWhatsAppsService(); const whatsapps = await ListWhatsAppsService();

42
backend/src/services/TicketServices/ShowTicketReport.ts
View File

@ -16,12 +16,31 @@ import { startOfDay, endOfDay, parseISO, getDate} from "date-fns";
import { string } from "yup/lib/locale"; import { string } from "yup/lib/locale";
import Whatsapp from "../../models/Whatsapp"; import Whatsapp from "../../models/Whatsapp";
interface Request {
userId: string | number;
startDate: string;
endDate: string;
pageNumber?: string;
}
interface Response {
tickets: Ticket[];
count: number;
hasMore: boolean;
}
//Report by user, startDate, endDate //Report by user, startDate, endDate
const ShowTicketReport = async (id: string | number, startDate: string, endDate: string): Promise<Ticket[]> => { const ShowTicketReport = async ({
userId,
startDate,
endDate,
pageNumber = "1"
}: Request): Promise<Response> => {
let where_clause = {} let where_clause = {}
if(id=='0'){ if(userId=='0'){
where_clause = { where_clause = {
createdAt: { createdAt: {
[Op.gte]: startDate+' 00:00:00.000000', [Op.gte]: startDate+' 00:00:00.000000',
@ -31,7 +50,7 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
} }
else{ else{
where_clause = { where_clause = {
userid: id, userid: userId,
createdAt: { createdAt: {
[Op.gte]: startDate+' 00:00:00.000000', [Op.gte]: startDate+' 00:00:00.000000',
[Op.lte]: endDate +' 23:59:59.999999' [Op.lte]: endDate +' 23:59:59.999999'
@ -40,11 +59,14 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
} }
const limit = 40;
const offset = limit * (+pageNumber - 1);
const ticket = await Ticket.findAll({ const {count, rows: tickets} = await Ticket.findAndCountAll({
where: where_clause , where: where_clause ,
limit,
offset,
//attributes: ['id', 'status', 'createdAt', 'updatedAt'], //attributes: ['id', 'status', 'createdAt', 'updatedAt'],
attributes: ['id', 'status', 'statusChatEnd', [Sequelize.fn("DATE_FORMAT",Sequelize.col("Ticket.createdAt"),"%d/%m/%Y %H:%i:%s"),"createdAt"], attributes: ['id', 'status', 'statusChatEnd', [Sequelize.fn("DATE_FORMAT",Sequelize.col("Ticket.createdAt"),"%d/%m/%Y %H:%i:%s"),"createdAt"],
@ -81,15 +103,21 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
attributes: ['name'] attributes: ['name']
}, },
], ],
order: [
['id', 'ASC']
]
}); });
const hasMore = count > offset + tickets.length;
if (!ticket) { if (!tickets) {
throw new AppError("ERR_NO_TICKET_FOUND", 404); throw new AppError("ERR_NO_TICKET_FOUND", 404);
} }
return ticket; return {tickets, count, hasMore};
}; };
export default ShowTicketReport; export default ShowTicketReport;

1
backend/src/services/WbotServices/wbotMessageListener.ts
View File

@ -825,6 +825,7 @@ const handleMsgAck = async (msg: WbotMessage, ack: MessageAck) => {
action: "update", action: "update",
message: messageToUpdate message: messageToUpdate
}); });
} catch (err) { } catch (err) {
Sentry.captureException(err); Sentry.captureException(err);
logger.error(`Error handling message ack. Err: ${err}`); logger.error(`Error handling message ack. Err: ${err}`);

8
frontend/src/components/MessagesList/index.js
View File

@ -362,15 +362,17 @@ const MessagesList = ({ ticketId, isGroup }) => {
socket.on("connect", () => socket.emit("joinChatBox", ticketId)); socket.on("connect", () => socket.emit("joinChatBox", ticketId));
socket.on("appMessage", (data) => { socket.on("appMessage", (data) => {
if (data.action === "create") { if (data.action === "create") {
dispatch({ type: "ADD_MESSAGE", payload: data.message }); dispatch({ type: "ADD_MESSAGE", payload: data.message });
// console.log('* NOVA MENSAGEM CAP: ', data.message)
scrollToBottom(); scrollToBottom();
} }
if (data.action === "update") { if (data.action === "update") {
console.log('2 THIS IS THE DATA: ', data)
dispatch({ type: "UPDATE_MESSAGE", payload: data.message }); dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
} }
}); });

170
frontend/src/components/Report/MTable/index.js
View File

@ -4,82 +4,154 @@ import MaterialTable from 'material-table';
import Modal from '../Modal' import Modal from '../Modal'
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import chat from '@material-ui/icons/Chat';
// import Button from "@material-ui/core/Button";
import React from 'react'; import React from 'react';
const MTable = (props) => { const MTable = (props) => {
const [selectedRow, setSelectedRow] = useState(null); const tableRef = React.useRef();
const openInNewTab = url => {
window.open(url, '_blank', 'noopener,noreferrer');
};
const [selectedRow, setSelectedRow] = useState(null);
//const dataLoad = props.data.map((dt) => { return { ...dt }}); //const dataLoad = props.data.map((dt) => { return { ...dt }});
const dataLoad = props.data.map(({ user, ...others }) => ({ ...others, 'user': user ? user : { name: 'Aguardando atendente', email: '' } })); const dataLoad = props.data.map(({ user, ...others }) => ({ ...others, 'user': user ? user : { name: 'Aguardando atendente', email: '' } }));
const columnsLoad = props.columns.map((column) => { return { ...column } }); 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(() => {
if (!tableRef.current) return
const element = tableRef.current.tableContainerDiv.current;
element.addEventListener('scroll', props.handleScroll);
return () => {
element.removeEventListener('scroll', props.handleScroll);
};
}, [props]);
return ( return (
<MaterialTable <>
title={props.table_title} {/* <Button onClick={handleTest}>Toggle</Button> */}
columns={columnsLoad}
data={dataLoad}
maxWidth={true} {/* <CircularProgress /> */}
onRowClick={(evt, selectedRow) => {
if(props.removeClickRow){ <MaterialTable
return title={props.table_title}
columns={columnsLoad}
data={dataLoad}
maxWidth={true}
tableRef={tableRef}
localization={{ header: { actions: props.hasChild ? 'Ticket' : null },}}
onRowClick={(evt, selectedRow) => {
if (props.removeClickRow) {
return
}
console.log(selectedRow.tableData.id);
console.log(selectedRow);
console.log(selectedRow.messages);
setSelectedRow(selectedRow.tableData.id)
if (props.hasChild) {
render(<Modal data={selectedRow.messages}
hasChild={false}
modal_header={'Chat do atendimento pelo Whatsapp'}
user={selectedRow.user.name}
clientContactNumber={selectedRow.contact.number} />)
}
console.log('props.hasChild: ', props.hasChild)
//evt.stopPropagation()
} }
console.log(selectedRow.tableData.id);
console.log(selectedRow);
console.log(selectedRow.messages);
setSelectedRow(selectedRow.tableData.id)
if (props.hasChild) {
render(<Modal data={selectedRow.messages}
hasChild={false}
modal_header={'Chat do atendimento pelo Whatsapp'}
user={selectedRow.user.name}
clientContactNumber={selectedRow.contact.number} />)
} }
console.log('props.hasChild: ', props.hasChild)
//evt.stopPropagation() actions={[
} (rowData) => {
}
options={{ if(props.hasChild){
search: true, return {
selection: false, icon: chat,
paging: false, tooltip: `Ticket id ${rowData.id}`,
padding: 'dense', disable: false,
sorting: true ? props.hasChild : false, onClick: (event, rowData) => {
//loadingType: 'linear',
searchFieldStyle: { openInNewTab(`/tickets/${rowData.id}`)
width: 300,
}, }
}
}
}
]}
options={{
search: true,
selection: false,
paging: false,
padding: 'dense',
exportButton: props.hasChild ? true : null,
exportAllData: true,
sorting: true ? props.hasChild : false,
loadingType: 'circular',
searchFieldStyle: {
width: 300,
},
pageSize: 20,
headerStyle: {
position: "sticky",
top: "0"
},
maxBodyHeight: "400px",
// minBodyHeight: "85vh", //FIXME to calculate dynamic height, needed for correct scroll position identification
// maxBodyHeight: "85vh",
rowStyle: rowData => ({
fontSize: 12,
backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
})
}}
/>
</>
pageSize: 20,
headerStyle: {
position: "sticky",
top: "0"
},
maxBodyHeight: "400px",
rowStyle: rowData => ({
fontSize: 12,
backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
})
}}
/>
); );
}; };

2
frontend/src/components/TicketActionButtons/index.js
View File

@ -35,7 +35,7 @@ const TicketActionButtons = ({ ticket, statusChatEnd }) => {
const ticketOptionsMenuOpen = Boolean(anchorEl); const ticketOptionsMenuOpen = Boolean(anchorEl);
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
const handleOpenTicketOptionsMenu = e => { const handleOpenTicketOptionsMenu = e => {
setAnchorEl(e.currentTarget); setAnchorEl(e.currentTarget);
}; };

7
frontend/src/components/TicketsList/index.js
View File

@ -235,7 +235,7 @@ const TicketsList = (props) => {
}); });
} }
if (data.action === "update" && notBelongsToUserQueues(data.ticket)) { if (data.action === "update" && notBelongsToUserQueues(data.ticket)) {
dispatch({ type: "DELETE_TICKET", payload: data.ticket.id }); dispatch({ type: "DELETE_TICKET", payload: data.ticket.id });
} }
@ -285,10 +285,11 @@ const TicketsList = (props) => {
setPageNumber(prevState => prevState + 1); setPageNumber(prevState => prevState + 1);
}; };
const handleScroll = e => { const handleScroll = e => {
if (!hasMore || loading) return; if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
if (scrollHeight - (scrollTop + 100) < clientHeight) { if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore(); loadMore();

25
frontend/src/hooks/useWhatsApps/index.js
View File

@ -39,6 +39,19 @@ const reducer = (state, action) => {
} }
// if (action.type === "UPDATE_DISK_SPACE_MONIT") {
// const whatsApp = action.payload;
// const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
// if (whatsAppIndex !== -1) {
// state[whatsAppIndex].sessionSize = whatsApp.sessionSize;
// return [...state];
// } else {
// return [whatsApp, ...state];
// }
// }
if (action.type === "UPDATE_WHATSAPPS_SESSION_MONIT") { if (action.type === "UPDATE_WHATSAPPS_SESSION_MONIT") {
const whatsApp = action.payload; const whatsApp = action.payload;
const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id); const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
@ -106,11 +119,7 @@ const useWhatsApps = () => {
dispatch({ type: "UPDATE_SESSION", payload: data.session }); dispatch({ type: "UPDATE_SESSION", payload: data.session });
} }
}); });
//test del
socket.on("whatsappSessionMonit", data => { socket.on("whatsappSessionMonit", data => {
if (data.action === "update") { if (data.action === "update") {
@ -119,9 +128,9 @@ const useWhatsApps = () => {
dispatch({ type: "UPDATE_WHATSAPPS_SESSION_MONIT", payload: data.whatsappSessionSize }); dispatch({ type: "UPDATE_WHATSAPPS_SESSION_MONIT", payload: data.whatsappSessionSize });
} }
}); });
//
return () => { return () => {
socket.disconnect(); socket.disconnect();

429
frontend/src/pages/Connections/index.js
View File

@ -1,7 +1,9 @@
import React, { useState, useCallback, useContext } from "react"; import React, { useState, useCallback, useEffect, useContext } from "react";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { format, parseISO } from "date-fns"; import { format, parseISO } from "date-fns";
import openSocket from "socket.io-client";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors"; import { green } from "@material-ui/core/colors";
import { import {
@ -111,6 +113,8 @@ const Connections = () => {
const [selectedWhatsApp, setSelectedWhatsApp] = useState(null); const [selectedWhatsApp, setSelectedWhatsApp] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false); const [confirmModalOpen, setConfirmModalOpen] = useState(false);
const [diskSpaceInfo, setDiskSpaceInfo] = useState({});
@ -324,6 +328,23 @@ const Connections = () => {
); );
}; };
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("diskSpaceMonit", data => {
if (data.action === "update") {
setDiskSpaceInfo(data.diskSpace)
}
});
return () => {
socket.disconnect();
};
}, []);
return ( return (
<Can <Can
@ -355,7 +376,10 @@ const Connections = () => {
/> />
<MainHeader> <MainHeader>
<Title>{i18n.t("connections.title")}</Title> <Title>{i18n.t("connections.title")}</Title>
<MainHeaderButtonsWrapper> <MainHeaderButtonsWrapper>
<Can <Can
role={user.profile} role={user.profile}
@ -370,193 +394,236 @@ const Connections = () => {
)} )}
/> />
</MainHeaderButtonsWrapper> </MainHeaderButtonsWrapper>
</MainHeader> </MainHeader>
<Paper className={classes.mainPaper} variant="outlined"> <Paper className={classes.mainPaper} variant="outlined">
<Table size="small"> <>
<TableHead>
<TableRow>
<TableCell align="center"> <Can
{i18n.t("connections.table.name")} role={user.profile}
</TableCell> perform="space-disk-info:show"
yes={() => (
<TableCell align="center">
{i18n.t("connections.table.status")}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{i18n.t("connections.table.session")}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Restore
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Session MB
</TableCell>
)}
/>
<TableCell align="center">
{i18n.t("connections.table.lastUpdate")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.default")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<> <>
{whatsApps?.length > 0 && <Table size="small">
whatsApps.map(whatsApp => ( <TableHead>
<TableRow key={whatsApp.id}> <TableRow>
<TableCell align="center">{whatsApp.name}</TableCell> <TableCell align="center">
Size
<TableCell align="center"> </TableCell>
{renderStatusToolTips(whatsApp)} <TableCell align="center">
</TableCell> Used
</TableCell>
<Can <TableCell align="center">
role={user.profile} Available
perform="connection-button:show" </TableCell>
yes={() => ( <TableCell align="center">
<TableCell align="center"> Use%
{renderActionButtons(whatsApp)} </TableCell>
</TableCell> </TableRow>
)} </TableHead>
/>
<TableBody>
<TableRow>
<TableCell align="center">{diskSpaceInfo.size}</TableCell>
<TableCell align="center">{diskSpaceInfo.used}</TableCell>
<TableCell align="center">{diskSpaceInfo.available}</TableCell>
<TableCell align="center">{diskSpaceInfo.use}</TableCell>
<Can </TableRow>
role={user.profile} </TableBody>
perform="connection-button:show" </Table>
yes={() => ( <br />
<TableCell align="center"> </>
<Button
size="small"
variant="contained"
color="primary"
onClick={() => handleRestartWhatsAppSession(whatsApp.id)}
>
Restore
</Button>
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<CustomToolTip
title={'Informação da sessão em Megabytes'}
content={'Tamanho do diretorio da sessão atualizado a cada 5 segundos'}
>
<div>{whatsApp.sessionSize}</div>
</CustomToolTip>
</TableCell>
)}
/>
<TableCell align="center">
{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
</TableCell>
<TableCell align="center">
{whatsApp.isDefault && (
<div className={classes.customTableCell}>
<CheckCircle style={{ color: green[500] }} />
</div>
)}
</TableCell>
<TableCell align="center">
<Can
role={user.profile}
perform="show-icon-edit-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
)}
/>
<Can
role={user.profile}
perform="btn-remove-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={e => {
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
)}
/>
</TableCell>
</TableRow>
))}
</>
)} )}
</TableBody> />
</Table>
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
{i18n.t("connections.table.name")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.status")}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{i18n.t("connections.table.session")}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Restore
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Session MB
</TableCell>
)}
/>
<TableCell align="center">
{i18n.t("connections.table.lastUpdate")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.default")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<>
{whatsApps?.length > 0 &&
whatsApps.map(whatsApp => (
<TableRow key={whatsApp.id}>
<TableCell align="center">{whatsApp.name}</TableCell>
<TableCell align="center">
{renderStatusToolTips(whatsApp)}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{renderActionButtons(whatsApp)}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<Button
size="small"
variant="contained"
color="primary"
onClick={() => handleRestartWhatsAppSession(whatsApp.id)}
>
Restore
</Button>
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<CustomToolTip
title={'Informação da sessão em Megabytes'}
content={'Tamanho do diretorio da sessão atualizado a cada 5 segundos'}
>
<div>{whatsApp.sessionSize}</div>
</CustomToolTip>
</TableCell>
)}
/>
<TableCell align="center">
{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
</TableCell>
<TableCell align="center">
{whatsApp.isDefault && (
<div className={classes.customTableCell}>
<CheckCircle style={{ color: green[500] }} />
</div>
)}
</TableCell>
<TableCell align="center">
<Can
role={user.profile}
perform="show-icon-edit-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
)}
/>
<Can
role={user.profile}
perform="btn-remove-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={e => {
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
)}
/>
</TableCell>
</TableRow>
))}
</>
)}
</TableBody>
</Table>
</>
</Paper> </Paper>
</MainContainer> </MainContainer>
)} )}

9
frontend/src/pages/Contacts/index.js
View File

@ -36,17 +36,23 @@ import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can"; import { Can } from "../../components/Can";
const reducer = (state, action) => { const reducer = (state, action) => {
if (action.type === "LOAD_CONTACTS") { if (action.type === "LOAD_CONTACTS") {
const contacts = action.payload; const contacts = action.payload;
const newContacts = []; const newContacts = [];
contacts.forEach((contact) => { contacts.forEach((contact) => {
const contactIndex = state.findIndex((c) => c.id === contact.id); const contactIndex = state.findIndex((c) => c.id === contact.id);
if (contactIndex !== -1) { if (contactIndex !== -1) {
state[contactIndex] = contact; state[contactIndex] = contact;
} else { } else {
newContacts.push(contact); newContacts.push(contact);
} }
}); });
return [...state, ...newContacts]; return [...state, ...newContacts];
@ -210,6 +216,9 @@ const Contacts = () => {
const handleScroll = (e) => { const handleScroll = (e) => {
if (!hasMore || loading) return; if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
// console.log('scrollTop: ', scrollTop, ' | scrollHeight: ', scrollHeight, ' | clientHeight: ', clientHeight)
if (scrollHeight - (scrollTop + 100) < clientHeight) { if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore(); loadMore();
} }

177
frontend/src/pages/Report/index.js
View File

@ -18,10 +18,13 @@ import MaterialTable from 'material-table';
import LogoutIcon from '@material-ui/icons/CancelOutlined'; import LogoutIcon from '@material-ui/icons/CancelOutlined';
import { CSVLink } from "react-csv"; import { CSVLink } from "react-csv";
// import CircularProgress from '@mui/material/CircularProgress';
import openSocket from "socket.io-client"; import openSocket from "socket.io-client";
const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }] const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }]
@ -77,7 +80,7 @@ let columns = [
}, },
{ {
key: 'ticket.statusChatEnd', key: 'ticket.statusChatEnd',
label: 'Status de encerramento', label: 'Status de encerramento',
} }
] ]
@ -104,7 +107,7 @@ const reducerQ = (state, action) => {
const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`);
// console.log('>>>>>>>>>>>>>>>>>>>>> userIndex: ', userIndex) // console.log('>>>>>>>>>>>>>>>>>>>>> userIndex: ', userIndex)
if (userIndex !== -1) { if (userIndex !== -1) {
state.splice(userIndex, 1); state.splice(userIndex, 1);
@ -117,7 +120,6 @@ const reducerQ = (state, action) => {
if (action.type === 'LOAD_QUERY') { if (action.type === 'LOAD_QUERY') {
const queries = action.payload const queries = action.payload
const newQueries = [] const newQueries = []
@ -143,7 +145,7 @@ const reducerQ = (state, action) => {
let onlineUser = action.payload let onlineUser = action.payload
let index = -1 let index = -1
// console.log('sssssssssstate: ', state, ' | ONLINE USERS: onlineUser.userId ', onlineUser.userId) // console.log('sssssssssstate: ', state, ' | ONLINE USERS: onlineUser.userId ', onlineUser.userId)
if (onlineUser.sumOpen || onlineUser.sumClosed) { if (onlineUser.sumOpen || onlineUser.sumClosed) {
index = state.findIndex((e) => ((onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId))) index = state.findIndex((e) => ((onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId)))
@ -152,13 +154,13 @@ const reducerQ = (state, action) => {
index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`) index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`)
} }
//console.log(' *********************** index: ', index) //console.log(' *********************** index: ', index)
if (index !== -1) { if (index !== -1) {
// console.log('ENTROU NO INDEX') // console.log('ENTROU NO INDEX')
if (!("statusOnline" in state[index])) { if (!("statusOnline" in state[index])) {
@ -183,10 +185,10 @@ const reducerQ = (state, action) => {
if (onlineUser.sumOpen) { if (onlineUser.sumOpen) {
if ("sumOpen" in state[index]) { if ("sumOpen" in state[index]) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count) // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count)
state[index].sumOpen['count'] = onlineUser.sumOpen.count state[index].sumOpen['count'] = onlineUser.sumOpen.count
} else if (!("sumOpen" in state[index])) { } else if (!("sumOpen" in state[index])) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
state[index].sumOpen = onlineUser.sumOpen state[index].sumOpen = onlineUser.sumOpen
} }
@ -195,10 +197,10 @@ const reducerQ = (state, action) => {
if (onlineUser.sumClosed) { if (onlineUser.sumClosed) {
if ("sumClosed" in state[index]) { if ("sumClosed" in state[index]) {
// console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count) // console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count)
state[index].sumClosed['count'] = onlineUser.sumClosed.count state[index].sumClosed['count'] = onlineUser.sumClosed.count
} else if (!("sumClosed" in state[index])) { } else if (!("sumClosed" in state[index])) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
state[index].sumClosed = onlineUser.sumClosed state[index].sumClosed = onlineUser.sumClosed
} }
@ -298,22 +300,29 @@ let columnsData = [
{ title: 'Assunto', field: 'queue.name' }, { title: 'Assunto', field: 'queue.name' },
{ title: 'Status', field: 'status' }, { title: 'Status', field: 'status' },
{ title: 'Criado', field: 'createdAt' }, { title: 'Criado', field: 'createdAt' },
//{title: 'Atualizado', field: 'updatedAt'}, //{title: 'Atualizado', field: 'updatedAt'},
{title: 'Status de encerramento', field: 'statusChatEnd'}]; { title: 'Status de encerramento', field: 'statusChatEnd' }];
const Report = () => { const Report = () => {
const csvLink = useRef() const csvLink = useRef()
const { user: userA } = useContext(AuthContext); const { user: userA } = useContext(AuthContext);
//-------- //--------
const [searchParam] = useState(""); const [searchParam] = useState("");
//const [loading, setLoading] = useState(false);
//const [hasMore, setHasMore] = useState(false); const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(false);
const [pageNumberTickets, setTicketsPageNumber] = useState(1);
const [totalCountTickets, setTotalCountTickets] = useState(0);
const [pageNumber, setPageNumber] = useState(1); const [pageNumber, setPageNumber] = useState(1);
const [users, dispatch] = useReducer(reducer, []); const [users, dispatch] = useReducer(reducer, []);
//const [columns, setColums] = useState([]) //const [columns, setColums] = useState([])
@ -329,14 +338,14 @@ const Report = () => {
const [reporList,] = useState(report) const [reporList,] = useState(report)
const [profile, setProfile] = useState('') const [profile, setProfile] = useState('')
const [dataRows, setData] = useState([]); const [dataRows, setData] = useState([]);
useEffect(() => { useEffect(() => {
dispatch({ type: "RESET" }); dispatch({ type: "RESET" });
dispatchQ({ type: "RESET" }) dispatchQ({ type: "RESET" })
setTicketsPageNumber(1)
setPageNumber(1); setPageNumber(1);
}, [searchParam, profile]); }, [searchParam, profile]);
@ -380,20 +389,24 @@ const Report = () => {
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
setLoading(true);
const fetchQueries = async () => { const fetchQueries = async () => {
try { try {
if (reportOption === '1') { if (reportOption === '1') {
const dataQuery = await api.get("/reports/", { params: { userId, startDate, endDate }, }); const { data } = await api.get("/reports/", { params: { userId, startDate, endDate, pageNumber: pageNumberTickets }, });
dispatchQ({ type: "RESET" })
dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data });
//setLoading(false); console.log('dataQuery: ', data)
console.log('pageNumberTickets: ', pageNumberTickets)
// console.log('dataQuery: ', dataQuery.data) // dispatchQ({ type: "RESET" })
dispatchQ({ type: "LOAD_QUERY", payload: data.tickets });
setHasMore(data.hasMore);
setTotalCountTickets(data.count)
setLoading(false);
// console.log()
} }
else if (reportOption === '2') { else if (reportOption === '2') {
@ -404,7 +417,7 @@ const Report = () => {
//setLoading(false); //setLoading(false);
// console.log('REPORT 2 dataQuery : ', dataQuery.data) // console.log('REPORT 2 dataQuery : ', dataQuery.data)
//console.log() //console.log()
@ -420,7 +433,7 @@ const Report = () => {
}, 500); }, 500);
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn);
}, [userId, startDate, endDate, reportOption]); }, [userId, startDate, endDate, reportOption, pageNumberTickets, totalCountTickets]);
// Get from child 1 // Get from child 1
@ -449,7 +462,7 @@ const Report = () => {
setReport(data) setReport(data)
// console.log(' data: ', data) // console.log(' data: ', data)
} }
useEffect(() => { useEffect(() => {
@ -461,22 +474,10 @@ const Report = () => {
setProfile('user') setProfile('user')
} }
}, [reportOption]) }, [reportOption])
const handleCSVMessages = () => {
// useEffect(() => {
// console.log('>>>>>>>>>>>>>>>>>> New query: ', query)
// }, [query])
// test del
const handleCSVMessages = () => {
// setLoading(true);
const fetchQueries = async () => { const fetchQueries = async () => {
@ -484,7 +485,7 @@ const Report = () => {
const dataQuery = await api.get("/reports/messages", { params: { userId, startDate, endDate }, }); const dataQuery = await api.get("/reports/messages", { params: { userId, startDate, endDate }, });
// console.log('dataQuery messages: ', dataQuery.data) console.log('dataQuery messages: ', dataQuery.data)
if (dataQuery.data.length > 0) { if (dataQuery.data.length > 0) {
@ -497,16 +498,11 @@ const Report = () => {
else { else {
dataCSVFormat[i].fromMe = 'Cliente' dataCSVFormat[i].fromMe = 'Cliente'
} }
} }
// console.log('dataCSVFormat: ', dataCSVFormat)
setDataCSV(dataCSVFormat) setDataCSV(dataCSVFormat)
setIsMount(false); setIsMount(false);
// setDataCSV(dataQuery.data) }
}
// setLoading(false);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
@ -548,8 +544,8 @@ const Report = () => {
let date = new Date().toLocaleDateString('pt-BR').split('/') let date = new Date().toLocaleDateString('pt-BR').split('/')
let dateToday = `${date[2]}-${date[1]}-${date[0]}` let dateToday = `${date[2]}-${date[1]}-${date[0]}`
// console.log('date: ', new Date(startDate).toLocaleDateString('pt-BR')) // console.log('date: ', new Date(startDate).toLocaleDateString('pt-BR'))
// console.log('date2: ', startDate) // console.log('date2: ', startDate)
if (data.action === "logout" || (data.action === "update" && if (data.action === "logout" || (data.action === "update" &&
@ -571,7 +567,7 @@ const Report = () => {
socket.on("user", (data) => { socket.on("user", (data) => {
if (data.action === "delete") { if (data.action === "delete") {
// console.log(' entrou no delete user: ', data) // console.log(' entrou no delete user: ', data)
dispatch({ type: "DELETE_USER", payload: +data.userId }); dispatch({ type: "DELETE_USER", payload: +data.userId });
} }
}); });
@ -581,9 +577,13 @@ const Report = () => {
}; };
} }
else if (reportOption === "1") {
dispatchQ({ type: "RESET" })
setTicketsPageNumber(1)
}
}, [reportOption, startDate, endDate]); }, [reportOption, startDate, endDate, userId]);
// const handleDeleteRows = (id) => { // const handleDeleteRows = (id) => {
@ -621,7 +621,31 @@ const Report = () => {
// toastError(err); // toastError(err);
} }
};
const loadMore = () => {
setTicketsPageNumber((prevState) => prevState + 1);
};
const handleScroll = (e) => {
if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
// console.log('scrollTop: ', scrollTop,
// ' | scrollHeight: ', scrollHeight,
// ' | clientHeight: ', clientHeight,
// ' | scrollHeight - (scrollTop + 1): ', scrollHeight - (scrollTop + 1))
if (scrollHeight - (scrollTop + 1) < clientHeight) {
loadMore();
// e.currentTarget.scrollTo(0, 200);
}
}; };
@ -639,7 +663,7 @@ const Report = () => {
return { 'value': obj.id, 'label': obj.name } return { 'value': obj.id, 'label': obj.name }
})} /></Item> })} /></Item>
<Item><DatePicker1 func={datePicker1Value} minDate={true} startEmpty={false} title={'Data inicio'} /></Item> <Item><DatePicker1 func={datePicker1Value} minDate={false} startEmpty={false} title={'Data inicio'} /></Item>
<Item><DatePicker2 func={datePicker2Value} minDate={false} startEmpty={false} title={'Data fim'} /></Item> <Item><DatePicker2 func={datePicker2Value} minDate={false} startEmpty={false} title={'Data fim'} /></Item>
<Item sx={{ display: 'grid', gridColumn: '4 / 5', }}> <Item sx={{ display: 'grid', gridColumn: '4 / 5', }}>
@ -650,14 +674,16 @@ const Report = () => {
{reportOption === '1' && {reportOption === '1' &&
<div> <div>
{/* <Button <Button style={{display: "none"}}
variant="contained" variant="contained"
color="primary" color="primary"
onClick={(e) => handleCSVMessages()} onClick={(e) => {
handleCSVMessages()
}}
> >
{"CSV ALL"} {"CSV ALL"}
</Button> */} </Button>
<div> <div>
<CSVLink <CSVLink
@ -672,11 +698,7 @@ const Report = () => {
} }
</Item> </Item>
</Box> </Box>
@ -688,11 +710,22 @@ const Report = () => {
{reportOption === '1' && {reportOption === '1' &&
<MTable data={query} // <div onScroll={handleScroll} style={{ height: 400, overflowY: "scroll" }}>
columns={columnsData} // </div>
hasChild={true}
removeClickRow={false} <>
table_title={'Atendimento por atendentes'} />
<MTable data={query}
columns={columnsData}
hasChild={true}
removeClickRow={false}
handleScroll={handleScroll}
table_title={'Atendimento por atendentes'} />
</>
} }
{reportOption === '2' && {reportOption === '2' &&
@ -711,7 +744,7 @@ const Report = () => {
[ [
// { title: 'Foto', field: 'ticket.contact.profilePicUrl', render: rowData => <img src={rowData['ticket.contact.profilePicUrl']} alt="imagem de perfil do whatsapp" style={{ width: 40, borderRadius: '50%' }} /> }, // { title: 'Foto', field: 'ticket.contact.profilePicUrl', render: rowData => <img src={rowData['ticket.contact.profilePicUrl']} alt="imagem de perfil do whatsapp" style={{ width: 40, borderRadius: '50%' }} /> },
{ title: 'Nome', field: 'name', cellStyle: {whiteSpace: 'nowrap'}, }, { title: 'Nome', field: 'name', cellStyle: { whiteSpace: 'nowrap' }, },
{ {
title: 'Status', field: 'statusOnline.status', title: 'Status', field: 'statusOnline.status',
@ -765,7 +798,7 @@ const Report = () => {
disable: false, disable: false,
onClick: (event, rowData) => { onClick: (event, rowData) => {
// console.log(' ROW DATA INFO: ', rowData, ' | rowData: ', rowData.id) // console.log(' ROW DATA INFO: ', rowData, ' | rowData: ', rowData.id)
handleLogouOnlineUser(rowData.id) handleLogouOnlineUser(rowData.id)
} }
} }

1
frontend/src/rules.js
View File

@ -29,6 +29,7 @@ const rules = {
"show-icon-add-queue", "show-icon-add-queue",
"show-icon-edit-queue", "show-icon-edit-queue",
"show-icon-delete-queue", "show-icon-delete-queue",
"space-disk-info:show",
"drawer-admin-items:view", "drawer-admin-items:view",