Implementação da remoção do agendamento/lembrete pelo socket

backend/src/controllers/SchedulingNotifyController.ts

@@ -1,6 +1,6 @@
 import { Request, Response } from "express";
 import AppError from "../errors/AppError";
-  
+import { getIO } from "../libs/socket"; 
 import DeleteSchedulingNotifyService from  "../services/SchedulingNotifyServices/DeleteSchedulingNotifyService";
 import ListSchedulingNotifyContactService from  "../services/SchedulingNotifyServices/ListSchedulingNotifyContactService";
 import CreateSchedulingNotifyService from  "../services/SchedulingNotifyServices/CreateSchedulingNotifyService";
@@ -52,7 +52,10 @@ export const createOrUpdateScheduleNotify = async (req: Request, res: Response):
       message: scheduleData.message  
     }
   )  
-   console.group(':::::::::::::::::: DATA schedulingNotifyCreate:\n',schedulingNotifyCreate) 
+   
+  // console.group(':::::::::::::::::: DATA schedulingNotifyCreate:\n',schedulingNotifyCreate)  
+  //  const io = getIO();   
+  //  io.emit("schedulingNotify", {action: "update", schedulingNotifyCreate });   
 
   return res.status(200).json(schedulingNotifyCreate);
 

backend/src/services/SchedulingNotifyServices/DeleteSchedulingNotifyService.ts

@@ -1,5 +1,6 @@
 import AppError from "../../errors/AppError";
 import SchedulingNotify from "../../models/SchedulingNotify";
+import { getIO } from "../../libs/socket";
 
 
 const DeleteSchedulingNotifyService = async (id: string | number): Promise<void> => {
@@ -9,9 +10,15 @@ const DeleteSchedulingNotifyService = async (id: string | number): Promise<void>
   
     if (!schedulingNotify) {
       throw new AppError("ERR_NO_SCHEDULING_NOTIFY_FOUND", 404);
+      return
     }
   
     await schedulingNotify.destroy();
+
+    const io = getIO();
+    io.emit("schedulingNotify", {action: "delete", schedulingNotifyId: id});  
+    
+    
   };
   
   export default DeleteSchedulingNotifyService;

backend/src/services/SchedulingNotifyServices/ListSchedulingNotifyContactService.ts

@@ -131,6 +131,8 @@ const ListSchedulingNotifyContactService = async (contactNumber: string = '', st
         
       ], 
 
+      order: [["id", "DESC"]]
+     
     });  
    
     

frontend/src/components/ChatEnd/ModalChatEnd/index.js

