Start contacts page frontend

2026-04-18 03:39:29 +00:00 · 2020-07-22 15:28:17 -03:00
parent dd80541008
commit f64157fc74
9 changed files with 343 additions and 30 deletions
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,6 +2,10 @@
 <html lang="en">
 	<head>
 		<title>React App</title>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+			rel="stylesheet"
+		/>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,11 +0,0 @@
-button:active {
-	opacity: 0.5;
-}
-
-button:focus {
-	outline: 0;
-}
-
-img:active {
-	opacity: 0.5;
-}
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -2,8 +2,6 @@ import React from "react";
 import Routes from "./routes";
 import "dotenv/config";

-import "./App.css";
-
 const App = () => {
 	return <Routes />;
 };
--- a/frontend/src/components/Layout/MainListItems.js
+++ b/frontend/src/components/Layout/MainListItems.js
@@ -11,14 +11,12 @@ import Collapse from "@material-ui/core/Collapse";

 import DashboardIcon from "@material-ui/icons/Dashboard";
 import WhatsAppIcon from "@material-ui/icons/WhatsApp";
-// import PeopleIcon from "@material-ui/icons/People";
 import SyncAltIcon from "@material-ui/icons/SyncAlt";
 import ChatIcon from "@material-ui/icons/Chat";
-import BarChartIcon from "@material-ui/icons/BarChart";
 import LayersIcon from "@material-ui/icons/Layers";
-// import AssignmentIcon from "@material-ui/icons/Assignment";
 import ExpandLess from "@material-ui/icons/ExpandLess";
 import ExpandMore from "@material-ui/icons/ExpandMore";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";

 const useStyles = makeStyles(theme => ({
 	nested: {
@@ -82,13 +80,11 @@ const MainListItems = () => {
 					/>
 				</List>
 			</Collapse>
-
-			<ListItem button disabled>
-				<ListItemIcon>
-					<BarChartIcon />
-				</ListItemIcon>
-				<ListItemText primary="Relatórios" />
-			</ListItem>
+			<ListItemLink
+				to="/contacts"
+				primary="Contatos"
+				icon={<ContactPhoneIcon />}
+			/>
 			<ListItem button disabled>
 				<ListItemIcon>
 					<LayersIcon />
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-// import "bootstrap/dist/css/bootstrap.min.css";
 import CssBaseline from "@material-ui/core/CssBaseline";

 import App from "./App";
--- a/frontend/src/pages/Chat/Chat.js
+++ b/frontend/src/pages/Chat/Chat.js
@@ -49,7 +49,7 @@ const Chat = () => {

 	return (
 		<div className={classes.chatContainer}>
-			<Paper square elevation={0} className={classes.chatPapper}>
+			<Paper square className={classes.chatPapper}>
 				<Grid container spacing={0}>
 					<Grid item xs={4} className={classes.contactsWrapper}>
 						<TicketsList />
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -0,0 +1,326 @@
+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;
--- a/frontend/src/pages/WhatsAuth/WhatsAuth.js
+++ b/frontend/src/pages/WhatsAuth/WhatsAuth.js
@@ -18,7 +18,6 @@ const useStyles = makeStyles(theme => ({

 	content: {
 		flexGrow: 1,
-
 		overflow: "auto",
 	},
 	paper: {
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -1,7 +1,9 @@
 import React, { useContext } from "react";
 import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

-import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext";
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { makeStyles } from "@material-ui/core/styles";

 import MainDrawer from "./components/Layout/MainDrawer";
 import Dashboard from "./pages/Home/Dashboard";
@@ -10,9 +12,8 @@ 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 Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core/styles";
+import Contacts from "./pages/Contacts";
+import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext";

 const useStyles = makeStyles(theme => ({
 	backdrop: {
@@ -85,6 +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} />
 					</MainDrawer>
 				</Switch>
 			</AuthProvider>