cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-20 04:39:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start contacts page frontend

Browse Source
This commit is contained in:
canove
2020-07-22 15:28:17 -03:00
parent dd80541008
commit f64157fc74
9 changed files with 343 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/public/index.html
View File

@@ -2,6 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>React App</title> <title>React App</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

11
frontend/src/App.css
View File

@@ -1,11 +0,0 @@
button:active {
opacity: 0.5;
}
button:focus {
outline: 0;
}
img:active {
opacity: 0.5;
}

2
frontend/src/App.js
View File

@@ -2,8 +2,6 @@ import React from "react";
import Routes from "./routes"; import Routes from "./routes";
import "dotenv/config"; import "dotenv/config";
import "./App.css";
const App = () => { const App = () => {
return <Routes />; return <Routes />;
}; };

16
frontend/src/components/Layout/MainListItems.js
View File

@@ -11,14 +11,12 @@ import Collapse from "@material-ui/core/Collapse";
import DashboardIcon from "@material-ui/icons/Dashboard"; import DashboardIcon from "@material-ui/icons/Dashboard";
import WhatsAppIcon from "@material-ui/icons/WhatsApp"; import WhatsAppIcon from "@material-ui/icons/WhatsApp";
// import PeopleIcon from "@material-ui/icons/People";
import SyncAltIcon from "@material-ui/icons/SyncAlt"; import SyncAltIcon from "@material-ui/icons/SyncAlt";
import ChatIcon from "@material-ui/icons/Chat"; import ChatIcon from "@material-ui/icons/Chat";
import BarChartIcon from "@material-ui/icons/BarChart";
import LayersIcon from "@material-ui/icons/Layers"; import LayersIcon from "@material-ui/icons/Layers";
// import AssignmentIcon from "@material-ui/icons/Assignment";
import ExpandLess from "@material-ui/icons/ExpandLess"; import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore"; import ExpandMore from "@material-ui/icons/ExpandMore";
import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
nested: { nested: {
@@ -82,13 +80,11 @@ const MainListItems = () => {
/> />
</List> </List>
</Collapse> </Collapse>
<ListItemLink
<ListItem button disabled> to="/contacts"
<ListItemIcon> primary="Contatos"
<BarChartIcon /> icon={<ContactPhoneIcon />}
</ListItemIcon> />
<ListItemText primary="Relatórios" />
</ListItem>
<ListItem button disabled> <ListItem button disabled>
<ListItemIcon> <ListItemIcon>
<LayersIcon /> <LayersIcon />

1
frontend/src/index.js
View File

@@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
// import "bootstrap/dist/css/bootstrap.min.css";
import CssBaseline from "@material-ui/core/CssBaseline"; import CssBaseline from "@material-ui/core/CssBaseline";
import App from "./App"; import App from "./App";

2
frontend/src/pages/Chat/Chat.js
View File

@@ -49,7 +49,7 @@ const Chat = () => {
return ( return (
<div className={classes.chatContainer}> <div className={classes.chatContainer}>
<Paper square elevation={0} className={classes.chatPapper}> <Paper square className={classes.chatPapper}>
<Grid container spacing={0}> <Grid container spacing={0}>
<Grid item xs={4} className={classes.contactsWrapper}> <Grid item xs={4} className={classes.contactsWrapper}>
<TicketsList /> <TicketsList />

326
frontend/src/pages/Contacts/index.js Normal file
View File

@@ -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;

1
frontend/src/pages/WhatsAuth/WhatsAuth.js
View File

@@ -18,7 +18,6 @@ const useStyles = makeStyles(theme => ({
content: { content: {
flexGrow: 1, flexGrow: 1,
overflow: "auto", overflow: "auto",
}, },
paper: { paper: {

10
frontend/src/routes.js
View File

@@ -1,7 +1,9 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; 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 MainDrawer from "./components/Layout/MainDrawer";
import Dashboard from "./pages/Home/Dashboard"; import Dashboard from "./pages/Home/Dashboard";
@@ -10,9 +12,8 @@ import Profile from "./pages/Profile/Profile";
import Signup from "./pages/Signup/Signup"; import Signup from "./pages/Signup/Signup";
import Login from "./pages/Login/Login"; import Login from "./pages/Login/Login";
import WhatsAuth from "./pages/WhatsAuth/WhatsAuth"; import WhatsAuth from "./pages/WhatsAuth/WhatsAuth";
import Backdrop from "@material-ui/core/Backdrop"; import Contacts from "./pages/Contacts";
import CircularProgress from "@material-ui/core/CircularProgress"; import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
backdrop: { backdrop: {
@@ -85,6 +86,7 @@ const Routes = () => {
<PrivateRoute exact path="/chat/:ticketId?" component={Chat} /> <PrivateRoute exact path="/chat/:ticketId?" component={Chat} />
<PrivateRoute exact path="/profile" component={Profile} /> <PrivateRoute exact path="/profile" component={Profile} />
<PrivateRoute exact path="/whats-auth" component={WhatsAuth} /> <PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
<PrivateRoute exact path="/contacts" component={Contacts} />
</MainDrawer> </MainDrawer>
</Switch> </Switch>
</AuthProvider> </AuthProvider>