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

update

Browse Source
This commit is contained in:
Alex Santos 2022-06-09 15:00:41 -03:00
commit 3f96470305
8 changed files with 349 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,7 +67,7 @@ type Order = 'asc' | 'desc';
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key,
orderBy: any,
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string },
@ -136,7 +136,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
props;
const createSortHandler =
(property: keyof Data) => (event: React.MouseEvent<unknown>) => {
(property: any) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
@ -206,12 +206,12 @@ export default function ClientTable() {
setSelected([]);
};
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
const selectedIndex = selected.indexOf(name);
const handleClick = (event: React.MouseEvent<unknown>, code: string) => {
const selectedIndex = selected.indexOf(code);
let newSelected: readonly string[] = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
newSelected = newSelected.concat(selected, code);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
@ -235,7 +235,7 @@ export default function ClientTable() {
setPage(0);
};
const isSelected = (name: string) => selected.indexOf(name) !== -1;
const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1;
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
@ -268,7 +268,7 @@ export default function ClientTable() {
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.clientCode)}
onClick={(event) => handleClick(event, row.clientCode.toString())}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}

2
src/components/administrativeTables/ClientsTableView.ts
View File

@ -33,7 +33,7 @@ export const ClientTableView = styled.main`
}
`
export const StyledStatus = styled.div<{status: string}>`
export const StyledStatus = styled.div<{status: any}>`
display: flex;
align-items: center;
justify-content: center;

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

@ -42,12 +42,12 @@ function createData(
}
const rows = [
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'Active'),
createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'active'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inactive'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'ativo'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inativo'),
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@ -66,8 +66,8 @@ function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key,
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string },
a: { [key in Key]: any },
b: { [key in Key]: any },
) => number {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
@ -98,13 +98,13 @@ const headCells: readonly HeadCell[] = [
id: 'question',
numeric: false,
disablePadding: true,
label: 'código do cliente',
label: 'Pergunta',
},
{
id: 'answer',
numeric: true,
disablePadding: false,
label: 'name',
label: 'Resposta',
},
{
id: 'status',
@ -127,7 +127,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
props;
const createSortHandler =
(property: keyof Data) => (event: React.MouseEvent<unknown>) => {
(property: any) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
@ -171,7 +171,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
);
}
export default function ClientTable() {
export default function FaqTable() {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
const [selected, setSelected] = useState<readonly string[]>([]);
@ -190,7 +190,7 @@ export default function ClientTable() {
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n.name);
const newSelecteds = rows.map((n) => n.question);
setSelected(newSelecteds);
return;
}

315
src/components/administrativeTables/NotificationsTable.tsx Normal file
View File

@ -0,0 +1,315 @@
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';
import TableContainer from '@mui/material/TableContainer';
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 { ClientTableView, StyledStatus } from './ClientsTableView';
interface Data {
notification: string,
client: string,
status: string,
}
function createData(
notification: string,
client: string,
status: string,
): Data {
return {
notification,
client,
status,
};
}
const rows = [
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
createData('Confira tal coisa - Texto da notificação', 'Copel', 'falhou'),
createData('Confira tal coisa - Texto da notificação', 'Copel', 'pendente'),
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
type Order = 'asc' | 'desc';
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key,
): (
a: { [key in Key]: any },
b: { [key in Key]: any },
) => number {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
interface HeadCell {
disablePadding: boolean;
id: keyof Data | string;
label: string;
numeric: boolean;
}
const headCells: readonly HeadCell[] = [
{
id: 'notification',
numeric: false,
disablePadding: true,
label: 'notificação',
},
{
id: 'client',
numeric: true,
disablePadding: false,
label: 'cliente',
},
{
id: 'status',
numeric: true,
disablePadding: false,
label: 'status',
},
];
interface EnhancedTableProps {
numSelected: number;
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
order: Order;
orderBy: string;
rowCount: number;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
props;
const createSortHandler =
(property: any) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
color="primary"
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
inputProps={{
'aria-label': 'select all desserts',
}}
/>
</TableCell>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align='left'
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
export default function ClientTable() {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
const [selected, setSelected] = useState<readonly string[]>([]);
const [page, setPage] = useState<number>(0);
const [dense, setDense] = useState<boolean>(false);
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof Data,
) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n.notification);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
const selectedIndex = selected.indexOf(name);
let newSelected: readonly string[] = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1),
);
}
setSelected(newSelected);
};
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const isSelected = (name: string) => selected.indexOf(name) !== -1;
// 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;
return (
<ClientTableView>
<Paper sx={{ width: '100%', mb: 2 }}>
<TableContainer>
<Table
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
size={dense ? 'small' : 'medium'}
>
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.notification.toString());
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.notification.toString())}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.notification}
selected={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
'aria-labelledby': labelId,
}}
/>
</TableCell>
<TableCell
component="th"
id={labelId}
scope="row"
padding="none"
>
{row.notification}
</TableCell>
<TableCell align="left">{row.client}</TableCell>
<TableCell align="left"><StyledStatus status={row.status==='enviada'? 'ativo' : row.status==='falhou'? 'inativo' : 'pendente'}>{row.status}</StyledStatus></TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow
style={{
height: (dense ? 33 : 53) * emptyRows,
}}
>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</ClientTableView>
);
}

