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

add delete clients and fix clients table

Browse Source
This commit is contained in:
joseCorte-exe 2022-06-16 10:19:30 -03:00
parent a3f9b5898b
commit 7aef424758
4 changed files with 253 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,6 @@
import DeleteIcon from '@mui/icons-material/Delete';
import FilterListIcon from '@mui/icons-material/FilterList';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import { alpha } from '@mui/material/styles';
import Switch from '@mui/material/Switch';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
@ -15,11 +9,8 @@ import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import Toolbar from '@mui/material/Toolbar';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { visuallyHidden } from '@mui/utils';
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { ClientTableView, StyledStatus } from './ClientsTableView';
@ -30,29 +21,6 @@ interface Data {
status: string,
}
function createData(
clientCode: number,
name: string,
unity: string,
status: string,
): Data {
return {
clientCode,
name,
unity,
status,
};
}
const rows = [
createData(9500130, 'Copel', 'clique para ver unidades', 'ativo'),
createData(9500131, 'Copel', 'clique para ver unidades', 'ativo'),
createData(9500132, 'Copel', 'clique para ver unidades', 'ativo'),
createData(9500689, 'Copel', 'clique para ver unidades', 'pendente'),
createData(9500690, 'Copel', 'clique para ver unidades', 'inativo'),
createData(9500691, 'Copel', 'clique para ver unidades', 'inativo'),
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
@ -180,7 +148,12 @@ function EnhancedTableHead(props: EnhancedTableProps) {
);
}
export default function ClientTable({clients}: any) {
interface ClientsTableInterface {
clients: any,
onChange: any
}
export default function ClientTable({clients, onChange}: ClientsTableInterface) {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
const [selected, setSelected] = useState<readonly string[]>([]);
@ -237,9 +210,13 @@ export default function ClientTable({clients}: any) {
const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1;
useEffect(() => {
onChange(selected)
}, [selected])
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - clients.length) : 0;
return (
<ClientTableView>
@ -256,7 +233,7 @@ export default function ClientTable({clients}: any) {
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
rowCount={clients.length}
/>
<TableBody>
{stableSort(clients, getComparator(order, orderBy))
@ -313,7 +290,7 @@ export default function ClientTable({clients}: any) {
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
count={clients.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}

163
src/pages/administrative/clients.tsx
View File

@ -1,163 +0,0 @@
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 { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
import React, { useState } from 'react'
import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
import ClientsTable from '../../components/administrativeTables/ClientsTable';
import BasicButton from '../../components/buttons/basicButton/BasicButton'
import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
import Header from '../../components/header/Header'
import InputUpload from '../../components/inputUplaod/inputUpload';
import { ClientsView } from '../../styles/layouts/clients/ClientsView';
import PageTitle from '../../components/pageTitle/PageTitle';
import ConfirmModal from '../../components/modal/ConfirmModal';
import { ConfirmModalView } from '../../styles/layouts/modals/confirmModalView';
import { api } from '../../services/api';
import { parseCookies } from 'nookies';
import { GetServerSideProps } from 'next';
import getAPIClient from '../../services/ssrApi';
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'
};
export default function clients({clients}) {
const [client, setClient] = useState<any>({
name: String,
email: String,
password: String,
password_confirmation: String,
client_id: Number
})
const [open, setOpen] = useState(false);
const [openModalInativar, setOpenModalInativar] = useState(false)
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [openModal, setOpenModal] = useState(false)
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
api.post('/user', {
name,
email,
password,
password_confirmation,
client_id
})
}
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<ClientsView>
<Header name='' />
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
</div>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<h1>Adicionar Cliente</h1>
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
Adicionar Cliente Smart Energia</Typography>
<br />
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} onChange={(value) => {
setClient({
...client,
name: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} onChange={(value) => {
setClient({
...client,
email: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
setClient({
...client,
password: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} onChange={(value) => {
setClient({
...client,
password_confirmation: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
setClient({
...client,
client_id: value.target.value
})
}} variant="outlined" />
<InputUpload />
<br /><br />
<FaqButton1 title='Cancelar' onClick={() => console.log()} />
<FaqButton2 title='Salvar' onClick={() => handleCreateClient(client)}/>
</Box>
</Modal>
<section>
<ClientsTable clients={clients}/>
</section>
</ClientsView>
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
<ConfirmModalView>
<BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
</ConfirmModalView>
</ConfirmModal>
</div>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
let clients = [];
await apiClient.get('/user').then(res => {
clients = res.data
}).catch(res => {
console.log(res)
})
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
clients,
}
}
}

236
src/pages/administrative/clients/index.tsx Normal file
View File

@ -0,0 +1,236 @@
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';
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
import Header from '../../../components/header/Header'
import InputUpload from '../../../components/inputUplaod/inputUpload';
import { ClientsView } from '../../../styles/layouts/clients/ClientsView';
import PageTitle from '../../../components/pageTitle/PageTitle';
import ConfirmModal from '../../../components/modal/ConfirmModal';
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
import { api } from '../../../services/api';
import { parseCookies } from 'nookies';
import { GetServerSideProps } from 'next';
import getAPIClient from '../../../services/ssrApi';
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} />;
});
export default function clients({clients}) {
const [client, setClient] = useState<any>({
name: String,
email: String,
password: String,
password_confirmation: String,
client_id: Number
})
const [selectedClients, setSelectedClients] = useState([])
const [open, setOpen] = useState(false);
const [openModalInativar, setOpenModalInativar] = useState(false)
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [openModal, setOpenModal] = useState(false)
//
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === 'clickaway') {
return;
}
setOpenSnackError(false);
setOpenSnackSuccess(false);
};
const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === 'clickaway') {
return;
}
setOpenSnackErrorDelete(false);
setOpenSnackSuccessDelete(false);
};
//
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
api.post('/user', {
name,
email,
password,
password_confirmation,
client_id
}).then(res => {
setOpenSnackSuccess(true)
setOpenModalInativar(false)
window.location.reload()
}).catch(res => {
setOpenSnackError(true)
})
}
async function handleDeleteClient(id: any) {
await id.map(client => {
api.delete(`/user/${client}`).then(res => {
setOpenSnackSuccessDelete(true)
setOpenModalInativar(false)
window.location.reload()
}).catch(res => setOpenSnackErrorDelete(true))
})
}
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!
</Alert>
</Snackbar>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
Notificação 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!
</Alert>
</Snackbar>
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
Notificação não excluida!
</Alert>
</Snackbar>
<ClientsView>
<Header name='' />
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
</div>
<section>
<ClientsTable clients={clients} onChange={value => {
setSelectedClients(value)
}}/>
</section>
</ClientsView>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<h1>Adicionar Cliente</h1>
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
Adicionar Cliente Smart Energia</Typography>
<br />
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} onChange={(value) => {
setClient({
...client,
name: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} onChange={(value) => {
setClient({
...client,
email: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
setClient({
...client,
password: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} onChange={(value) => {
setClient({
...client,
password_confirmation: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
setClient({
...client,
client_id: value.target.value
})
}} variant="outlined" />
<InputUpload />
<br /><br />
<FaqButton1 title='Cancelar' onClick={() => console.log()} />
<FaqButton2 title='Salvar' onClick={() => handleCreateClient(client)}/>
</Box>
</Modal>
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
<PageTitle title='Excluir Cliente' subtitle='deseja realmente excluir os clientes selecionadas?'/>
<ConfirmModalView>
<BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
</ConfirmModalView>
</ConfirmModal>
</div>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
let clients = [];
await apiClient.get('/user').then(res => {
clients = res.data
}).catch(res => {
console.log(res)
})
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
clients,
}
}
}

6
src/pages/administrative/notification/index.tsx
View File

@ -147,10 +147,10 @@ export default function notification({clients, notifications}) {
</Snackbar>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
</div>
<NotificationsTable notifications={notifications} onChange={(value) => setSelectedNotifications(value)}/>
<Modal
open={open}