From 7aef4247588f1d5cb8e7c6f4aa8d939dba58b032 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Thu, 16 Jun 2022 10:19:30 -0300 Subject: [PATCH] add delete clients and fix clients table --- .../administrativeTables/ClientsTable.tsx | 51 ++-- src/pages/administrative/clients.tsx | 163 ------------ src/pages/administrative/clients/index.tsx | 236 ++++++++++++++++++ .../administrative/notification/index.tsx | 6 +- 4 files changed, 253 insertions(+), 203 deletions(-) delete mode 100644 src/pages/administrative/clients.tsx create mode 100644 src/pages/administrative/clients/index.tsx diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 364a12d..5232dab 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -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(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('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -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 ( @@ -256,7 +233,7 @@ export default function ClientTable({clients}: any) { orderBy={orderBy} onSelectAllClick={handleSelectAllClick} onRequestSort={handleRequestSort} - rowCount={rows.length} + rowCount={clients.length} /> {stableSort(clients, getComparator(order, orderBy)) @@ -313,7 +290,7 @@ export default function ClientTable({clients}: 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 ( -
- -
- -
- - -
- - -

Adicionar Cliente

- - Adicionar Cliente Smart Energia -
- { - setClient({ - ...client, - name: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - email: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - password: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - password_confirmation: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - client_id: value.target.value - }) - }} variant="outlined" /> - -

- console.log()} /> - handleCreateClient(client)}/> - - -
- -
- - - {setOpenModalInativar(value)}}> - - setOpenModalInativar(true)}/> - setOpenModalInativar(true)}/> - - -
- ) -} - -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, - } - } -} - diff --git a/src/pages/administrative/clients/index.tsx b/src/pages/administrative/clients/index.tsx new file mode 100644 index 0000000..2d918c9 --- /dev/null +++ b/src/pages/administrative/clients/index.tsx @@ -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(function Alert( + props, + ref, +) { + return ; +}); + +export default function clients({clients}) { + const [client, setClient] = useState({ + 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(false); + const [openSnackError, setOpenSnackError] = useState(false); + const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState(false); + const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState(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 ( +
+ + + notificação cadastrada com sucesso! + + + + + Notificação não cadastrada! + + + + + + notificação excluida com sucesso! + + + + + Notificação não excluida! + + + + +
+ +
+ + +
+
+ { + setSelectedClients(value) + }}/> +
+ + + + +

Adicionar Cliente

+ + Adicionar Cliente Smart Energia +
+ { + setClient({ + ...client, + name: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + email: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + password: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + password_confirmation: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + client_id: value.target.value + }) + }} variant="outlined" /> + +

+ console.log()} /> + handleCreateClient(client)}/> + + + {setOpenModalInativar(value)}}> + + + handleDeleteClient(selectedClients)}/> + setOpenModalInativar(true)}/> + + +
+ ) +} + +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, + } + } +} + diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 0abed49..0be9966 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -147,10 +147,10 @@ export default function notification({clients, notifications}) {
- - - + +
+ setSelectedNotifications(value)}/>