@@ -497,9 +497,9 @@ const handleChangeHourBefore = (event) => {
 
                           <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                             
-                            <Item><DatePicker func={datePickerValue} minDate={true} startEmpty={true} title={'Data do lembrete'}/></Item>
+                            <Item><DatePicker func={datePickerValue} minDate={true} startEmpty={true} title={'Data'}/></Item>
                             
-                            <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do lembrete'}/></Item>
+                            <Item><TimerPickerSelect func={timerPickerValue} title={'Hora'}/></Item>
                               
                           </Box>
 
@@ -530,9 +530,9 @@ const handleChangeHourBefore = (event) => {
 
                           <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                             
-                            <Item><DatePicker func={datePickerValue} minDate={true} startEmpty={true} title={'Data do lembrete'}/></Item>
+                            <Item><DatePicker func={datePickerValue} minDate={true} startEmpty={true} title={'Data'}/></Item>
                             
-                            <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do lembrete'}/></Item>
+                            <Item><TimerPickerSelect func={timerPickerValue} title={'Hora'}/></Item>
                               
                           </Box>
 
@@ -546,7 +546,7 @@ const handleChangeHourBefore = (event) => {
                                 id="outlined-select-currency"
                                 disabled={startDate.length>0 ? false : true}
                                 select
-                                label="Enviar mensagem para cliente"
+                                label="Enviar mensagem para o cliente"
                                 value={currencyHourBefore}
                                 size="small"
                                 onChange={handleChangeHourBefore} 
@@ -567,7 +567,7 @@ const handleChangeHourBefore = (event) => {
                                   aria-label="minimum height"
                                   minRows={3}  
                                   value={textArea1}
-                                  placeholder={'Mensagem de envio para cliente'}   
+                                  placeholder={'Mensagem de envio para o cliente'}   
                                   onChange={ handleChange}  
                                   style={{ width: '100%' }}
                               />

frontend/src/components/ModalUpdateScheduleReminder/index.js

@@ -485,12 +485,11 @@ const handleChangeHourBefore = (event) => {
                               display: 'grid',  
                             }}>
                             <Item>
-                                <span>Selecione uma opção para encerrar o Atendimento</span> 
                                 
                                 <SelectField func={textFieldSelect} 
                                 emptyField={false} 
                                 textBoxFieldSelected={`${props.rowData.statusChatEndId}`}
-                                header={'Opções de encerramento do atendimento'} 
+                                header={'Opções lembrete/agendamento'} 
                                 currencies={props.statusChatEnd.map((obj)=>{
                                           return {'value': obj.id, 'label': obj.name}
                                         })}/>
@@ -511,16 +510,16 @@ const handleChangeHourBefore = (event) => {
                             <Item>
                               <DatePicker 
                               func={datePickerValue} 
-                              minDate={false}  
+                              minDate={true}  
                               schedulingDate={props.rowData.schedulingDate} 
-                              title={'Data do lembrete'}/>
+                              title={'Data'}/>
                             </Item>
                             
                             <Item>
                               <TimerPickerSelect 
                               func={timerPickerValue} 
                               schedulingDate={props.rowData.schedulingDate} 
-                              title={'Hora do lembrete'}/>  
+                              title={'Hora'}/>  
                             </Item>
                               
                           </Box>
@@ -556,7 +555,7 @@ const handleChangeHourBefore = (event) => {
                             <Item>
                                 <DatePicker 
                                 func={datePickerValue} 
-                                minDate={false}  
+                                minDate={true}  
                                 schedulingDate={props.rowData.schedulingDate} 
                                 title={'Data do lembrete'}/>
                               </Item>

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

@@ -67,6 +67,13 @@ const MTable = (props) => {
           width: 300,
         },
 
+        pageSize: 20,
+        headerStyle: {
+          position: "sticky",
+          top: "0"
+        },
+        maxBodyHeight: "400px",
+
         rowStyle: rowData => ({
           fontSize: 12,
           backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'

frontend/src/pages/SchedulesReminder/index.js

@@ -29,6 +29,8 @@ import { render } from '@testing-library/react';
 // import Modal from "../../../..ChatEnd/ModalChatEnd";  
 import Modal from "../../components/ModalUpdateScheduleReminder"; 
 
+import openSocket from "socket.io-client";
+
 
 import { 
   IconButton, 
@@ -71,16 +73,46 @@ const reducerQ = (state, action) =>{
     return [...state, ...newQueries]
   }
 
-  if (action.type === "DELETE_SCHEDULE") {
+
+
+  // if (action.type === "UPDATE_SCHEDULING") {
+
+  //   const scheduling = action.payload;
+  //   const schedulingIndex = state.findIndex((u) => u.id === +scheduling.id);
+
+  //   console.log('**************** UPDATE_SCHEDULING scheduleIndex: ', schedulingIndex)
+
+  //   if (schedulingIndex !== -1) {
+  //     state[schedulingIndex] = scheduling;
+  //     return [...state];
+  //   } else {
+  //     return [scheduling, ...state];
+  //   }
+  // }
+
+  if (action.type === "DELETE_SCHEDULING") { 
+ 
     const scheduleId = action.payload;
 
-    const scheduleIndex = state.findIndex((q) => q.id === scheduleId);
+    const scheduleIndex = state.findIndex((u) => u.id === scheduleId);
+    console.log('**************** scheduleIndex: ', scheduleIndex)
     if (scheduleIndex !== -1) {
       state.splice(scheduleIndex, 1);
     }
     return [...state];  
+
   }
 
+  // if (action.type === "DELETE_QUEUE") {
+  //   const queueId = action.payload;
+  //   const queueIndex = state.findIndex((q) => q.id === queueId);
+  //   if (queueIndex !== -1) {
+  //     state.splice(queueIndex, 1);
+  //   }
+  //   return [...state];
+  // }
+
+   
   
   if (action.type === "RESET") {
     return [];
@@ -191,6 +223,42 @@ const SchedulesReminder = () => {
   const [statusEndChat, setStatusEndChat] = useState(null)
 
 
+
+
+  useEffect(() => {
+
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);    
+
+    socket.on("schedulingNotify", (data) => {
+
+      console.log('SOCKET IO')
+
+      setLoading(true); 
+
+      // if (data.action === "update" || data.action === "create") {
+
+      //   console.log('UPDATE_SCHEDULING: ', data.schedulingNotifyCreate)
+
+      //  // dispatchQ({ type: "UPDATE_SCHEDULING", payload: data.schedulingNotifyCreate });
+      // }
+
+      if (data.action === "delete") {
+        console.log('DELETE_SCHEDULING id: ', data.schedulingNotifyId)
+        dispatchQ({ type: "DELETE_SCHEDULING", payload: +data.schedulingNotifyId });
+        //handleDeleteRows(data.schedulingNotifyId) 
+      }
+
+      setLoading(false);
+
+
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+ 
   useEffect(() => {
     //  dispatch({ type: "RESET" });
     dispatchQ({ type: "RESET" })
@@ -215,7 +283,8 @@ const SchedulesReminder = () => {
 
           console.log(':::::::::::::: statusChatEndLoad: ', statusChatEndLoad.data)
  
-          setStatusEndChat(statusChatEndLoad.data)
+
+          setStatusEndChat(statusChatEndLoad.data.filter(status => (status.id == '2' || status.id == '3')))
           //setHasMore(data.hasMore);
           // setLoading(false);
         } catch (err) {
@@ -264,13 +333,13 @@ const SchedulesReminder = () => {
     if(!loading){
       console.log('carregando table...') 
       
-      const dataLoad = query.map(({ scheduleReminder, ...others }) => (
+      // const dataLoad = query.map(({ scheduleReminder, ...others }) => (
       
-        { ...others, 'scheduleReminder': others.statusChatEndId == '3' ? 'Agendamento' : 'Lembrete' }
+      //   { ...others, 'scheduleReminder': others.statusChatEndId == '3' ? 'Agendamento' : 'Lembrete' }
         
-        ));
+      //   ));
 
-        console.log('NEW DATA: ', dataLoad)
+      //   console.log('NEW DATA: ', dataLoad)
 
       setData(query.map(({ scheduleReminder, ...others }) => (
         { ...others, 'scheduleReminder': others.statusChatEndId == '3' ? 'Agendamento' : 'Lembrete' }
@@ -333,7 +402,7 @@ const handleDeleteSchedule = async (scheduleId) => {
   try {
     await api.delete(`/schedule/${scheduleId}`);
     toast.success(("Lembrete/Agendamento deletado com sucesso!"));   
-    handleDeleteRows(scheduleId) 
+    //handleDeleteRows(scheduleId) 
   } catch (err) {
     toastError(err);
   }
@@ -519,6 +588,13 @@ const handleModal =  (rowData) => {
                     width: 300,
                   },
 
+                  pageSize: 20,
+                  headerStyle: {
+                    position: "sticky",
+                    top: "0"
+                  },
+                  maxBodyHeight: "400px",
+
                   rowStyle: {
                     fontSize: 12,
                   }