Criação de componentes para agendamento quando finalizar o atendimento

pull/1/head
adriano 2022-02-27 01:35:56 -03:00
parent eff9c9bb7e
commit af418616fc
6 changed files with 332 additions and 7 deletions

View File

@ -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

View File

@ -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 }}
/>
);
}

View File

@ -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>
);
}

View File

@ -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: ''})
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>
))}

View File

@ -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}`, {

View File

@ -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>