Merge branch 'testeA'

frontend/package.json

@@ -27,6 +27,7 @@
     "qrcode.react": "^1.0.0",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
+    "react-csv": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-modal-image": "^2.5.0",
     "react-router-dom": "^5.2.0",

frontend/src/components/Report/DatePicker/index.js

@@ -12,6 +12,8 @@ import {
   MuiPickersUtilsProvider,
 } from '@material-ui/pickers';
 
+import ptBrLocale from "date-fns/locale/pt-BR";
+
   
 function formatDateDatePicker(data){
   return String(new Date(data).getFullYear())+'-'+
@@ -27,7 +29,7 @@ function ResponsiveDatePickers(props) {
   return ( 
 
     <Fragment> 
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
         <KeyboardDatePicker
           autoOk
           variant="inline"

frontend/src/components/Report/ExportCSV/index.js

@@ -0,0 +1,64 @@
+ 
+import React, { useState, useEffect, useRef} from "react";  
+import { CSVLink } from "react-csv";
+import Button from '@mui/material/Button'; 
+
+/*const headers = [
+    { label: "First Name", key: "firstname" },
+    { label: "Last Name", key: "lastname" },
+    { label: "Email", key: "email" }
+  ];
+  
+const data = [
+    { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
+    { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
+    { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
+  ];*/
+ 
+ 
+
+const ExportCSV = (props) => { 
+
+    const [header, setHeader] = useState([])
+    const [dataRow, setDataRow] = useState([])
+
+    const csvLink = useRef() 
+
+    let headerFormat = JSON.parse(JSON.stringify(props.columns).split('"field":').join('"key":'))
+    headerFormat =  JSON.parse(JSON.stringify(headerFormat).split('"title":').join('"label":')) 
+    
+    //const dataRows = props.data.map((row) => { return { ...row }}); 
+
+    // const dataRows = props.data.map((obj)=>{
+    //     return {'fromMe': obj.fromMe, 'body': obj.body.replace(/ /g,''), 'createdAt': obj.createdAt}
+    // })
+
+    //console.log('******************************* dataRows: ',dataRows)
+
+    useEffect(()=>{
+        setHeader(headerFormat) 
+        setDataRow(props.data)
+    },[])
+
+    const getTransactionData = async () => { 
+
+        csvLink.current.link.click()
+        
+      }
+ 
+    return (   
+        <div> 
+            <Button onClick={getTransactionData}>EXPORT CSV</Button>
+            <CSVLink
+            headers={header}
+            data={dataRow} 
+            filename=  {props.user+'_'+props.clientContactNumber+'.csv'} 
+            target={'_blank'}
+            className='hidden'
+            ref={csvLink}  
+            />
+        </div>  
+    );
+}
+
+export default ExportCSV

frontend/src/components/Report/MTable/index.js

@@ -23,11 +23,13 @@ const MTable = (props) => {
   return ( <div style={{ maxWidth: "100%", fontSize:10}}>
           
              <MaterialTable
-                title='Relatorio'    
+                title= {props.table_title}    
                 columns={columnsLoad} 
                 data={dataLoad}  
 
                 
+                
+
                 onRowClick={(evt, selectedRow) => { 
 
                   console.log(selectedRow.tableData.id);
@@ -35,7 +37,15 @@ const MTable = (props) => {
                   console.log(selectedRow.messages); 
                   setSelectedRow(selectedRow.tableData.id)  
 
-                  render(<Modal data={selectedRow.messages}/>)  
+                  if(props.hasChild) { 
+                    render(<Modal data={selectedRow.messages} 
+                      hasChild={false} 
+                      modal_header={'Chat do atendimento pelo Whatsapp'}
+                      user={selectedRow.user.name}
+                      clientContactNumber={selectedRow.contact.number}/>)  
+                  }
+                  
+                  console.log('props.hasChild: ', props.hasChild)
 
                   //evt.stopPropagation() 
                   }
@@ -46,6 +56,7 @@ const MTable = (props) => {
                   selection: false,
                   paging: false,
                   padding: 'dense',  
+                  sorting: true ? props.hasChild: false,
                   //loadingType: 'linear',
                   searchFieldStyle: {
                     width: 300,
@@ -53,8 +64,7 @@ const MTable = (props) => {
                   
                   rowStyle: rowData => ({
                     fontSize: 12, 
-                    backgroundColor:
+                    backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'  
-                    selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
                 })
              }}  
              />   

frontend/src/components/Report/Modal/index.js

@@ -3,19 +3,27 @@ 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 DataGridTable from '../Table';
 import MTable from "../MTable";   
 
+import ExportCSV from '../ExportCSV'
+import { margin } from '@mui/system';
+
 let columns = [
   { 
     title: 'Atendente/Cliente', 
     field: 'fromMe', 
+    
   },
   
   {
     title: 'Mensagem', 
     field: 'body', 
-    cellStyle: {whiteSpace: 'nowrap'},
+    //cellStyle: {whiteSpace: 'nowrap'},
   },
 
   { title: 'Criado', field: 'createdAt' }
@@ -61,6 +69,8 @@ const Modal = (props) => {
   }, [open]);
 
   return (
+ 
+
     <div> 
       
       <Dialog 
@@ -75,13 +85,31 @@ const Modal = (props) => {
         aria-describedby="scroll-dialog-description"
       >   
 
-        <MTable data={dataChat} columns={columns} />  
+        <DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
+        <DialogContent dividers={scroll === 'paper'}>
+          <DialogContentText
+            id="scroll-dialog-description"
+            ref={descriptionElementRef}
+            tabIndex={-1}
+          >
+            <MTable data={dataChat} columns={columns} table_title={''} hasChild={false}/> 
+
+          </DialogContentText>
+        </DialogContent>
+        
  
         <DialogActions>     
+          <div style={{marginRight:'50px'}}>
+            <ExportCSV user={props.user} 
+            clientContactNumber={props.clientContactNumber}
+            data={dataChat} 
+            columns={columns}/> 
+          </div>
           <Button onClick={handleClose}>Ok</Button>  
         </DialogActions>
       </Dialog>
     </div> 
+
   );
 }
 

frontend/src/components/Report/SelectField/index.js

@@ -15,11 +15,19 @@ const SelectTextFields = (props) => {
     setCurrency(event.target.value);
   };
  
+  
+
   return ( 
 
     <Box  
         component="form"
         sx={{
+          "&:hover": {
+            "&& fieldset": {
+              border: "1px solid black"
+            }
+          },
+          
             display: 'flex',
             flexDirection: 'column',
             '& .MuiTextField-root': { m: 1, width: '30ch' },}}

frontend/src/pages/Report/index.js

@@ -287,7 +287,7 @@ console.log('XXXXXXXXX: ', query)
             <Item><DatePicker2 func={datePicker2Value} title={'Data fim'}/></Item>
             
             <Item sx={{ gridColumn: '4 / 5' }}>
-              <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>
+             {/* <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>*/}
             </Item> 
             
           </Box>
@@ -296,7 +296,12 @@ console.log('XXXXXXXXX: ', query)
               display: 'grid',  
             }}>
             <Item  sx={{ gridColumn: '1', gridRow: 'span 1' }}> 
-              <MTable data={query} columns={columnsData}/> 
+              
+              <MTable data={query} 
+              columns={columnsData} 
+              hasChild={true} 
+              table_title={'Relatório de atendimento por atendentes'}/> 
+
             </Item> 
           </Box>