diff --git a/frontend/package.json b/frontend/package.json
index c316de3..acc009a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
"@testing-library/user-event": "^12.1.7",
"axios": "^0.21.1",
"date-fns": "^2.16.1",
- "emoji-mart": "^3.0.0",
+ "emoji-mart": "^3.0.1",
"formik": "^2.2.0",
"i18next": "^19.8.2",
"i18next-browser-languagedetector": "^6.0.1",
diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js
index 80da507..def8de2 100644
--- a/frontend/src/components/TicketsList/index.js
+++ b/frontend/src/components/TicketsList/index.js
@@ -10,7 +10,6 @@ import TicketsListSkeleton from "../TicketsListSkeleton";
import useTickets from "../../hooks/useTickets";
import { i18n } from "../../translate/i18n";
-import { ListSubheader } from "@material-ui/core";
import { AuthContext } from "../../context/Auth/AuthContext";
const useStyles = makeStyles(theme => ({
@@ -153,7 +152,9 @@ const reducer = (state, action) => {
}
};
-const TicketsList = ({ status, searchParam, showAll, selectedQueueIds }) => {
+ const TicketsList = (props) => {
+ const { status, searchParam, showAll, selectedQueueIds, updateCount, style } =
+ props;
const classes = useStyles();
const [pageNumber, setPageNumber] = useState(1);
const [ticketsList, dispatch] = useReducer(reducer, []);
@@ -245,6 +246,13 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds }) => {
};
}, [status, showAll, user, selectedQueueIds]);
+ useEffect(() => {
+ if (typeof updateCount === "function") {
+ updateCount(ticketsList.length);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ticketsList]);
+
const loadMore = () => {
setPageNumber(prevState => prevState + 1);
};
@@ -260,7 +268,7 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds }) => {
};
return (
-
+
{
onScroll={handleScroll}
>
- {status === "open" && (
-
-
- {i18n.t("ticketsList.assignedHeader")}
-
- {ticketsList.length}
-
-
-
- )}
- {status === "pending" && (
-
-
- {i18n.t("ticketsList.pendingHeader")}
-
- {ticketsList.length}
-
-
-
- )}
{ticketsList.length === 0 && !loading ? (
@@ -308,7 +296,7 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds }) => {
{loading && }
-
+
);
};
diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js
index 53e0e7a..88e6ea0 100644
--- a/frontend/src/components/TicketsManager/index.js
+++ b/frontend/src/components/TicketsManager/index.js
@@ -6,6 +6,7 @@ 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";
@@ -78,6 +79,16 @@ const useStyles = makeStyles((theme) => ({
border: "none",
borderRadius: 30,
},
+
+ badge: {
+ right: "-10px",
+ },
+ show: {
+ display: "block",
+ },
+ hide: {
+ display: "none !important",
+ },
}));
const TicketsManager = () => {
@@ -85,14 +96,25 @@ const TicketsManager = () => {
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 || []);
+ useEffect(() => {
+ if (user.profile.toUpperCase() === "ADMIN") {
+ setShowAllTickets(true);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
useEffect(() => {
if (tab === "search") {
searchInputRef.current.focus();
@@ -121,6 +143,16 @@ const TicketsManager = () => {
setTab(newValue);
};
+ const handleChangeTabOpen = (e, newValue) => {
+ setTabOpen(newValue);
+ };
+
+ const applyPanelStyle = (status) => {
+ if (tabOpen !== status) {
+ return { width: 0, height: 0 };
+ }
+ };
+
return (
{
/>
-
-
+
+
+ {i18n.t("ticketsList.assignedHeader")}
+
+ }
+ value={"open"}
+ />
+
+ {i18n.t("ticketsList.pendingHeader")}
+
+ }
+ value={"pending"}
+ />
+
+
+ setOpenCount(val)}
+ style={applyPanelStyle("open")}
+ />
+ setPendingCount(val)}
+ style={applyPanelStyle("pending")}
+ />
+
({
+ maxWidth: {
+ width: "100%",
+ },
+}));
const filterOptions = createFilterOptions({
trim: true,
@@ -25,9 +37,24 @@ const filterOptions = createFilterOptions({
const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
const history = useHistory();
const [options, setOptions] = useState([]);
+ const [queues, setQueues] = useState([]);
+ const [allQueues, setAllQueues] = useState([]);
const [loading, setLoading] = useState(false);
const [searchParam, setSearchParam] = useState("");
const [selectedUser, setSelectedUser] = useState(null);
+ const [selectedQueue, setSelectedQueue] = useState('');
+ const classes = useStyles();
+ const { findAll: findAllQueues } = useQueues();
+
+ useEffect(() => {
+ const loadQueues = async () => {
+ const list = await findAllQueues();
+ setAllQueues(list);
+ setQueues(list);
+ }
+ loadQueues();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
useEffect(() => {
if (!modalOpen || searchParam.length < 3) {
@@ -62,14 +89,26 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
const handleSaveTicket = async e => {
e.preventDefault();
- if (!ticketid || !selectedUser) return;
+ if (!ticketid) return;
setLoading(true);
try {
- await api.put(`/tickets/${ticketid}`, {
- userId: selectedUser.id,
- queueId: null,
- status: "open",
- });
+ let data = {};
+
+ if (selectedUser) {
+ data.userId = selectedUser.id
+ }
+
+ if (selectedQueue && selectedQueue !== null) {
+ data.queueId = selectedQueue
+
+ if (!selectedUser) {
+ data.status = 'pending';
+ data.userId = null;
+ }
+ }
+
+ await api.put(`/tickets/${ticketid}`, data);
+
setLoading(false);
history.push(`/tickets`);
} catch (err) {
@@ -86,10 +125,16 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
`${option.name}`}
onChange={(e, newValue) => {
setSelectedUser(newValue);
+ if (newValue != null && Array.isArray(newValue.queues)) {
+ setQueues(newValue.queues);
+ } else {
+ setQueues(allQueues);
+ setSelectedQueue('');
+ }
}}
options={options}
filterOptions={filterOptions}
@@ -119,6 +164,19 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
/>
)}
/>
+
+ {i18n.t("transferTicketModal.fieldQueueLabel")}
+
+