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 { addHours } from "date-fns"; 
-import { LocalConvenienceStoreOutlined } from '@material-ui/icons';
 
 const Item = (props) => {
  
@@ -59,27 +58,27 @@ 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 [startDate, setDatePicker] = useState(new Date())  
   const [timerPicker, setTimerPicker] = useState(new Date()) 
-  const [textArea1, setTextArea1] = useState() 
+  const [textArea1, setTextArea1] = useState()  
-  const [greetRemember, setGreet] = useState('')
  
 
-  const [data] = useState(props.schedules)
+  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())
       ){
@@ -116,24 +138,16 @@ const Modal = (props) => {
         return
       }
     } 
-   
     
-    setChatEnd({
 
+    props.func({ 
       'scheduleId': scheduleId,  
       'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
-      'message': textArea1 
+      'message': textArea1  
-
+    });
-    })
 
     setOpen(false);
   };
-
-  useEffect(()=>{
-    
-    props.func(chatEnd);
-
-  }, [chatEnd])
  
 
   const descriptionElementRef = useRef(null);
@@ -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) => { 
@@ -183,16 +187,7 @@ useEffect(()=>{
 
     setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(addHours(new Date(timerPicker), 1)))) 
   }    
- 
+  
-
-
-  // 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

@@ -5,10 +5,7 @@ import React, { Fragment, useState, useEffect } from "react";
 
 import DateFnsUtils from '@date-io/date-fns'; // choose your lib
 import {
-  KeyboardDatePicker,
+  KeyboardDatePicker, 
- // DatePicker,
-  //TimePicker,
-  //DateTimePicker,
   MuiPickersUtilsProvider,
 } from '@material-ui/pickers';
 
@@ -30,19 +27,18 @@ function ResponsiveDatePickers(props) {
     
     props.func(formatDateDatePicker(selectedDate));
 
-  }, [selectedDate])
+  }, [selectedDate, props])
 
   return ( 
 
     <Fragment> 
       <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
         <KeyboardDatePicker
-          autoOk
+          autoOk 
           variant="inline"
           inputVariant="outlined"
           label={props.title}
-          minDate={new Date()}
+          minDate={props.minDate? new Date() : false} 
-         //format="MM/dd/yyyy"
           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}  
+                data={dataLoad}   
-
-                
                 
+                maxWidth={true}
 
                 onRowClick={(evt, selectedRow) => { 
 
@@ -69,8 +68,7 @@ const MTable = (props) => {
                     backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'  
                 })
              }}  
-             />   
+             />    
-   </div>
       ); 
 
   };

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

@@ -71,17 +71,13 @@ const Modal = (props) => {
   }, [open]);
 
   return (
- 
+  
-
+     
-    <div> 
-      
       <Dialog 
         open={open}
-        onClose={handleClose}
+        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}
           >
-            <MTable data={dataChat} columns={columns} table_title={''} hasChild={false}/> 
-
           </DialogContentText>
+
+         
+            <MTable data={dataChat} columns={columns} table_title={''} hasChild={false}/>   
+         
         </DialogContent>
         
  
@@ -109,9 +107,8 @@ const Modal = (props) => {
           </div>
           <Button onClick={handleClose}>Ok</Button>  
         </DialogActions>
-      </Dialog>
+      </Dialog>  
-    </div> 
+     
-
   );
 }
 

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

@@ -7,24 +7,24 @@ import TextField from '@mui/material/TextField';
 
 const SelectTextFields = (props) => {
 
-  const [currency, setCurrency] = useState(props.emptyField ? '0' : '1');
+  const [currency, setCurrency] = useState(props.emptyField ? '0' : '1'); 
-  
+
   if(props.emptyField){ 
     props.currencies.push({ 'value': 0, 'label': ''})      
   }
-  
+
 
   useEffect(()=>{
-    
+     
-    props.func(currency);
+      props.func(currency);  
-
+       
-  }, [currency]) 
+  },[currency, props]) 
 
   const handleChange = (event) => {
-    setCurrency(event.target.value);
+
-  };
+    setCurrency(event.target.value); 
- 
+
-  
+  }; 
 
   return (  
 

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";
@@ -34,9 +34,7 @@ const TicketActionButtons = ({ ticket, schedule }) => {
 	const [loading, setLoading] = useState(false);
 	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><DatePicker1 func={datePicker1Value} minDate={false} title={'Data inicio'}/></Item>
-            <Item><DatePicker2 func={datePicker2Value} title={'Data fim'}/></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>*/}