Criação completa do relatório

pull/1/head
adriano 2022-01-26 20:56:57 -03:00
parent 66da6a9d59
commit bad6f67c7b
7 changed files with 106 additions and 10 deletions

View File

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

View File

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

@ -38,7 +38,11 @@ const MTable = (props) => {
setSelectedRow(selectedRow.tableData.id) setSelectedRow(selectedRow.tableData.id)
if(props.hasChild) { if(props.hasChild) {
render(<Modal data={selectedRow.messages} hasChild={false} modal_header={'Chat do atendimento pelo Whatsapp'}/>) 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) console.log('props.hasChild: ', props.hasChild)

View File

@ -10,6 +10,9 @@ import DialogTitle from '@mui/material/DialogTitle';
import DataGridTable from '../Table'; import DataGridTable from '../Table';
import MTable from "../MTable"; import MTable from "../MTable";
import ExportCSV from '../ExportCSV'
import { margin } from '@mui/system';
let columns = [ let columns = [
{ {
title: 'Atendente/Cliente', title: 'Atendente/Cliente',
@ -66,7 +69,9 @@ const Modal = (props) => {
}, [open]); }, [open]);
return ( return (
<div>
<div>
<Dialog <Dialog
open={open} open={open}
@ -93,11 +98,18 @@ const Modal = (props) => {
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose}>Ok</Button> <div style={{marginRight:'50px'}}>
<ExportCSV user={props.user}
clientContactNumber={props.clientContactNumber}
data={dataChat}
columns={columns}/>
</div>
<Button onClick={handleClose}>Ok</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div> </div>
); );
} }

View File

@ -14,26 +14,34 @@ const SelectTextFields = (props) => {
const handleChange = (event) => { const handleChange = (event) => {
setCurrency(event.target.value); setCurrency(event.target.value);
}; };
return ( return (
<Box <Box
component="form" component="form"
sx={{ sx={{
"&:hover": {
"&& fieldset": {
border: "1px solid black"
}
},
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
'& .MuiTextField-root': { m: 1, width: '30ch' },}} '& .MuiTextField-root': { m: 1, width: '30ch' },}}
noValidate noValidate
autoComplete="off" autoComplete="off"
> >
<TextField <TextField
id="outlined-select-currency-native" id="outlined-select-currency-native"
margin="dense" margin="dense"
size="small" size="small"
select select
label="Usuário" label="Usuário"
value={currency} value={currency}
onChange={handleChange} onChange={handleChange}
SelectProps={{ SelectProps={{
native: true, native: true,
}} }}

View File

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