Criação de componentes para agendamento quando finalizar o atendimento
adriano
parent
eff9c9bb7e
commit
af418616fc
|
|
@ -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 (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: (theme) => (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 (
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
|
||||
// fullWidth={true}
|
||||
// maxWidth={true}
|
||||
|
||||
disableEscapeKeyDown
|
||||
|
||||
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'}>
|
||||
<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> */}
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: 500,
|
||||
height: 430,
|
||||
// backgroundColor: 'primary.dark',
|
||||
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'grid',
|
||||
}}>
|
||||
<Item>
|
||||
<div>Selecione um status para encerrar o Atendimento</div>
|
||||
|
||||
<Item>
|
||||
<SelectField func={textFieldSelect} header={'Status de atendimento'} currencies={data.map((obj)=>{
|
||||
return {'value': obj.id, 'label': obj.name}
|
||||
})}/>
|
||||
</Item>
|
||||
|
||||
<Item>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
>
|
||||
<TextField fullWidth label="CPF/CNPJ" id="fullWidth" size="small" margin="1"/>
|
||||
</Box>
|
||||
</Item>
|
||||
|
||||
</Item>
|
||||
|
||||
</Box>
|
||||
|
||||
<Item>
|
||||
|
||||
<div>Lembrete de retorno</div>
|
||||
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
|
||||
|
||||
<Item><DatePicker func={datePickerValue} title={'Data'}/></Item>
|
||||
|
||||
<Item><TimerPickerSelect func={timerPickerValue} title={'Data inicio'}/></Item>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
</Item>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
|
||||
<DialogActions>
|
||||
<div style={{marginRight:'50px'}}>
|
||||
<div>footer</div>
|
||||
</div>
|
||||
<Button onClick={handleClose}>Ok</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Modal
|
||||
|
|
@ -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 (
|
||||
<TextareaAutosize
|
||||
aria-label="minimum height"
|
||||
minRows={3}
|
||||
placeholder={props.hint}
|
||||
|
||||
onChange={ handleChange}
|
||||
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<TimePicker
|
||||
label="Hora do lembrete"
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</MuiPickersUtilsProvider>
|
||||
|
||||
);
|
||||
}
|
||||
|
|
@ -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) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
<option key={option.id} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
|
|
@ -60,7 +62,7 @@ const SelectTextFields = (props) => {
|
|||
);
|
||||
}
|
||||
|
||||
export default SelectTextFields
|
||||
export default SelectTextFields
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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(<Modal modal_header={'Finalização de Atendimento'}/>)
|
||||
|
||||
console.log('Constinuação..................')
|
||||
|
||||
return
|
||||
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.put(`/tickets/${ticket.id}`, {
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ const textFieldSelectUser = (data) => {
|
|||
<MainContainer>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
|
||||
|
||||
<Item><SelectField func={textFieldSelectUser} currencies={users.map((obj)=>{
|
||||
<Item><SelectField func={textFieldSelectUser} header={'Usuário'} currencies={users.map((obj)=>{
|
||||
return {'value': obj.id, 'label': obj.name}
|
||||
})}/></Item>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue