diff --git a/frontend/src/components/ChatEnd/ModalChatEnd/index.js b/frontend/src/components/ChatEnd/ModalChatEnd/index.js new file mode 100644 index 0000000..f83bdc4 --- /dev/null +++ b/frontend/src/components/ChatEnd/ModalChatEnd/index.js @@ -0,0 +1,253 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; + +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; + +import TextField from '@mui/material/TextField'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; + +import SelectField from "../../Report/SelectField"; +import DatePicker from '../../Report/DatePicker' + +import TimerPickerSelect from '../TimerPickerSelect' +import TextArea1 from '../TextArea' +import TextArea2 from '../TextArea' + + + +function Item(props) { + const { sx, ...other } = props; + return ( + (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + p: 1, + m: 1, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + ...sx, + }} + {...other} + /> + ); +} + +Item.propTypes = { + sx: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), + ), + PropTypes.func, + PropTypes.object, + ]), +}; + + + +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 [data, setData] = React.useState([ + {'id': 1, 'name': 'STATUS1'}, + {'id': 2, 'name': 'STATUS2'}, + {'id': 3, 'name': 'STATUS3'}, + {'id': 4, 'name': 'STATUS4'}, + ]) + + const handleClose = (event, reason) => { + + if (reason && reason == "backdropClick") + return; + + setOpen(false); + }; + + const descriptionElementRef = React.useRef(null); + React.useEffect(() => { + if (open) { + const { current: descriptionElement } = descriptionElementRef; + if (descriptionElement !== null) { + descriptionElement.focus(); + } + } + }, [open]); + + + // Get from child 1 +const textFieldSelect = (data) => { + console.log('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) => { + console.log('textArea1Value: ',(data)); + setTextArea1(data) +} + +// Get from child 5 +const textArea2Value = (data) => { + console.log('textArea2Value: ',(data)); + setTextArea2(data) +} + + return ( + + +
+ + + + {props.modal_header} + + + {/* :not(style)': { m: 1, width: '35ch' }, + }} + noValidate + autoComplete="off" + > + + */} + + + {/* + + + */} + + + + + + +
Selecione um status para encerrar o Atendimento
+ + + { + return {'value': obj.id, 'label': obj.name} + })}/> + + + + + + + + +
+ +
+ + + +
Lembrete de retorno
+ + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+
+ + + +
+
footer
+
+ +
+
+
+ + ); +} + +export default Modal \ No newline at end of file diff --git a/frontend/src/components/ChatEnd/TextArea/index.js b/frontend/src/components/ChatEnd/TextArea/index.js new file mode 100644 index 0000000..b71e6eb --- /dev/null +++ b/frontend/src/components/ChatEnd/TextArea/index.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import TextareaAutosize from '@mui/material/TextareaAutosize'; + + +export default function MinHeightTextarea(props) { + + const [value, setValue] = React.useState(''); + + props.func(value); + + const handleChange = (event) => { + setValue(event.target.value); + }; + + return ( + + ); +} diff --git a/frontend/src/components/ChatEnd/TimerPickerSelect/index.js b/frontend/src/components/ChatEnd/TimerPickerSelect/index.js new file mode 100644 index 0000000..4bc4620 --- /dev/null +++ b/frontend/src/components/ChatEnd/TimerPickerSelect/index.js @@ -0,0 +1,30 @@ + +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import DateFnsUtils from '@date-io/date-fns'; + +import { + TimePicker, + MuiPickersUtilsProvider, +} from '@material-ui/pickers'; + +export default function ResponsiveTimePickers(props) { + const [value, setValue] = React.useState(new Date()); + + props.func(value); + + return ( + + + { + setValue(newValue); + }} + renderInput={(params) => } + /> + + + ); +} diff --git a/frontend/src/components/Report/SelectField/index.js b/frontend/src/components/Report/SelectField/index.js index 92c3a28..0ae15fd 100644 --- a/frontend/src/components/Report/SelectField/index.js +++ b/frontend/src/components/Report/SelectField/index.js @@ -5,9 +5,10 @@ import TextField from '@mui/material/TextField'; const SelectTextFields = (props) => { - const [currency, setCurrency] = React.useState('0'); - props.currencies.push({ value: '0', label: ''}) + const [currency, setCurrency] = React.useState('0'); + + props.currencies.push({ 'value': 0, 'label': ''}) props.func(currency); @@ -30,7 +31,8 @@ const SelectTextFields = (props) => { display: 'flex', flexDirection: 'column', - '& .MuiTextField-root': { m: 1, width: '30ch' },}} + '& .MuiTextField-root': { m: 1, },} + } noValidate autoComplete="off" > @@ -39,7 +41,7 @@ const SelectTextFields = (props) => { margin="dense" size="small" select - label="Usuário" + label={props.header} value={currency} onChange={handleChange} SelectProps={{ @@ -48,7 +50,7 @@ const SelectTextFields = (props) => { //helperText="Please select your currency" > {props.currencies.map((option) => ( - ))} @@ -60,7 +62,7 @@ const SelectTextFields = (props) => { ); } -export default SelectTextFields +export default SelectTextFields diff --git a/frontend/src/components/TicketActionButtons/index.js b/frontend/src/components/TicketActionButtons/index.js index c466fb0..7288049 100644 --- a/frontend/src/components/TicketActionButtons/index.js +++ b/frontend/src/components/TicketActionButtons/index.js @@ -12,6 +12,9 @@ import ButtonWithSpinner from "../ButtonWithSpinner"; import toastError from "../../errors/toastError"; import { AuthContext } from "../../context/Auth/AuthContext"; +import Modal from "../ChatEnd/ModalChatEnd"; +import { render } from '@testing-library/react'; + const useStyles = makeStyles(theme => ({ actionButtons: { marginRight: 6, @@ -41,6 +44,17 @@ const TicketActionButtons = ({ ticket }) => { }; const handleUpdateTicketStatus = async (e, status, userId) => { + + // Thuanny + //alert(`ticket.id: ${ticket.id} | status: ${status}| userId: ${userId}`) + + render() + + console.log('Constinuação..................') + + return + + setLoading(true); try { await api.put(`/tickets/${ticket.id}`, { diff --git a/frontend/src/pages/Report/index.js b/frontend/src/pages/Report/index.js index 5bef567..8ff33bb 100644 --- a/frontend/src/pages/Report/index.js +++ b/frontend/src/pages/Report/index.js @@ -262,7 +262,7 @@ const textFieldSelectUser = (data) => { - { + { return {'value': obj.id, 'label': obj.name} })}/>