mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 04:09:26 +00:00
feat: added users page
This commit is contained in:
canove
@@ -10,8 +10,18 @@ const App = () => {
|
||||
|
||||
const theme = createMuiTheme(
|
||||
{
|
||||
scrollbarStyles: {
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
primary: { main: "#1976d2" },
|
||||
primary: { main: "#2576d2" },
|
||||
},
|
||||
},
|
||||
locale
|
||||
|
||||
@@ -48,14 +48,7 @@ const useStyles = makeStyles(theme => ({
|
||||
padding: "8px 0px 8px 8px",
|
||||
height: "100%",
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
|
||||
contactAvatar: {
|
||||
@@ -80,17 +73,6 @@ const useStyles = makeStyles(theme => ({
|
||||
padding: 8,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
// overflowX: "scroll",
|
||||
// flex: 1,
|
||||
// "&::-webkit-scrollbar": {
|
||||
// width: "8px",
|
||||
// height: "8px",
|
||||
// },
|
||||
// "&::-webkit-scrollbar-thumb": {
|
||||
// // borderRadius: "2px",
|
||||
// boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
// backgroundColor: "#e8e8e8",
|
||||
// },
|
||||
},
|
||||
contactExtraInfo: {
|
||||
marginTop: 4,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import { Formik, FieldArray } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { Formik, FieldArray, Form, Field } from "formik";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import { green } from "@material-ui/core/colors";
|
||||
@@ -52,6 +53,15 @@ const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const ContactSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(2, "Too Short!")
|
||||
.max(50, "Too Long!")
|
||||
.required("Required"),
|
||||
number: Yup.string().min(8, "Too Short!").max(50, "Too Long!"),
|
||||
email: Yup.string().email("Invalid email"),
|
||||
});
|
||||
|
||||
const ContactModal = ({ open, onClose, contactId }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
@@ -86,7 +96,7 @@ const ContactModal = ({ open, onClose, contactId }) => {
|
||||
await api.post("/contacts", values);
|
||||
}
|
||||
} catch (err) {
|
||||
alert(err.response.data.error);
|
||||
alert(JSON.stringify(err.response.data, null, 2));
|
||||
console.log(err);
|
||||
}
|
||||
handleClose();
|
||||
@@ -94,69 +104,57 @@ const ContactModal = ({ open, onClose, contactId }) => {
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
maxWidth="lg"
|
||||
scroll="paper"
|
||||
className={classes.modal}
|
||||
>
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
|
||||
<DialogTitle id="form-dialog-title">
|
||||
{contactId
|
||||
? `${i18n.t("contactModal.title.edit")}`
|
||||
: `${i18n.t("contactModal.title.add")}`}
|
||||
</DialogTitle>
|
||||
<Formik
|
||||
initialValues={contact}
|
||||
enableReinitialize={true}
|
||||
onSubmit={(values, { setSubmitting }) => {
|
||||
validationSchema={ContactSchema}
|
||||
onSubmit={(values, actions) => {
|
||||
setTimeout(() => {
|
||||
handleSaveContact(values);
|
||||
setSubmitting(false);
|
||||
actions.setSubmitting(false);
|
||||
}, 400);
|
||||
}}
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogTitle id="form-dialog-title">
|
||||
{contactId
|
||||
? `${i18n.t("contactModal.title.edit")}`
|
||||
: `${i18n.t("contactModal.title.add")}`}
|
||||
</DialogTitle>
|
||||
{({ values, errors, touched, isSubmitting }) => (
|
||||
<Form>
|
||||
<DialogContent dividers>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
{i18n.t("contactModal.form.mainInfo")}
|
||||
</Typography>
|
||||
<TextField
|
||||
<Field
|
||||
as={TextField}
|
||||
label={i18n.t("contactModal.form.name")}
|
||||
name="name"
|
||||
value={values.name || ""}
|
||||
onChange={handleChange}
|
||||
error={touched.name && Boolean(errors.name)}
|
||||
helperText={touched.name && errors.name}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
className={classes.textField}
|
||||
/>
|
||||
<TextField
|
||||
<Field
|
||||
as={TextField}
|
||||
label={i18n.t("contactModal.form.number")}
|
||||
name="number"
|
||||
value={values.number || ""}
|
||||
onChange={handleChange}
|
||||
error={touched.number && Boolean(errors.number)}
|
||||
helperText={touched.number && errors.number}
|
||||
placeholder="5513912344321"
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<TextField
|
||||
<Field
|
||||
as={TextField}
|
||||
label={i18n.t("contactModal.form.email")}
|
||||
name="email"
|
||||
value={values.email || ""}
|
||||
onChange={handleChange}
|
||||
placeholder="Endereço de Email"
|
||||
error={touched.email && Boolean(errors.email)}
|
||||
helperText={touched.email && errors.email}
|
||||
placeholder="Email address"
|
||||
fullWidth
|
||||
margin="dense"
|
||||
variant="outlined"
|
||||
@@ -179,25 +177,21 @@ const ContactModal = ({ open, onClose, contactId }) => {
|
||||
className={classes.extraAttr}
|
||||
key={`${index}-info`}
|
||||
>
|
||||
<TextField
|
||||
<Field
|
||||
as={TextField}
|
||||
label={i18n.t("contactModal.form.extraName")}
|
||||
name={`extraInfo[${index}].name`}
|
||||
value={info.name || ""}
|
||||
onChange={handleChange}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
className={classes.textField}
|
||||
/>
|
||||
<TextField
|
||||
<Field
|
||||
as={TextField}
|
||||
label={i18n.t("contactModal.form.extraValue")}
|
||||
name={`extraInfo[${index}].value`}
|
||||
value={info.value || ""}
|
||||
onChange={handleChange}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
className={classes.textField}
|
||||
required
|
||||
/>
|
||||
<IconButton
|
||||
size="small"
|
||||
@@ -248,7 +242,7 @@ const ContactModal = ({ open, onClose, contactId }) => {
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Dialog>
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
import React from "react";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Skeleton from "@material-ui/lab/Skeleton";
|
||||
|
||||
const ContactsSekeleton = () => {
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={90} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={55} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={60} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={100} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={90} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={55} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={60} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={100} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={90} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={55} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={60} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={100} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={90} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={55} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={60} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={100} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={90} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={55} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={60} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={100} />
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsSekeleton;
|
||||
31
frontend/src/components/MainContainer/index.js
Normal file
31
frontend/src/components/MainContainer/index.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Container from "@material-ui/core/Container";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainContainer: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(2),
|
||||
height: `calc(100% - 48px)`,
|
||||
},
|
||||
|
||||
contentWrapper: {
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
}));
|
||||
|
||||
const MainContainer = ({ children }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<Container className={classes.mainContainer}>
|
||||
<div className={classes.contentWrapper}>{children}</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainContainer;
|
||||
19
frontend/src/components/MainHeader/index.js
Normal file
19
frontend/src/components/MainHeader/index.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
contactsHeader: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0px 6px 6px 6px",
|
||||
},
|
||||
}));
|
||||
|
||||
const MainHeader = ({ children }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
return <div className={classes.contactsHeader}>{children}</div>;
|
||||
};
|
||||
|
||||
export default MainHeader;
|
||||
21
frontend/src/components/MainHeaderButtonsWrapper/index.js
Normal file
21
frontend/src/components/MainHeaderButtonsWrapper/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
MainHeaderButtonsWrapper: {
|
||||
flex: "none",
|
||||
marginLeft: "auto",
|
||||
"& > *": {
|
||||
margin: theme.spacing(1),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const MainHeaderButtonsWrapper = ({ children }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
return <div className={classes.MainHeaderButtonsWrapper}>{children}</div>;
|
||||
};
|
||||
|
||||
export default MainHeaderButtonsWrapper;
|
||||
@@ -101,15 +101,7 @@ const useStyles = makeStyles(theme => ({
|
||||
padding: "20px 20px 20px 20px",
|
||||
// scrollBehavior: "smooth",
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
// borderRadius: "2px",
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
|
||||
circleLoading: {
|
||||
|
||||
@@ -24,14 +24,7 @@ const useStyles = makeStyles(theme => ({
|
||||
tabContainer: {
|
||||
overflowY: "auto",
|
||||
maxHeight: 350,
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
popoverPaper: {
|
||||
width: "100%",
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
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;
|
||||
78
frontend/src/components/TableRowSkeleton/index.js
Normal file
78
frontend/src/components/TableRowSkeleton/index.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Skeleton from "@material-ui/lab/Skeleton";
|
||||
|
||||
const TableRowSkeleton = () => {
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
<Skeleton animation="wave" variant="circle" width={40} height={40} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={80} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" height={20} width={70} />
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowSkeleton;
|
||||
@@ -23,14 +23,7 @@ const useStyles = makeStyles(theme => ({
|
||||
ticketsList: {
|
||||
flex: 1,
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
...theme.scrollbarStyles,
|
||||
borderTop: "2px solid rgba(0, 0, 0, 0.12)",
|
||||
},
|
||||
|
||||
|
||||
10
frontend/src/components/Title/index.js
Normal file
10
frontend/src/components/Title/index.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
export default function Title(props) {
|
||||
return (
|
||||
<Typography variant="h5" color="primary" gutterBottom>
|
||||
{props.children}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
212
frontend/src/components/UserModal/index.js
Normal file
212
frontend/src/components/UserModal/index.js
Normal file
@@ -0,0 +1,212 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import * as Yup from "yup";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import { green } from "@material-ui/core/colors";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import DialogActions from "@material-ui/core/DialogActions";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Select from "@material-ui/core/Select";
|
||||
import InputLabel from "@material-ui/core/InputLabel";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import FormControl from "@material-ui/core/FormControl";
|
||||
|
||||
// import { i18n } from "../../translate/i18n";
|
||||
|
||||
import api from "../../services/api";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
textField: {
|
||||
// marginLeft: theme.spacing(1),
|
||||
marginRight: theme.spacing(1),
|
||||
// width: "25ch",
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
btnWrapper: {
|
||||
// margin: theme.spacing(1),
|
||||
position: "relative",
|
||||
},
|
||||
|
||||
buttonProgress: {
|
||||
color: green[500],
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
marginTop: -12,
|
||||
marginLeft: -12,
|
||||
},
|
||||
formControl: {
|
||||
margin: theme.spacing(1),
|
||||
minWidth: 120,
|
||||
},
|
||||
}));
|
||||
|
||||
const UserSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(2, "Too Short!")
|
||||
.max(50, "Too Long!")
|
||||
.required("Required"),
|
||||
password: Yup.string().min(5, "Too Short!").max(50, "Too Long!"),
|
||||
email: Yup.string().email("Invalid email").required("Required"),
|
||||
});
|
||||
|
||||
const UserModal = ({ open, onClose, userId }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const initialState = {
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
profile: "user",
|
||||
};
|
||||
|
||||
const [user, setUser] = useState(initialState);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
if (!userId) return;
|
||||
const { data } = await api.get(`/users/${userId}`);
|
||||
setUser(prevState => {
|
||||
return { ...prevState, ...data };
|
||||
});
|
||||
};
|
||||
|
||||
fetchUser();
|
||||
}, [userId, open]);
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setUser(initialState);
|
||||
};
|
||||
|
||||
const handleSaveUser = async values => {
|
||||
try {
|
||||
if (userId) {
|
||||
await api.put(`/users/${userId}`, values);
|
||||
} else {
|
||||
await api.post("/users", values);
|
||||
}
|
||||
} catch (err) {
|
||||
alert(JSON.stringify(err.response.data, null, 2));
|
||||
console.log(err);
|
||||
}
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
|
||||
<DialogTitle id="form-dialog-title">
|
||||
{userId ? `Edit User` : `New User`}
|
||||
</DialogTitle>
|
||||
<Formik
|
||||
initialValues={user}
|
||||
enableReinitialize={true}
|
||||
validationSchema={UserSchema}
|
||||
onSubmit={(values, actions) => {
|
||||
setTimeout(() => {
|
||||
handleSaveUser(values);
|
||||
actions.setSubmitting(false);
|
||||
}, 400);
|
||||
}}
|
||||
>
|
||||
{({ touched, errors, isSubmitting }) => (
|
||||
<Form>
|
||||
<DialogContent dividers>
|
||||
<Field
|
||||
as={TextField}
|
||||
label="Name"
|
||||
name="name"
|
||||
error={touched.name && Boolean(errors.name)}
|
||||
helperText={touched.name && errors.name}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
className={classes.textField}
|
||||
/>
|
||||
<Field
|
||||
as={TextField}
|
||||
label="Email"
|
||||
name="email"
|
||||
error={touched.email && Boolean(errors.email)}
|
||||
helperText={touched.email && errors.email}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
/>
|
||||
<div>
|
||||
<Field
|
||||
as={TextField}
|
||||
label="New Password"
|
||||
type="password"
|
||||
name="password"
|
||||
error={touched.password && Boolean(errors.password)}
|
||||
helperText={touched.password && errors.password}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
/>
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
className={classes.formControl}
|
||||
margin="dense"
|
||||
>
|
||||
<InputLabel id="profile-selection-input-label">
|
||||
Profile
|
||||
</InputLabel>
|
||||
<Field
|
||||
as={Select}
|
||||
label="Profile"
|
||||
name="profile"
|
||||
labelId="profile-selection-label"
|
||||
id="profile-selection"
|
||||
required
|
||||
>
|
||||
<MenuItem value="admin">Admin</MenuItem>
|
||||
<MenuItem value="user">User</MenuItem>
|
||||
</Field>
|
||||
</FormControl>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
color="secondary"
|
||||
disabled={isSubmitting}
|
||||
variant="outlined"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
color="primary"
|
||||
disabled={isSubmitting}
|
||||
variant="contained"
|
||||
className={classes.btnWrapper}
|
||||
>
|
||||
{"Ok"}
|
||||
{isSubmitting && (
|
||||
<CircularProgress
|
||||
size={24}
|
||||
className={classes.buttonProgress}
|
||||
/>
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserModal;
|
||||
@@ -60,12 +60,12 @@ const MainListItems = () => {
|
||||
<Divider />
|
||||
<ListSubheader inset>Administration</ListSubheader>
|
||||
<ListItemLink
|
||||
to="/chat"
|
||||
to="/users"
|
||||
primary={i18n.t("mainDrawer.listItems.users")}
|
||||
icon={<GroupIcon />}
|
||||
/>
|
||||
<ListItemLink
|
||||
to="/chat"
|
||||
to="/settings"
|
||||
primary={i18n.t("mainDrawer.listItems.settings")}
|
||||
icon={<SettingsIcon />}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useReducer } from "react";
|
||||
import openSocket from "socket.io-client";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
@@ -10,93 +10,100 @@ 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 Typography from "@material-ui/core/Typography";
|
||||
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||
import EditIcon from "@material-ui/icons/Edit";
|
||||
|
||||
import PaginationActions from "../../components/PaginationActions";
|
||||
import api from "../../services/api";
|
||||
import ContactsSekeleton from "../../components/ContactsSekeleton";
|
||||
import TableRowSkeleton from "../../components/TableRowSkeleton";
|
||||
import ContactModal from "../../components/ContactModal";
|
||||
import ConfirmationModal from "../../components/ConfirmationModal/";
|
||||
|
||||
import { i18n } from "../../translate/i18n";
|
||||
import MainHeader from "../../components/MainHeader";
|
||||
import Title from "../../components/Title";
|
||||
import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
|
||||
import MainContainer from "../../components/MainContainer";
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "LOAD_CONTACTS") {
|
||||
const contacts = action.payload;
|
||||
const newContacts = [];
|
||||
|
||||
contacts.forEach(contact => {
|
||||
const contactIndex = state.findIndex(c => c.id === contact.id);
|
||||
if (contactIndex !== -1) {
|
||||
state[contactIndex] = contact;
|
||||
} else {
|
||||
newContacts.push(contact);
|
||||
}
|
||||
});
|
||||
|
||||
return [...state, ...newContacts];
|
||||
}
|
||||
|
||||
if (action.type === "UPDATE_CONTACT") {
|
||||
const updatedContact = action.payload;
|
||||
const contactIndex = state.findIndex(c => c.id === updatedContact.id);
|
||||
|
||||
if (contactIndex !== -1) {
|
||||
state[contactIndex] = updatedContact;
|
||||
}
|
||||
|
||||
return [...state];
|
||||
}
|
||||
|
||||
if (action.type === "DELETE_CONTACT") {
|
||||
const contactId = action.payload;
|
||||
console.log("cai aqui", contactId);
|
||||
|
||||
const contactIndex = state.findIndex(c => c.id === contactId);
|
||||
if (contactIndex !== -1) {
|
||||
console.log("cai no if");
|
||||
|
||||
state.splice(contactIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainContainer: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(2),
|
||||
height: `calc(100% - 48px)`,
|
||||
},
|
||||
|
||||
contentWrapper: {
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
|
||||
contactsHeader: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0px 6px 6px 6px",
|
||||
},
|
||||
|
||||
actionButtons: {
|
||||
flex: "none",
|
||||
marginLeft: "auto",
|
||||
"& > *": {
|
||||
margin: theme.spacing(1),
|
||||
},
|
||||
},
|
||||
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(2),
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
}));
|
||||
|
||||
const Contacts = () => {
|
||||
const classes = useStyles();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
const [count, setCount] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [contacts, dispatch] = useReducer(reducer, []);
|
||||
const [selectedContactId, setSelectedContactId] = useState(null);
|
||||
const [contactModalOpen, setContactModalOpen] = useState(false);
|
||||
const [deletingContact, setDeletingContact] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const res = await api.get("/contacts/", {
|
||||
params: { searchParam, pageNumber: page + 1, rowsPerPage },
|
||||
const { data } = await api.get("/contacts/", {
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
setContacts(res.data.contacts);
|
||||
setCount(res.data.count);
|
||||
dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
|
||||
setHasMore(data.hasMore);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
@@ -106,17 +113,17 @@ const Contacts = () => {
|
||||
fetchContacts();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, page, rowsPerPage]);
|
||||
}, [searchParam, pageNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
updateContacts(data.contact);
|
||||
dispatch({ type: "UPDATE_CONTACT", payload: data.contact });
|
||||
}
|
||||
|
||||
if (data.action === "delete") {
|
||||
deleteContact(data.contactId);
|
||||
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -125,40 +132,6 @@ const Contacts = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateContacts = contact => {
|
||||
setContacts(prevState => {
|
||||
const contactIndex = prevState.findIndex(c => c.id === contact.id);
|
||||
|
||||
if (contactIndex === -1) {
|
||||
return [contact, ...prevState];
|
||||
}
|
||||
const aux = [...prevState];
|
||||
aux[contactIndex] = contact;
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const deleteContact = contactId => {
|
||||
setContacts(prevState => {
|
||||
const contactIndex = prevState.findIndex(c => c.id === +contactId);
|
||||
|
||||
if (contactIndex === -1) return prevState;
|
||||
|
||||
const aux = [...prevState];
|
||||
aux.splice(contactIndex, 1);
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = event => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleSearch = event => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
@@ -186,7 +159,7 @@ const Contacts = () => {
|
||||
}
|
||||
setDeletingContact(null);
|
||||
setSearchParam("");
|
||||
setPage(0);
|
||||
setPageNumber(1);
|
||||
};
|
||||
|
||||
const handleimportContact = async () => {
|
||||
@@ -197,8 +170,20 @@ const Contacts = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
setPageNumber(prevState => prevState + 1);
|
||||
};
|
||||
|
||||
const handleScroll = e => {
|
||||
if (!hasMore || loading) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className={classes.mainContainer}>
|
||||
<MainContainer className={classes.mainContainer}>
|
||||
<ContactModal
|
||||
open={contactModalOpen}
|
||||
onClose={handleCloseContactModal}
|
||||
@@ -225,112 +210,91 @@ const Contacts = () => {
|
||||
? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
|
||||
: `${i18n.t("contacts.confirmationModal.importMessage")}`}
|
||||
</ConfirmationModal>
|
||||
<div className={classes.contentWrapper}>
|
||||
<div className={classes.contactsHeader}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
{i18n.t("contacts.title")}
|
||||
</Typography>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("contacts.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<TextField
|
||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={e => setConfirmOpen(true)}
|
||||
>
|
||||
{i18n.t("contacts.buttons.import")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenContactModal}
|
||||
>
|
||||
{i18n.t("contacts.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper
|
||||
className={classes.mainPaper}
|
||||
variant="outlined"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox" />
|
||||
<TableCell>{i18n.t("contacts.table.name")}</TableCell>
|
||||
<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
|
||||
<TableCell>{i18n.t("contacts.table.email")}</TableCell>
|
||||
<TableCell align="right">
|
||||
{i18n.t("contacts.table.actions")}
|
||||
</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.email}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => hadleEditContact(contact.id)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
|
||||
<div className={classes.actionButtons}>
|
||||
<TextField
|
||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={e => setConfirmOpen(true)}
|
||||
>
|
||||
{i18n.t("contacts.buttons.import")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenContactModal}
|
||||
>
|
||||
{i18n.t("contacts.buttons.add")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Paper className={classes.mainPaper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox" />
|
||||
<TableCell>{i18n.t("contacts.table.name")}</TableCell>
|
||||
<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
|
||||
<TableCell>{i18n.t("contacts.table.email")}</TableCell>
|
||||
<TableCell align="right">
|
||||
{i18n.t("contacts.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<ContactsSekeleton />
|
||||
) : (
|
||||
<>
|
||||
{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.email}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => hadleEditContact(contact.id)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={e => {
|
||||
setConfirmOpen(true);
|
||||
setDeletingContact(contact);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</Container>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={e => {
|
||||
setConfirmOpen(true);
|
||||
setDeletingContact(contact);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
export default function Title(props) {
|
||||
const Title = props => {
|
||||
return (
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
{props.children}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Title;
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import * as Yup from "yup";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
import Button from "@material-ui/core/Button";
|
||||
@@ -53,20 +55,26 @@ const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const UserSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(2, "Too Short!")
|
||||
.max(50, "Too Long!")
|
||||
.required("Required"),
|
||||
password: Yup.string().min(5, "Too Short!").max(50, "Too Long!"),
|
||||
email: Yup.string().email("Invalid email").required("Required"),
|
||||
});
|
||||
|
||||
const SignUp = () => {
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
const [user, setUser] = useState({ name: "", email: "", password: "" });
|
||||
const initialState = { name: "", email: "", password: "" };
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
const [user] = useState(initialState);
|
||||
|
||||
const handleSignUp = async e => {
|
||||
e.preventDefault();
|
||||
const handleSignUp = async values => {
|
||||
try {
|
||||
await api.post("/users", user);
|
||||
await api.post("/auth/signup", values);
|
||||
toast.success(i18n.t("signup.toasts.success"));
|
||||
history.push("/login");
|
||||
} catch (err) {
|
||||
@@ -84,68 +92,88 @@ const SignUp = () => {
|
||||
<Typography component="h1" variant="h5">
|
||||
{i18n.t("signup.title")}
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate onSubmit={handleSignUp}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
autoComplete="name"
|
||||
name="name"
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
id="name"
|
||||
label={i18n.t("signup.form.name")}
|
||||
value={user.name}
|
||||
onChange={handleChangeInput}
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
{/* <form className={classes.form} noValidate onSubmit={handleSignUp}> */}
|
||||
<Formik
|
||||
initialValues={user}
|
||||
enableReinitialize={true}
|
||||
validationSchema={UserSchema}
|
||||
onSubmit={(values, actions) => {
|
||||
setTimeout(() => {
|
||||
handleSignUp(values);
|
||||
actions.setSubmitting(false);
|
||||
}, 400);
|
||||
}}
|
||||
>
|
||||
{({ touched, errors, isSubmitting }) => (
|
||||
<Form className={classes.form}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Field
|
||||
as={TextField}
|
||||
autoComplete="name"
|
||||
name="name"
|
||||
error={touched.name && Boolean(errors.name)}
|
||||
helperText={touched.name && errors.name}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
id="name"
|
||||
label={i18n.t("signup.form.name")}
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
required
|
||||
<Grid item xs={12}>
|
||||
<Field
|
||||
as={TextField}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
id="email"
|
||||
label={i18n.t("signup.form.email")}
|
||||
name="email"
|
||||
error={touched.email && Boolean(errors.email)}
|
||||
helperText={touched.email && errors.email}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Field
|
||||
as={TextField}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="password"
|
||||
error={touched.password && Boolean(errors.password)}
|
||||
helperText={touched.password && errors.password}
|
||||
label={i18n.t("signup.form.password")}
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
id="email"
|
||||
label={i18n.t("signup.form.email")}
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label={i18n.t("signup.form.password")}
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
value={user.password}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
>
|
||||
{i18n.t("signup.buttons.submit")}
|
||||
</Button>
|
||||
<Grid container justify="flex-end">
|
||||
<Grid item>
|
||||
<Link href="#" variant="body2" component={RouterLink} to="/login">
|
||||
{i18n.t("signup.buttons.login")}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
>
|
||||
{i18n.t("signup.buttons.submit")}
|
||||
</Button>
|
||||
<Grid container justify="flex-end">
|
||||
<Grid item>
|
||||
<Link
|
||||
href="#"
|
||||
variant="body2"
|
||||
component={RouterLink}
|
||||
to="/login"
|
||||
>
|
||||
{i18n.t("signup.buttons.login")}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
<Box mt={5}>
|
||||
<Copyright />
|
||||
|
||||
234
frontend/src/pages/Users/index.js
Normal file
234
frontend/src/pages/Users/index.js
Normal file
@@ -0,0 +1,234 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import openSocket from "socket.io-client";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Button from "@material-ui/core/Button";
|
||||
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 IconButton from "@material-ui/core/IconButton";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
|
||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||
import EditIcon from "@material-ui/icons/Edit";
|
||||
|
||||
import MainContainer from "../../components/MainContainer";
|
||||
import MainHeader from "../../components/MainHeader";
|
||||
import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
|
||||
import Title from "../../components/Title";
|
||||
|
||||
import api from "../../services/api";
|
||||
import TableRowSkeleton from "../../components/TableRowSkeleton";
|
||||
import UserModal from "../../components/UserModal";
|
||||
import ConfirmationModal from "../../components/ConfirmationModal";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
}));
|
||||
|
||||
const Users = () => {
|
||||
const classes = useStyles();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [selectedUserId, setSelectedUserId] = useState(null);
|
||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
|
||||
const [deletingUser, setDeletingUser] = useState(null);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [users, setUsers] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await api.get("/users/", {
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
setUsers(res.data.users);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
};
|
||||
fetchUsers();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, pageNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
socket.on("user", data => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
updateUsers(data.user);
|
||||
}
|
||||
|
||||
if (data.action === "delete") {
|
||||
deleteUser(data.userId);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateUsers = user => {
|
||||
setUsers(prevState => {
|
||||
const userIndex = prevState.findIndex(c => c.id === user.id);
|
||||
|
||||
if (userIndex === -1) {
|
||||
return [user, ...prevState];
|
||||
}
|
||||
const aux = [...prevState];
|
||||
aux[userIndex] = user;
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const deleteUser = userId => {
|
||||
setUsers(prevState => {
|
||||
const userIndex = prevState.findIndex(c => c.id === +userId);
|
||||
|
||||
if (userIndex === -1) return prevState;
|
||||
|
||||
const aux = [...prevState];
|
||||
aux.splice(userIndex, 1);
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenUserModal = () => {
|
||||
setSelectedUserId(null);
|
||||
setUserModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseUserModal = () => {
|
||||
setSelectedUserId(null);
|
||||
setUserModalOpen(false);
|
||||
};
|
||||
|
||||
const handleSearch = event => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
const handleEditUser = userId => {
|
||||
setSelectedUserId(userId);
|
||||
setUserModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteUser = async userId => {
|
||||
try {
|
||||
await api.delete(`/users/${userId}`);
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
setDeletingUser(null);
|
||||
setSearchParam("");
|
||||
setPageNumber(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainContainer>
|
||||
<ConfirmationModal
|
||||
title={deletingUser && `Delete ${deletingUser.name}?`}
|
||||
open={confirmModalOpen}
|
||||
setOpen={setConfirmModalOpen}
|
||||
onConfirm={e => handleDeleteUser(deletingUser.id)}
|
||||
>
|
||||
Are you sure? It canoot be reverted.
|
||||
</ConfirmationModal>
|
||||
<UserModal
|
||||
open={userModalOpen}
|
||||
onClose={handleCloseUserModal}
|
||||
aria-labelledby="form-dialog-title"
|
||||
userId={selectedUserId}
|
||||
/>
|
||||
<MainHeader>
|
||||
<Title>Usuários</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<TextField
|
||||
placeholder="Search..."
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenUserModal}
|
||||
>
|
||||
Novo Usuário
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper className={classes.mainPaper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell>Profile</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRowSkeleton />
|
||||
) : (
|
||||
<>
|
||||
{users.map(user => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>{user.name}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>{user.profile}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditUser(user.id)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={e => {
|
||||
setConfirmModalOpen(true);
|
||||
setDeletingUser(user);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Users;
|
||||
@@ -8,6 +8,7 @@ import Chat from "../pages/Chat/";
|
||||
import Signup from "../pages/Signup/";
|
||||
import Login from "../pages/Login/";
|
||||
import WhatsAuth from "../pages/WhatsAuth/WhatsAuth";
|
||||
import Users from "../pages/Users";
|
||||
import Contacts from "../pages/Contacts/";
|
||||
import { AuthProvider } from "../context/Auth/AuthContext";
|
||||
import Route from "./Route";
|
||||
@@ -24,6 +25,7 @@ const Routes = () => {
|
||||
<Route exact path="/chat/:ticketId?" component={Chat} isPrivate />
|
||||
<Route exact path="/whats-auth" component={WhatsAuth} isPrivate />
|
||||
<Route exact path="/contacts" component={Contacts} isPrivate />
|
||||
<Route exact path="/users" component={Users} isPrivate />
|
||||
</MainDrawer>
|
||||
</Switch>
|
||||
<ToastContainer autoClose={3000} />
|
||||
|
||||
Reference in New Issue
Block a user