Adição de componentes parcial do modal de agendamento
adriano
parent
af418616fc
commit
c65fcfe66c
|
|
@ -1,4 +1,5 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
|
|
@ -19,8 +20,8 @@ import TextArea1 from '../TextArea'
|
|||
import TextArea2 from '../TextArea'
|
||||
|
||||
|
||||
const Item = (props) => {
|
||||
|
||||
function Item(props) {
|
||||
const { sx, ...other } = props;
|
||||
return (
|
||||
<Box
|
||||
|
|
@ -55,15 +56,15 @@ Item.propTypes = {
|
|||
|
||||
|
||||
const Modal = (props) => {
|
||||
const [open, setOpen] = React.useState(true);
|
||||
const [scroll, /*setScroll*/] = React.useState('body');
|
||||
const [schedulingId, setScheduling] = React.useState(null)
|
||||
const [startDate, setDatePicker] = React.useState(new Date())
|
||||
const [timerPicker, setTimerPicker] = React.useState(new Date())
|
||||
const [textArea1, setTextArea1] = React.useState()
|
||||
const [textArea2, setTextArea2] = React.useState()
|
||||
const [open, setOpen] = useState(true);
|
||||
const [scroll, /*setScroll*/] = useState('body');
|
||||
const [schedulingId, setScheduling] = useState(null)
|
||||
const [startDate, setDatePicker] = useState(new Date())
|
||||
const [timerPicker, setTimerPicker] = useState(new Date())
|
||||
const [textArea1, setTextArea1] = useState()
|
||||
const [textArea2, setTextArea2] = useState()
|
||||
|
||||
const [data, setData] = React.useState([
|
||||
const [data] = useState([
|
||||
{'id': 1, 'name': 'STATUS1'},
|
||||
{'id': 2, 'name': 'STATUS2'},
|
||||
{'id': 3, 'name': 'STATUS3'},
|
||||
|
|
@ -72,14 +73,14 @@ const Modal = (props) => {
|
|||
|
||||
const handleClose = (event, reason) => {
|
||||
|
||||
if (reason && reason == "backdropClick")
|
||||
if (reason && reason === "backdropClick")
|
||||
return;
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const descriptionElementRef = React.useRef(null);
|
||||
React.useEffect(() => {
|
||||
const descriptionElementRef = useRef(null);
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
const { current: descriptionElement } = descriptionElementRef;
|
||||
if (descriptionElement !== null) {
|
||||
|
|
@ -119,18 +120,16 @@ const textArea2Value = (data) => {
|
|||
setTextArea2(data)
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<Dialog
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
|
||||
// fullWidth={true}
|
||||
// maxWidth={true}
|
||||
|
||||
disableEscapeKeyDown
|
||||
|
||||
scroll={scroll}
|
||||
|
|
@ -140,35 +139,14 @@ const textArea2Value = (data) => {
|
|||
|
||||
<DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
|
||||
<DialogContent dividers={scroll === 'body'}>
|
||||
|
||||
<DialogContentText
|
||||
id="scroll-dialog-description"
|
||||
ref={descriptionElementRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{/* <Box
|
||||
component="form"
|
||||
sx={{
|
||||
'& > :not(style)': { m: 1, width: '35ch' },
|
||||
}}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
|
||||
</Box> */}
|
||||
|
||||
|
||||
{/* <Box
|
||||
sx={{
|
||||
width: 500,
|
||||
height: 300,
|
||||
// backgroundColor: 'primary.dark',
|
||||
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
||||
}}>
|
||||
<TextField id="cpf_cnpj" label="cpf/cnpj" variant="outlined" />
|
||||
|
||||
</Box> */}
|
||||
|
||||
|
||||
</DialogContentText>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -177,11 +155,31 @@ const textArea2Value = (data) => {
|
|||
// backgroundColor: 'primary.dark',
|
||||
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
||||
}}>
|
||||
<Box sx={{
|
||||
|
||||
|
||||
{/* <Box sx={{
|
||||
display: 'grid',
|
||||
}}>
|
||||
<Item>
|
||||
<div>Selecione um status para encerrar o Atendimento</div>
|
||||
|
||||
<SelectField
|
||||
func={textFieldSelect}
|
||||
header={'Status de atendimento'}
|
||||
currencies={data.map((obj)=>{return {'value': obj.id, 'label': obj.name}})}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</Item>
|
||||
|
||||
</Box> */}
|
||||
|
||||
|
||||
<Box sx={{
|
||||
display: 'grid',
|
||||
}}>
|
||||
<Item>
|
||||
<span>Selecione um status para encerrar o Atendimento</span>
|
||||
|
||||
<Item>
|
||||
<SelectField func={textFieldSelect} header={'Status de atendimento'} currencies={data.map((obj)=>{
|
||||
|
|
@ -195,7 +193,7 @@ const textArea2Value = (data) => {
|
|||
maxWidth: '100%',
|
||||
}}
|
||||
>
|
||||
<TextField fullWidth label="CPF/CNPJ" id="fullWidth" size="small" margin="1"/>
|
||||
<TextField fullWidth label="CPF/CNPJ" id="fullWidth" size="small" margin="dense"/>
|
||||
</Box>
|
||||
</Item>
|
||||
|
||||
|
|
@ -203,9 +201,10 @@ const textArea2Value = (data) => {
|
|||
|
||||
</Box>
|
||||
|
||||
<Item>
|
||||
|
||||
<div>Lembrete de retorno</div>
|
||||
<Item>
|
||||
|
||||
<span>Lembrete de retorno</span>
|
||||
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
|
||||
|
||||
|
|
@ -216,25 +215,17 @@ const textArea2Value = (data) => {
|
|||
</Box>
|
||||
|
||||
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
|
||||
{/* <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
|
||||
|
||||
<Item><TextArea1 func={textArea1Value} hint={'Lembrete'}/> </Item>
|
||||
|
||||
<Item><TextArea2 func={textArea2Value} hint={'Mensagem para cliente'}/></Item>
|
||||
|
||||
</Box>
|
||||
</Box> */}
|
||||
|
||||
</Item>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
|
||||
|
|
@ -245,7 +236,7 @@ const textArea2Value = (data) => {
|
|||
<Button onClick={handleClose}>Ok</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import * as React from 'react';
|
|||
import TextareaAutosize from '@mui/material/TextareaAutosize';
|
||||
|
||||
|
||||
export default function MinHeightTextarea(props) {
|
||||
|
||||
const MinHeightTextarea = (props) => {
|
||||
|
||||
const [value, setValue] = React.useState('');
|
||||
|
||||
|
|
@ -24,3 +25,5 @@ export default function MinHeightTextarea(props) {
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default MinHeightTextarea;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import React, { Fragment, useState, useEffect } from "react";
|
||||
import TextField from '@mui/material/TextField';
|
||||
import DateFnsUtils from '@date-io/date-fns';
|
||||
|
||||
|
|
@ -8,23 +9,43 @@ import {
|
|||
MuiPickersUtilsProvider,
|
||||
} from '@material-ui/pickers';
|
||||
|
||||
export default function ResponsiveTimePickers(props) {
|
||||
const [value, setValue] = React.useState(new Date());
|
||||
|
||||
props.func(value);
|
||||
import ptBrLocale from "date-fns/locale/pt-BR";
|
||||
|
||||
|
||||
const ResponsiveTimePickers = (props) => {
|
||||
|
||||
const [value, setValue] = useState(new Date());
|
||||
|
||||
// props.func(value);
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
props.func(value);
|
||||
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<TimePicker
|
||||
label="Hora do lembrete"
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</MuiPickersUtilsProvider>
|
||||
<Fragment>
|
||||
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
|
||||
<TimePicker
|
||||
label="Hora do lembrete"
|
||||
value={value}
|
||||
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
// Ativar se necessario
|
||||
// renderInput={(params) => <TextField {...params} />}
|
||||
|
||||
/>
|
||||
</MuiPickersUtilsProvider>
|
||||
|
||||
</Fragment>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default ResponsiveTimePickers
|
||||
|
|
|
|||
|
|
@ -585,7 +585,8 @@ const MessageInput = ({ ticketStatus }) => {
|
|||
: i18n.t("messagesInput.placeholderClosed")
|
||||
}
|
||||
multiline
|
||||
rowsMax={5}
|
||||
// rowsMax={5}
|
||||
maxRows={5}
|
||||
value={inputMessage}
|
||||
onChange={handleChangeInput}
|
||||
disabled={recording || loading || ticketStatus !== "open"}
|
||||
|
|
|
|||
|
|
@ -190,7 +190,8 @@ const NotificationsPopOver = () => {
|
|||
<>
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
buttonRef={anchorEl}
|
||||
// buttonRef={anchorEl}
|
||||
ref={anchorEl}
|
||||
aria-label="Open Notifications"
|
||||
color="inherit"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
|
||||
import React, { Fragment, useState } from "react";
|
||||
import React, { Fragment, useState, useEffect } from "react";
|
||||
|
||||
|
||||
import DateFnsUtils from '@date-io/date-fns'; // choose your lib
|
||||
|
|
@ -24,7 +24,13 @@ function formatDateDatePicker(data){
|
|||
function ResponsiveDatePickers(props) {
|
||||
const [selectedDate, handleDateChange] = useState(new Date());
|
||||
|
||||
props.func(formatDateDatePicker(selectedDate));
|
||||
// props.func(formatDateDatePicker(selectedDate));
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
props.func(formatDateDatePicker(selectedDate));
|
||||
|
||||
}, [selectedDate])
|
||||
|
||||
return (
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import TextField from '@mui/material/TextField';
|
||||
|
||||
|
|
@ -6,11 +7,18 @@ import TextField from '@mui/material/TextField';
|
|||
|
||||
const SelectTextFields = (props) => {
|
||||
|
||||
const [currency, setCurrency] = React.useState('0');
|
||||
const [currency, setCurrency] = useState('0');
|
||||
|
||||
props.currencies.push({ 'value': 0, 'label': ''})
|
||||
|
||||
props.func(currency);
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
props.func(currency);
|
||||
|
||||
}, [currency])
|
||||
|
||||
// props.func(currency);
|
||||
|
||||
const handleChange = (event) => {
|
||||
setCurrency(event.target.value);
|
||||
|
|
@ -20,43 +28,46 @@ const SelectTextFields = (props) => {
|
|||
|
||||
return (
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
sx={{
|
||||
"&:hover": {
|
||||
"&& fieldset": {
|
||||
border: "1px solid black"
|
||||
}
|
||||
},
|
||||
<Box
|
||||
component="form"
|
||||
sx={{
|
||||
"&:hover": {
|
||||
"&& fieldset": {
|
||||
border: "1px solid black"
|
||||
}
|
||||
},
|
||||
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& .MuiTextField-root': { m: 1, },}
|
||||
}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
<TextField
|
||||
id="outlined-select-currency-native"
|
||||
margin="dense"
|
||||
size="small"
|
||||
select
|
||||
label={props.header}
|
||||
value={currency}
|
||||
onChange={handleChange}
|
||||
SelectProps={{
|
||||
native: true,
|
||||
}}
|
||||
//helperText="Please select your currency"
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& .MuiTextField-root': { m: 1, },}
|
||||
}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
{props.currencies.map((option) => (
|
||||
<option key={option.id} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
id="outlined-select-currency-native"
|
||||
margin="dense"
|
||||
size="small"
|
||||
select
|
||||
label={props.header}
|
||||
value={currency}
|
||||
onChange={handleChange}
|
||||
SelectProps={{
|
||||
native: true,
|
||||
}}
|
||||
// helperText="Please select your currency"
|
||||
>
|
||||
|
||||
</Box>
|
||||
{props.currencies.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
|
||||
</TextField>
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
);
|
||||
|
|
|
|||
|
|
@ -50,28 +50,29 @@ const TicketActionButtons = ({ ticket }) => {
|
|||
|
||||
render(<Modal modal_header={'Finalização de Atendimento'}/>)
|
||||
|
||||
|
||||
console.log('Constinuação..................')
|
||||
|
||||
return
|
||||
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.put(`/tickets/${ticket.id}`, {
|
||||
status: status,
|
||||
userId: userId || null,
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
if (status === "open") {
|
||||
history.push(`/tickets/${ticket.id}`);
|
||||
} else {
|
||||
history.push("/tickets");
|
||||
}
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
// setLoading(true);
|
||||
// try {
|
||||
// await api.put(`/tickets/${ticket.id}`, {
|
||||
// status: status,
|
||||
// userId: userId || null,
|
||||
// });
|
||||
|
||||
// setLoading(false);
|
||||
// if (status === "open") {
|
||||
// history.push(`/tickets/${ticket.id}`);
|
||||
// } else {
|
||||
// history.push("/tickets");
|
||||
// }
|
||||
// } catch (err) {
|
||||
// setLoading(false);
|
||||
// toastError(err);
|
||||
// }
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue