Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix admin tabls

Browse Source
This commit is contained in:
joseCorte-exe 2022-06-23 10:09:18 -03:00
parent 4159a8096a
commit 990e47aa01
5 changed files with 141 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/administrativeTables/ClientsTable.tsx
View File

@ -12,7 +12,34 @@ import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils';
import React, { useState, useEffect } from 'react';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import Modal from '@mui/material/Modal';
import { TableView, StyledStatus } from './TableView';
import { api } from '../../services/api';
const style = {
position: 'absolute' as const,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 900,
height: 500,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
overflowY: 'scroll'
};
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref,
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
interface Data {
clientCode: number,
@ -161,6 +188,37 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
const [dense, setDense] = useState<boolean>(false);
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
const [open, setOpen] = useState(false);
const [openModalInativar, setOpenModalInativar] = useState(false)
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [cod_client, setCod_client] = useState()
const [units, setUnits] = useState([])
function getClientUnits(client_id: number) {
api.post('/units', {
"filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id}
],
"fields": ["unidade"],
"distinct": true
}).then(res => setUnits(res.data.data)).catch(res => {
setOpenSnackError(true)
})
return units
}
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === 'clickaway') {
return;
}
setOpenSnackError(false);
};
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof Data,
@ -220,6 +278,11 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
return (
<TableView>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
Não foi possivel encontrar unidades do client!
</Alert>
</Snackbar>
<Paper sx={{ width: '100%', mb: 2 }}>
<TableContainer>
<Table
@ -270,7 +333,10 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
Client - {row.client_id}
</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">clique aqui para ver as unidades</TableCell>
<TableCell align="left" style={{cursor: 'pointer'}} onClick={() => {
setOpen(true)
getClientUnits(row.client_id)
}}>clique aqui para ver as unidades</TableCell>
<TableCell align="left"><StyledStatus status={row.deleted_at? 'inativo' : 'ativo'}> {row.deleted_at? 'inativo' : 'ativo'}</StyledStatus></TableCell>
</TableRow>
);
@ -297,6 +363,25 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
{
units.map((units, index) => {
return <>
<li style={{
listStyle: 'none'
}} key={index}>{units.unidade}</li>
<hr />
</>
})
}
</Box>
</Modal>
</TableView>
);
}

2
src/components/administrativeTables/FaqTable.tsx
View File

@ -283,7 +283,7 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
{row.question}
</TableCell>
<TableCell align="left">{row.answer}</TableCell>
<TableCell align="left"><StyledStatus status={row.deleted_at? 'ativo' : 'inativo'}> {row.deleted_at? 'ativo' : 'inativo'}</StyledStatus></TableCell>
<TableCell align="left"><StyledStatus status={'ativo'}> {'ativo'}</StyledStatus></TableCell>
</TableRow>
);
})}

2
src/components/administrativeTables/NotificationsTable.tsx
View File

@ -290,7 +290,7 @@ export default function NotificationsTable({notifications, onChange}: Notificati
{row.title}
</TableCell>
<TableCell align="left">{'copel'}</TableCell>
<TableCell align="left"><StyledStatus status={row.deleted_at===null? 'ativo' : 'inativo'}>{row.deleted_at===null? 'ativo' : 'inativo'}</StyledStatus></TableCell>
<TableCell align="left"><StyledStatus status={'ativo'}>{'ativo'}</StyledStatus></TableCell>
</TableRow>
);
})}

50
src/pages/administrative/clients/index.tsx
View File

@ -1,11 +1,9 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import React, { useState } from 'react'
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import ClientsTable from '../../../components/administrativeTables/ClientsTable';
@ -23,6 +21,8 @@ import { parseCookies } from 'nookies';
import { GetServerSideProps } from 'next';
import getAPIClient from '../../../services/ssrApi';
import FormData from 'form-data';
const style = {
position: 'absolute' as const,
top: '50%',
@ -44,7 +44,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
export default function clients({clients}) {
export default function clients({clients, userName}) {
const formData = new FormData();
const [client, setClient] = useState<any>({
name: String,
email: String,
@ -52,6 +54,7 @@ export default function clients({clients}) {
password_confirmation: String,
client_id: Number
})
const [logo, setLogo] = useState(false);
const [selectedClients, setSelectedClients] = useState([])
const [open, setOpen] = useState(false);
@ -61,7 +64,6 @@ export default function clients({clients}) {
const [openModal, setOpenModal] = useState(false)
//
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
@ -84,20 +86,20 @@ export default function clients({clients}) {
setOpenSnackErrorDelete(false);
setOpenSnackSuccessDelete(false);
};
//
function onChange(e) {
setLogo(e.target.files[0])
}
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
api.post('/user', {
name,
email,
password,
password_confirmation,
client_id
}, {
headers: {
'Content-Type': 'multipart/form-data'
},
}).then(res => {
formData.append('name', name)
formData.append('email', email)
formData.append('password', password)
formData.append('password_confirmation', password_confirmation)
formData.append('client_id', client_id)
formData.append('profile_picture', logo)
api.post('/user', formData).then(res => {
setOpenSnackSuccess(true)
setOpenModalInativar(false)
window.location.reload()
@ -105,7 +107,6 @@ export default function clients({clients}) {
setOpenSnackError(true)
})
}
async function handleDeleteClient(id: any) {
await id.map(client => {
api.delete(`/user/${client}`).then(res => {
@ -118,26 +119,25 @@ export default function clients({clients}) {
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
notificação cadastrada com sucesso!
Usuario cadastrada com sucesso!
</Alert>
</Snackbar>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
Notificação não cadastrada!
Usuario não cadastrada!
</Alert>
</Snackbar>
<Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
notificação excluida com sucesso!
Usuario excluida com sucesso!
</Alert>
</Snackbar>
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
Notificação não excluida!
Usuario não excluida!
</Alert>
</Snackbar>
@ -196,7 +196,8 @@ export default function clients({clients}) {
client_id: value.target.value
})
}} variant="outlined" />
<InputUpload />
<input type="file" onChange={onChange}/>
{/* <InputUpload /> */}
<br /><br />
<FaqButton1 title='Cancelar' onClick={() => setOpen(false)} />
<FaqButton2 title='Salvar' onClick={() => handleCreateClient(client)}/>
@ -206,7 +207,6 @@ export default function clients({clients}) {
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
<PageTitle title='Inativar Cliente(s)' subtitle='deseja realmente inativar os clientes selecionadas?'/>
<ConfirmModalView>
<BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
</ConfirmModalView>
@ -218,6 +218,7 @@ export default function clients({clients}) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let clients = [];
@ -241,6 +242,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
clients,
userName
}
}
}

43
src/pages/pld/index.tsx
View File

@ -26,9 +26,10 @@ interface pldInterface {
graphByHourData: any,
graphByMonthData: any
userName: string,
clientMonth: any
}
export default function pld({tableData, graphByHourData, graphByMonthData, userName}: pldInterface) {
export default function pld({tableData, graphByHourData, graphByMonthData, userName, clientMonth}: pldInterface) {
const router = useRouter()
const { region } = router.query
@ -255,18 +256,17 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
label="Age"
>
<MenuItem value={'01'}>01</MenuItem>
<MenuItem value={'02'}>02</MenuItem>
<MenuItem value={'03'}>03</MenuItem>
<MenuItem value={'04'}>04</MenuItem>
<MenuItem value={'05'}>05</MenuItem>
<MenuItem value={'06'}>06</MenuItem>
<MenuItem value={'07'}>07</MenuItem>
<MenuItem value={'08'}>08</MenuItem>
<MenuItem value={'09'}>09</MenuItem>
<MenuItem value={'10'}>10</MenuItem>
<MenuItem value={'11'}>11</MenuItem>
<MenuItem value={'12'}>12</MenuItem>
<MenuItem value={'0'}>Nenhum</MenuItem>
{
clientMonth.sort((a, b) => {
if (parseFloat(a.mes_ref.slice(3,4)) > parseFloat(b.mes_ref.slice(3,4))) return 1
if (parseFloat(a.mes_ref.slice(3,4)) < parseFloat(b.mes_ref.slice(3,4))) return -1
return 0
}).map((data, index) => {
return <MenuItem key={index} value={data.mes_ref.slice(2, 4)}>{data.mes_ref.slice(2, 4)}</MenuItem>
})
}
</Select>
</FormControl>
</section>
@ -288,7 +288,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
</section>
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
title={`PLD - ${date}`}
title={`Período - ${date}`}
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
</PldGraphView>
</RenderIf>
@ -301,8 +301,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let tableData = [];
let clientMonth = [];
await apiClient.post('/pld/list').then(res => {
tableData = res.data
@ -310,6 +310,16 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
console.log(res)
})
await apiClient.post('/pld', {
"filters": [],
"fields": ["mes_ref"],
"distinct": true
}).then(res => {
clientMonth = res.data.data
}).catch(res => {
console.log(res)
})
if (!token) {
return {
redirect: {
@ -322,7 +332,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
tableData,
userName
userName,
clientMonth
}
}
}