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

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

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 (
+    <TextareaAutosize
+      aria-label="minimum height"
+      minRows={3}
+      placeholder={props.hint}
+
+      onChange={ handleChange}
+
+      style={{ width: 200 }}
+    />
+  );
+}

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 (
+
+   <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <TimePicker
+            label="Hora do lembrete"
+            value={value}
+            onChange={(newValue) => {
+            setValue(newValue);
+            }}
+            renderInput={(params) => <TextField {...params} />}
+        />
+    </MuiPickersUtilsProvider>    
+ 
+  );
+}

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

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(<Modal modal_header={'Finalização de Atendimento'}/>)  
+
+		console.log('Constinuação..................')
+		
+		return
+
+
 		setLoading(true);
 		try {
 			await api.put(`/tickets/${ticket.id}`, {

frontend/src/pages/Report/index.js

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