Finalização do relatorio carregado sob demanda

backend/src/controllers/ReportController.ts

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

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

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

backend/src/helpers/SchedulingNotifySendMessage.ts

@@ -13,6 +13,8 @@ const fastFolderSize = require('fast-folder-size')
 const { promisify } = require('util')
 const fs = require('fs')
 
+const { exec } = require("child_process");
+
 let scheduler_monitor: any;
 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
         const whatsapps = await ListWhatsAppsService();

backend/src/services/TicketServices/ShowTicketReport.ts

@@ -16,12 +16,31 @@ import { startOfDay, endOfDay, parseISO, getDate} from "date-fns";
 import { string } from "yup/lib/locale";
 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
-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 = {}
 
-  if(id=='0'){ 
+  if(userId=='0'){ 
     where_clause = {      
       createdAt: {
         [Op.gte]: startDate+' 00:00:00.000000',
@@ -31,7 +50,7 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
   }
   else{
     where_clause = {  
-      userid: id,    
+      userid: userId,    
       createdAt: {
         [Op.gte]: startDate+' 00:00:00.000000',
         [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 {count, rows: tickets} = await Ticket.findAndCountAll({  
-  const ticket = await Ticket.findAll({  
 
     where: where_clause ,
+    limit,
+    offset,
     //attributes: ['id', 'status', 'createdAt', 'updatedAt'],
 
     attributes: ['id', 'status', 'statusChatEnd', [Sequelize.fn("DATE_FORMAT",Sequelize.col("Ticket.createdAt"),"%d/%m/%Y %H:%i:%s"),"createdAt"], 
@@ -82,14 +104,20 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
       },
     ], 
 
+    order: [
+      ['id', 'ASC']
+    ]  
+   
   });  
 
+  const hasMore = count > offset + tickets.length;
  
-  if (!ticket) {
+  
+  if (!tickets) {
     throw new AppError("ERR_NO_TICKET_FOUND", 404);
   }
 
-  return ticket;
+  return {tickets, count, hasMore};
 }; 
 
 export default ShowTicketReport;

backend/src/services/WbotServices/wbotMessageListener.ts

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

frontend/src/components/MessagesList/index.js

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

frontend/src/components/Report/MTable/index.js

@@ -4,36 +4,76 @@ import MaterialTable from 'material-table';
 import Modal from '../Modal'
 import { render } from '@testing-library/react';
 
+import chat from '@material-ui/icons/Chat';
+
+// import Button from "@material-ui/core/Button"; 
+
 import React from 'react';
 
 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(({ user, ...others }) => ({ ...others, 'user': user ? user : { name: 'Aguardando atendente', email: '' } }));
 
   const columnsLoad = props.columns.map((column) => { return { ...column } });
  
+
   useEffect(() => {
 
     console.log(`You have clicked the button ${selectedRow} times`)
 
+    // console.log('TABLE REF: ', tableRef)
+
   }, [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 (
 
+    <>
+      {/* <Button onClick={handleTest}>Toggle</Button> */}
+
+      {/* <CircularProgress /> */}
+
       <MaterialTable
         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){
+          if (props.removeClickRow) {
             return
           }
 
@@ -56,23 +96,52 @@ const MTable = (props) => {
         }
         }
 
+
+        actions={[
+          (rowData) => {  
+
+            if(props.hasChild){
+              return {
+                icon: chat,
+                tooltip: `Ticket id ${rowData.id}`,
+                disable: false,
+                onClick: (event, rowData) => {
+   
+                  openInNewTab(`/tickets/${rowData.id}`) 
+  
+                }
+              }
+            } 
+          }
+        ]}
+
         options={{
           search: true,
           selection: false,
           paging: false,
           padding: 'dense',
+
+          exportButton: props.hasChild ? true : null,
+          exportAllData: true,
+
           sorting: true ? props.hasChild : false,
-        //loadingType: 'linear',
+          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,
@@ -80,6 +149,9 @@ const MTable = (props) => {
           })
         }}
       />
+    </>
+
+
   );
 
 };

frontend/src/components/TicketsList/index.js

@@ -286,6 +286,7 @@ const TicketsList = (props) => {
 	};
 
 	const handleScroll = e => { 
+
 		if (!hasMore || loading) return;
 
 		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; 

frontend/src/hooks/useWhatsApps/index.js

@@ -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") {
 		const whatsApp = action.payload;
 		const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
@@ -108,10 +121,6 @@ const useWhatsApps = () => {
 			}
 		}); 
 
-
-
-		//test del
-
 		socket.on("whatsappSessionMonit", data => {
 			if (data.action === "update") {
 
@@ -121,7 +130,7 @@ const useWhatsApps = () => {
 			}
 		}); 
 		 
-		//
+ 
 
 		return () => {
 			socket.disconnect();

frontend/src/pages/Connections/index.js

@@ -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 { format, parseISO } from "date-fns";
 
+import openSocket from "socket.io-client";
+
 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
 import {
@@ -111,6 +113,8 @@ const Connections = () => {
 	const [selectedWhatsApp, setSelectedWhatsApp] = useState(null);
 	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 (
 
 		<Can
@@ -355,7 +376,10 @@ const Connections = () => {
 					/>
 
 					<MainHeader>
+
+
 						<Title>{i18n.t("connections.title")}</Title>
+
 						<MainHeaderButtonsWrapper>
 							<Can
 								role={user.profile}
@@ -370,10 +394,51 @@ const Connections = () => {
 								)}
 							/>
 						</MainHeaderButtonsWrapper>
+
+
 					</MainHeader>
 
 
 					<Paper className={classes.mainPaper} variant="outlined">
+						<>
+
+							<Can
+								role={user.profile}
+								perform="space-disk-info:show"
+								yes={() => (
+									<>
+									<Table size="small">
+									<TableHead>
+										<TableRow>
+											<TableCell align="center">
+												Size
+											</TableCell>
+											<TableCell align="center">
+												Used
+											</TableCell>
+											<TableCell align="center">
+												Available
+											</TableCell>
+											<TableCell align="center">
+												Use%
+											</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>
+										</TableRow>
+									</TableBody>
+								</Table> 
+								<br />
+								</>
+								)}
+							/> 
+
 							<Table size="small">
 								<TableHead>
 									<TableRow>
@@ -557,6 +622,8 @@ const Connections = () => {
 									)}
 								</TableBody>
 							</Table>
+
+						</>
 					</Paper>
 				</MainContainer>
 			)}

frontend/src/pages/Contacts/index.js

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

frontend/src/pages/Report/index.js

@@ -18,8 +18,11 @@ import MaterialTable from 'material-table';
 
 import LogoutIcon from '@material-ui/icons/CancelOutlined';
 
+ 
+
 import { CSVLink } from "react-csv";
 
+// import CircularProgress from '@mui/material/CircularProgress';
 
 import openSocket from "socket.io-client";
 
@@ -117,7 +120,6 @@ const reducerQ = (state, action) => {
 
   if (action.type === 'LOAD_QUERY') {
 
-
     const queries = action.payload
     const newQueries = []
 
@@ -301,19 +303,26 @@ let columnsData = [
 
   { title: 'Criado', field: 'createdAt' },
   //{title: 'Atualizado', field: 'updatedAt'},
-  {title: 'Status de encerramento', field: 'statusChatEnd'}];
+  { title: 'Status de encerramento', field: 'statusChatEnd' }];
 
 
 const Report = () => {
 
   const csvLink = useRef()
 
+
   const { user: userA } = useContext(AuthContext);
 
   //-------- 
   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 [users, dispatch] = useReducer(reducer, []);
   //const [columns, setColums] = useState([]) 
@@ -336,7 +345,7 @@ const Report = () => {
   useEffect(() => {
     dispatch({ type: "RESET" });
     dispatchQ({ type: "RESET" })
-
+    setTicketsPageNumber(1)
     setPageNumber(1);
   }, [searchParam, profile]);
 
@@ -380,20 +389,24 @@ const Report = () => {
 
     const delayDebounceFn = setTimeout(() => {
 
+      setLoading(true);
       const fetchQueries = async () => {
         try {
 
           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') {
@@ -420,7 +433,7 @@ const Report = () => {
     }, 500);
     return () => clearTimeout(delayDebounceFn);
 
-  }, [userId, startDate, endDate, reportOption]);
+  }, [userId, startDate, endDate, reportOption, pageNumberTickets, totalCountTickets]);
 
 
   // Get from child 1
@@ -464,27 +477,15 @@ const Report = () => {
   }, [reportOption]) 
   
 
-  // useEffect(() => {
-
-  // console.log('>>>>>>>>>>>>>>>>>> New query: ', query)
-
-  // }, [query])
-
-
-
-  // test del  
-
   const handleCSVMessages = () => { 
 
-    // setLoading(true); 
-
     const fetchQueries = async () => {
 
       try {
 
         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) {
 
@@ -499,15 +500,10 @@ const Report = () => {
             }
           } 
 
-          //  console.log('dataCSVFormat: ', dataCSVFormat)
-
           setDataCSV(dataCSVFormat)
           setIsMount(false); 
-          // setDataCSV(dataQuery.data)
         } 
 
-        // setLoading(false);  
-
       } catch (err) {
         console.log(err);
       }
@@ -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) => {
@@ -625,6 +625,30 @@ const Report = () => {
   };
 
 
+  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);
+    }
+  };
+
+
   return (
 
     <Can
@@ -639,7 +663,7 @@ const Report = () => {
               return { 'value': obj.id, 'label': obj.name }
             })} /></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 sx={{ display: 'grid', gridColumn: '4 / 5', }}>
@@ -651,13 +675,15 @@ const Report = () => {
               {reportOption === '1' &&
 
                 <div>
-                  {/* <Button
+                  <Button style={{display: "none"}}
                     variant="contained" 
                     color="primary"
-                    onClick={(e) => handleCSVMessages()}
+                    onClick={(e) => {  
+                      handleCSVMessages()  
+                    }}
                   >
                     {"CSV ALL"}
-                  </Button> */}
+                  </Button>
 
                   <div>
                     <CSVLink
@@ -674,10 +700,6 @@ const Report = () => {
 
             </Item> 
 
-
-
-
-
           </Box>
 
           <Box sx={{
@@ -688,11 +710,22 @@ const Report = () => {
 
               {reportOption === '1' &&
 
+                // <div onScroll={handleScroll} style={{ height: 400, overflowY: "scroll" }}> 
+                // </div>  
+
+                <>
+
                   <MTable data={query}
                     columns={columnsData}
                     hasChild={true}
                     removeClickRow={false}
+
+                    handleScroll={handleScroll}
+
                     table_title={'Atendimento por atendentes'} />
+
+                </>
+
               }
               {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: 'Nome', field: 'name', cellStyle: {whiteSpace: 'nowrap'}, },
+                      { title: 'Nome', field: 'name', cellStyle: { whiteSpace: 'nowrap' }, },
 
                       {
                         title: 'Status', field: 'statusOnline.status',

frontend/src/rules.js

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