adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/components/ChatEnd/ModalChatEnd/index.js
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 Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions'; import DialogActions from '@mui/material/DialogActions';
@ -19,8 +20,8 @@ import TextArea1 from '../TextArea'
import TextArea2 from '../TextArea' import TextArea2 from '../TextArea'
const Item = (props) => {
function Item(props) {
const { sx, ...other } = props; const { sx, ...other } = props;
return ( return (
<Box <Box
@ -55,15 +56,15 @@ Item.propTypes = {
const Modal = (props) => { const Modal = (props) => {
const [open, setOpen] = React.useState(true); const [open, setOpen] = useState(true);
const [scroll, /*setScroll*/] = React.useState('body'); const [scroll, /*setScroll*/] = useState('body');
const [schedulingId, setScheduling] = React.useState(null) const [schedulingId, setScheduling] = useState(null)
const [startDate, setDatePicker] = React.useState(new Date()) const [startDate, setDatePicker] = useState(new Date())
const [timerPicker, setTimerPicker] = React.useState(new Date()) const [timerPicker, setTimerPicker] = useState(new Date())
const [textArea1, setTextArea1] = React.useState() const [textArea1, setTextArea1] = useState()
const [textArea2, setTextArea2] = React.useState() const [textArea2, setTextArea2] = useState()
const [data, setData] = React.useState([ const [data] = useState([
{'id': 1, 'name': 'STATUS1'}, {'id': 1, 'name': 'STATUS1'},
{'id': 2, 'name': 'STATUS2'}, {'id': 2, 'name': 'STATUS2'},
{'id': 3, 'name': 'STATUS3'}, {'id': 3, 'name': 'STATUS3'},
@ -72,14 +73,14 @@ const Modal = (props) => {
const handleClose = (event, reason) => { const handleClose = (event, reason) => {
if (reason && reason == "backdropClick") if (reason && reason === "backdropClick")
return; return;
setOpen(false); setOpen(false);
}; };
const descriptionElementRef = React.useRef(null); const descriptionElementRef = useRef(null);
React.useEffect(() => { useEffect(() => {
if (open) { if (open) {
const { current: descriptionElement } = descriptionElementRef; const { current: descriptionElement } = descriptionElementRef;
if (descriptionElement !== null) { if (descriptionElement !== null) {
@ -119,18 +120,16 @@ const textArea2Value = (data) => {
setTextArea2(data) setTextArea2(data)
} }
return (
<div> return (
<Dialog
<Dialog
open={open} open={open}
onClose={handleClose} onClose={handleClose}
// fullWidth={true} // fullWidth={true}
// maxWidth={true} // maxWidth={true}
disableEscapeKeyDown disableEscapeKeyDown
scroll={scroll} scroll={scroll}
@ -140,35 +139,14 @@ const textArea2Value = (data) => {
<DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle> <DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
<DialogContent dividers={scroll === 'body'}> <DialogContent dividers={scroll === 'body'}>
<DialogContentText <DialogContentText
id="scroll-dialog-description" id="scroll-dialog-description"
ref={descriptionElementRef} ref={descriptionElementRef}
tabIndex={-1} tabIndex={-1}
> >
{/* <Box
component="form" </DialogContentText>
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 <Box
sx={{ sx={{
@ -177,11 +155,31 @@ const textArea2Value = (data) => {
// backgroundColor: 'primary.dark', // backgroundColor: 'primary.dark',
// '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],}, // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
}}> }}>
<Box sx={{
{/* <Box sx={{
display: 'grid', display: 'grid',
}}> }}>
<Item> <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> <Item>
<SelectField func={textFieldSelect} header={'Status de atendimento'} currencies={data.map((obj)=>{ <SelectField func={textFieldSelect} header={'Status de atendimento'} currencies={data.map((obj)=>{
@ -195,17 +193,18 @@ const textArea2Value = (data) => {
maxWidth: '100%', 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> </Box>
</Item> </Item>
</Item> </Item>
</Box> </Box>
<Item>
<div>Lembrete de retorno</div> <Item>
<span>Lembrete de retorno</span>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
@ -216,25 +215,17 @@ const textArea2Value = (data) => {
</Box> </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><TextArea1 func={textArea1Value} hint={'Lembrete'}/> </Item>
<Item><TextArea2 func={textArea2Value} hint={'Mensagem para cliente'}/></Item> <Item><TextArea2 func={textArea2Value} hint={'Mensagem para cliente'}/></Item>
</Box> </Box> */}
</Item> </Item>
</Box> </Box>
</DialogContentText>
</DialogContent> </DialogContent>
@ -244,8 +235,8 @@ const textArea2Value = (data) => {
</div> </div>
<Button onClick={handleClose}>Ok</Button> <Button onClick={handleClose}>Ok</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div>
); );
} }

7
frontend/src/components/ChatEnd/TextArea/index.js
View File

@ -1,8 +1,9 @@
import * as React from 'react'; import * as React from 'react';
import TextareaAutosize from '@mui/material/TextareaAutosize'; import TextareaAutosize from '@mui/material/TextareaAutosize';
export default function MinHeightTextarea(props) {
const MinHeightTextarea = (props) => {
const [value, setValue] = React.useState(''); const [value, setValue] = React.useState('');
@ -24,3 +25,5 @@ export default function MinHeightTextarea(props) {
/> />
); );
} }
export default MinHeightTextarea;

49
frontend/src/components/ChatEnd/TimerPickerSelect/index.js
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 TextField from '@mui/material/TextField';
import DateFnsUtils from '@date-io/date-fns'; import DateFnsUtils from '@date-io/date-fns';
@ -8,23 +9,43 @@ import {
MuiPickersUtilsProvider, MuiPickersUtilsProvider,
} from '@material-ui/pickers'; } 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 ( return (
<MuiPickersUtilsProvider utils={DateFnsUtils}> <Fragment>
<TimePicker
label="Hora do lembrete" <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
value={value} <TimePicker
onChange={(newValue) => { label="Hora do lembrete"
setValue(newValue); value={value}
}}
renderInput={(params) => <TextField {...params} />} onChange={(newValue) => {
/> setValue(newValue);
</MuiPickersUtilsProvider> }}
// Ativar se necessario
// renderInput={(params) => <TextField {...params} />}
/>
</MuiPickersUtilsProvider>
</Fragment>
); );
} }
export default ResponsiveTimePickers

3
frontend/src/components/MessageInput/index.js
View File

@ -585,7 +585,8 @@ const MessageInput = ({ ticketStatus }) => {
: i18n.t("messagesInput.placeholderClosed") : i18n.t("messagesInput.placeholderClosed")
} }
multiline multiline
rowsMax={5} // rowsMax={5}
maxRows={5}
value={inputMessage} value={inputMessage}
onChange={handleChangeInput} onChange={handleChangeInput}
disabled={recording || loading || ticketStatus !== "open"} disabled={recording || loading || ticketStatus !== "open"}

3
frontend/src/components/NotificationsPopOver/index.js
View File

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

10
frontend/src/components/Report/DatePicker/index.js
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 import DateFnsUtils from '@date-io/date-fns'; // choose your lib
@ -24,7 +24,13 @@ function formatDateDatePicker(data){
function ResponsiveDatePickers(props) { function ResponsiveDatePickers(props) {
const [selectedDate, handleDateChange] = useState(new Date()); const [selectedDate, handleDateChange] = useState(new Date());
props.func(formatDateDatePicker(selectedDate)); // props.func(formatDateDatePicker(selectedDate));
useEffect(()=>{
props.func(formatDateDatePicker(selectedDate));
}, [selectedDate])
return ( return (

91
frontend/src/components/Report/SelectField/index.js
View File

@ -1,4 +1,5 @@
import * as React from 'react'; import React, { useState, useEffect } from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField'; import TextField from '@mui/material/TextField';
@ -6,11 +7,18 @@ import TextField from '@mui/material/TextField';
const SelectTextFields = (props) => { const SelectTextFields = (props) => {
const [currency, setCurrency] = React.useState('0'); const [currency, setCurrency] = useState('0');
props.currencies.push({ 'value': 0, 'label': ''}) props.currencies.push({ 'value': 0, 'label': ''})
props.func(currency); useEffect(()=>{
props.func(currency);
}, [currency])
// props.func(currency);
const handleChange = (event) => { const handleChange = (event) => {
setCurrency(event.target.value); setCurrency(event.target.value);
@ -18,45 +26,48 @@ const SelectTextFields = (props) => {
return ( return (
<Box <Box
component="form" component="form"
sx={{ sx={{
"&:hover": { "&:hover": {
"&& fieldset": { "&& fieldset": {
border: "1px solid black" border: "1px solid black"
} }
}, },
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
'& .MuiTextField-root': { m: 1, },} '& .MuiTextField-root': { m: 1, },}
} }
noValidate noValidate
autoComplete="off" 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"
> >
{props.currencies.map((option) => ( <TextField
<option key={option.id} value={option.value}> id="outlined-select-currency-native"
{option.label} margin="dense"
</option> size="small"
))} select
</TextField> label={props.header}
value={currency}
onChange={handleChange}
SelectProps={{
native: true,
}}
// helperText="Please select your currency"
>
{props.currencies.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</Box> </TextField>
</Box>
); );

35
frontend/src/components/TicketActionButtons/index.js
View File

@ -49,29 +49,30 @@ const TicketActionButtons = ({ ticket }) => {
//alert(`ticket.id: ${ticket.id} | status: ${status}| userId: ${userId}`) //alert(`ticket.id: ${ticket.id} | status: ${status}| userId: ${userId}`)
render(<Modal modal_header={'Finalização de Atendimento'}/>) render(<Modal modal_header={'Finalização de Atendimento'}/>)
console.log('Constinuação..................') console.log('Constinuação..................')
return
setLoading(true); // setLoading(true);
try { // try {
await api.put(`/tickets/${ticket.id}`, { // await api.put(`/tickets/${ticket.id}`, {
status: status, // status: status,
userId: userId || null, // userId: userId || null,
}); // });
setLoading(false); // setLoading(false);
if (status === "open") { // if (status === "open") {
history.push(`/tickets/${ticket.id}`); // history.push(`/tickets/${ticket.id}`);
} else { // } else {
history.push("/tickets"); // history.push("/tickets");
} // }
} catch (err) { // } catch (err) {
setLoading(false); // setLoading(false);
toastError(err); // toastError(err);
} // }
}; };
return ( return (