Correção do useEffect
adriano
parent
e8eb00e96c
commit
0f3a0cdc0e
|
|
@ -123,7 +123,7 @@ const Modal = (props) => {
|
||||||
const [schedulesContact, dispatch] = useReducer(reducer, []);
|
const [schedulesContact, dispatch] = useReducer(reducer, []);
|
||||||
|
|
||||||
const [currencyHourBefore, setCurrency] = useState(null);
|
const [currencyHourBefore, setCurrency] = useState(null);
|
||||||
const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState( );
|
const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState(null);
|
||||||
|
|
||||||
const handleCancel = (event, reason) => {
|
const handleCancel = (event, reason) => {
|
||||||
|
|
||||||
|
|
@ -159,68 +159,8 @@ const Modal = (props) => {
|
||||||
function formatedTimeHour(timer){
|
function formatedTimeHour(timer){
|
||||||
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 hoursBeforeAvalible = (timer) =>{
|
|
||||||
|
|
||||||
let hours = []
|
|
||||||
let hour = 1
|
|
||||||
|
|
||||||
if(startDate === dateCurrentFormated()){
|
|
||||||
|
|
||||||
console.log('HOJE++++')
|
|
||||||
|
|
||||||
while(subHours(timer, hour).getHours()>=6 &&
|
|
||||||
subHours(timer, hour).getHours()>=new Date().getHours() &&
|
|
||||||
subHours(timer, hour).getHours()<=19){
|
|
||||||
|
|
||||||
console.log('******** TIMER: ', formatedTimeHour(subHours(timer,hour)))
|
|
||||||
|
|
||||||
hours.push(
|
|
||||||
{value: formatedTimeHour(subHours(timer,hour)),
|
|
||||||
label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
|
|
||||||
|
|
||||||
hour++;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(hours.length>1){
|
|
||||||
console.log('entrou----------------------: ', hours.length)
|
|
||||||
hours.pop()
|
|
||||||
setCurrency(hours[0].value)
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
setCurrency(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
|
|
||||||
while(subHours(timer, hour).getHours()>=6 && subHours(timer, hour).getHours()<=19){
|
|
||||||
|
|
||||||
console.log('******** another day TIMER: ', formatedTimeHour(subHours(timer,hour)))
|
|
||||||
|
|
||||||
hours.push(
|
|
||||||
{value: formatedTimeHour(subHours(timer,hour)),
|
|
||||||
label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
|
|
||||||
|
|
||||||
hour++;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(hours.length>0){
|
|
||||||
console.log('entrou----------------------: ', hours.length)
|
|
||||||
setCurrency(hours[0].value)
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
setCurrency(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return {time: hours, hour:hour}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleCloseConfirmationModal = () => {
|
const handleCloseConfirmationModal = () => {
|
||||||
setConfirmModalOpen(false);
|
setConfirmModalOpen(false);
|
||||||
|
|
@ -243,12 +183,16 @@ const Modal = (props) => {
|
||||||
const datePickerValue = (data) => {
|
const datePickerValue = (data) => {
|
||||||
console.log('datePickerValue: ',(data));
|
console.log('datePickerValue: ',(data));
|
||||||
setDatePicker(data)
|
setDatePicker(data)
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get from child 3
|
// Get from child 3
|
||||||
const timerPickerValue = (data) => {
|
const timerPickerValue = (data) => {
|
||||||
console.log('timerPickerValue: ',(data));
|
console.log('timerPickerValue: ',(data));
|
||||||
setTimerPicker(data)
|
setTimerPicker(data)
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const dateCurrentFormated = () => {
|
const dateCurrentFormated = () => {
|
||||||
|
|
@ -285,32 +229,11 @@ const dateCurrentFormated = () => {
|
||||||
|
|
||||||
return
|
return
|
||||||
|
|
||||||
}
|
}
|
||||||
// else if(startDate === dateCurrentFormated()){
|
|
||||||
// if(
|
|
||||||
// (new Date(subHours(timerPicker, 1)).getHours() <= new Date().getHours() &&
|
|
||||||
// new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes()) ||
|
|
||||||
|
|
||||||
// (new Date(subHours(timerPicker, 1)).getHours() == new Date().getHours() &&
|
|
||||||
// new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes())
|
|
||||||
|
|
||||||
// )
|
|
||||||
// {
|
|
||||||
|
|
||||||
// alert('Para agendamentos do dia, é necessário que o horário do lembrete seja no mínimo uma hora adiantado!')
|
|
||||||
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
props.func({
|
props.func({
|
||||||
'scheduleId': scheduleId,
|
'scheduleId': scheduleId,
|
||||||
// 'schedulingDate': startDate+' '+formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00',
|
|
||||||
// 'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
|
|
||||||
'schedulingDate': `${startDate} ${currencyHourBefore}:00`,
|
'schedulingDate': `${startDate} ${currencyHourBefore}:00`,
|
||||||
'schedulingTime': startDate+' '+formatedTimeHour(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:00`)),
|
'schedulingTime': startDate+' '+formatedTimeHour(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:00`)),
|
||||||
'message': textArea1
|
'message': textArea1
|
||||||
|
|
@ -347,20 +270,71 @@ const handleChangeHourBefore = (event) => {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Get from child 4
|
|
||||||
// const textArea1Value = (data) => {
|
|
||||||
// console.log('textArea1Value: ',(data));
|
|
||||||
// setTextArea1(data)
|
|
||||||
// }
|
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
|
|
||||||
setCurrenciesTimeBefore(hoursBeforeAvalible(timerPicker).time)
|
const hoursBeforeAvalible = (timer) =>{
|
||||||
|
|
||||||
|
let hours = []
|
||||||
|
let hour = 1
|
||||||
|
|
||||||
|
if(startDate === dateCurrentFormated()){
|
||||||
|
|
||||||
|
console.log('HOJE++++')
|
||||||
|
|
||||||
|
while(subHours(timer, hour).getHours()>=6 &&
|
||||||
|
subHours(timer, hour).getHours()>=new Date().getHours() &&
|
||||||
|
subHours(timer, hour).getHours()<=19){
|
||||||
|
|
||||||
|
console.log('******** TIMER: ', formatedTimeHour(subHours(timer,hour)))
|
||||||
|
|
||||||
|
hours.push(
|
||||||
|
{value: formatedTimeHour(subHours(timer,hour)),
|
||||||
|
label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
|
||||||
|
|
||||||
|
hour++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(hours.length>1){
|
||||||
|
console.log('entrou----------------------: ', hours.length)
|
||||||
|
hours.pop()
|
||||||
|
setCurrency(hours[0].value)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setCurrency(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
|
||||||
|
while(subHours(timer, hour).getHours()>=6 && subHours(timer, hour).getHours()<=19){
|
||||||
|
|
||||||
|
console.log('******** another day TIMER: ', formatedTimeHour(subHours(timer,hour)))
|
||||||
|
|
||||||
|
hours.push(
|
||||||
|
{value: formatedTimeHour(subHours(timer,hour)),
|
||||||
|
label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
|
||||||
|
|
||||||
|
hour++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(hours.length>0){
|
||||||
|
console.log('entrou----------------------: ', hours.length)
|
||||||
|
setCurrency(hours[0].value)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setCurrency(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return {time: hours, hour:hour}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrenciesTimeBefore(hoursBeforeAvalible(timerPicker).time)
|
||||||
|
|
||||||
},[timerPicker, startDate])
|
},[timerPicker, startDate])
|
||||||
|
|
||||||
|
|
@ -382,7 +356,7 @@ useEffect(()=>{
|
||||||
setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
|
setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
|
||||||
}
|
}
|
||||||
|
|
||||||
},[currencyHourBefore, startDate])
|
},[currencyHourBefore, startDate, timerPicker])
|
||||||
|
|
||||||
|
|
||||||
const handleChange = (event) => {
|
const handleChange = (event) => {
|
||||||
|
|
@ -393,186 +367,182 @@ const handleChange = (event) => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
open={open}
|
||||||
<Dialog
|
onClose={handleCancel}
|
||||||
open={open}
|
// fullWidth={true}
|
||||||
onClose={handleCancel}
|
// maxWidth={true}
|
||||||
// fullWidth={true}
|
disableEscapeKeyDown
|
||||||
// maxWidth={true}
|
|
||||||
disableEscapeKeyDown
|
|
||||||
|
|
||||||
scroll={scroll}
|
scroll={scroll}
|
||||||
aria-labelledby="scroll-dialog-title"
|
aria-labelledby="scroll-dialog-title"
|
||||||
aria-describedby="scroll-dialog-description"
|
aria-describedby="scroll-dialog-description"
|
||||||
>
|
>
|
||||||
|
|
||||||
<DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
|
<DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
|
||||||
<DialogContent dividers={scroll === 'body'}>
|
<DialogContent dividers={scroll === 'body'}>
|
||||||
|
|
||||||
<DialogContentText
|
<DialogContentText
|
||||||
id="scroll-dialog-description"
|
id="scroll-dialog-description"
|
||||||
ref={descriptionElementRef}
|
ref={descriptionElementRef}
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
>
|
>
|
||||||
|
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
width: 500,
|
width: 500,
|
||||||
height: '100%',
|
height: '100%',
|
||||||
// backgroundColor: 'primary.dark',
|
// backgroundColor: 'primary.dark',
|
||||||
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
||||||
}}>
|
}}>
|
||||||
|
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
display: 'grid',
|
display: 'grid',
|
||||||
}}>
|
}}>
|
||||||
<Item>
|
<Item>
|
||||||
<span>Selecione uma opção para encerrar o Atendimento</span>
|
<span>Selecione uma opção para encerrar o Atendimento</span>
|
||||||
|
|
||||||
|
<SelectField func={textFieldSelect}
|
||||||
|
emptyField={false}
|
||||||
|
header={'Opções de encerramento do atendimento'}
|
||||||
|
currencies={data.map((obj)=>{
|
||||||
|
return {'value': obj.id, 'label': obj.name}
|
||||||
|
})}/>
|
||||||
|
|
||||||
|
|
||||||
|
</Item>
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{scheduleId==='2' &&
|
||||||
|
|
||||||
|
<Item>
|
||||||
|
|
||||||
|
<span>Lembrete de retorno</span>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
|
||||||
|
|
||||||
<SelectField func={textFieldSelect}
|
<Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do agendamento'}/></Item>
|
||||||
emptyField={false}
|
|
||||||
header={'Opções de encerramento do atendimento'}
|
|
||||||
currencies={data.map((obj)=>{
|
|
||||||
return {'value': obj.id, 'label': obj.name}
|
|
||||||
})}/>
|
|
||||||
|
|
||||||
|
<Item><TimerPickerSelect func={timerPickerValue} title={'Hora do agendamento'}/></Item>
|
||||||
</Item>
|
|
||||||
|
</Box>
|
||||||
</Box>
|
|
||||||
|
|
||||||
{scheduleId==='2' &&
|
|
||||||
|
|
||||||
<Item>
|
|
||||||
|
|
||||||
<span>Lembrete de retorno</span>
|
|
||||||
|
|
||||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
|
|
||||||
|
|
||||||
<Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do agendamento'}/></Item>
|
|
||||||
|
|
||||||
<Item><TimerPickerSelect func={timerPickerValue} title={'Hora do agendamento'}/></Item>
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
|
|
||||||
<Box sx={{display: 'flex', flexDirection: 'column' }}>
|
<Box sx={{display: 'flex', flexDirection: 'column' }}>
|
||||||
|
|
||||||
{currencyHourBefore &&
|
{currencyHourBefore &&
|
||||||
<Item>
|
<Item>
|
||||||
<TextFieldSelectHourBefore
|
<TextFieldSelectHourBefore
|
||||||
id="outlined-select-currency"
|
id="outlined-select-currency"
|
||||||
select
|
select
|
||||||
label="Enviar mensagem para cliente"
|
label="Enviar mensagem para cliente"
|
||||||
value={currencyHourBefore}
|
value={currencyHourBefore}
|
||||||
size="small"
|
size="small"
|
||||||
onChange={handleChangeHourBefore}
|
onChange={handleChangeHourBefore}
|
||||||
>
|
>
|
||||||
{currenciesTimeBefore.map((option) => (
|
{currenciesTimeBefore.map((option) => (
|
||||||
<MenuItem key={option.value} value={option.value}>
|
<MenuItem key={option.value} value={option.value}>
|
||||||
{option.label}
|
{option.label}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
))}
|
))}
|
||||||
</TextFieldSelectHourBefore>
|
</TextFieldSelectHourBefore>
|
||||||
|
</Item>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<Item>
|
||||||
|
<TextareaAutosize
|
||||||
|
aria-label="minimum height"
|
||||||
|
minRows={3}
|
||||||
|
value={textArea1}
|
||||||
|
placeholder={'Mensagem para lembrar cliente'}
|
||||||
|
onChange={ handleChange}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
/>
|
||||||
|
</Item>
|
||||||
|
</Box>
|
||||||
|
|
||||||
</Item>
|
</Item>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{schedulesContact.length>0 &&
|
||||||
|
|
||||||
|
|
||||||
<Item>
|
|
||||||
<TextareaAutosize
|
|
||||||
aria-label="minimum height"
|
|
||||||
minRows={3}
|
|
||||||
value={textArea1}
|
|
||||||
placeholder={'Mensagem para lembrar cliente'}
|
|
||||||
onChange={ handleChange}
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
/>
|
|
||||||
</Item>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
</Item>
|
<Item>
|
||||||
}
|
|
||||||
|
|
||||||
{schedulesContact.length>0 &&
|
<ConfirmationModal
|
||||||
|
title={selectedSchedule && `Deletar agendamento do dia ${selectedSchedule.schedulingTime.split(' ')[0]} ${selectedSchedule.schedulingTime.split(' ')[1]} ?`}
|
||||||
|
open={confirmModalOpen}
|
||||||
|
onClose={handleCloseConfirmationModal}
|
||||||
<Item>
|
onConfirm={() => handleDeleteSchedule(selectedSchedule.id)}
|
||||||
|
>
|
||||||
<ConfirmationModal
|
<span>Deseja realmente deletar esse Agendamento? </span>
|
||||||
title={selectedSchedule && `Deletar agendamento do dia ${selectedSchedule.schedulingTime.split(' ')[0]} ${selectedSchedule.schedulingTime.split(' ')[1]} ?`}
|
</ConfirmationModal>
|
||||||
open={confirmModalOpen}
|
<span>Agendamentos</span>
|
||||||
onClose={handleCloseConfirmationModal}
|
<Paper variant="outlined">
|
||||||
onConfirm={() => handleDeleteSchedule(selectedSchedule.id)}
|
<Table size="small">
|
||||||
>
|
|
||||||
<span>Deseja realmente deletar esse Agendamento? </span>
|
<TableHead>
|
||||||
</ConfirmationModal>
|
<TableRow>
|
||||||
<span>Agendamentos</span>
|
<TableCell align="center">
|
||||||
<Paper variant="outlined">
|
Data
|
||||||
<Table size="small">
|
</TableCell>
|
||||||
|
<TableCell align="center">
|
||||||
<TableHead>
|
Hora
|
||||||
<TableRow>
|
</TableCell>
|
||||||
<TableCell align="center">
|
<TableCell align="center">
|
||||||
Data
|
Deletar
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
Hora
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
Deletar
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
|
|
||||||
<TableBody>
|
|
||||||
<>
|
|
||||||
{schedulesContact.map((scheduleData, index) => (
|
|
||||||
<TableRow key={scheduleData.id}>
|
|
||||||
<TableCell align="center">{scheduleData.schedulingDate.split(' ')[0]}</TableCell>
|
|
||||||
<TableCell align="center">{scheduleData.schedulingTime.split(' ')[1]}</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedSchedule(scheduleData);
|
|
||||||
setConfirmModalOpen(true);
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DeleteOutline />
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
</TableHead>
|
||||||
</>
|
|
||||||
</TableBody>
|
<TableBody>
|
||||||
</Table>
|
<>
|
||||||
</Paper>
|
{schedulesContact.map((scheduleData, index) => (
|
||||||
</Item>}
|
<TableRow key={scheduleData.id}>
|
||||||
|
<TableCell align="center">{scheduleData.schedulingDate.split(' ')[0]}</TableCell>
|
||||||
|
<TableCell align="center">{scheduleData.schedulingTime.split(' ')[1]}</TableCell>
|
||||||
</Box>
|
<TableCell align="center">
|
||||||
</DialogContent>
|
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
<DialogActions>
|
onClick={() => {
|
||||||
<div style={{marginRight:'50px'}}>
|
setSelectedSchedule(scheduleData);
|
||||||
<Button onClick={handleCancel}>Cancelar</Button>
|
setConfirmModalOpen(true);
|
||||||
</div>
|
|
||||||
<Button onClick={handleChatEnd}>Ok</Button>
|
}}
|
||||||
</DialogActions>
|
>
|
||||||
</Dialog>
|
<DeleteOutline />
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</Paper>
|
||||||
|
</Item>}
|
||||||
|
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
|
||||||
|
|
||||||
|
<DialogActions>
|
||||||
|
<div style={{marginRight:'50px'}}>
|
||||||
|
<Button onClick={handleCancel}>Cancelar</Button>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleChatEnd}>Ok</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue