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

@ -23,9 +23,11 @@ const MTable = (props) => {
return ( <div style={{ maxWidth: "100%", fontSize:10}}> return ( <div style={{ maxWidth: "100%", fontSize:10}}>
<MaterialTable <MaterialTable
title='Relatorio' title= {props.table_title}
columns={columnsLoad} columns={columnsLoad}
data={dataLoad} data={dataLoad}
onRowClick={(evt, selectedRow) => { onRowClick={(evt, selectedRow) => {
@ -34,8 +36,16 @@ const MTable = (props) => {
console.log(selectedRow); console.log(selectedRow);
console.log(selectedRow.messages); console.log(selectedRow.messages);
setSelectedRow(selectedRow.tableData.id) 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() //evt.stopPropagation()
} }
@ -46,6 +56,7 @@ const MTable = (props) => {
selection: false, selection: false,
paging: false, paging: false,
padding: 'dense', padding: 'dense',
sorting: true ? props.hasChild: false,
//loadingType: 'linear', //loadingType: 'linear',
searchFieldStyle: { searchFieldStyle: {
width: 300, width: 300,
@ -53,8 +64,7 @@ const MTable = (props) => {
rowStyle: rowData => ({ rowStyle: rowData => ({
fontSize: 12, fontSize: 12,
backgroundColor: backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
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 Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions'; 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 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',
field: 'fromMe', field: 'fromMe',
}, },
{ {
title: 'Mensagem', title: 'Mensagem',
field: 'body', field: 'body',
cellStyle: {whiteSpace: 'nowrap'}, //cellStyle: {whiteSpace: 'nowrap'},
}, },
{ title: 'Criado', field: 'createdAt' } { title: 'Criado', field: 'createdAt' }
@ -61,7 +69,9 @@ const Modal = (props) => {
}, [open]); }, [open]);
return ( return (
<div>
<div>
<Dialog <Dialog
open={open} open={open}
@ -73,15 +83,33 @@ const Modal = (props) => {
scroll={scroll} scroll={scroll}
aria-labelledby="scroll-dialog-title" aria-labelledby="scroll-dialog-title"
aria-describedby="scroll-dialog-description" 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>
<Button onClick={handleClose}>Ok</Button> <DialogActions>
<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}/>
<MTable data={query}
columns={columnsData}
hasChild={true}
table_title={'Relatório de atendimento por atendentes'}/>
</Item> </Item>
</Box> </Box>