Corregação de bug no datepicker do modal de agendamento

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

@@ -16,13 +16,12 @@ import SelectField from "../../Report/SelectField";
 import DatePicker from '../../Report/DatePicker' 
 
 import TimerPickerSelect from '../TimerPickerSelect' 
-import TextArea1 from '../TextArea'  
+ 
 
 
 import TextareaAutosize from '@mui/material/TextareaAutosize'; 
 
-import { subHours, addHours } from "date-fns";
-import { LocalConvenienceStoreOutlined } from '@material-ui/icons';
+import { addHours } from "date-fns"; 
 
 const Item = (props) => {
  
@@ -59,28 +58,28 @@ Item.propTypes = {
  
 
 const Modal = (props) => {
+
+   
   const [open, setOpen] = useState(true);
   const [scroll, /*setScroll*/] = useState('body');
   const [scheduleId, setScheduling] = useState(null)  
   const [startDate, setDatePicker] = useState(new Date())  
   const [timerPicker, setTimerPicker] = useState(new Date()) 
   const [textArea1, setTextArea1] = useState()  
-  const [greetRemember, setGreet] = useState('')
  
 
   const [data] = useState(props.schedules) 
-  const [chatEnd, setChatEnd] = useState(false)
  
   const handleCancel = (event, reason) => {
 
     if (reason && reason === "backdropClick") 
         return;
  
-    setChatEnd(null)
     setOpen(false);
   };
 
  
+
   function greetMessageSchedule(scheduleDate){
     return  `podemos confirmar sua consulta agendada para hoje às ${scheduleDate}?`
   }
@@ -89,8 +88,31 @@ const Modal = (props) => {
     return  `${timer.getHours().toString().padStart(2, '0')}:${timer.getMinutes().toString().padStart(2, '0')}`
   }
 
-  const handleChatEnd = (event, reason) => { 
 
+  // Get from child 2
+const datePickerValue = (data) => { 
+  console.log('datePickerValue: ',(data));   
+  setDatePicker(data) 
+}
+
+// Get from child 3
+const timerPickerValue = (data) => { 
+  console.log('timerPickerValue: ',(data));   
+  setTimerPicker(data)
+}
+
+const dateCurrentFormated = () => { 
+
+  let date = new Date()
+  let day = date.getDate().toString().padStart(2, '0');
+  let month = (date.getMonth()+1).toString().padStart(2, '0');
+  let year = date.getFullYear();   
+   
+  return `${year}-${month}-${day}`
+
+}
+
+  const handleChatEnd = (event, reason) => {   
 
     if (reason && reason === "backdropClick") 
         return;
@@ -106,9 +128,9 @@ const Modal = (props) => {
       alert('Horário comercial inválido!\n Selecione um horário de lembrete válido entre às 07:00 e 17:00')
       return
     }
-    else if((new Date(startDate).toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10))){ 
+    else if(startDate === dateCurrentFormated()){      
 
-      if(((new Date(timerPicker).getHours() == new Date().getHours()) &&
+      if(((new Date(timerPicker).getHours() === new Date().getHours()) &&
          (new Date(timerPicker).getMinutes() <= new Date().getMinutes())) ||
          (new Date(timerPicker).getHours() < new Date().getHours())
       ){
@@ -118,23 +140,15 @@ const Modal = (props) => {
     } 
     
 
-    setChatEnd({
-
+    props.func({ 
       'scheduleId': scheduleId,  
       'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
       'message': textArea1  
-
-    })
+    });
 
     setOpen(false);
   };
  
-  useEffect(()=>{
-    
-    props.func(chatEnd);
-
-  }, [chatEnd])
- 
 
   const descriptionElementRef = useRef(null);
   useEffect(() => {
@@ -153,17 +167,7 @@ const textFieldSelect = (data) => {
   setScheduling(data)
 }
 
-// Get from child 2
-const datePickerValue = (data) => { 
-  console.log('datePickerValue: ',(data));   
-  setDatePicker(data)
-}
 
-// Get from child 3
-const timerPickerValue = (data) => { 
-  console.log('timerPickerValue: ',(data));   
-  setTimerPicker(data)
-}
 
 // Get from child 4
 // const textArea1Value = (data) => { 
@@ -185,15 +189,6 @@ useEffect(()=>{
   }    
   
      
-
-  // console.log(
-  //   'addHours(new Date(timerPicker), 1): ', addHours(new Date(timerPicker), 1).getHours(),
-  //   '\naddHours(new Date(timerPicker), 1): ', addHours(new Date(timerPicker), 1).getMinutes()
-    
-  //   )
- 
-
-     
 },[timerPicker]) 
 
 
@@ -262,7 +257,7 @@ const handleChange = (event) => {
 
                       <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                         
-                        <Item><DatePicker func={datePickerValue} title={'Data do retorno'}/></Item>
+                        <Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do retorno'}/></Item>
                         
                         <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do lembrete'}/></Item>
                            

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

@@ -1,35 +0,0 @@
-import React, { useState, useEffect } from "react";
-import TextareaAutosize from '@mui/material/TextareaAutosize'; 
-
-const MinHeightTextarea = (props) => {
-  
-  const [value, setValue] = useState('');  
-
-  useEffect(()=>{
-    
-    props.func(value);
-
-  }, [value]) 
-
-  const handleChange = (event) => {
-    
-    setValue(event.target.value);
-
-  };
-
-  return (
-    <TextareaAutosize
-      aria-label="minimum height"
-      minRows={3}
-      placeholder={props.hint} 
-       
-      defaultValue={props.greetRemember}
-
-      onChange={ handleChange}
-
-      style={{ width: '100%' }}
-    />
-  );
-}
-
-export default MinHeightTextarea;

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

@@ -57,7 +57,7 @@ const ResponsiveTimePickers = (props) => {
     
     props.func(value);
 
-  }, [value])
+  }, [value, props])
 
   return (
 

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

@@ -6,9 +6,6 @@ import React, { Fragment, useState, useEffect } from "react";
 import DateFnsUtils from '@date-io/date-fns'; // choose your lib
 import {
   KeyboardDatePicker, 
- // DatePicker,
-  //TimePicker,
-  //DateTimePicker,
   MuiPickersUtilsProvider,
 } from '@material-ui/pickers';
 
@@ -30,7 +27,7 @@ function ResponsiveDatePickers(props) {
     
     props.func(formatDateDatePicker(selectedDate));
 
-  }, [selectedDate])
+  }, [selectedDate, props])
 
   return ( 
 
@@ -41,8 +38,7 @@ function ResponsiveDatePickers(props) {
           variant="inline"
           inputVariant="outlined"
           label={props.title}
-          minDate={new Date()}
-         //format="MM/dd/yyyy"
+          minDate={props.minDate? new Date() : false} 
           format="dd/MM/yyyy"
           value={selectedDate}
           InputAdornmentProps={{ position: "start" }}

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

@@ -22,15 +22,14 @@ const MTable = (props) => {
    
   },[selectedRow]);
 
-  return ( <div style={{ maxWidth: "100%", fontSize:10}}>
+  return (  
           
              <MaterialTable
                 title= {props.table_title}    
                 columns={columnsLoad} 
                 data={dataLoad}   
                 
-                
-                
+                maxWidth={true}
 
                 onRowClick={(evt, selectedRow) => { 
 
@@ -70,7 +69,6 @@ const MTable = (props) => {
                 })
              }}  
              />    
-   </div>
       ); 
 
   };

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

@@ -73,15 +73,11 @@ const Modal = (props) => {
   return (
   
      
-    <div> 
-      
       <Dialog 
         open={open}
         onClose={handleClose} 
-        
         fullWidth={true}
-        maxWidth={true} 
-
+        maxWidth={'true'}  
         scroll={scroll}
         aria-labelledby="scroll-dialog-title"
         aria-describedby="scroll-dialog-description"
@@ -94,9 +90,11 @@ const Modal = (props) => {
             ref={descriptionElementRef}
             tabIndex={-1}
           >
+          </DialogContentText>
+
+         
             <MTable data={dataChat} columns={columns} table_title={''} hasChild={false}/>   
          
-          </DialogContentText>
         </DialogContent>
         
  
@@ -110,7 +108,6 @@ const Modal = (props) => {
           <Button onClick={handleClose}>Ok</Button>  
         </DialogActions>
       </Dialog>  
-    </div> 
      
   );
 }

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

@@ -18,14 +18,14 @@ const SelectTextFields = (props) => {
      
       props.func(currency);  
        
-  }, [currency]) 
+  },[currency, props]) 
 
   const handleChange = (event) => {
+
     setCurrency(event.target.value); 
+
   }; 
 
-  
-
   return (  
 
         <Box  

frontend/src/components/TicketActionButtons/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState } from "react";
 import { useHistory } from "react-router-dom";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -35,8 +35,6 @@ const TicketActionButtons = ({ ticket, schedule }) => {
 	const ticketOptionsMenuOpen = Boolean(anchorEl);
 	const { user } = useContext(AuthContext);
  
-	const [chatEnd, setChatEnd] = useState(null)
-
 	const handleOpenTicketOptionsMenu = e => {
 		setAnchorEl(e.currentTarget);
 	};
@@ -57,7 +55,7 @@ const TicketActionButtons = ({ ticket, schedule }) => {
 
 		}
 		 
-		setChatEnd(data)
+		 
 	}
 
 

frontend/src/pages/Report/index.js

@@ -266,8 +266,8 @@ const textFieldSelectUser = (data) => {
               return {'value': obj.id, 'label': obj.name}
             })}/></Item> 
             
-            <Item><DatePicker1 func={datePicker1Value} title={'Data inicio'}/></Item>
-            <Item><DatePicker2 func={datePicker2Value} title={'Data fim'}/></Item>
+            <Item><DatePicker1 func={datePicker1Value} minDate={false} title={'Data inicio'}/></Item>
+            <Item><DatePicker2 func={datePicker2Value} minDate={false} title={'Data fim'}/></Item>
             
             <Item sx={{ gridColumn: '4 / 5' }}>
              {/* <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>*/}