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

layout responsivo 2ª parte

Browse Source
This commit is contained in:
ertprs
2021-09-07 13:00:51 -03:00
parent 50d6c42345
commit 4bf8ac4521
15 changed files with 2108 additions and 1951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/App.js
View File

@@ -2,46 +2,46 @@ import React, { useState, useEffect } from "react";
import Routes from "./routes"; import Routes from "./routes";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { ptBR } from "@material-ui/core/locale"; import { ptBR } from "@material-ui/core/locale";
const App = () => { const App = () => {
const [locale, setLocale] = useState(); const [locale, setLocale] = useState();
const theme = createMuiTheme( const theme = createTheme(
{ {
scrollbarStyles: { scrollbarStyles: {
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: "8px", width: "8px",
height: "8px", height: "8px",
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#e8e8e8", backgroundColor: "#e8e8e8",
}, },
}, },
palette: { palette: {
primary: { main: "#2576d2" }, primary: { main: "#2576d2" },
}, },
}, },
locale locale
); );
useEffect(() => { useEffect(() => {
const i18nlocale = localStorage.getItem("i18nextLng"); const i18nlocale = localStorage.getItem("i18nextLng");
const browserLocale = const browserLocale =
i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5); i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
if (browserLocale === "ptBR") { if (browserLocale === "ptBR") {
setLocale(ptBR); setLocale(ptBR);
} }
}, []); }, []);
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Routes /> <Routes />
</ThemeProvider> </ThemeProvider>
); );
}; };
export default App; export default App;

40
frontend/src/components/ColorPicker/index.js
View File

@@ -4,28 +4,28 @@ import React, { useState } from "react";
import { GithubPicker } from "react-color"; import { GithubPicker } from "react-color";
const ColorPicker = ({ onChange, currentColor, handleClose, open }) => { const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
const [selectedColor, setSelectedColor] = useState(currentColor); const [selectedColor, setSelectedColor] = useState(currentColor);
const handleChange = color => { const handleChange = (color) => {
setSelectedColor(color.hex); setSelectedColor(color.hex);
handleClose(); handleClose();
}; };
return ( return (
<Dialog <Dialog
onClose={handleClose} onClose={handleClose}
aria-labelledby="simple-dialog-title" aria-labelledby="simple-dialog-title"
open={open} open={open}
> >
<GithubPicker <GithubPicker
width={"100%"} width={"100%"}
triangle="hide" triangle="hide"
color={selectedColor} color={selectedColor}
onChange={handleChange} onChange={handleChange}
onChangeComplete={color => onChange(color.hex)} onChangeComplete={(color) => onChange(color.hex)}
/> />
</Dialog> </Dialog>
); );
}; };
export default ColorPicker; export default ColorPicker;

38
frontend/src/components/MainContainer/index.js
View File

@@ -3,29 +3,31 @@ import React from "react";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container"; import Container from "@material-ui/core/Container";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
mainContainer: { mainContainer: {
flex: 1, flex: 1,
padding: theme.spacing(2), // padding: theme.spacing(2),
height: `calc(100% - 48px)`, // height: `calc(100% - 48px)`,
}, padding: 0,
height: "100%",
},
contentWrapper: { contentWrapper: {
height: "100%", height: "100%",
overflowY: "hidden", overflowY: "hidden",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
}, },
})); }));
const MainContainer = ({ children }) => { const MainContainer = ({ children }) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<Container className={classes.mainContainer}> <Container className={classes.mainContainer} maxWidth={false}>
<div className={classes.contentWrapper}>{children}</div> <div className={classes.contentWrapper}>{children}</div>
</Container> </Container>
); );
}; };
export default MainContainer; export default MainContainer;

188
frontend/src/components/MessageInput/index.js
View File

@@ -12,6 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
import { green } from "@material-ui/core/colors"; import { green } from "@material-ui/core/colors";
import AttachFileIcon from "@material-ui/icons/AttachFile"; import AttachFileIcon from "@material-ui/icons/AttachFile";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import MoreVert from "@material-ui/icons/MoreVert";
import MoodIcon from "@material-ui/icons/Mood"; import MoodIcon from "@material-ui/icons/Mood";
import SendIcon from "@material-ui/icons/Send"; import SendIcon from "@material-ui/icons/Send";
import CancelIcon from "@material-ui/icons/Cancel"; import CancelIcon from "@material-ui/icons/Cancel";
@@ -19,7 +20,13 @@ import ClearIcon from "@material-ui/icons/Clear";
import MicIcon from "@material-ui/icons/Mic"; import MicIcon from "@material-ui/icons/Mic";
import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline"; import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
import HighlightOffIcon from "@material-ui/icons/HighlightOff"; import HighlightOffIcon from "@material-ui/icons/HighlightOff";
import { FormControlLabel, Switch } from "@material-ui/core"; import {
FormControlLabel,
Hidden,
Menu,
MenuItem,
Switch,
} from "@material-ui/core";
import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n";
@@ -39,6 +46,11 @@ const useStyles = makeStyles((theme) => ({
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
borderTop: "1px solid rgba(0, 0, 0, 0.12)", borderTop: "1px solid rgba(0, 0, 0, 0.12)",
[theme.breakpoints.down("sm")]: {
position: "fixed",
bottom: 0,
width: "100%",
},
}, },
newMessageBox: { newMessageBox: {
@@ -56,6 +68,7 @@ const useStyles = makeStyles((theme) => ({
display: "flex", display: "flex",
borderRadius: 20, borderRadius: 20,
flex: 1, flex: 1,
position: "relative",
}, },
messageInput: { messageInput: {
@@ -200,6 +213,7 @@ const MessageInput = ({ ticketStatus }) => {
const [quickAnswers, setQuickAnswer] = useState([]); const [quickAnswers, setQuickAnswer] = useState([]);
const [typeBar, setTypeBar] = useState(false); const [typeBar, setTypeBar] = useState(false);
const inputRef = useRef(); const inputRef = useRef();
const [anchorEl, setAnchorEl] = useState(null);
const { setReplyingMessage, replyingMessage } = const { setReplyingMessage, replyingMessage } =
useContext(ReplyMessageContext); useContext(ReplyMessageContext);
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
@@ -363,6 +377,14 @@ const MessageInput = ({ ticketStatus }) => {
} }
}; };
const handleOpenMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuItemClick = (event) => {
setAnchorEl(null);
};
const renderReplyingMessage = (message) => { const renderReplyingMessage = (message) => {
return ( return (
<div className={classes.replyginMsgWrapper}> <div className={classes.replyginMsgWrapper}>
@@ -429,60 +451,126 @@ const MessageInput = ({ ticketStatus }) => {
<Paper square elevation={0} className={classes.mainWrapper}> <Paper square elevation={0} className={classes.mainWrapper}>
{replyingMessage && renderReplyingMessage(replyingMessage)} {replyingMessage && renderReplyingMessage(replyingMessage)}
<div className={classes.newMessageBox}> <div className={classes.newMessageBox}>
<IconButton <Hidden only={["sm", "xs"]}>
aria-label="emojiPicker"
component="span"
disabled={loading || recording || ticketStatus !== "open"}
onClick={(e) => setShowEmoji((prevState) => !prevState)}
>
<MoodIcon className={classes.sendMessageIcons} />
</IconButton>
{showEmoji ? (
<div className={classes.emojiBox}>
<ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
<Picker
perLine={16}
showPreview={false}
showSkinTones={false}
onSelect={handleAddEmoji}
/>
</ClickAwayListener>
</div>
) : null}
<input
multiple
type="file"
id="upload-button"
disabled={loading || recording || ticketStatus !== "open"}
className={classes.uploadInput}
onChange={handleChangeMedias}
/>
<label htmlFor="upload-button">
<IconButton <IconButton
aria-label="upload" aria-label="emojiPicker"
component="span" component="span"
disabled={loading || recording || ticketStatus !== "open"} disabled={loading || recording || ticketStatus !== "open"}
onClick={(e) => setShowEmoji((prevState) => !prevState)}
> >
<AttachFileIcon className={classes.sendMessageIcons} /> <MoodIcon className={classes.sendMessageIcons} />
</IconButton> </IconButton>
</label> {showEmoji ? (
<FormControlLabel <div className={classes.emojiBox}>
style={{ marginRight: 7, color: "gray" }} <ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
label={i18n.t("messagesInput.signMessage")} <Picker
labelPlacement="start" perLine={16}
control={ showPreview={false}
<Switch showSkinTones={false}
size="small" onSelect={handleAddEmoji}
checked={signMessage} />
onChange={(e) => { </ClickAwayListener>
setSignMessage(e.target.checked); </div>
}} ) : null}
name="showAllTickets"
color="primary" <input
/> multiple
} type="file"
/> id="upload-button"
disabled={loading || recording || ticketStatus !== "open"}
className={classes.uploadInput}
onChange={handleChangeMedias}
/>
<label htmlFor="upload-button">
<IconButton
aria-label="upload"
component="span"
disabled={loading || recording || ticketStatus !== "open"}
>
<AttachFileIcon className={classes.sendMessageIcons} />
</IconButton>
</label>
<FormControlLabel
style={{ marginRight: 7, color: "gray" }}
label={i18n.t("messagesInput.signMessage")}
labelPlacement="start"
control={
<Switch
size="small"
checked={signMessage}
onChange={(e) => {
setSignMessage(e.target.checked);
}}
name="showAllTickets"
color="primary"
/>
}
/>
</Hidden>
<Hidden only={["md", "lg", "xl"]}>
<IconButton
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleOpenMenuClick}
>
<MoreVert></MoreVert>
</IconButton>
<Menu
id="simple-menu"
keepMounted
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuItemClick}
>
<MenuItem onClick={handleMenuItemClick}>
<IconButton
aria-label="emojiPicker"
component="span"
disabled={loading || recording || ticketStatus !== "open"}
onClick={(e) => setShowEmoji((prevState) => !prevState)}
>
<MoodIcon className={classes.sendMessageIcons} />
</IconButton>
</MenuItem>
<MenuItem onClick={handleMenuItemClick}>
<input
multiple
type="file"
id="upload-button"
disabled={loading || recording || ticketStatus !== "open"}
className={classes.uploadInput}
onChange={handleChangeMedias}
/>
<label htmlFor="upload-button">
<IconButton
aria-label="upload"
component="span"
disabled={loading || recording || ticketStatus !== "open"}
>
<AttachFileIcon className={classes.sendMessageIcons} />
</IconButton>
</label>
</MenuItem>
<MenuItem onClick={handleMenuItemClick}>
<FormControlLabel
style={{ marginRight: 7, color: "gray" }}
label={i18n.t("messagesInput.signMessage")}
labelPlacement="start"
control={
<Switch
size="small"
checked={signMessage}
onChange={(e) => {
setSignMessage(e.target.checked);
}}
name="showAllTickets"
color="primary"
/>
}
/>
</MenuItem>
</Menu>
</Hidden>
<div className={classes.messageInputWrapper}> <div className={classes.messageInputWrapper}>
<InputBase <InputBase
inputRef={(input) => { inputRef={(input) => {

104
frontend/src/components/MessageOptionsMenu/index.js
View File

@@ -10,62 +10,62 @@ import { ReplyMessageContext } from "../../context/ReplyingMessage/ReplyingMessa
import toastError from "../../errors/toastError"; import toastError from "../../errors/toastError";
const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => { const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
const { setReplyingMessage } = useContext(ReplyMessageContext); const { setReplyingMessage } = useContext(ReplyMessageContext);
const [confirmationOpen, setConfirmationOpen] = useState(false); const [confirmationOpen, setConfirmationOpen] = useState(false);
const handleDeleteMessage = async () => { const handleDeleteMessage = async () => {
try { try {
await api.delete(`/messages/${message.id}`); await api.delete(`/messages/${message.id}`);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
}; };
const hanldeReplyMessage = () => { const hanldeReplyMessage = () => {
setReplyingMessage(message); setReplyingMessage(message);
handleClose(); handleClose();
}; };
const handleOpenConfirmationModal = e => { const handleOpenConfirmationModal = (e) => {
setConfirmationOpen(true); setConfirmationOpen(true);
handleClose(); handleClose();
}; };
return ( return (
<> <>
<ConfirmationModal <ConfirmationModal
title={i18n.t("messageOptionsMenu.confirmationModal.title")} title={i18n.t("messageOptionsMenu.confirmationModal.title")}
open={confirmationOpen} open={confirmationOpen}
onClose={setConfirmationOpen} onClose={setConfirmationOpen}
onConfirm={handleDeleteMessage} onConfirm={handleDeleteMessage}
> >
{i18n.t("messageOptionsMenu.confirmationModal.message")} {i18n.t("messageOptionsMenu.confirmationModal.message")}
</ConfirmationModal> </ConfirmationModal>
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
getContentAnchorEl={null} getContentAnchorEl={null}
anchorOrigin={{ anchorOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "right", horizontal: "right",
}} }}
transformOrigin={{ transformOrigin={{
vertical: "top", vertical: "top",
horizontal: "right", horizontal: "right",
}} }}
open={menuOpen} open={menuOpen}
onClose={handleClose} onClose={handleClose}
> >
{message.fromMe && ( {message.fromMe && (
<MenuItem onClick={handleOpenConfirmationModal}> <MenuItem onClick={handleOpenConfirmationModal}>
{i18n.t("messageOptionsMenu.delete")} {i18n.t("messageOptionsMenu.delete")}
</MenuItem> </MenuItem>
)} )}
<MenuItem onClick={hanldeReplyMessage}> <MenuItem onClick={hanldeReplyMessage}>
{i18n.t("messageOptionsMenu.reply")} {i18n.t("messageOptionsMenu.reply")}
</MenuItem> </MenuItem>
</Menu> </Menu>
</> </>
); );
}; };
export default MessageOptionsMenu; export default MessageOptionsMenu;

1121
frontend/src/components/MessagesList/index.js
View File

File diff suppressed because it is too large Load Diff

265
frontend/src/components/Ticket/index.js
View File

@@ -19,144 +19,167 @@ import toastError from "../../errors/toastError";
const drawerWidth = 320; const drawerWidth = 320;
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
display: "flex", display: "flex",
height: "100%", height: "100%",
position: "relative", position: "relative",
overflow: "hidden", overflow: "hidden",
}, },
mainWrapper: { ticketInfo: {
flex: 1, maxWidth: "50%",
height: "100%", flexBasis: "50%",
display: "flex", [theme.breakpoints.down("sm")]: {
flexDirection: "column", maxWidth: "80%",
overflow: "hidden", flexBasis: "80%",
borderTopLeftRadius: 0, },
borderBottomLeftRadius: 0, },
borderLeft: "0", ticketActionButtons: {
marginRight: -drawerWidth, maxWidth: "50%",
transition: theme.transitions.create("margin", { flexBasis: "50%",
easing: theme.transitions.easing.sharp, display: "flex",
duration: theme.transitions.duration.leavingScreen, [theme.breakpoints.down("sm")]: {
}), maxWidth: "100%",
}, flexBasis: "100%",
marginBottom: "5px",
},
},
mainWrapperShift: { mainWrapper: {
borderTopRightRadius: 0, flex: 1,
borderBottomRightRadius: 0, height: "100%",
transition: theme.transitions.create("margin", { display: "flex",
easing: theme.transitions.easing.easeOut, flexDirection: "column",
duration: theme.transitions.duration.enteringScreen, overflow: "hidden",
}), borderTopLeftRadius: 0,
marginRight: 0, borderBottomLeftRadius: 0,
}, borderLeft: "0",
marginRight: -drawerWidth,
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
mainWrapperShift: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
},
})); }));
const Ticket = () => { const Ticket = () => {
const { ticketId } = useParams(); const { ticketId } = useParams();
const history = useHistory(); const history = useHistory();
const classes = useStyles(); const classes = useStyles();
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [contact, setContact] = useState({}); const [contact, setContact] = useState({});
const [ticket, setTicket] = useState({}); const [ticket, setTicket] = useState({});
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
const fetchTicket = async () => { const fetchTicket = async () => {
try { try {
const { data } = await api.get("/tickets/" + ticketId); const { data } = await api.get("/tickets/" + ticketId);
setContact(data.contact); setContact(data.contact);
setTicket(data); setTicket(data);
setLoading(false); setLoading(false);
} catch (err) { } catch (err) {
setLoading(false); setLoading(false);
toastError(err); toastError(err);
} }
}; };
fetchTicket(); fetchTicket();
}, 500); }, 500);
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn);
}, [ticketId, history]); }, [ticketId, history]);
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("connect", () => socket.emit("joinChatBox", ticketId)); socket.on("connect", () => socket.emit("joinChatBox", ticketId));
socket.on("ticket", data => { socket.on("ticket", (data) => {
if (data.action === "update") { if (data.action === "update") {
setTicket(data.ticket); setTicket(data.ticket);
} }
if (data.action === "delete") { if (data.action === "delete") {
toast.success("Ticket deleted sucessfully."); toast.success("Ticket deleted sucessfully.");
history.push("/tickets"); history.push("/tickets");
} }
}); });
socket.on("contact", data => { socket.on("contact", (data) => {
if (data.action === "update") { if (data.action === "update") {
setContact(prevState => { setContact((prevState) => {
if (prevState.id === data.contact?.id) { if (prevState.id === data.contact?.id) {
return { ...prevState, ...data.contact }; return { ...prevState, ...data.contact };
} }
return prevState; return prevState;
}); });
} }
}); });
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, [ticketId, history]); }, [ticketId, history]);
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
setDrawerOpen(true); setDrawerOpen(true);
}; };
const handleDrawerClose = () => { const handleDrawerClose = () => {
setDrawerOpen(false); setDrawerOpen(false);
}; };
return ( return (
<div className={classes.root} id="drawer-container"> <div className={classes.root} id="drawer-container">
<Paper <Paper
variant="outlined" variant="outlined"
elevation={0} elevation={0}
className={clsx(classes.mainWrapper, { className={clsx(classes.mainWrapper, {
[classes.mainWrapperShift]: drawerOpen, [classes.mainWrapperShift]: drawerOpen,
})} })}
> >
<TicketHeader loading={loading}> <TicketHeader loading={loading}>
<TicketInfo <div className={classes.ticketInfo}>
contact={contact} <TicketInfo
ticket={ticket} contact={contact}
onClick={handleDrawerOpen} ticket={ticket}
/> onClick={handleDrawerOpen}
<TicketActionButtons ticket={ticket} /> />
</TicketHeader> </div>
<ReplyMessageProvider> <div className={classes.ticketActionButtons}>
<MessagesList <TicketActionButtons ticket={ticket} />
ticketId={ticketId} </div>
isGroup={ticket.isGroup} </TicketHeader>
></MessagesList> <ReplyMessageProvider>
<MessageInput ticketStatus={ticket.status} /> <MessagesList
</ReplyMessageProvider> ticketId={ticketId}
</Paper> isGroup={ticket.isGroup}
<ContactDrawer ></MessagesList>
open={drawerOpen} <MessageInput ticketStatus={ticket.status} />
handleDrawerClose={handleDrawerClose} </ReplyMessageProvider>
contact={contact} </Paper>
loading={loading} <ContactDrawer
/> open={drawerOpen}
</div> handleDrawerClose={handleDrawerClose}
); contact={contact}
loading={loading}
/>
</div>
);
}; };
export default Ticket; export default Ticket;

52
frontend/src/components/TicketHeader/index.js
View File

@@ -1,32 +1,44 @@
import React from "react"; import React from "react";
import { Card } from "@material-ui/core"; import { Card, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import TicketHeaderSkeleton from "../TicketHeaderSkeleton"; import TicketHeaderSkeleton from "../TicketHeaderSkeleton";
import ArrowBackIos from "@material-ui/icons/ArrowBackIos";
import { useHistory } from "react-router-dom";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
ticketHeader: { ticketHeader: {
display: "flex", display: "flex",
backgroundColor: "#eee", backgroundColor: "#eee",
flex: "none", flex: "none",
borderBottom: "1px solid rgba(0, 0, 0, 0.12)", borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
}, [theme.breakpoints.down("sm")]: {
flexWrap: "wrap",
},
},
})); }));
const TicketHeader = ({ loading, children }) => { const TicketHeader = ({ loading, children }) => {
const classes = useStyles(); const classes = useStyles();
const history = useHistory();
const handleBack = () => {
history.push("/tickets");
};
return ( return (
<> <>
{loading ? ( {loading ? (
<TicketHeaderSkeleton /> <TicketHeaderSkeleton />
) : ( ) : (
<Card square className={classes.ticketHeader}> <Card square className={classes.ticketHeader}>
{children} <Button color="primary" onClick={handleBack}>
</Card> <ArrowBackIos />
)} </Button>
</> {children}
); </Card>
)}
</>
);
}; };
export default TicketHeader; export default TicketHeader;

378
frontend/src/components/TicketsManager/index.js
View File

@@ -22,215 +22,215 @@ import { Can } from "../Can";
import TicketsQueueSelect from "../TicketsQueueSelect"; import TicketsQueueSelect from "../TicketsQueueSelect";
import { Button } from "@material-ui/core"; import { Button } from "@material-ui/core";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
ticketsWrapper: { ticketsWrapper: {
position: "relative", position: "relative",
display: "flex", display: "flex",
height: "100%", height: "100%",
flexDirection: "column", flexDirection: "column",
overflow: "hidden", overflow: "hidden",
borderTopRightRadius: 0, borderTopRightRadius: 0,
borderBottomRightRadius: 0, borderBottomRightRadius: 0,
}, },
tabsHeader: { tabsHeader: {
flex: "none", flex: "none",
backgroundColor: "#eee", backgroundColor: "#eee",
}, },
settingsIcon: { settingsIcon: {
alignSelf: "center", alignSelf: "center",
marginLeft: "auto", marginLeft: "auto",
padding: 8, padding: 8,
}, },
tab: { tab: {
minWidth: 120, minWidth: 120,
width: 120, width: 120,
}, },
ticketOptionsBox: { ticketOptionsBox: {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
background: "#fafafa", background: "#fafafa",
padding: theme.spacing(1), padding: theme.spacing(1),
}, },
serachInputWrapper: { serachInputWrapper: {
flex: 1, flex: 1,
background: "#fff", background: "#fff",
display: "flex", display: "flex",
borderRadius: 40, borderRadius: 40,
padding: 4, padding: 4,
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
}, },
searchIcon: { searchIcon: {
color: "grey", color: "grey",
marginLeft: 6, marginLeft: 6,
marginRight: 6, marginRight: 6,
alignSelf: "center", alignSelf: "center",
}, },
searchInput: { searchInput: {
flex: 1, flex: 1,
border: "none", border: "none",
borderRadius: 30, borderRadius: 30,
}, },
})); }));
const TicketsManager = () => { const TicketsManager = () => {
const classes = useStyles(); const classes = useStyles();
const [searchParam, setSearchParam] = useState(""); const [searchParam, setSearchParam] = useState("");
const [tab, setTab] = useState("open"); const [tab, setTab] = useState("open");
const [newTicketModalOpen, setNewTicketModalOpen] = useState(false); const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
const [showAllTickets, setShowAllTickets] = useState(false); const [showAllTickets, setShowAllTickets] = useState(false);
const searchInputRef = useRef(); const searchInputRef = useRef();
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
const userQueueIds = user.queues.map(q => q.id); const userQueueIds = user.queues.map((q) => q.id);
const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []); const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
useEffect(() => { useEffect(() => {
if (tab === "search") { if (tab === "search") {
searchInputRef.current.focus(); searchInputRef.current.focus();
} }
}, [tab]); }, [tab]);
let searchTimeout; let searchTimeout;
const handleSearch = e => { const handleSearch = (e) => {
const searchedTerm = e.target.value.toLowerCase(); const searchedTerm = e.target.value.toLowerCase();
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
if (searchedTerm === "") { if (searchedTerm === "") {
setSearchParam(searchedTerm); setSearchParam(searchedTerm);
setTab("open"); setTab("open");
return; return;
} }
searchTimeout = setTimeout(() => { searchTimeout = setTimeout(() => {
setSearchParam(searchedTerm); setSearchParam(searchedTerm);
}, 500); }, 500);
}; };
const handleChangeTab = (e, newValue) => { const handleChangeTab = (e, newValue) => {
setTab(newValue); setTab(newValue);
}; };
return ( return (
<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}> <Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
<NewTicketModal <NewTicketModal
modalOpen={newTicketModalOpen} modalOpen={newTicketModalOpen}
onClose={e => setNewTicketModalOpen(false)} onClose={(e) => setNewTicketModalOpen(false)}
/> />
<Paper elevation={0} square className={classes.tabsHeader}> <Paper elevation={0} square className={classes.tabsHeader}>
<Tabs <Tabs
value={tab} value={tab}
onChange={handleChangeTab} onChange={handleChangeTab}
variant="fullWidth" variant="fullWidth"
indicatorColor="primary" indicatorColor="primary"
textColor="primary" textColor="primary"
aria-label="icon label tabs example" aria-label="icon label tabs example"
> >
<Tab <Tab
value={"open"} value={"open"}
icon={<MoveToInboxIcon />} icon={<MoveToInboxIcon />}
label={i18n.t("tickets.tabs.open.title")} label={i18n.t("tickets.tabs.open.title")}
classes={{ root: classes.tab }} classes={{ root: classes.tab }}
/> />
<Tab <Tab
value={"closed"} value={"closed"}
icon={<CheckBoxIcon />} icon={<CheckBoxIcon />}
label={i18n.t("tickets.tabs.closed.title")} label={i18n.t("tickets.tabs.closed.title")}
classes={{ root: classes.tab }} classes={{ root: classes.tab }}
/> />
<Tab <Tab
value={"search"} value={"search"}
icon={<SearchIcon />} icon={<SearchIcon />}
label={i18n.t("tickets.tabs.search.title")} label={i18n.t("tickets.tabs.search.title")}
classes={{ root: classes.tab }} classes={{ root: classes.tab }}
/> />
</Tabs> </Tabs>
</Paper> </Paper>
<Paper square elevation={0} className={classes.ticketOptionsBox}> <Paper square elevation={0} className={classes.ticketOptionsBox}>
{tab === "search" ? ( {tab === "search" ? (
<div className={classes.serachInputWrapper}> <div className={classes.serachInputWrapper}>
<SearchIcon className={classes.searchIcon} /> <SearchIcon className={classes.searchIcon} />
<InputBase <InputBase
className={classes.searchInput} className={classes.searchInput}
inputRef={searchInputRef} inputRef={searchInputRef}
placeholder={i18n.t("tickets.search.placeholder")} placeholder={i18n.t("tickets.search.placeholder")}
type="search" type="search"
onChange={handleSearch} onChange={handleSearch}
/> />
</div> </div>
) : ( ) : (
<> <>
<Button <Button
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => setNewTicketModalOpen(true)} onClick={() => setNewTicketModalOpen(true)}
> >
{i18n.t("ticketsManager.buttons.newTicket")} {i18n.t("ticketsManager.buttons.newTicket")}
</Button> </Button>
<Can <Can
role={user.profile} role={user.profile}
perform="tickets-manager:showall" perform="tickets-manager:showall"
yes={() => ( yes={() => (
<FormControlLabel <FormControlLabel
label={i18n.t("tickets.buttons.showAll")} label={i18n.t("tickets.buttons.showAll")}
labelPlacement="start" labelPlacement="start"
control={ control={
<Switch <Switch
size="small" size="small"
checked={showAllTickets} checked={showAllTickets}
onChange={() => onChange={() =>
setShowAllTickets(prevState => !prevState) setShowAllTickets((prevState) => !prevState)
} }
name="showAllTickets" name="showAllTickets"
color="primary" color="primary"
/> />
} }
/> />
)} )}
/> />
</> </>
)} )}
<TicketsQueueSelect <TicketsQueueSelect
style={{ marginLeft: 6 }} style={{ marginLeft: 6 }}
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
userQueues={user?.queues} userQueues={user?.queues}
onChange={values => setSelectedQueueIds(values)} onChange={(values) => setSelectedQueueIds(values)}
/> />
</Paper> </Paper>
<TabPanel value={tab} name="open" className={classes.ticketsWrapper}> <TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
<TicketsList <TicketsList
status="open" status="open"
showAll={showAllTickets} showAll={showAllTickets}
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
/> />
<TicketsList status="pending" selectedQueueIds={selectedQueueIds} /> <TicketsList status="pending" selectedQueueIds={selectedQueueIds} />
</TabPanel> </TabPanel>
<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}> <TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
<TicketsList <TicketsList
status="closed" status="closed"
showAll={true} showAll={true}
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
/> />
</TabPanel> </TabPanel>
<TabPanel value={tab} name="search" className={classes.ticketsWrapper}> <TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
<TicketsList <TicketsList
searchParam={searchParam} searchParam={searchParam}
showAll={true} showAll={true}
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
/> />
</TabPanel> </TabPanel>
</Paper> </Paper>
); );
}; };
export default TicketsManager; export default TicketsManager;

556
frontend/src/pages/Contacts/index.js
View File

@@ -36,314 +36,314 @@ import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can"; import { Can } from "../../components/Can";
const reducer = (state, action) => { const reducer = (state, action) => {
if (action.type === "LOAD_CONTACTS") { if (action.type === "LOAD_CONTACTS") {
const contacts = action.payload; const contacts = action.payload;
const newContacts = []; const newContacts = [];
contacts.forEach(contact => { contacts.forEach((contact) => {
const contactIndex = state.findIndex(c => c.id === contact.id); const contactIndex = state.findIndex((c) => c.id === contact.id);
if (contactIndex !== -1) { if (contactIndex !== -1) {
state[contactIndex] = contact; state[contactIndex] = contact;
} else { } else {
newContacts.push(contact); newContacts.push(contact);
} }
}); });
return [...state, ...newContacts]; return [...state, ...newContacts];
} }
if (action.type === "UPDATE_CONTACTS") { if (action.type === "UPDATE_CONTACTS") {
const contact = action.payload; const contact = action.payload;
const contactIndex = state.findIndex(c => c.id === contact.id); const contactIndex = state.findIndex((c) => c.id === contact.id);
if (contactIndex !== -1) { if (contactIndex !== -1) {
state[contactIndex] = contact; state[contactIndex] = contact;
return [...state]; return [...state];
} else { } else {
return [contact, ...state]; return [contact, ...state];
} }
} }
if (action.type === "DELETE_CONTACT") { if (action.type === "DELETE_CONTACT") {
const contactId = action.payload; const contactId = action.payload;
const contactIndex = state.findIndex(c => c.id === contactId); const contactIndex = state.findIndex((c) => c.id === contactId);
if (contactIndex !== -1) { if (contactIndex !== -1) {
state.splice(contactIndex, 1); state.splice(contactIndex, 1);
} }
return [...state]; return [...state];
} }
if (action.type === "RESET") { if (action.type === "RESET") {
return []; return [];
} }
}; };
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
mainPaper: { mainPaper: {
flex: 1, flex: 1,
padding: theme.spacing(1), padding: theme.spacing(1),
overflowY: "scroll", overflowY: "scroll",
...theme.scrollbarStyles, ...theme.scrollbarStyles,
}, },
})); }));
const Contacts = () => { const Contacts = () => {
const classes = useStyles(); const classes = useStyles();
const history = useHistory(); const history = useHistory();
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [pageNumber, setPageNumber] = useState(1); const [pageNumber, setPageNumber] = useState(1);
const [searchParam, setSearchParam] = useState(""); const [searchParam, setSearchParam] = useState("");
const [contacts, dispatch] = useReducer(reducer, []); const [contacts, dispatch] = useReducer(reducer, []);
const [selectedContactId, setSelectedContactId] = useState(null); const [selectedContactId, setSelectedContactId] = useState(null);
const [contactModalOpen, setContactModalOpen] = useState(false); const [contactModalOpen, setContactModalOpen] = useState(false);
const [deletingContact, setDeletingContact] = useState(null); const [deletingContact, setDeletingContact] = useState(null);
const [confirmOpen, setConfirmOpen] = useState(false); const [confirmOpen, setConfirmOpen] = useState(false);
const [hasMore, setHasMore] = useState(false); const [hasMore, setHasMore] = useState(false);
useEffect(() => { useEffect(() => {
dispatch({ type: "RESET" }); dispatch({ type: "RESET" });
setPageNumber(1); setPageNumber(1);
}, [searchParam]); }, [searchParam]);
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
const fetchContacts = async () => { const fetchContacts = async () => {
try { try {
const { data } = await api.get("/contacts/", { const { data } = await api.get("/contacts/", {
params: { searchParam, pageNumber }, params: { searchParam, pageNumber },
}); });
dispatch({ type: "LOAD_CONTACTS", payload: data.contacts }); dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
setHasMore(data.hasMore); setHasMore(data.hasMore);
setLoading(false); setLoading(false);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
}; };
fetchContacts(); fetchContacts();
}, 500); }, 500);
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn);
}, [searchParam, pageNumber]); }, [searchParam, pageNumber]);
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("contact", data => { socket.on("contact", (data) => {
if (data.action === "update" || data.action === "create") { if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_CONTACTS", payload: data.contact }); dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
} }
if (data.action === "delete") { if (data.action === "delete") {
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId }); dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
} }
}); });
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, []); }, []);
const handleSearch = event => { const handleSearch = (event) => {
setSearchParam(event.target.value.toLowerCase()); setSearchParam(event.target.value.toLowerCase());
}; };
const handleOpenContactModal = () => { const handleOpenContactModal = () => {
setSelectedContactId(null); setSelectedContactId(null);
setContactModalOpen(true); setContactModalOpen(true);
}; };
const handleCloseContactModal = () => { const handleCloseContactModal = () => {
setSelectedContactId(null); setSelectedContactId(null);
setContactModalOpen(false); setContactModalOpen(false);
}; };
const handleSaveTicket = async contactId => { const handleSaveTicket = async (contactId) => {
if (!contactId) return; if (!contactId) return;
setLoading(true); setLoading(true);
try { try {
const { data: ticket } = await api.post("/tickets", { const { data: ticket } = await api.post("/tickets", {
contactId: contactId, contactId: contactId,
userId: user?.id, userId: user?.id,
status: "open", status: "open",
}); });
history.push(`/tickets/${ticket.id}`); history.push(`/tickets/${ticket.id}`);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
setLoading(false); setLoading(false);
}; };
const hadleEditContact = contactId => { const hadleEditContact = (contactId) => {
setSelectedContactId(contactId); setSelectedContactId(contactId);
setContactModalOpen(true); setContactModalOpen(true);
}; };
const handleDeleteContact = async contactId => { const handleDeleteContact = async (contactId) => {
try { try {
await api.delete(`/contacts/${contactId}`); await api.delete(`/contacts/${contactId}`);
toast.success(i18n.t("contacts.toasts.deleted")); toast.success(i18n.t("contacts.toasts.deleted"));
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
setDeletingContact(null); setDeletingContact(null);
setSearchParam(""); setSearchParam("");
setPageNumber(1); setPageNumber(1);
}; };
const handleimportContact = async () => { const handleimportContact = async () => {
try { try {
await api.post("/contacts/import"); await api.post("/contacts/import");
history.go(0); history.go(0);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
}; };
const loadMore = () => { const loadMore = () => {
setPageNumber(prevState => prevState + 1); setPageNumber((prevState) => prevState + 1);
}; };
const handleScroll = e => { const handleScroll = (e) => {
if (!hasMore || loading) return; if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
if (scrollHeight - (scrollTop + 100) < clientHeight) { if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore(); loadMore();
} }
}; };
return ( return (
<MainContainer className={classes.mainContainer}> <MainContainer className={classes.mainContainer}>
<ContactModal <ContactModal
open={contactModalOpen} open={contactModalOpen}
onClose={handleCloseContactModal} onClose={handleCloseContactModal}
aria-labelledby="form-dialog-title" aria-labelledby="form-dialog-title"
contactId={selectedContactId} contactId={selectedContactId}
></ContactModal> ></ContactModal>
<ConfirmationModal <ConfirmationModal
title={ title={
deletingContact deletingContact
? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${ ? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
deletingContact.name deletingContact.name
}?` }?`
: `${i18n.t("contacts.confirmationModal.importTitlte")}` : `${i18n.t("contacts.confirmationModal.importTitlte")}`
} }
open={confirmOpen} open={confirmOpen}
onClose={setConfirmOpen} onClose={setConfirmOpen}
onConfirm={e => onConfirm={(e) =>
deletingContact deletingContact
? handleDeleteContact(deletingContact.id) ? handleDeleteContact(deletingContact.id)
: handleimportContact() : handleimportContact()
} }
> >
{deletingContact {deletingContact
? `${i18n.t("contacts.confirmationModal.deleteMessage")}` ? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
: `${i18n.t("contacts.confirmationModal.importMessage")}`} : `${i18n.t("contacts.confirmationModal.importMessage")}`}
</ConfirmationModal> </ConfirmationModal>
<MainHeader> <MainHeader>
<Title>{i18n.t("contacts.title")}</Title> <Title>{i18n.t("contacts.title")}</Title>
<MainHeaderButtonsWrapper> <MainHeaderButtonsWrapper>
<TextField <TextField
placeholder={i18n.t("contacts.searchPlaceholder")} placeholder={i18n.t("contacts.searchPlaceholder")}
type="search" type="search"
value={searchParam} value={searchParam}
onChange={handleSearch} onChange={handleSearch}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<SearchIcon style={{ color: "gray" }} /> <SearchIcon style={{ color: "gray" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={e => setConfirmOpen(true)} onClick={(e) => setConfirmOpen(true)}
> >
{i18n.t("contacts.buttons.import")} {i18n.t("contacts.buttons.import")}
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={handleOpenContactModal} onClick={handleOpenContactModal}
> >
{i18n.t("contacts.buttons.add")} {i18n.t("contacts.buttons.add")}
</Button> </Button>
</MainHeaderButtonsWrapper> </MainHeaderButtonsWrapper>
</MainHeader> </MainHeader>
<Paper <Paper
className={classes.mainPaper} className={classes.mainPaper}
variant="outlined" variant="outlined"
onScroll={handleScroll} onScroll={handleScroll}
> >
<Table size="small"> <Table size="small">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell padding="checkbox" /> <TableCell padding="checkbox" />
<TableCell>{i18n.t("contacts.table.name")}</TableCell> <TableCell>{i18n.t("contacts.table.name")}</TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("contacts.table.whatsapp")} {i18n.t("contacts.table.whatsapp")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("contacts.table.email")} {i18n.t("contacts.table.email")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("contacts.table.actions")} {i18n.t("contacts.table.actions")}
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
<> <>
{contacts.map(contact => ( {contacts.map((contact) => (
<TableRow key={contact.id}> <TableRow key={contact.id}>
<TableCell style={{ paddingRight: 0 }}> <TableCell style={{ paddingRight: 0 }}>
{<Avatar src={contact.profilePicUrl} />} {<Avatar src={contact.profilePicUrl} />}
</TableCell> </TableCell>
<TableCell>{contact.name}</TableCell> <TableCell>{contact.name}</TableCell>
<TableCell align="center">{contact.number}</TableCell> <TableCell align="center">{contact.number}</TableCell>
<TableCell align="center">{contact.email}</TableCell> <TableCell align="center">{contact.email}</TableCell>
<TableCell align="center"> <TableCell align="center">
<IconButton <IconButton
size="small" size="small"
onClick={() => handleSaveTicket(contact.id)} onClick={() => handleSaveTicket(contact.id)}
> >
<WhatsAppIcon /> <WhatsAppIcon />
</IconButton> </IconButton>
<IconButton <IconButton
size="small" size="small"
onClick={() => hadleEditContact(contact.id)} onClick={() => hadleEditContact(contact.id)}
> >
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
<Can <Can
role={user.profile} role={user.profile}
perform="contacts-page:deleteContact" perform="contacts-page:deleteContact"
yes={() => ( yes={() => (
<IconButton <IconButton
size="small" size="small"
onClick={e => { onClick={(e) => {
setConfirmOpen(true); setConfirmOpen(true);
setDeletingContact(contact); setDeletingContact(contact);
}} }}
> >
<DeleteOutlineIcon /> <DeleteOutlineIcon />
</IconButton> </IconButton>
)} )}
/> />
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton avatar columns={3} />} {loading && <TableRowSkeleton avatar columns={3} />}
</> </>
</TableBody> </TableBody>
</Table> </Table>
</Paper> </Paper>
</MainContainer> </MainContainer>
); );
}; };
export default Contacts; export default Contacts;

182
frontend/src/pages/Login/index.js
View File

@@ -30,105 +30,105 @@ import { AuthContext } from "../../context/Auth/AuthContext";
// ); // );
// }; // };
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
paper: { paper: {
marginTop: theme.spacing(8), marginTop: theme.spacing(8),
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
}, },
avatar: { avatar: {
margin: theme.spacing(1), margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main, backgroundColor: theme.palette.secondary.main,
}, },
form: { form: {
width: "100%", // Fix IE 11 issue. width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1), marginTop: theme.spacing(1),
}, },
submit: { submit: {
margin: theme.spacing(3, 0, 2), margin: theme.spacing(3, 0, 2),
}, },
})); }));
const Login = () => { const Login = () => {
const classes = useStyles(); const classes = useStyles();
const [user, setUser] = useState({ email: "", password: "" }); const [user, setUser] = useState({ email: "", password: "" });
const { handleLogin } = useContext(AuthContext); const { handleLogin } = useContext(AuthContext);
const handleChangeInput = e => { const handleChangeInput = (e) => {
setUser({ ...user, [e.target.name]: e.target.value }); setUser({ ...user, [e.target.name]: e.target.value });
}; };
const handlSubmit = e => { const handlSubmit = (e) => {
e.preventDefault(); e.preventDefault();
handleLogin(user); handleLogin(user);
}; };
return ( return (
<Container component="main" maxWidth="xs"> <Container component="main" maxWidth="xs">
<CssBaseline /> <CssBaseline />
<div className={classes.paper}> <div className={classes.paper}>
<Avatar className={classes.avatar}> <Avatar className={classes.avatar}>
<LockOutlinedIcon /> <LockOutlinedIcon />
</Avatar> </Avatar>
<Typography component="h1" variant="h5"> <Typography component="h1" variant="h5">
{i18n.t("login.title")} {i18n.t("login.title")}
</Typography> </Typography>
<form className={classes.form} noValidate onSubmit={handlSubmit}> <form className={classes.form} noValidate onSubmit={handlSubmit}>
<TextField <TextField
variant="outlined" variant="outlined"
margin="normal" margin="normal"
required required
fullWidth fullWidth
id="email" id="email"
label={i18n.t("login.form.email")} label={i18n.t("login.form.email")}
name="email" name="email"
value={user.email} value={user.email}
onChange={handleChangeInput} onChange={handleChangeInput}
autoComplete="email" autoComplete="email"
autoFocus autoFocus
/> />
<TextField <TextField
variant="outlined" variant="outlined"
margin="normal" margin="normal"
required required
fullWidth fullWidth
name="password" name="password"
label={i18n.t("login.form.password")} label={i18n.t("login.form.password")}
type="password" type="password"
id="password" id="password"
value={user.password} value={user.password}
onChange={handleChangeInput} onChange={handleChangeInput}
autoComplete="current-password" autoComplete="current-password"
/> />
<Button <Button
type="submit" type="submit"
fullWidth fullWidth
variant="contained" variant="contained"
color="primary" color="primary"
className={classes.submit} className={classes.submit}
> >
{i18n.t("login.buttons.submit")} {i18n.t("login.buttons.submit")}
</Button> </Button>
<Grid container> <Grid container>
<Grid item> <Grid item>
<Link <Link
href="#" href="#"
variant="body2" variant="body2"
component={RouterLink} component={RouterLink}
to="/signup" to="/signup"
> >
{i18n.t("login.buttons.register")} {i18n.t("login.buttons.register")}
</Link> </Link>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>
</div> </div>
<Box mt={8}>{/* <Copyright /> */}</Box> <Box mt={8}>{/* <Copyright /> */}</Box>
</Container> </Container>
); );
}; };
export default Login; export default Login;

436
frontend/src/pages/Queues/index.js
View File

@@ -3,16 +3,16 @@ import React, { useEffect, useReducer, useState } from "react";
import openSocket from "socket.io-client"; import openSocket from "socket.io-client";
import { import {
Button, Button,
IconButton, IconButton,
makeStyles, makeStyles,
Paper, Paper,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow, TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import MainContainer from "../../components/MainContainer"; import MainContainer from "../../components/MainContainer";
@@ -28,241 +28,241 @@ import QueueModal from "../../components/QueueModal";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import ConfirmationModal from "../../components/ConfirmationModal"; import ConfirmationModal from "../../components/ConfirmationModal";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
mainPaper: { mainPaper: {
flex: 1, flex: 1,
padding: theme.spacing(1), padding: theme.spacing(1),
overflowY: "scroll", overflowY: "scroll",
...theme.scrollbarStyles, ...theme.scrollbarStyles,
}, },
customTableCell: { customTableCell: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
})); }));
const reducer = (state, action) => { const reducer = (state, action) => {
if (action.type === "LOAD_QUEUES") { if (action.type === "LOAD_QUEUES") {
const queues = action.payload; const queues = action.payload;
const newQueues = []; const newQueues = [];
queues.forEach(queue => { queues.forEach((queue) => {
const queueIndex = state.findIndex(q => q.id === queue.id); const queueIndex = state.findIndex((q) => q.id === queue.id);
if (queueIndex !== -1) { if (queueIndex !== -1) {
state[queueIndex] = queue; state[queueIndex] = queue;
} else { } else {
newQueues.push(queue); newQueues.push(queue);
} }
}); });
return [...state, ...newQueues]; return [...state, ...newQueues];
} }
if (action.type === "UPDATE_QUEUES") { if (action.type === "UPDATE_QUEUES") {
const queue = action.payload; const queue = action.payload;
const queueIndex = state.findIndex(u => u.id === queue.id); const queueIndex = state.findIndex((u) => u.id === queue.id);
if (queueIndex !== -1) { if (queueIndex !== -1) {
state[queueIndex] = queue; state[queueIndex] = queue;
return [...state]; return [...state];
} else { } else {
return [queue, ...state]; return [queue, ...state];
} }
} }
if (action.type === "DELETE_QUEUE") { if (action.type === "DELETE_QUEUE") {
const queueId = action.payload; const queueId = action.payload;
const queueIndex = state.findIndex(q => q.id === queueId); const queueIndex = state.findIndex((q) => q.id === queueId);
if (queueIndex !== -1) { if (queueIndex !== -1) {
state.splice(queueIndex, 1); state.splice(queueIndex, 1);
} }
return [...state]; return [...state];
} }
if (action.type === "RESET") { if (action.type === "RESET") {
return []; return [];
} }
}; };
const Queues = () => { const Queues = () => {
const classes = useStyles(); const classes = useStyles();
const [queues, dispatch] = useReducer(reducer, []); const [queues, dispatch] = useReducer(reducer, []);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [queueModalOpen, setQueueModalOpen] = useState(false); const [queueModalOpen, setQueueModalOpen] = useState(false);
const [selectedQueue, setSelectedQueue] = useState(null); const [selectedQueue, setSelectedQueue] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false); const [confirmModalOpen, setConfirmModalOpen] = useState(false);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
setLoading(true); setLoading(true);
try { try {
const { data } = await api.get("/queue"); const { data } = await api.get("/queue");
dispatch({ type: "LOAD_QUEUES", payload: data }); dispatch({ type: "LOAD_QUEUES", payload: data });
setLoading(false); setLoading(false);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
setLoading(false); setLoading(false);
} }
})(); })();
}, []); }, []);
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("queue", data => { socket.on("queue", (data) => {
if (data.action === "update" || data.action === "create") { if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_QUEUES", payload: data.queue }); dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
} }
if (data.action === "delete") { if (data.action === "delete") {
dispatch({ type: "DELETE_QUEUE", payload: data.queueId }); dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
} }
}); });
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, []); }, []);
const handleOpenQueueModal = () => { const handleOpenQueueModal = () => {
setQueueModalOpen(true); setQueueModalOpen(true);
setSelectedQueue(null); setSelectedQueue(null);
}; };
const handleCloseQueueModal = () => { const handleCloseQueueModal = () => {
setQueueModalOpen(false); setQueueModalOpen(false);
setSelectedQueue(null); setSelectedQueue(null);
}; };
const handleEditQueue = queue => { const handleEditQueue = (queue) => {
setSelectedQueue(queue); setSelectedQueue(queue);
setQueueModalOpen(true); setQueueModalOpen(true);
}; };
const handleCloseConfirmationModal = () => { const handleCloseConfirmationModal = () => {
setConfirmModalOpen(false); setConfirmModalOpen(false);
setSelectedQueue(null); setSelectedQueue(null);
}; };
const handleDeleteQueue = async queueId => { const handleDeleteQueue = async (queueId) => {
try { try {
await api.delete(`/queue/${queueId}`); await api.delete(`/queue/${queueId}`);
toast.success(i18n.t("Queue deleted successfully!")); toast.success(i18n.t("Queue deleted successfully!"));
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
setSelectedQueue(null); setSelectedQueue(null);
}; };
return ( return (
<MainContainer> <MainContainer>
<ConfirmationModal <ConfirmationModal
title={ title={
selectedQueue && selectedQueue &&
`${i18n.t("queues.confirmationModal.deleteTitle")} ${ `${i18n.t("queues.confirmationModal.deleteTitle")} ${
selectedQueue.name selectedQueue.name
}?` }?`
} }
open={confirmModalOpen} open={confirmModalOpen}
onClose={handleCloseConfirmationModal} onClose={handleCloseConfirmationModal}
onConfirm={() => handleDeleteQueue(selectedQueue.id)} onConfirm={() => handleDeleteQueue(selectedQueue.id)}
> >
{i18n.t("queues.confirmationModal.deleteMessage")} {i18n.t("queues.confirmationModal.deleteMessage")}
</ConfirmationModal> </ConfirmationModal>
<QueueModal <QueueModal
open={queueModalOpen} open={queueModalOpen}
onClose={handleCloseQueueModal} onClose={handleCloseQueueModal}
queueId={selectedQueue?.id} queueId={selectedQueue?.id}
/> />
<MainHeader> <MainHeader>
<Title>{i18n.t("queues.title")}</Title> <Title>{i18n.t("queues.title")}</Title>
<MainHeaderButtonsWrapper> <MainHeaderButtonsWrapper>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={handleOpenQueueModal} onClick={handleOpenQueueModal}
> >
{i18n.t("queues.buttons.add")} {i18n.t("queues.buttons.add")}
</Button> </Button>
</MainHeaderButtonsWrapper> </MainHeaderButtonsWrapper>
</MainHeader> </MainHeader>
<Paper className={classes.mainPaper} variant="outlined"> <Paper className={classes.mainPaper} variant="outlined">
<Table size="small"> <Table size="small">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="center"> <TableCell align="center">
{i18n.t("queues.table.name")} {i18n.t("queues.table.name")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("queues.table.color")} {i18n.t("queues.table.color")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("queues.table.greeting")} {i18n.t("queues.table.greeting")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("queues.table.actions")} {i18n.t("queues.table.actions")}
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
<> <>
{queues.map(queue => ( {queues.map((queue) => (
<TableRow key={queue.id}> <TableRow key={queue.id}>
<TableCell align="center">{queue.name}</TableCell> <TableCell align="center">{queue.name}</TableCell>
<TableCell align="center"> <TableCell align="center">
<div className={classes.customTableCell}> <div className={classes.customTableCell}>
<span <span
style={{ style={{
backgroundColor: queue.color, backgroundColor: queue.color,
width: 60, width: 60,
height: 20, height: 20,
alignSelf: "center", alignSelf: "center",
}} }}
/> />
</div> </div>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<div className={classes.customTableCell}> <div className={classes.customTableCell}>
<Typography <Typography
style={{ width: 300, align: "center" }} style={{ width: 300, align: "center" }}
noWrap noWrap
variant="body2" variant="body2"
> >
{queue.greetingMessage} {queue.greetingMessage}
</Typography> </Typography>
</div> </div>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<IconButton <IconButton
size="small" size="small"
onClick={() => handleEditQueue(queue)} onClick={() => handleEditQueue(queue)}
> >
<Edit /> <Edit />
</IconButton> </IconButton>
<IconButton <IconButton
size="small" size="small"
onClick={() => { onClick={() => {
setSelectedQueue(queue); setSelectedQueue(queue);
setConfirmModalOpen(true); setConfirmModalOpen(true);
}} }}
> >
<DeleteOutline /> <DeleteOutline />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton columns={4} />} {loading && <TableRowSkeleton columns={4} />}
</> </>
</TableBody> </TableBody>
</Table> </Table>
</Paper> </Paper>
</MainContainer> </MainContainer>
); );
}; };
export default Queues; export default Queues;

141
frontend/src/pages/Tickets/index.js
View File

@@ -8,69 +8,98 @@ import TicketsManager from "../../components/TicketsManager/";
import Ticket from "../../components/Ticket/"; import Ticket from "../../components/Ticket/";
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n";
import Hidden from "@material-ui/core/Hidden";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
chatContainer: { chatContainer: {
flex: 1, flex: 1,
// backgroundColor: "#eee", // // backgroundColor: "#eee",
padding: theme.spacing(4), // padding: theme.spacing(4),
height: `calc(100% - 48px)`, height: `calc(100% - 48px)`,
overflowY: "hidden", overflowY: "hidden",
}, },
chatPapper: { chatPapper: {
// backgroundColor: "red", // backgroundColor: "red",
display: "flex", display: "flex",
height: "100%", height: "100%",
}, },
contactsWrapper: { contactsWrapper: {
display: "flex", display: "flex",
height: "100%", height: "100%",
flexDirection: "column", flexDirection: "column",
overflowY: "hidden", overflowY: "hidden",
}, },
messagessWrapper: { contactsWrapperSmall: {
display: "flex", display: "flex",
height: "100%", height: "100%",
flexDirection: "column", flexDirection: "column",
}, overflowY: "hidden",
welcomeMsg: { [theme.breakpoints.down("sm")]: {
backgroundColor: "#eee", display: "none",
display: "flex", },
justifyContent: "space-evenly", },
alignItems: "center", messagessWrapper: {
height: "100%", display: "flex",
textAlign: "center", height: "100%",
}, flexDirection: "column",
},
welcomeMsg: {
backgroundColor: "#eee",
display: "flex",
justifyContent: "space-evenly",
alignItems: "center",
height: "100%",
textAlign: "center",
borderRadius: 0,
},
ticketsManager: {},
ticketsManagerClosed: {
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
})); }));
const Chat = () => { const Chat = () => {
const classes = useStyles(); const classes = useStyles();
const { ticketId } = useParams(); const { ticketId } = useParams();
return ( return (
<div className={classes.chatContainer}> <div className={classes.chatContainer}>
<div className={classes.chatPapper}> <div 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}> */}
<TicketsManager /> <Grid
</Grid> item
<Grid item xs={8} className={classes.messagessWrapper}> xs={12}
{ticketId ? ( md={4}
<> className={
<Ticket /> ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
</> }
) : ( >
<Paper square variant="outlined" className={classes.welcomeMsg}> <TicketsManager />
<span>{i18n.t("chat.noTicketMessage")}</span> </Grid>
</Paper> <Grid item xs={12} md={8} className={classes.messagessWrapper}>
)} {/* <Grid item xs={8} className={classes.messagessWrapper}> */}
</Grid> {ticketId ? (
</Grid> <>
</div> <Ticket />
</div> </>
); ) : (
<Hidden only={["sm", "xs"]}>
<Paper className={classes.welcomeMsg}>
{/* <Paper square variant="outlined" className={classes.welcomeMsg}> */}
<span>{i18n.t("chat.noTicketMessage")}</span>
</Paper>
</Hidden>
)}
</Grid>
</Grid>
</div>
</div>
);
}; };
export default Chat; export default Chat;

446
frontend/src/pages/Users/index.js
View File

@@ -31,257 +31,257 @@ import ConfirmationModal from "../../components/ConfirmationModal";
import toastError from "../../errors/toastError"; import toastError from "../../errors/toastError";
const reducer = (state, action) => { const reducer = (state, action) => {
if (action.type === "LOAD_USERS") { if (action.type === "LOAD_USERS") {
const users = action.payload; const users = action.payload;
const newUsers = []; const newUsers = [];
users.forEach(user => { users.forEach((user) => {
const userIndex = state.findIndex(u => u.id === user.id); const userIndex = state.findIndex((u) => u.id === user.id);
if (userIndex !== -1) { if (userIndex !== -1) {
state[userIndex] = user; state[userIndex] = user;
} else { } else {
newUsers.push(user); newUsers.push(user);
} }
}); });
return [...state, ...newUsers]; return [...state, ...newUsers];
} }
if (action.type === "UPDATE_USERS") { if (action.type === "UPDATE_USERS") {
const user = action.payload; const user = action.payload;
const userIndex = state.findIndex(u => u.id === user.id); const userIndex = state.findIndex((u) => u.id === user.id);
if (userIndex !== -1) { if (userIndex !== -1) {
state[userIndex] = user; state[userIndex] = user;
return [...state]; return [...state];
} else { } else {
return [user, ...state]; return [user, ...state];
} }
} }
if (action.type === "DELETE_USER") { if (action.type === "DELETE_USER") {
const userId = action.payload; const userId = action.payload;
const userIndex = state.findIndex(u => u.id === userId); const userIndex = state.findIndex((u) => u.id === userId);
if (userIndex !== -1) { if (userIndex !== -1) {
state.splice(userIndex, 1); state.splice(userIndex, 1);
} }
return [...state]; return [...state];
} }
if (action.type === "RESET") { if (action.type === "RESET") {
return []; return [];
} }
}; };
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
mainPaper: { mainPaper: {
flex: 1, flex: 1,
padding: theme.spacing(1), padding: theme.spacing(1),
overflowY: "scroll", overflowY: "scroll",
...theme.scrollbarStyles, ...theme.scrollbarStyles,
}, },
})); }));
const Users = () => { const Users = () => {
const classes = useStyles(); const classes = useStyles();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [pageNumber, setPageNumber] = useState(1); const [pageNumber, setPageNumber] = useState(1);
const [hasMore, setHasMore] = useState(false); const [hasMore, setHasMore] = useState(false);
const [selectedUser, setSelectedUser] = useState(null); const [selectedUser, setSelectedUser] = useState(null);
const [deletingUser, setDeletingUser] = useState(null); const [deletingUser, setDeletingUser] = useState(null);
const [userModalOpen, setUserModalOpen] = useState(false); const [userModalOpen, setUserModalOpen] = useState(false);
const [confirmModalOpen, setConfirmModalOpen] = useState(false); const [confirmModalOpen, setConfirmModalOpen] = useState(false);
const [searchParam, setSearchParam] = useState(""); const [searchParam, setSearchParam] = useState("");
const [users, dispatch] = useReducer(reducer, []); const [users, dispatch] = useReducer(reducer, []);
useEffect(() => { useEffect(() => {
dispatch({ type: "RESET" }); dispatch({ type: "RESET" });
setPageNumber(1); setPageNumber(1);
}, [searchParam]); }, [searchParam]);
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
const fetchUsers = async () => { const fetchUsers = async () => {
try { try {
const { data } = await api.get("/users/", { const { data } = await api.get("/users/", {
params: { searchParam, pageNumber }, params: { searchParam, pageNumber },
}); });
dispatch({ type: "LOAD_USERS", payload: data.users }); dispatch({ type: "LOAD_USERS", payload: data.users });
setHasMore(data.hasMore); setHasMore(data.hasMore);
setLoading(false); setLoading(false);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
}; };
fetchUsers(); fetchUsers();
}, 500); }, 500);
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn);
}, [searchParam, pageNumber]); }, [searchParam, pageNumber]);
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("user", data => { socket.on("user", (data) => {
if (data.action === "update" || data.action === "create") { if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_USERS", payload: data.user }); dispatch({ type: "UPDATE_USERS", payload: data.user });
} }
if (data.action === "delete") { if (data.action === "delete") {
dispatch({ type: "DELETE_USER", payload: +data.userId }); dispatch({ type: "DELETE_USER", payload: +data.userId });
} }
}); });
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, []); }, []);
const handleOpenUserModal = () => { const handleOpenUserModal = () => {
setSelectedUser(null); setSelectedUser(null);
setUserModalOpen(true); setUserModalOpen(true);
}; };
const handleCloseUserModal = () => { const handleCloseUserModal = () => {
setSelectedUser(null); setSelectedUser(null);
setUserModalOpen(false); setUserModalOpen(false);
}; };
const handleSearch = event => { const handleSearch = (event) => {
setSearchParam(event.target.value.toLowerCase()); setSearchParam(event.target.value.toLowerCase());
}; };
const handleEditUser = user => { const handleEditUser = (user) => {
setSelectedUser(user); setSelectedUser(user);
setUserModalOpen(true); setUserModalOpen(true);
}; };
const handleDeleteUser = async userId => { const handleDeleteUser = async (userId) => {
try { try {
await api.delete(`/users/${userId}`); await api.delete(`/users/${userId}`);
toast.success(i18n.t("users.toasts.deleted")); toast.success(i18n.t("users.toasts.deleted"));
} catch (err) { } catch (err) {
toastError(err); toastError(err);
} }
setDeletingUser(null); setDeletingUser(null);
setSearchParam(""); setSearchParam("");
setPageNumber(1); setPageNumber(1);
}; };
const loadMore = () => { const loadMore = () => {
setPageNumber(prevState => prevState + 1); setPageNumber((prevState) => prevState + 1);
}; };
const handleScroll = e => { const handleScroll = (e) => {
if (!hasMore || loading) return; if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
if (scrollHeight - (scrollTop + 100) < clientHeight) { if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore(); loadMore();
} }
}; };
return ( return (
<MainContainer> <MainContainer>
<ConfirmationModal <ConfirmationModal
title={ title={
deletingUser && deletingUser &&
`${i18n.t("users.confirmationModal.deleteTitle")} ${ `${i18n.t("users.confirmationModal.deleteTitle")} ${
deletingUser.name deletingUser.name
}?` }?`
} }
open={confirmModalOpen} open={confirmModalOpen}
onClose={setConfirmModalOpen} onClose={setConfirmModalOpen}
onConfirm={() => handleDeleteUser(deletingUser.id)} onConfirm={() => handleDeleteUser(deletingUser.id)}
> >
{i18n.t("users.confirmationModal.deleteMessage")} {i18n.t("users.confirmationModal.deleteMessage")}
</ConfirmationModal> </ConfirmationModal>
<UserModal <UserModal
open={userModalOpen} open={userModalOpen}
onClose={handleCloseUserModal} onClose={handleCloseUserModal}
aria-labelledby="form-dialog-title" aria-labelledby="form-dialog-title"
userId={selectedUser && selectedUser.id} userId={selectedUser && selectedUser.id}
/> />
<MainHeader> <MainHeader>
<Title>{i18n.t("users.title")}</Title> <Title>{i18n.t("users.title")}</Title>
<MainHeaderButtonsWrapper> <MainHeaderButtonsWrapper>
<TextField <TextField
placeholder={i18n.t("contacts.searchPlaceholder")} placeholder={i18n.t("contacts.searchPlaceholder")}
type="search" type="search"
value={searchParam} value={searchParam}
onChange={handleSearch} onChange={handleSearch}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<SearchIcon style={{ color: "gray" }} /> <SearchIcon style={{ color: "gray" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={handleOpenUserModal} onClick={handleOpenUserModal}
> >
{i18n.t("users.buttons.add")} {i18n.t("users.buttons.add")}
</Button> </Button>
</MainHeaderButtonsWrapper> </MainHeaderButtonsWrapper>
</MainHeader> </MainHeader>
<Paper <Paper
className={classes.mainPaper} className={classes.mainPaper}
variant="outlined" variant="outlined"
onScroll={handleScroll} onScroll={handleScroll}
> >
<Table size="small"> <Table size="small">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="center">{i18n.t("users.table.name")}</TableCell> <TableCell align="center">{i18n.t("users.table.name")}</TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("users.table.email")} {i18n.t("users.table.email")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("users.table.profile")} {i18n.t("users.table.profile")}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("users.table.actions")} {i18n.t("users.table.actions")}
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
<> <>
{users.map(user => ( {users.map((user) => (
<TableRow key={user.id}> <TableRow key={user.id}>
<TableCell align="center">{user.name}</TableCell> <TableCell align="center">{user.name}</TableCell>
<TableCell align="center">{user.email}</TableCell> <TableCell align="center">{user.email}</TableCell>
<TableCell align="center">{user.profile}</TableCell> <TableCell align="center">{user.profile}</TableCell>
<TableCell align="center"> <TableCell align="center">
<IconButton <IconButton
size="small" size="small"
onClick={() => handleEditUser(user)} onClick={() => handleEditUser(user)}
> >
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
<IconButton <IconButton
size="small" size="small"
onClick={e => { onClick={(e) => {
setConfirmModalOpen(true); setConfirmModalOpen(true);
setDeletingUser(user); setDeletingUser(user);
}} }}
> >
<DeleteOutlineIcon /> <DeleteOutlineIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton columns={4} />} {loading && <TableRowSkeleton columns={4} />}
</> </>
</TableBody> </TableBody>
</Table> </Table>
</Paper> </Paper>
</MainContainer> </MainContainer>
); );
}; };
export default Users; export default Users;

46
frontend/src/routes/Route.js
View File

@@ -5,32 +5,32 @@ import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading"; import BackdropLoading from "../components/BackdropLoading";
const Route = ({ component: Component, isPrivate = false, ...rest }) => { const Route = ({ component: Component, isPrivate = false, ...rest }) => {
const { isAuth, loading } = useContext(AuthContext); const { isAuth, loading } = useContext(AuthContext);
if (!isAuth && isPrivate) { if (!isAuth && isPrivate) {
return ( return (
<> <>
{loading && <BackdropLoading />} {loading && <BackdropLoading />}
<Redirect to={{ pathname: "/login", state: { from: rest.location } }} /> <Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
</> </>
); );
} }
if (isAuth && !isPrivate) { if (isAuth && !isPrivate) {
return ( return (
<> <>
{loading && <BackdropLoading />} {loading && <BackdropLoading />}
<Redirect to={{ pathname: "/", state: { from: rest.location } }} />; <Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
</> </>
); );
} }
return ( return (
<> <>
{loading && <BackdropLoading />} {loading && <BackdropLoading />}
<RouterRoute {...rest} component={Component} /> <RouterRoute {...rest} component={Component} />
</> </>
); );
}; };
export default Route; export default Route;