1
src/components/sidebar/Sidebar.tsx
View File

@ -63,6 +63,7 @@ export default function Sidebar() {
</div> */}
<Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
<Link href='/administrative/notifications'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
{/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
<Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
<Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>

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

@ -12,8 +12,8 @@ import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
import ClientsTable from '../../components/administrativeTables/ClientsTable';
import Header from '../../components/header/Header'
import ConfirmModal from '../../components/modal/ConfirmModal';
const style = {
position: 'absolute' as const,
@ -40,33 +40,15 @@ export default function clients() {
const [openModalInativar, setOpenModalInativar] = useState(false)
const rows = [
{ id: 1, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 2, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 3, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 4, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 5, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 6, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 7, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
{ id: 8, codigoCliente: 'Unidade - 9500130', clientName: 'FraCopelnces', units: 'clique para ver unidades', age: 'ativo' },
{ id: 9, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
];
const columns: GridColDef[] = [
{ field: 'codigoCliente', headerName: 'Código Cliente', width: 180 },
{ field: 'clientName', headerName: 'Nome do cliente', width: 130 },
{ field: 'units', headerName: 'Unidade', width: 130 },
{ field: 'status', headerName: 'Status', width: 90 },
];
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<AdministrativeHeader />
<ClientsView>
<Header name='' />
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
{/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Open modal</button>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
<button className='btn1' onClick={handleOpen}>Inativar</button>
</div>
<Modal
@ -87,8 +69,8 @@ export default function clients() {
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
<TextField id="outlined-basic" label="Imagem/Logotipo" sx={{width:350, ml:8, mt:2}} variant="outlined" />
<br /><br />
<FaqButton1 title='Cancelar' />
<FaqButton2 title='Salvar' />
<FaqButton1 title='Cancelar' onClick={()=>console.log()} />
<FaqButton2 title='Salvar' onClick={()=>console.log()}/>
</Box>
</Modal>
<section>

51
src/pages/administrative/notifications/index.tsx
View File

@ -7,6 +7,7 @@ import Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
import NotificationsTable from '../../../components/administrativeTables/NotificationsTable';
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
import Header from '../../../components/header/Header'
@ -26,53 +27,13 @@ export default function commonQuestions() {
return (
<>
<Head>
<title>Smart Energia - FAQ</title>
</Head>
<AdministrativeHeader />
<FaqView>
<h1>Perguntas Frequentes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<Head>
<title>Smart Energia - FAQ</title>
</Head>
<Header />
<TextField id="standard-basic" label="Mensagem" sx={{width:700}} variant="standard" />
<br />
<FormControl size='small' fullWidth sx={{ width: 135}} >
<InputLabel id="demo-simple-select-label">Clientes</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={month}
label="Month"
onChange={handleChangeMonth}
>
<MenuItem value={15}>Cliente 1</MenuItem>
<MenuItem value={20}>Cliente 2</MenuItem>
<MenuItem value={30}>Cliente 3</MenuItem>
<MenuItem value={30}>Cliente 4</MenuItem>
<MenuItem value={30}>Cliente 5</MenuItem>
<MenuItem value={30}>Cliente 6</MenuItem>
<MenuItem value={30}>Cliente 7</MenuItem>
</Select>
</FormControl>
<br />
<BasicButton title='Enviar' onClick={() => console.log()}/>
<section className='CommonQuestionsSection' >
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
</section>
<NotificationsTable />
</FaqView>
</>
)

6
src/styles/layouts/clients/ClientsView.ts
View File

@ -11,17 +11,13 @@ export const ClientsView = styled.main`
width: 100%;
:nth-child(2) {
:nth-child(3) {
justify-content: space-between;
width: 18rem;
margin: 45px 0 22px 0;
}
:last-child {
width: 100%;
}
}
.btn2{
background: #254F7F;