mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-18 03:39:29 +00:00
Finished styles and pagination of contacts page
This commit is contained in:
canove
@@ -1,3 +1,5 @@
|
||||
const Sequelize = require("sequelize");
|
||||
|
||||
const Contact = require("../models/Contact");
|
||||
// const Message = require("../models/Message");
|
||||
// const Sequelize = require("sequelize");
|
||||
@@ -5,23 +7,29 @@ const Contact = require("../models/Contact");
|
||||
// const { getWbot } = require("../libs/wbot");
|
||||
|
||||
exports.index = async (req, res) => {
|
||||
// const { searchParam = "" } = req.query;
|
||||
const { searchParam = "", pageNumber = 1, rowsPerPage = 10 } = req.query;
|
||||
|
||||
// const lowerSerachParam = searchParam.toLowerCase();
|
||||
const whereCondition = {
|
||||
name: Sequelize.where(
|
||||
Sequelize.fn("LOWER", Sequelize.col("name")),
|
||||
"LIKE",
|
||||
"%" + searchParam.toLowerCase() + "%"
|
||||
),
|
||||
};
|
||||
|
||||
// const whereCondition = {
|
||||
// name: Sequelize.where(
|
||||
// Sequelize.fn("LOWER", Sequelize.col("name")),
|
||||
// "LIKE",
|
||||
// "%" + lowerSerachParam + "%"
|
||||
// ),
|
||||
// };
|
||||
let limit = +rowsPerPage;
|
||||
let offset = limit * (pageNumber - 1);
|
||||
|
||||
//todo >> add contact number to search where condition
|
||||
|
||||
const contacts = await Contact.findAll();
|
||||
const { count, rows: contacts } = await Contact.findAndCountAll({
|
||||
where: whereCondition,
|
||||
limit,
|
||||
offset,
|
||||
order: [["createdAt", "DESC"]],
|
||||
});
|
||||
|
||||
return res.json(contacts);
|
||||
return res.json({ contacts, count });
|
||||
};
|
||||
|
||||
exports.store = async (req, res) => {
|
||||
|
||||
@@ -2,8 +2,24 @@ import React from "react";
|
||||
import Routes from "./routes";
|
||||
import "dotenv/config";
|
||||
|
||||
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
|
||||
import { ptBR } from "@material-ui/core/locale";
|
||||
|
||||
const theme = createMuiTheme(
|
||||
{
|
||||
palette: {
|
||||
primary: { main: "#1976d2" },
|
||||
},
|
||||
},
|
||||
ptBR
|
||||
);
|
||||
|
||||
const App = () => {
|
||||
return <Routes />;
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Routes />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
192
frontend/src/pages/Contacts/ContactsList.js
Normal file
192
frontend/src/pages/Contacts/ContactsList.js
Normal file
@@ -0,0 +1,192 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Container from "@material-ui/core/Container";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||
import EditIcon from "@material-ui/icons/Edit";
|
||||
|
||||
import PaginationActions from "./PaginationActions";
|
||||
import api from "../../util/api";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainContainer: {
|
||||
flex: 1,
|
||||
// backgroundColor: "#eee",
|
||||
padding: theme.spacing(2),
|
||||
height: `calc(100% - 48px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
contactsHeader: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0px 6px 6px 6px",
|
||||
},
|
||||
|
||||
actionButtons: {
|
||||
marginLeft: "auto",
|
||||
"& > *": {
|
||||
margin: theme.spacing(1),
|
||||
},
|
||||
},
|
||||
|
||||
mainPaper: {
|
||||
height: "87%",
|
||||
padding: theme.spacing(2),
|
||||
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
// borderRadius: "2px",
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const Contacts = () => {
|
||||
const classes = useStyles();
|
||||
|
||||
const token = localStorage.getItem("token");
|
||||
const userId = localStorage.getItem("userId");
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
const [count, setCount] = useState(0);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [contacts, setContacts] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const res = await api.get("/contacts/", {
|
||||
params: { searchParam, pageNumber: page + 1, rowsPerPage },
|
||||
});
|
||||
setContacts(res.data.contacts);
|
||||
setCount(res.data.count);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
};
|
||||
fetchContacts();
|
||||
}, 1000);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, page, token, rowsPerPage]);
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = event => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleSearch = event => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className={classes.mainContainer}>
|
||||
<div className={classes.contactsHeader}>
|
||||
<h2>Todos os contatos</h2>
|
||||
|
||||
<div className={classes.actionButtons}>
|
||||
<TextField
|
||||
placeholder="Pesquisar..."
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button variant="contained" color="primary">
|
||||
Importar contatos
|
||||
</Button>
|
||||
<Button variant="contained" color="primary">
|
||||
Adicionar contato
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Paper className={classes.mainPaper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox" />
|
||||
<TableCell>Nome</TableCell>
|
||||
<TableCell>Telefone</TableCell>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell align="right">Ações</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{contacts.map(contact => (
|
||||
<TableRow key={contact.id}>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
{<Avatar src={contact.profilePicUrl} />}
|
||||
</TableCell>
|
||||
<TableCell>{contact.name}</TableCell>
|
||||
<TableCell>{contact.number}</TableCell>
|
||||
<TableCell>{contact.updatedAt}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton size="small">
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={5}
|
||||
count={count}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={PaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contacts;
|
||||
71
frontend/src/pages/Contacts/PaginationActions.js
Normal file
71
frontend/src/pages/Contacts/PaginationActions.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import FirstPageIcon from "@material-ui/icons/FirstPage";
|
||||
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
|
||||
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
|
||||
import LastPageIcon from "@material-ui/icons/LastPage";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
flexShrink: 0,
|
||||
marginLeft: theme.spacing(2.5),
|
||||
},
|
||||
}));
|
||||
|
||||
const PaginationActions = ({ count, page, rowsPerPage, onChangePage }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const handleFirstPageButtonClick = event => {
|
||||
onChangePage(event, 0);
|
||||
};
|
||||
|
||||
const handleBackButtonClick = event => {
|
||||
onChangePage(event, page - 1);
|
||||
};
|
||||
|
||||
const handleNextButtonClick = event => {
|
||||
onChangePage(event, page + 1);
|
||||
};
|
||||
|
||||
const handleLastPageButtonClick = event => {
|
||||
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{<FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{<KeyboardArrowLeft />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{<KeyboardArrowRight />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{<LastPageIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaginationActions;
|
||||
@@ -1,326 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import Link from "@material-ui/core/Link";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import FirstPageIcon from "@material-ui/icons/FirstPage";
|
||||
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
|
||||
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
|
||||
import LastPageIcon from "@material-ui/icons/LastPage";
|
||||
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||
import EditIcon from "@material-ui/icons/Edit";
|
||||
|
||||
const useStyles1 = makeStyles(theme => ({
|
||||
root: {
|
||||
flexShrink: 0,
|
||||
marginLeft: theme.spacing(2.5),
|
||||
},
|
||||
}));
|
||||
|
||||
const TablePaginationActions = ({ count, page, rowsPerPage, onChangePage }) => {
|
||||
const classes = useStyles1();
|
||||
|
||||
const handleFirstPageButtonClick = event => {
|
||||
onChangePage(event, 0);
|
||||
};
|
||||
|
||||
const handleBackButtonClick = event => {
|
||||
onChangePage(event, page - 1);
|
||||
};
|
||||
|
||||
const handleNextButtonClick = event => {
|
||||
onChangePage(event, page + 1);
|
||||
};
|
||||
|
||||
const handleLastPageButtonClick = event => {
|
||||
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{<FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{<KeyboardArrowLeft />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{<KeyboardArrowRight />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{<LastPageIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainContainer: {
|
||||
flex: 1,
|
||||
// backgroundColor: "#eee",
|
||||
padding: theme.spacing(4),
|
||||
height: `calc(100% - 48px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
contactsHeader: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0px 6px 6px 6px",
|
||||
},
|
||||
|
||||
actionButtons: {
|
||||
marginLeft: "auto",
|
||||
"& > *": {
|
||||
margin: theme.spacing(0.5),
|
||||
},
|
||||
},
|
||||
|
||||
mainPaper: {
|
||||
height: "100%",
|
||||
overflowY: "scroll",
|
||||
},
|
||||
}));
|
||||
|
||||
const Contacts = () => {
|
||||
const classes = useStyles();
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(5);
|
||||
const [contacts, setContacts] = useState([
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "Cassio",
|
||||
// number: "5513991428988",
|
||||
// profilePicUrl:
|
||||
// "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33",
|
||||
// createdAt: "2020-07-17T16:16:59.000Z",
|
||||
// updatedAt: "2020-07-22T12:23:58.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "Luana",
|
||||
// number: "5513991264923",
|
||||
// profilePicUrl: null,
|
||||
// createdAt: "2020-07-17T17:48:01.000Z",
|
||||
// updatedAt: "2020-07-17T17:48:01.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "551333074319",
|
||||
// number: "551333074319",
|
||||
// profilePicUrl:
|
||||
// "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A",
|
||||
// createdAt: "2020-07-17T18:13:15.000Z",
|
||||
// updatedAt: "2020-07-20T19:44:33.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "Cassio",
|
||||
// number: "5513991428988",
|
||||
// profilePicUrl:
|
||||
// "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33",
|
||||
// createdAt: "2020-07-17T16:16:59.000Z",
|
||||
// updatedAt: "2020-07-22T12:23:58.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "Luana",
|
||||
// number: "5513991264923",
|
||||
// profilePicUrl: null,
|
||||
// createdAt: "2020-07-17T17:48:01.000Z",
|
||||
// updatedAt: "2020-07-17T17:48:01.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "551333074319",
|
||||
// number: "551333074319",
|
||||
// profilePicUrl:
|
||||
// "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A",
|
||||
// createdAt: "2020-07-17T18:13:15.000Z",
|
||||
// updatedAt: "2020-07-20T19:44:33.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "Cassio",
|
||||
// number: "5513991428988",
|
||||
// profilePicUrl:
|
||||
// "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33",
|
||||
// createdAt: "2020-07-17T16:16:59.000Z",
|
||||
// updatedAt: "2020-07-22T12:23:58.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "Luana",
|
||||
// number: "5513991264923",
|
||||
// profilePicUrl: null,
|
||||
// createdAt: "2020-07-17T17:48:01.000Z",
|
||||
// updatedAt: "2020-07-17T17:48:01.000Z",
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "551333074319",
|
||||
// number: "551333074319",
|
||||
// profilePicUrl:
|
||||
// "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A",
|
||||
// createdAt: "2020-07-17T18:13:15.000Z",
|
||||
// updatedAt: "2020-07-20T19:44:33.000Z",
|
||||
// },
|
||||
{
|
||||
id: 1,
|
||||
name: "Cassio",
|
||||
number: "5513991428988",
|
||||
profilePicUrl:
|
||||
"https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33",
|
||||
createdAt: "2020-07-17T16:16:59.000Z",
|
||||
updatedAt: "2020-07-22T12:23:58.000Z",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Luana",
|
||||
number: "5513991264923",
|
||||
profilePicUrl: null,
|
||||
createdAt: "2020-07-17T17:48:01.000Z",
|
||||
updatedAt: "2020-07-17T17:48:01.000Z",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "551333074319",
|
||||
number: "551333074319",
|
||||
profilePicUrl:
|
||||
"https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A",
|
||||
createdAt: "2020-07-17T18:13:15.000Z",
|
||||
updatedAt: "2020-07-20T19:44:33.000Z",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "Cassio",
|
||||
number: "5513991428988",
|
||||
profilePicUrl:
|
||||
"https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33",
|
||||
createdAt: "2020-07-17T16:16:59.000Z",
|
||||
updatedAt: "2020-07-22T12:23:58.000Z",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Luana",
|
||||
number: "5513991264923",
|
||||
profilePicUrl: null,
|
||||
createdAt: "2020-07-17T17:48:01.000Z",
|
||||
updatedAt: "2020-07-17T17:48:01.000Z",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "551333074319",
|
||||
number: "551333074319",
|
||||
profilePicUrl:
|
||||
"https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A",
|
||||
createdAt: "2020-07-17T18:13:15.000Z",
|
||||
updatedAt: "2020-07-20T19:44:33.000Z",
|
||||
},
|
||||
]);
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = event => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.mainContainer}>
|
||||
<Paper className={classes.mainPaper}>
|
||||
<div className={classes.contactsHeader}>
|
||||
<h2>Todos os contatos</h2>
|
||||
<div className={classes.actionButtons}>
|
||||
<Button variant="contained" color="primary">
|
||||
Importar contatos
|
||||
</Button>
|
||||
<Button variant="contained" color="primary">
|
||||
Adicionar contato
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox" />
|
||||
<TableCell>Nome</TableCell>
|
||||
<TableCell>Telefone</TableCell>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell align="right">Ações</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{contacts.map(contact => (
|
||||
<TableRow key={contact.id}>
|
||||
<TableCell style={{ paddingRight: 0 }}>{<Avatar />}</TableCell>
|
||||
<TableCell>{contact.name}</TableCell>
|
||||
<TableCell>{contact.number}</TableCell>
|
||||
<TableCell>{contact.updatedAt}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton size="small">
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
|
||||
colSpan={5}
|
||||
count={contacts.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={TablePaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contacts;
|
||||
@@ -12,7 +12,7 @@ import Profile from "./pages/Profile/Profile";
|
||||
import Signup from "./pages/Signup/Signup";
|
||||
import Login from "./pages/Login/Login";
|
||||
import WhatsAuth from "./pages/WhatsAuth/WhatsAuth";
|
||||
import Contacts from "./pages/Contacts";
|
||||
import ContactsList from "./pages/Contacts/ContactsList";
|
||||
import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
@@ -86,7 +86,7 @@ const Routes = () => {
|
||||
<PrivateRoute exact path="/chat/:ticketId?" component={Chat} />
|
||||
<PrivateRoute exact path="/profile" component={Profile} />
|
||||
<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
|
||||
<PrivateRoute exact path="/contacts" component={Contacts} />
|
||||
<PrivateRoute exact path="/contacts" component={ContactsList} />
|
||||
</MainDrawer>
|
||||
</Switch>
|
||||
</AuthProvider>
|
||||
|
||||
Reference in New Issue
Block a user