Correção do useEffect
adriano
parent
e8eb00e96c
commit
0f3a0cdc0e
|
|
@ -123,7 +123,7 @@ const Modal = (props) => {
|
|||
const [schedulesContact, dispatch] = useReducer(reducer, []);
|
||||
|
||||
const [currencyHourBefore, setCurrency] = useState(null);
|
||||
const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState( );
|
||||
const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState(null);
|
||||
|
||||
const handleCancel = (event, reason) => {
|
||||
|
||||
|
|
@ -159,68 +159,8 @@ const Modal = (props) => {
|
|||
function formatedTimeHour(timer){
|
||||
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 = () => {
|
||||
setConfirmModalOpen(false);
|
||||
|
|
@ -243,12 +183,16 @@ const Modal = (props) => {
|
|||
const datePickerValue = (data) => {
|
||||
console.log('datePickerValue: ',(data));
|
||||
setDatePicker(data)
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Get from child 3
|
||||
const timerPickerValue = (data) => {
|
||||
console.log('timerPickerValue: ',(data));
|
||||
setTimerPicker(data)
|
||||
|
||||
|
||||
}
|
||||
|
||||
const dateCurrentFormated = () => {
|
||||
|
|
@ -285,32 +229,11 @@ const dateCurrentFormated = () => {
|
|||
|
||||
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({
|
||||
'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()}`,
|
||||
'scheduleId': scheduleId,
|
||||
'schedulingDate': `${startDate} ${currencyHourBefore}:00`,
|
||||
'schedulingTime': startDate+' '+formatedTimeHour(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:00`)),
|
||||
'message': textArea1
|
||||
|
|
@ -347,20 +270,71 @@ const handleChangeHourBefore = (event) => {
|
|||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Get from child 4
|
||||
// const textArea1Value = (data) => {
|
||||
// console.log('textArea1Value: ',(data));
|
||||
// setTextArea1(data)
|
||||
// }
|
||||
|
||||
|
||||
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])
|
||||
|
||||
|
|
@ -382,7 +356,7 @@ useEffect(()=>{
|
|||
setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
|
||||
}
|
||||
|
||||
},[currencyHourBefore, startDate])
|
||||
},[currencyHourBefore, startDate, timerPicker])
|
||||
|
||||
|
||||
const handleChange = (event) => {
|
||||
|
|
@ -393,186 +367,182 @@ const handleChange = (event) => {
|
|||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
return (
|
||||
|
||||
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleCancel}
|
||||
// fullWidth={true}
|
||||
// maxWidth={true}
|
||||
disableEscapeKeyDown
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleCancel}
|
||||
// fullWidth={true}
|
||||
// maxWidth={true}
|
||||
disableEscapeKeyDown
|
||||
|
||||
scroll={scroll}
|
||||
aria-labelledby="scroll-dialog-title"
|
||||
aria-describedby="scroll-dialog-description"
|
||||
>
|
||||
scroll={scroll}
|
||||
aria-labelledby="scroll-dialog-title"
|
||||
aria-describedby="scroll-dialog-description"
|
||||
>
|
||||
|
||||
<DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
|
||||
<DialogContent dividers={scroll === 'body'}>
|
||||
<DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
|
||||
<DialogContent dividers={scroll === 'body'}>
|
||||
|
||||
<DialogContentText
|
||||
id="scroll-dialog-description"
|
||||
ref={descriptionElementRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
|
||||
</DialogContentText>
|
||||
<DialogContentText
|
||||
id="scroll-dialog-description"
|
||||
ref={descriptionElementRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
|
||||
</DialogContentText>
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: 500,
|
||||
height: '100%',
|
||||
// backgroundColor: 'primary.dark',
|
||||
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
||||
}}>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: 500,
|
||||
height: '100%',
|
||||
// backgroundColor: 'primary.dark',
|
||||
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
display: 'grid',
|
||||
}}>
|
||||
<Item>
|
||||
<span>Selecione uma opção para encerrar o Atendimento</span>
|
||||
<Box sx={{
|
||||
display: 'grid',
|
||||
}}>
|
||||
<Item>
|
||||
<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}
|
||||
emptyField={false}
|
||||
header={'Opções de encerramento do atendimento'}
|
||||
currencies={data.map((obj)=>{
|
||||
return {'value': obj.id, 'label': obj.name}
|
||||
})}/>
|
||||
<Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do agendamento'}/></Item>
|
||||
|
||||
|
||||
</Item>
|
||||
|
||||
</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>
|
||||
<Item><TimerPickerSelect func={timerPickerValue} title={'Hora do agendamento'}/></Item>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
<Box sx={{display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
{currencyHourBefore &&
|
||||
<Item>
|
||||
<TextFieldSelectHourBefore
|
||||
id="outlined-select-currency"
|
||||
select
|
||||
label="Enviar mensagem para cliente"
|
||||
value={currencyHourBefore}
|
||||
size="small"
|
||||
onChange={handleChangeHourBefore}
|
||||
>
|
||||
{currenciesTimeBefore.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextFieldSelectHourBefore>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
{currencyHourBefore &&
|
||||
<Item>
|
||||
<TextFieldSelectHourBefore
|
||||
id="outlined-select-currency"
|
||||
select
|
||||
label="Enviar mensagem para cliente"
|
||||
value={currencyHourBefore}
|
||||
size="small"
|
||||
onChange={handleChangeHourBefore}
|
||||
>
|
||||
{currenciesTimeBefore.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</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>
|
||||
}
|
||||
}
|
||||
|
||||
{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 &&
|
||||
|
||||
|
||||
|
||||
<Item>
|
||||
|
||||
<ConfirmationModal
|
||||
title={selectedSchedule && `Deletar agendamento do dia ${selectedSchedule.schedulingTime.split(' ')[0]} ${selectedSchedule.schedulingTime.split(' ')[1]} ?`}
|
||||
open={confirmModalOpen}
|
||||
onClose={handleCloseConfirmationModal}
|
||||
onConfirm={() => handleDeleteSchedule(selectedSchedule.id)}
|
||||
>
|
||||
<span>Deseja realmente deletar esse Agendamento? </span>
|
||||
</ConfirmationModal>
|
||||
<span>Agendamentos</span>
|
||||
<Paper variant="outlined">
|
||||
<Table size="small">
|
||||
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">
|
||||
Data
|
||||
</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>
|
||||
<ConfirmationModal
|
||||
title={selectedSchedule && `Deletar agendamento do dia ${selectedSchedule.schedulingTime.split(' ')[0]} ${selectedSchedule.schedulingTime.split(' ')[1]} ?`}
|
||||
open={confirmModalOpen}
|
||||
onClose={handleCloseConfirmationModal}
|
||||
onConfirm={() => handleDeleteSchedule(selectedSchedule.id)}
|
||||
>
|
||||
<span>Deseja realmente deletar esse Agendamento? </span>
|
||||
</ConfirmationModal>
|
||||
<span>Agendamentos</span>
|
||||
<Paper variant="outlined">
|
||||
<Table size="small">
|
||||
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">
|
||||
Data
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
Hora
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
Deletar
|
||||
</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>
|
||||
|
||||
</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>
|
||||
|
||||
</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