Tickets in progress
I needed understand more about Socket.IO and how this aplication work to update de visualpull/14/head^2
RenatoDiGiacomo
parent
87e0d61281
commit
a66355f43b
|
|
@ -91,8 +91,6 @@ const Ticket = () => {
|
|||
const fetchTicket = async () => {
|
||||
try {
|
||||
|
||||
// maria julia
|
||||
|
||||
const { data } = await api.get("/tickets/" + ticketId);
|
||||
|
||||
// setContact(data.contact);
|
||||
|
|
|
|||
|
|
@ -12,320 +12,294 @@ import useTickets from "../../hooks/useTickets";
|
|||
import { i18n } from "../../translate/i18n";
|
||||
import { AuthContext } from "../../context/Auth/AuthContext";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
ticketsListWrapper: {
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
ticketsListWrapper: {
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
|
||||
ticketsList: {
|
||||
flex: 1,
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
borderTop: "2px solid rgba(0, 0, 0, 0.12)",
|
||||
},
|
||||
ticketsList: {
|
||||
flex: 1,
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
borderTop: "2px solid rgba(0, 0, 0, 0.12)",
|
||||
},
|
||||
|
||||
ticketsListHeader: {
|
||||
color: "rgb(67, 83, 105)",
|
||||
zIndex: 2,
|
||||
backgroundColor: "white",
|
||||
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
ticketsListHeader: {
|
||||
color: "rgb(67, 83, 105)",
|
||||
zIndex: 2,
|
||||
backgroundColor: "white",
|
||||
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
|
||||
ticketsCount: {
|
||||
fontWeight: "normal",
|
||||
color: "rgb(104, 121, 146)",
|
||||
marginLeft: "8px",
|
||||
fontSize: "14px",
|
||||
},
|
||||
ticketsCount: {
|
||||
fontWeight: "normal",
|
||||
color: "rgb(104, 121, 146)",
|
||||
marginLeft: "8px",
|
||||
fontSize: "14px",
|
||||
},
|
||||
|
||||
noTicketsText: {
|
||||
textAlign: "center",
|
||||
color: "rgb(104, 121, 146)",
|
||||
fontSize: "14px",
|
||||
lineHeight: "1.4",
|
||||
},
|
||||
noTicketsText: {
|
||||
textAlign: "center",
|
||||
color: "rgb(104, 121, 146)",
|
||||
fontSize: "14px",
|
||||
lineHeight: "1.4",
|
||||
},
|
||||
|
||||
noTicketsTitle: {
|
||||
textAlign: "center",
|
||||
fontSize: "16px",
|
||||
fontWeight: "600",
|
||||
margin: "0px",
|
||||
},
|
||||
noTicketsTitle: {
|
||||
textAlign: "center",
|
||||
fontSize: "16px",
|
||||
fontWeight: "600",
|
||||
margin: "0px",
|
||||
},
|
||||
|
||||
noTicketsDiv: {
|
||||
display: "flex",
|
||||
height: "100px",
|
||||
margin: 40,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
noTicketsDiv: {
|
||||
display: "flex",
|
||||
height: "100px",
|
||||
margin: 40,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
}));
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "LOAD_TICKETS") {
|
||||
const newTickets = action.payload;
|
||||
|
||||
|
||||
newTickets.forEach(ticket => {
|
||||
if (action.type === "LOAD_TICKETS") {
|
||||
const newTickets = action.payload;
|
||||
|
||||
// console.log('* ticket.unreadMessages: ',ticket.unreadMessages)
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
return [...state];
|
||||
}
|
||||
|
||||
return [...state];
|
||||
}
|
||||
if (action.type === "RESET_UNREAD") {
|
||||
const ticketId = action.payload;
|
||||
|
||||
if (action.type === "RESET_UNREAD") {
|
||||
const ticketId = action.payload;
|
||||
const ticketIndex = state.findIndex((t) => t.id === ticketId);
|
||||
if (ticketIndex !== -1) {
|
||||
state[ticketIndex].unreadMessages = 0;
|
||||
}
|
||||
|
||||
const ticketIndex = state.findIndex(t => t.id === ticketId);
|
||||
if (ticketIndex !== -1) {
|
||||
state[ticketIndex].unreadMessages = 0;
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
|
||||
return [...state];
|
||||
}
|
||||
if (action.type === "UPDATE_TICKET") {
|
||||
const ticket = action.payload;
|
||||
|
||||
if (action.type === "UPDATE_TICKET") {
|
||||
const ticket = action.payload;
|
||||
const ticketIndex = state.findIndex((t) => t.id === ticket.id);
|
||||
if (ticketIndex !== -1) {
|
||||
state[ticketIndex] = ticket;
|
||||
} else {
|
||||
state.unshift(ticket);
|
||||
}
|
||||
|
||||
// console.log('++++++++++++ UPDATE_TICKET: ',ticket)
|
||||
return [...state];
|
||||
}
|
||||
|
||||
const ticketIndex = state.findIndex(t => t.id === ticket.id);
|
||||
if (ticketIndex !== -1) {
|
||||
state[ticketIndex] = ticket;
|
||||
} else {
|
||||
state.unshift(ticket);
|
||||
}
|
||||
if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") {
|
||||
const message = action.payload.message;
|
||||
|
||||
return [...state];
|
||||
}
|
||||
const ticket = action.payload.ticket;
|
||||
|
||||
if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") {
|
||||
const ticketIndex = state.findIndex((t) => t.id === ticket.id);
|
||||
|
||||
const message = action.payload.message
|
||||
if (ticketIndex !== -1) {
|
||||
if (!message.fromMe) {
|
||||
ticket.unreadMessages += 1;
|
||||
}
|
||||
|
||||
const ticket = action.payload.ticket;
|
||||
state[ticketIndex] = ticket;
|
||||
state.unshift(state.splice(ticketIndex, 1)[0]);
|
||||
} else {
|
||||
state.unshift(ticket);
|
||||
}
|
||||
|
||||
const ticketIndex = state.findIndex(t => t.id === ticket.id);
|
||||
return [...state];
|
||||
}
|
||||
|
||||
if (ticketIndex !== -1) {
|
||||
|
||||
// console.log('>>>>>> ticketIndex: ', ticketIndex)
|
||||
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];
|
||||
}
|
||||
|
||||
// console.log('&&&&&&& UPDATE_TICKET_UNREAD_MESSAGES ticket: ',ticket, ' |\n MESSAGE: ', message)
|
||||
|
||||
if(!message.fromMe){
|
||||
ticket.unreadMessages +=1
|
||||
}
|
||||
if (action.type === "DELETE_TICKET") {
|
||||
const ticketId = action.payload;
|
||||
const ticketIndex = state.findIndex((t) => t.id === ticketId);
|
||||
if (ticketIndex !== -1) {
|
||||
state.splice(ticketIndex, 1);
|
||||
}
|
||||
|
||||
state[ticketIndex] = ticket;
|
||||
state.unshift(state.splice(ticketIndex, 1)[0]);
|
||||
|
||||
} else {
|
||||
state.unshift(ticket);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
|
||||
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 [];
|
||||
}
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const TicketsList = (props) => {
|
||||
const { status, searchParam, showAll, selectedQueueIds, updateCount, style } =
|
||||
props;
|
||||
const classes = useStyles();
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [ticketsList, dispatch] = useReducer(reducer, []);
|
||||
const { user } = useContext(AuthContext);
|
||||
const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount, style }) => {
|
||||
const classes = useStyles();
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [ticketsList, dispatch] = useReducer(reducer, []);
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({ type: "RESET" });
|
||||
setPageNumber(1);
|
||||
}, [status, searchParam, dispatch, showAll, selectedQueueIds]);
|
||||
useEffect(() => {
|
||||
dispatch({ type: "RESET" });
|
||||
setPageNumber(1);
|
||||
}, [status, searchParam, dispatch, showAll, selectedQueueIds]);
|
||||
|
||||
const { tickets, hasMore, loading } = useTickets({
|
||||
pageNumber,
|
||||
searchParam,
|
||||
status,
|
||||
showAll,
|
||||
queueIds: JSON.stringify(selectedQueueIds),
|
||||
});
|
||||
const { tickets, hasMore, loading } = useTickets({
|
||||
pageNumber,
|
||||
searchParam,
|
||||
status,
|
||||
showAll,
|
||||
queueIds: JSON.stringify(selectedQueueIds),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!status && !searchParam) return;
|
||||
dispatch({
|
||||
type: "LOAD_TICKETS",
|
||||
payload: tickets,
|
||||
});
|
||||
}, [tickets, status, searchParam]);
|
||||
useEffect(() => {
|
||||
if (!status && !searchParam) return;
|
||||
dispatch({
|
||||
type: "LOAD_TICKETS",
|
||||
payload: tickets,
|
||||
});
|
||||
}, [tickets, status, searchParam]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
const shouldUpdateTicket = ticket =>
|
||||
(!ticket.userId || ticket.userId === user?.id || showAll) &&
|
||||
(!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1);
|
||||
const shouldUpdateTicket = (ticket) =>
|
||||
(!ticket.userId || ticket.userId === user?.id || showAll) &&
|
||||
(!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1);
|
||||
|
||||
const notBelongsToUserQueues = ticket =>
|
||||
ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1;
|
||||
const notBelongsToUserQueues = (ticket) =>
|
||||
ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1;
|
||||
|
||||
socket.on("connect", () => {
|
||||
if (status) {
|
||||
socket.emit("joinTickets", status);
|
||||
} else {
|
||||
socket.emit("joinNotification");
|
||||
}
|
||||
socket.on("connect", () => {
|
||||
if (status) {
|
||||
socket.emit("joinTickets", status);
|
||||
} else {
|
||||
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 === "updateUnread") {
|
||||
dispatch({
|
||||
type: "RESET_UNREAD",
|
||||
payload: data.ticketId,
|
||||
});
|
||||
}
|
||||
if (data.action === "update" && shouldUpdateTicket(data.ticket)) {
|
||||
dispatch({
|
||||
type: "UPDATE_TICKET",
|
||||
payload: data.ticket,
|
||||
});
|
||||
}
|
||||
|
||||
if (data.action === "update" && shouldUpdateTicket(data.ticket)) {
|
||||
dispatch({
|
||||
type: "UPDATE_TICKET",
|
||||
payload: data.ticket,
|
||||
});
|
||||
}
|
||||
if (data.action === "update" && notBelongsToUserQueues(data.ticket)) {
|
||||
dispatch({ type: "DELETE_TICKET", payload: data.ticket.id });
|
||||
}
|
||||
|
||||
if (data.action === "update" && notBelongsToUserQueues(data.ticket)) {
|
||||
dispatch({ type: "DELETE_TICKET", payload: data.ticket.id });
|
||||
}
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_TICKET", payload: data.ticketId });
|
||||
}
|
||||
});
|
||||
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_TICKET", payload: data.ticketId });
|
||||
}
|
||||
});
|
||||
socket.on("appMessage", (data) => {
|
||||
if (data.action === "create" && shouldUpdateTicket(data.ticket)) {
|
||||
dispatch({
|
||||
type: "UPDATE_TICKET_UNREAD_MESSAGES",
|
||||
// payload: data.ticket,
|
||||
payload: data,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("appMessage", data => {
|
||||
if (data.action === "create" && shouldUpdateTicket(data.ticket)) {
|
||||
socket.on("contact", (data) => {
|
||||
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({
|
||||
type: "UPDATE_TICKET_UNREAD_MESSAGES",
|
||||
// payload: data.ticket,
|
||||
payload: data,
|
||||
});
|
||||
}
|
||||
});
|
||||
useEffect(() => {
|
||||
if (typeof updateCount === "function") {
|
||||
updateCount(ticketsList.length);
|
||||
}
|
||||
}, [ticketsList]);
|
||||
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "update") {
|
||||
dispatch({
|
||||
type: "UPDATE_TICKET_CONTACT",
|
||||
payload: data.contact,
|
||||
});
|
||||
}
|
||||
});
|
||||
const loadMore = () => {
|
||||
setPageNumber((prevState) => prevState + 1);
|
||||
};
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [status, showAll, user, selectedQueueIds]);
|
||||
const handleScroll = (e) => {
|
||||
if (!hasMore || loading) return;
|
||||
|
||||
useEffect(() => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (typeof updateCount === "function") {
|
||||
updateCount(ticketsList.length);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ticketsList]);
|
||||
|
||||
const loadMore = () => {
|
||||
setPageNumber(prevState => prevState + 1);
|
||||
};
|
||||
|
||||
const handleScroll = e => {
|
||||
if (!hasMore || loading) return;
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper className={classes.ticketsListWrapper} style={style}>
|
||||
<Paper
|
||||
square
|
||||
name="closed"
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<Paper className={classes.ticketsListWrapper} style={style}>
|
||||
<Paper
|
||||
square
|
||||
name="closed"
|
||||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -9,9 +9,9 @@ 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";
|
||||
|
|
@ -21,7 +21,6 @@ import { i18n } from "../../translate/i18n";
|
|||
import { AuthContext } from "../../context/Auth/AuthContext";
|
||||
import { Can } from "../Can";
|
||||
import TicketsQueueSelect from "../TicketsQueueSelect";
|
||||
import { Button } from "@material-ui/core";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
ticketsWrapper: {
|
||||
|
|
@ -112,7 +111,6 @@ const TicketsManager = () => {
|
|||
if (user.profile.toUpperCase() === "ADMIN") {
|
||||
setShowAllTickets(true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -6,55 +6,52 @@ import Select from "@material-ui/core/Select";
|
|||
import { Checkbox, ListItemText } from "@material-ui/core";
|
||||
import { i18n } from "../../translate/i18n";
|
||||
|
||||
const TicketsQueueSelect = ({
|
||||
userQueues,
|
||||
selectedQueueIds = [],
|
||||
onChange,
|
||||
}) => {
|
||||
const handleChange = e => {
|
||||
onChange(e.target.value);
|
||||
};
|
||||
const TicketsQueueSelect = ({ userQueues, selectedQueueIds = [], onChange }) => {
|
||||
const handleChange = (e) => {
|
||||
onChange(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ width: 120, marginTop: -4 }}>
|
||||
<FormControl fullWidth margin="dense">
|
||||
<Select
|
||||
multiple
|
||||
displayEmpty
|
||||
variant="outlined"
|
||||
value={selectedQueueIds}
|
||||
onChange={handleChange}
|
||||
MenuProps={{
|
||||
anchorOrigin: {
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
},
|
||||
transformOrigin: {
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
},
|
||||
getContentAnchorEl: null,
|
||||
}}
|
||||
renderValue={() => i18n.t("ticketsQueueSelect.placeholder")}
|
||||
>
|
||||
{userQueues?.length > 0 &&
|
||||
userQueues.map(queue => (
|
||||
<MenuItem dense key={queue.id} value={queue.id}>
|
||||
<Checkbox
|
||||
style={{
|
||||
color: queue.color,
|
||||
}}
|
||||
size="small"
|
||||
color="primary"
|
||||
checked={selectedQueueIds.indexOf(queue.id) > -1}
|
||||
/>
|
||||
<ListItemText primary={queue.name} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div style={{ width: 120, marginTop: -4 }}>
|
||||
<FormControl fullWidth margin="dense">
|
||||
<Select
|
||||
multiple
|
||||
displayEmpty
|
||||
variant="outlined"
|
||||
value={selectedQueueIds}
|
||||
onChange={handleChange}
|
||||
MenuProps={{
|
||||
anchorOrigin: {
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
},
|
||||
transformOrigin: {
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
},
|
||||
getContentAnchorEl: null,
|
||||
}}
|
||||
renderValue={() => i18n.t("ticketsQueueSelect.placeholder")}
|
||||
>
|
||||
{userQueues?.length > 0 &&
|
||||
userQueues.map((queue) => (
|
||||
<MenuItem dense key={queue.id} value={queue.id}>
|
||||
<Checkbox
|
||||
style={{
|
||||
color: queue.color,
|
||||
}}
|
||||
size="small"
|
||||
color="primary"
|
||||
checked={selectedQueueIds.indexOf(queue.id) > -1}
|
||||
/>
|
||||
<ListItemText primary={queue.name} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketsQueueSelect;
|
||||
|
||||
|
|
|
|||
|
|
@ -13,12 +13,35 @@ import UserModalComponent from "./UserModalImg/UserModalComponent";
|
|||
|
||||
import UserImg from "../../assets/images/User/user.jpg";
|
||||
|
||||
const UserModal = ({ modal, click }) => {
|
||||
const UserModal = ({ modal, click, userId }) => {
|
||||
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 (
|
||||
<ModalOverlayStyled modal={modal}>
|
||||
|
|
@ -30,14 +53,14 @@ const UserModal = ({ modal, click }) => {
|
|||
label="Nome"
|
||||
type="text"
|
||||
value={userData.name}
|
||||
onChange={(event) => setUserData({name:event.target.data})}
|
||||
onChange={(event) => setUserData({ name: event.target.data })}
|
||||
/>
|
||||
<InputComponent
|
||||
id="email"
|
||||
label="E-mail"
|
||||
type="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" />
|
||||
<UserBtns>
|
||||
|
|
@ -63,3 +86,4 @@ name: "teste"
|
|||
profile: "master"
|
||||
queues: []
|
||||
tokenVersion: 0 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
const TicketsStyled = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 86vh;
|
||||
`;
|
||||
|
||||
export default TicketsStyled
|
||||
|
|
@ -10,7 +10,7 @@ import SchedulesReminder from "../pages/SchedulesReminder/";
|
|||
|
||||
import Login from "../pages/Login/";
|
||||
import Signup from "../pages/Signup/";
|
||||
import Tickets from "../pages/Tickets/";
|
||||
import Tickets from "../pages/Tickets/Tickets";
|
||||
import Connections from "../pages/Connections/";
|
||||
import Settings from "../pages/Settings/";
|
||||
import Users from "../pages/Users";
|
||||
|
|
|
|||
Loading…
Reference in New Issue