Merge branch 'testeA'

pull/1/head
adriano 2022-01-26 20:58:18 -03:00
commit 1d8fd895f1
7 changed files with 135 additions and 17 deletions

View File

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

View File

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

View File

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

View File

@ -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:
selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
})
}}
/>

View File

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

View File

@ -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' },}}

View File

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