Adição de componentes parcial do modal de agendamento

pull/1/head
adriano 2022-02-27 17:05:21 -03:00
parent af418616fc
commit c65fcfe66c
8 changed files with 177 additions and 142 deletions

View File

@ -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
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={{
display: 'grid',
}}>
<Item>
<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>
<div>Selecione um status para encerrar o Atendimento</div>
<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>
<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>
);
}

View File

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

View File

@ -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());
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}>
<Fragment>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
<TimePicker
label="Hora do lembrete"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
// Ativar se necessario
// renderInput={(params) => <TextField {...params} />}
/>
</MuiPickersUtilsProvider>
</Fragment>
);
}
export default ResponsiveTimePickers

View File

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

View File

@ -190,7 +190,8 @@ const NotificationsPopOver = () => {
<>
<IconButton
onClick={handleClick}
buttonRef={anchorEl}
// buttonRef={anchorEl}
ref={anchorEl}
aria-label="Open Notifications"
color="inherit"
>

View File

@ -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,8 +24,14 @@ function formatDateDatePicker(data){
function ResponsiveDatePickers(props) {
const [selectedDate, handleDateChange] = useState(new Date());
// props.func(formatDateDatePicker(selectedDate));
useEffect(()=>{
props.func(formatDateDatePicker(selectedDate));
}, [selectedDate])
return (
<Fragment>

View File

@ -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,12 +7,19 @@ 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': ''})
useEffect(()=>{
props.func(currency);
}, [currency])
// props.func(currency);
const handleChange = (event) => {
setCurrency(event.target.value);
};
@ -49,13 +57,16 @@ const SelectTextFields = (props) => {
}}
// helperText="Please select your currency"
>
{props.currencies.map((option) => (
<option key={option.id} value={option.value}>
{props.currencies.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</TextField>
</Box>

View File

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