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

pull/1/head
adriano 2022-03-06 23:19:35 -03:00
parent a9e1f5dd7e
commit 82132ec414
9 changed files with 76 additions and 127 deletions

View File

@ -16,13 +16,12 @@ import SelectField from "../../Report/SelectField";
import DatePicker from '../../Report/DatePicker' import DatePicker from '../../Report/DatePicker'
import TimerPickerSelect from '../TimerPickerSelect' import TimerPickerSelect from '../TimerPickerSelect'
import TextArea1 from '../TextArea'
import TextareaAutosize from '@mui/material/TextareaAutosize'; 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) => { const Item = (props) => {
@ -59,28 +58,28 @@ Item.propTypes = {
const Modal = (props) => { const Modal = (props) => {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [scroll, /*setScroll*/] = useState('body'); const [scroll, /*setScroll*/] = useState('body');
const [scheduleId, setScheduling] = useState(null) const [scheduleId, setScheduling] = useState(null)
const [startDate, setDatePicker] = useState(new Date()) const [startDate, setDatePicker] = useState(new Date())
const [timerPicker, setTimerPicker] = 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) => { const handleCancel = (event, reason) => {
if (reason && reason === "backdropClick") if (reason && reason === "backdropClick")
return; return;
setChatEnd(null)
setOpen(false); setOpen(false);
}; };
function greetMessageSchedule(scheduleDate){ function greetMessageSchedule(scheduleDate){
return `podemos confirmar sua consulta agendada para hoje às ${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')}` 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") if (reason && reason === "backdropClick")
return; 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') alert('Horário comercial inválido!\n Selecione um horário de lembrete válido entre às 07:00 e 17:00')
return 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).getMinutes() <= new Date().getMinutes())) ||
(new Date(timerPicker).getHours() < new Date().getHours()) (new Date(timerPicker).getHours() < new Date().getHours())
){ ){
@ -118,23 +140,15 @@ const Modal = (props) => {
} }
setChatEnd({ props.func({
'scheduleId': scheduleId, 'scheduleId': scheduleId,
'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`, 'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
'message': textArea1 'message': textArea1
});
})
setOpen(false); setOpen(false);
}; };
useEffect(()=>{
props.func(chatEnd);
}, [chatEnd])
const descriptionElementRef = useRef(null); const descriptionElementRef = useRef(null);
useEffect(() => { useEffect(() => {
@ -153,17 +167,7 @@ const textFieldSelect = (data) => {
setScheduling(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 // Get from child 4
// const textArea1Value = (data) => { // 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]) },[timerPicker])
@ -262,7 +257,7 @@ const handleChange = (event) => {
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> <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> <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do lembrete'}/></Item>

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -266,8 +266,8 @@ const textFieldSelectUser = (data) => {
return {'value': obj.id, 'label': obj.name} return {'value': obj.id, 'label': obj.name}
})}/></Item> })}/></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' }}> <Item sx={{ gridColumn: '4 / 5' }}>
{/* <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>*/} {/* <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>*/}