adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tickets in progress 

I needed understand more about Socket.IO and how this aplication work to
update de visual
pull/14/head^2
RenatoDiGiacomo 2022-07-21 14:00:06 -03:00
parent 87e0d61281
commit a66355f43b
9 changed files with 683 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,8 +91,6 @@ const Ticket = () => {
const fetchTicket = async () => { const fetchTicket = async () => {
try { try {
// maria julia
const { data } = await api.get("/tickets/" + ticketId); const { data } = await api.get("/tickets/" + ticketId);
// setContact(data.contact); // setContact(data.contact);

504
frontend/src/components/TicketsList/index.js
View File

@ -12,320 +12,294 @@ import useTickets from "../../hooks/useTickets";
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext"; import { AuthContext } from "../../context/Auth/AuthContext";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
ticketsListWrapper: { ticketsListWrapper: {
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,
}, },
ticketsList: { ticketsList: {
flex: 1, flex: 1,
overflowY: "scroll", overflowY: "scroll",
...theme.scrollbarStyles, ...theme.scrollbarStyles,
borderTop: "2px solid rgba(0, 0, 0, 0.12)", borderTop: "2px solid rgba(0, 0, 0, 0.12)",
}, },
ticketsListHeader: { ticketsListHeader: {
color: "rgb(67, 83, 105)", color: "rgb(67, 83, 105)",
zIndex: 2, zIndex: 2,
backgroundColor: "white", backgroundColor: "white",
borderBottom: "1px solid rgba(0, 0, 0, 0.12)", borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
}, },
ticketsCount: { ticketsCount: {
fontWeight: "normal", fontWeight: "normal",
color: "rgb(104, 121, 146)", color: "rgb(104, 121, 146)",
marginLeft: "8px", marginLeft: "8px",
fontSize: "14px", fontSize: "14px",
}, },
noTicketsText: { noTicketsText: {
textAlign: "center", textAlign: "center",
color: "rgb(104, 121, 146)", color: "rgb(104, 121, 146)",
fontSize: "14px", fontSize: "14px",
lineHeight: "1.4", lineHeight: "1.4",
}, },
noTicketsTitle: { noTicketsTitle: {
textAlign: "center", textAlign: "center",
fontSize: "16px", fontSize: "16px",
fontWeight: "600", fontWeight: "600",
margin: "0px", margin: "0px",
}, },
noTicketsDiv: { noTicketsDiv: {
display: "flex", display: "flex",
height: "100px", height: "100px",
margin: 40, margin: 40,
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
})); }));
const reducer = (state, action) => { const reducer = (state, action) => {
if (action.type === "LOAD_TICKETS") { if (action.type === "LOAD_TICKETS") {
const newTickets = action.payload; const newTickets = action.payload;
newTickets.forEach((ticket) => {
const ticketIndex = state.findIndex((t) => t.id === ticket.id);
if (ticketIndex !== -1) {
state[ticketIndex] = ticket;
if (ticket.unreadMessages > 0) {
state.unshift(state.splice(ticketIndex, 1)[0]);
}
} else {
state.push(ticket);
}
});
newTickets.forEach(ticket => { return [...state];
}
// console.log('* ticket.unreadMessages: ',ticket.unreadMessages) if (action.type === "RESET_UNREAD") {
const ticketId = action.payload;
const ticketIndex = state.findIndex(t => t.id === ticket.id); const ticketIndex = state.findIndex((t) => t.id === ticketId);
if (ticketIndex !== -1) { if (ticketIndex !== -1) {
state[ticketIndex] = ticket; state[ticketIndex].unreadMessages = 0;
if (ticket.unreadMessages > 0) { }
state.unshift(state.splice(ticketIndex, 1)[0]);
}
} else {
state.push(ticket);
}
});
return [...state]; return [...state];
} }
if (action.type === "RESET_UNREAD") { if (action.type === "UPDATE_TICKET") {
const ticketId = action.payload; const ticket = action.payload;
const ticketIndex = state.findIndex(t => t.id === ticketId); const ticketIndex = state.findIndex((t) => t.id === ticket.id);
if (ticketIndex !== -1) { if (ticketIndex !== -1) {
state[ticketIndex].unreadMessages = 0; state[ticketIndex] = ticket;
} } else {
state.unshift(ticket);
}
return [...state]; return [...state];
} }
if (action.type === "UPDATE_TICKET") { if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") {
const ticket = action.payload; const message = action.payload.message;
// console.log('++++++++++++ UPDATE_TICKET: ',ticket) const ticket = action.payload.ticket;
const ticketIndex = state.findIndex(t => t.id === ticket.id); const ticketIndex = state.findIndex((t) => t.id === ticket.id);
if (ticketIndex !== -1) {
state[ticketIndex] = ticket;
} else {
state.unshift(ticket);
}
return [...state]; if (ticketIndex !== -1) {
} if (!message.fromMe) {
ticket.unreadMessages += 1;
}
if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") { state[ticketIndex] = ticket;
state.unshift(state.splice(ticketIndex, 1)[0]);
} else {
state.unshift(ticket);
}
const message = action.payload.message return [...state];
}
const ticket = action.payload.ticket; if (action.type === "UPDATE_TICKET_CONTACT") {
const contact = action.payload;
const ticketIndex = state.findIndex((t) => t.contactId === contact.id);
if (ticketIndex !== -1) {
state[ticketIndex].contact = contact;
}
return [...state];
}
const ticketIndex = state.findIndex(t => t.id === ticket.id); if (action.type === "DELETE_TICKET") {
const ticketId = action.payload;
const ticketIndex = state.findIndex((t) => t.id === ticketId);
if (ticketIndex !== -1) {
state.splice(ticketIndex, 1);
}
if (ticketIndex !== -1) { return [...state];
}
// console.log('>>>>>> ticketIndex: ', ticketIndex) if (action.type === "RESET") {
return [];
// console.log('&&&&&&& UPDATE_TICKET_UNREAD_MESSAGES ticket: ',ticket, ' |\n MESSAGE: ', message) }
if(!message.fromMe){
ticket.unreadMessages +=1
}
state[ticketIndex] = ticket;
state.unshift(state.splice(ticketIndex, 1)[0]);
} else {
state.unshift(ticket);
}
return [...state];
}
if (action.type === "UPDATE_TICKET_CONTACT") {
const contact = action.payload;
const ticketIndex = state.findIndex(t => t.contactId === contact.id);
if (ticketIndex !== -1) {
state[ticketIndex].contact = contact;
}
return [...state];
}
if (action.type === "DELETE_TICKET") {
const ticketId = action.payload;
const ticketIndex = state.findIndex(t => t.id === ticketId);
if (ticketIndex !== -1) {
state.splice(ticketIndex, 1);
}
return [...state];
}
if (action.type === "RESET") {
return [];
}
}; };
const TicketsList = (props) => { const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount, style }) => {
const { status, searchParam, showAll, selectedQueueIds, updateCount, style } = const classes = useStyles();
props; const [pageNumber, setPageNumber] = useState(1);
const classes = useStyles(); const [ticketsList, dispatch] = useReducer(reducer, []);
const [pageNumber, setPageNumber] = useState(1); const { user } = useContext(AuthContext);
const [ticketsList, dispatch] = useReducer(reducer, []);
const { user } = useContext(AuthContext);
useEffect(() => { useEffect(() => {
dispatch({ type: "RESET" }); dispatch({ type: "RESET" });
setPageNumber(1); setPageNumber(1);
}, [status, searchParam, dispatch, showAll, selectedQueueIds]); }, [status, searchParam, dispatch, showAll, selectedQueueIds]);
const { tickets, hasMore, loading } = useTickets({ const { tickets, hasMore, loading } = useTickets({
pageNumber, pageNumber,
searchParam, searchParam,
status, status,
showAll, showAll,
queueIds: JSON.stringify(selectedQueueIds), queueIds: JSON.stringify(selectedQueueIds),
}); });
useEffect(() => { useEffect(() => {
if (!status && !searchParam) return; if (!status && !searchParam) return;
dispatch({ dispatch({
type: "LOAD_TICKETS", type: "LOAD_TICKETS",
payload: tickets, payload: tickets,
}); });
}, [tickets, status, searchParam]); }, [tickets, status, searchParam]);
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
const shouldUpdateTicket = ticket => const shouldUpdateTicket = (ticket) =>
(!ticket.userId || ticket.userId === user?.id || showAll) && (!ticket.userId || ticket.userId === user?.id || showAll) &&
(!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1); (!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1);
const notBelongsToUserQueues = ticket => const notBelongsToUserQueues = (ticket) =>
ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1; ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1;
socket.on("connect", () => { socket.on("connect", () => {
if (status) { if (status) {
socket.emit("joinTickets", status); socket.emit("joinTickets", status);
} else { } else {
socket.emit("joinNotification"); socket.emit("joinNotification");
} }
});
}); socket.on("ticket", (data) => {
if (data.action === "updateUnread") {
dispatch({
type: "RESET_UNREAD",
payload: data.ticketId,
});
}
socket.on("ticket", data => { if (data.action === "update" && shouldUpdateTicket(data.ticket)) {
if (data.action === "updateUnread") { dispatch({
dispatch({ type: "UPDATE_TICKET",
type: "RESET_UNREAD", payload: data.ticket,
payload: data.ticketId, });
}); }
}
if (data.action === "update" && shouldUpdateTicket(data.ticket)) { if (data.action === "update" && notBelongsToUserQueues(data.ticket)) {
dispatch({ dispatch({ type: "DELETE_TICKET", payload: data.ticket.id });
type: "UPDATE_TICKET", }
payload: data.ticket,
});
}
if (data.action === "update" && notBelongsToUserQueues(data.ticket)) { if (data.action === "delete") {
dispatch({ type: "DELETE_TICKET", payload: data.ticket.id }); dispatch({ type: "DELETE_TICKET", payload: data.ticketId });
} }
});
if (data.action === "delete") { socket.on("appMessage", (data) => {
dispatch({ type: "DELETE_TICKET", payload: data.ticketId }); if (data.action === "create" && shouldUpdateTicket(data.ticket)) {
} dispatch({
}); type: "UPDATE_TICKET_UNREAD_MESSAGES",
// payload: data.ticket,
payload: data,
});
}
});
socket.on("appMessage", data => { socket.on("contact", (data) => {
if (data.action === "create" && shouldUpdateTicket(data.ticket)) { if (data.action === "update") {
dispatch({
type: "UPDATE_TICKET_CONTACT",
payload: data.contact,
});
}
});
// console.log('((((((((((((((((((( DATA.MESSAGE: ', data.message) return () => {
socket.disconnect();
};
}, [status, showAll, user, selectedQueueIds]);
dispatch({ useEffect(() => {
type: "UPDATE_TICKET_UNREAD_MESSAGES", if (typeof updateCount === "function") {
// payload: data.ticket, updateCount(ticketsList.length);
payload: data, }
}); }, [ticketsList]);
}
});
socket.on("contact", data => { const loadMore = () => {
if (data.action === "update") { setPageNumber((prevState) => prevState + 1);
dispatch({ };
type: "UPDATE_TICKET_CONTACT",
payload: data.contact,
});
}
});
return () => { const handleScroll = (e) => {
socket.disconnect(); if (!hasMore || loading) return;
};
}, [status, showAll, user, selectedQueueIds]);
useEffect(() => { const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore();
}
};
return (
if (typeof updateCount === "function") { <Paper className={classes.ticketsListWrapper} style={style}>
updateCount(ticketsList.length); <Paper
} square
// eslint-disable-next-line react-hooks/exhaustive-deps name="closed"
}, [ticketsList]); elevation={0}
className={classes.ticketsList}
const loadMore = () => { onScroll={handleScroll}
setPageNumber(prevState => prevState + 1); >
}; <List style={{ paddingTop: 0 }}>
{ticketsList.length === 0 && !loading ? (
const handleScroll = e => { <div className={classes.noTicketsDiv}>
if (!hasMore || loading) return; <span className={classes.noTicketsTitle}>{i18n.t("ticketsList.noTicketsTitle")}</span>
<p className={classes.noTicketsText}>{i18n.t("ticketsList.noTicketsMessage")}</p>
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; </div>
) : (
if (scrollHeight - (scrollTop + 100) < clientHeight) { <>
loadMore(); {ticketsList.map((ticket) => (
} <TicketListItem ticket={ticket} key={ticket.id} />
}; ))}
</>
return ( )}
<Paper className={classes.ticketsListWrapper} style={style}> {loading && <TicketsListSkeleton />}
<Paper </List>
square </Paper>
name="closed" </Paper>
elevation={0} );
className={classes.ticketsList}
onScroll={handleScroll}
>
<List style={{ paddingTop: 0 }}>
{ticketsList.length === 0 && !loading ? (
<div className={classes.noTicketsDiv}>
<span className={classes.noTicketsTitle}>
{i18n.t("ticketsList.noTicketsTitle")}
</span>
<p className={classes.noTicketsText}>
{i18n.t("ticketsList.noTicketsMessage")}
</p>
</div>
) : (
<>
{ticketsList.map(ticket => (
<TicketListItem ticket={ticket} key={ticket.id} />
))}
</>
)}
{loading && <TicketsListSkeleton />}
</List>
</Paper>
</Paper>
);
}; };
export default TicketsList; export default TicketsList;

338
frontend/src/components/TicketsManager/TicketsManager.jsx 100644
View File

@ -0,0 +1,338 @@
import React, { useContext, useEffect, useRef, useState } from "react";
import openSocket from "socket.io-client"
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import SearchIcon from "@material-ui/icons/Search";
import InputBase from "@material-ui/core/InputBase";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Badge from "@material-ui/core/Badge";
import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
import CheckBoxIcon from "@material-ui/icons/CheckBox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import { Button } from "@material-ui/core";
import NewTicketModal from "../NewTicketModal";
import TicketsList from "../TicketsList";
import TabPanel from "../TabPanel";
import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can";
import TicketsQueueSelect from "../TicketsQueueSelect";
const useStyles = makeStyles((theme) => ({
ticketsWrapper: {
position: "relative",
display: "flex",
height: "100%",
flexDirection: "column",
overflow: "hidden",
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
tabsHeader: {
flex: "none",
backgroundColor: "#eee",
},
settingsIcon: {
alignSelf: "center",
marginLeft: "auto",
padding: 8,
},
tab: {
minWidth: 120,
width: 120,
},
ticketOptionsBox: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
background: "#fafafa",
padding: theme.spacing(1),
},
serachInputWrapper: {
flex: 1,
background: "#fff",
display: "flex",
borderRadius: 40,
padding: 4,
marginRight: theme.spacing(1),
},
searchIcon: {
color: "grey",
marginLeft: 6,
marginRight: 6,
alignSelf: "center",
},
searchInput: {
flex: 1,
border: "none",
borderRadius: 30,
},
badge: {
right: "-10px",
},
show: {
display: "block",
},
hide: {
display: "none !important",
},
}));
const TicketsManager = () => {
const classes = useStyles();
// Old New State
const [newPage, setNewPage] = React.useState(true);
// Old New State
const [searchParam, setSearchParam] = useState("");
const [tab, setTab] = useState("open");
const [tabOpen, setTabOpen] = useState("open");
const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
const [showAllTickets, setShowAllTickets] = useState(false);
const searchInputRef = useRef();
const { user } = useContext(AuthContext);
const [openCount, setOpenCount] = useState(0);
const [pendingCount, setPendingCount] = useState(0);
const userQueueIds = user.queues.map((q) => q.id);
const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
const socket = openSocket.open(process.env.REACT_APP_BACKEND_URL)
console.log(user.queues)
console.log(selectedQueueIds)
socket.on("connect", () => {
if ("open") {
socket.emit("joinTickets", "open");
} else {
socket.emit("joinNotification");
}
});
socket.on("connect", ()=>{
})
useEffect(() => {
if (user.profile.toUpperCase() === "ADMIN") {
setShowAllTickets(true);
}
}, [user.profile]);
useEffect(() => {
if (tab === "search") {
searchInputRef.current.focus();
}
}, [tab]);
let searchTimeout;
const handleSearch = (e) => {
const searchedTerm = e.target.value.toLowerCase();
clearTimeout(searchTimeout);
if (searchedTerm === "") {
setSearchParam(searchedTerm);
setTab("open");
return;
}
searchTimeout = setTimeout(() => {
setSearchParam(searchedTerm);
}, 500);
};
const handleChangeTab = (e, newValue) => {
setTab(newValue);
};
const handleChangeTabOpen = (e, newValue) => {
setTabOpen(newValue);
};
const applyPanelStyle = (status) => {
if (tabOpen !== status) {
return { width: 0, height: 0 };
}
};
if (newPage) {
return (
<>
<NewTicketModal
modalOpen={newTicketModalOpen}
onClose={(e) => setNewTicketModalOpen(false)}
/>
<div>
<TicketsQueueSelect
style={{ marginLeft: 6 }}
selectedQueueIds={selectedQueueIds}
userQueues={user?.queues}
onChange={(values) => setSelectedQueueIds(values)}
/>
<TicketsList
status="open"
showAll={showAllTickets}
selectedQueueIds={selectedQueueIds}
updateCount={(val) => setOpenCount(val)}
style={applyPanelStyle("open")}
/>
<TicketsList
status="pending"
selectedQueueIds={selectedQueueIds}
updateCount={(val) => setPendingCount(val)}
style={applyPanelStyle("pending")}
/>
</div>
</>
);
}
return (
<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
<NewTicketModal
modalOpen={newTicketModalOpen}
onClose={(e) => setNewTicketModalOpen(false)}
/>
<Paper elevation={0} square className={classes.tabsHeader}>
<Tabs
value={tab}
onChange={handleChangeTab}
variant="fullWidth"
indicatorColor="primary"
textColor="primary"
aria-label="icon label tabs example"
>
<Tab
value={"open"}
icon={<MoveToInboxIcon />}
label={i18n.t("tickets.tabs.open.title")}
classes={{ root: classes.tab }}
/>
<Tab
value={"closed"}
icon={<CheckBoxIcon />}
label={i18n.t("tickets.tabs.closed.title")}
classes={{ root: classes.tab }}
/>
<Tab
value={"search"}
icon={<SearchIcon />}
label={i18n.t("tickets.tabs.search.title")}
classes={{ root: classes.tab }}
/>
</Tabs>
</Paper>
<Paper square elevation={0} className={classes.ticketOptionsBox}>
{tab === "search" ? (
<div className={classes.serachInputWrapper}>
<SearchIcon className={classes.searchIcon} />
<InputBase
className={classes.searchInput}
inputRef={searchInputRef}
placeholder={i18n.t("tickets.search.placeholder")}
type="search"
onChange={handleSearch}
/>
</div>
) : (
<>
<Button variant="outlined" color="primary" onClick={() => setNewTicketModalOpen(true)}>
{i18n.t("ticketsManager.buttons.newTicket")}
</Button>
<Can
role={user.profile}
perform="tickets-manager:showall"
yes={() => (
<FormControlLabel
label={i18n.t("tickets.buttons.showAll")}
labelPlacement="start"
control={
<Switch
size="small"
checked={showAllTickets}
onChange={() => setShowAllTickets((prevState) => !prevState)}
name="showAllTickets"
color="primary"
/>
}
/>
)}
/>
</>
)}
<TicketsQueueSelect
style={{ marginLeft: 6 }}
selectedQueueIds={selectedQueueIds}
userQueues={user?.queues}
onChange={(values) => setSelectedQueueIds(values)}
/>
</Paper>
<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
<Tabs
value={tabOpen}
onChange={handleChangeTabOpen}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
>
<Tab
label={
<Badge className={classes.badge} badgeContent={openCount} color="primary">
{i18n.t("ticketsList.assignedHeader")}
</Badge>
}
value={"open"}
/>
<Tab
label={
<Badge className={classes.badge} badgeContent={pendingCount} color="secondary">
{i18n.t("ticketsList.pendingHeader")}
</Badge>
}
value={"pending"}
/>
</Tabs>
<Paper className={classes.ticketsWrapper}>
<TicketsList
status="open"
showAll={showAllTickets}
selectedQueueIds={selectedQueueIds}
updateCount={(val) => setOpenCount(val)}
style={applyPanelStyle("open")}
/>
<TicketsList
status="pending"
selectedQueueIds={selectedQueueIds}
updateCount={(val) => setPendingCount(val)}
style={applyPanelStyle("pending")}
/>
</Paper>
</TabPanel>
<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
<TicketsList status="closed" showAll={true} selectedQueueIds={selectedQueueIds} />
</TabPanel>
<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
<TicketsList searchParam={searchParam} showAll={true} selectedQueueIds={selectedQueueIds} />
</TabPanel>
</Paper>
);
};
export default TicketsManager;

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

@ -9,9 +9,9 @@ import Tab from "@material-ui/core/Tab";
import Badge from "@material-ui/core/Badge"; import Badge from "@material-ui/core/Badge";
import MoveToInboxIcon from "@material-ui/icons/MoveToInbox"; import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
import CheckBoxIcon from "@material-ui/icons/CheckBox"; import CheckBoxIcon from "@material-ui/icons/CheckBox";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch"; import Switch from "@material-ui/core/Switch";
import { Button } from "@material-ui/core";
import NewTicketModal from "../NewTicketModal"; import NewTicketModal from "../NewTicketModal";
import TicketsList from "../TicketsList"; import TicketsList from "../TicketsList";
@ -21,7 +21,6 @@ import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext"; import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can"; import { Can } from "../Can";
import TicketsQueueSelect from "../TicketsQueueSelect"; import TicketsQueueSelect from "../TicketsQueueSelect";
import { Button } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
ticketsWrapper: { ticketsWrapper: {
@ -112,7 +111,6 @@ const TicketsManager = () => {
if (user.profile.toUpperCase() === "ADMIN") { if (user.profile.toUpperCase() === "ADMIN") {
setShowAllTickets(true); setShowAllTickets(true);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { useEffect(() => {

93
frontend/src/components/TicketsQueueSelect/index.js
View File

@ -6,55 +6,52 @@ import Select from "@material-ui/core/Select";
import { Checkbox, ListItemText } from "@material-ui/core"; import { Checkbox, ListItemText } from "@material-ui/core";
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n";
const TicketsQueueSelect = ({ const TicketsQueueSelect = ({ userQueues, selectedQueueIds = [], onChange }) => {
userQueues, const handleChange = (e) => {
selectedQueueIds = [], onChange(e.target.value);
onChange, };
}) => {
const handleChange = e => {
onChange(e.target.value);
};
return ( return (
<div style={{ width: 120, marginTop: -4 }}> <div style={{ width: 120, marginTop: -4 }}>
<FormControl fullWidth margin="dense"> <FormControl fullWidth margin="dense">
<Select <Select
multiple multiple
displayEmpty displayEmpty
variant="outlined" variant="outlined"
value={selectedQueueIds} value={selectedQueueIds}
onChange={handleChange} onChange={handleChange}
MenuProps={{ MenuProps={{
anchorOrigin: { anchorOrigin: {
vertical: "bottom", vertical: "bottom",
horizontal: "left", horizontal: "left",
}, },
transformOrigin: { transformOrigin: {
vertical: "top", vertical: "top",
horizontal: "left", horizontal: "left",
}, },
getContentAnchorEl: null, getContentAnchorEl: null,
}} }}
renderValue={() => i18n.t("ticketsQueueSelect.placeholder")} renderValue={() => i18n.t("ticketsQueueSelect.placeholder")}
> >
{userQueues?.length > 0 && {userQueues?.length > 0 &&
userQueues.map(queue => ( userQueues.map((queue) => (
<MenuItem dense key={queue.id} value={queue.id}> <MenuItem dense key={queue.id} value={queue.id}>
<Checkbox <Checkbox
style={{ style={{
color: queue.color, color: queue.color,
}} }}
size="small" size="small"
color="primary" color="primary"
checked={selectedQueueIds.indexOf(queue.id) > -1} checked={selectedQueueIds.indexOf(queue.id) > -1}
/> />
<ListItemText primary={queue.name} /> <ListItemText primary={queue.name} />
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
); );
}; };
export default TicketsQueueSelect; export default TicketsQueueSelect;

36
frontend/src/components/UserModal/UserModal.jsx
View File

@ -13,12 +13,35 @@ import UserModalComponent from "./UserModalImg/UserModalComponent";
import UserImg from "../../assets/images/User/user.jpg"; import UserImg from "../../assets/images/User/user.jpg";
const UserModal = ({ modal, click }) => { const UserModal = ({ modal, click, userId }) => {
const { user } = React.useContext(AuthContext); const { user } = React.useContext(AuthContext);
const InitalState = { name: user.name, email: user.email, profile: user.profile };
const [userData, setUserData] = React.useState(InitalState);
console.log(user); const InitalState = {
name: "",
email: "",
password: "",
profile: "",
};
const [userData, setUserData] = React.useState(InitalState);
const [selectedQueueIds, setSelectedQueueIds] = React.useState([]);
React.useEffect(() => {
// const fetchUser = async () => {
// if (!userId) return;
// try {
// const { data } = await api.get(`/users/${userId}`);
// setUserData((prevState) => {
// return console.log({ ...prevState, ...data });
// });
// const userQueueIds = data.queues?.map((queue) => queue.id);
// setSelectedQueueIds(userQueueIds);
// } catch (err) {
// alert(err);
// }
// };
// fetchUser();
}, [userId]);
return ( return (
<ModalOverlayStyled modal={modal}> <ModalOverlayStyled modal={modal}>
@ -30,14 +53,14 @@ const UserModal = ({ modal, click }) => {
label="Nome" label="Nome"
type="text" type="text"
value={userData.name} value={userData.name}
onChange={(event) => setUserData({name:event.target.data})} onChange={(event) => setUserData({ name: event.target.data })}
/> />
<InputComponent <InputComponent
id="email" id="email"
label="E-mail" label="E-mail"
type="email" type="email"
value={userData.email} value={userData.email}
onChange={(event) => setUserData({email:event.target.data})} onChange={(event) => setUserData({ email: event.target.data })}
/> />
<InputComponent id="password" label="Senha" type="password" /> <InputComponent id="password" label="Senha" type="password" />
<UserBtns> <UserBtns>
@ -63,3 +86,4 @@ name: "teste"
profile: "master" profile: "master"
queues: [] queues: []
tokenVersion: 0 */ tokenVersion: 0 */

20
frontend/src/pages/Tickets/Tickets.jsx 100644
View File

@ -0,0 +1,20 @@
import React from "react";
import { useParams } from "react-router-dom";
import TicketsStyled from "./Tickets.style";
import TicketsManager from "../../components/TicketsManager/TicketsManager";
import Ticket from "../../components/Ticket/";
const Tickets = () => {
const { ticketId } = useParams();
return (
<TicketsStyled>
<TicketsManager />
{ticketId ? <Ticket /> : <div>Não tem nada</div>}
</TicketsStyled>
);
};
export default Tickets;

9
frontend/src/pages/Tickets/Tickets.style.jsx 100644
View File

@ -0,0 +1,9 @@
import styled from "styled-components";
const TicketsStyled = styled.div`
display: flex;
flex-direction: row;
height: 86vh;
`;
export default TicketsStyled

2
frontend/src/routes/index.js
View File

@ -10,7 +10,7 @@ import SchedulesReminder from "../pages/SchedulesReminder/";
import Login from "../pages/Login/"; import Login from "../pages/Login/";
import Signup from "../pages/Signup/"; import Signup from "../pages/Signup/";
import Tickets from "../pages/Tickets/"; import Tickets from "../pages/Tickets/Tickets";
import Connections from "../pages/Connections/"; import Connections from "../pages/Connections/";
import Settings from "../pages/Settings/"; import Settings from "../pages/Settings/";
import Users from "../pages/Users"; import Users from "../pages/Users";