feat: add queue filter to tickets list

backend/src/controllers/TicketController.ts

@@ -14,6 +14,7 @@ type IndexQuery = {
   date: string;
   showAll: string;
   withUnreadMessages: string;
+  queueIds: string;
 };
 
 interface TicketData {
@@ -29,11 +30,18 @@ export const index = async (req: Request, res: Response): Promise<Response> => {
     date,
     searchParam,
     showAll,
+    queueIds: queueIdsStringified,
     withUnreadMessages
   } = req.query as IndexQuery;
 
   const userId = req.user.id;
 
+  let queueIds: number[] = [];
+
+  if (queueIdsStringified) {
+    queueIds = JSON.parse(queueIdsStringified);
+  }
+
   const { tickets, count, hasMore } = await ListTicketsService({
     searchParam,
     pageNumber,
@@ -41,6 +49,7 @@ export const index = async (req: Request, res: Response): Promise<Response> => {
     date,
     showAll,
     userId,
+    queueIds,
     withUnreadMessages
   });
 

backend/src/services/TicketServices/ListTicketsService.ts

@@ -5,6 +5,7 @@ import Ticket from "../../models/Ticket";
 import Contact from "../../models/Contact";
 import Message from "../../models/Message";
 import Queue from "../../models/Queue";
+// import ShowUserService from "../UserServices/ShowUserService";
 
 interface Request {
   searchParam?: string;
@@ -14,6 +15,7 @@ interface Request {
   showAll?: string;
   userId: string;
   withUnreadMessages?: string;
+  queueIds: number[];
 }
 
 interface Response {
@@ -25,14 +27,22 @@ interface Response {
 const ListTicketsService = async ({
   searchParam = "",
   pageNumber = "1",
+  queueIds,
   status,
   date,
   showAll,
   userId,
   withUnreadMessages
 }: Request): Promise<Response> => {
+  // const user = await ShowUserService(userId);
+
+  // const userQueueIds = user.queues.map(queue => queue.id);
+
+  // console.log(userQueueIds);
+
   let whereCondition: Filterable["where"] = {
-    [Op.or]: [{ userId }, { status: "pending" }]
+    [Op.or]: [{ userId }, { status: "pending" }],
+    queueId: { [Op.or]: [queueIds, null] }
   };
   let includeCondition: Includeable[];
 
@@ -85,7 +95,7 @@ const ListTicketsService = async ({
       [Op.or]: [
         {
           "$contact.name$": where(
-            fn("LOWER", col("name")),
+            fn("LOWER", col("contact.name")),
             "LIKE",
             `%${sanitizedSearchParam}%`
           )

frontend/src/components/QueueSelect/index.js

@@ -5,7 +5,6 @@ import MenuItem from "@material-ui/core/MenuItem";
 import FormControl from "@material-ui/core/FormControl";
 import Select from "@material-ui/core/Select";
 import Chip from "@material-ui/core/Chip";
-import { OutlinedInput } from "@material-ui/core";
 import toastError from "../../errors/toastError";
 import api from "../../services/api";
 
@@ -19,9 +18,8 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const QueueSelector = ({ selectedQueueIds, onChange }) => {
+const QueueSelect = ({ selectedQueueIds, onChange }) => {
 	const classes = useStyles();
-	// const [selectedQueues, setSelectedQueues] = useState([]);
 	const [queues, setQueues] = useState([]);
 
 	useEffect(() => {
@@ -45,9 +43,9 @@ const QueueSelector = ({ selectedQueueIds, onChange }) => {
 				<InputLabel>Filas</InputLabel>
 				<Select
 					multiple
+					labelWidth={40}
 					value={selectedQueueIds}
 					onChange={handleChange}
-					input={<OutlinedInput label="Filas" id="select-multiple-chip" />}
 					MenuProps={{
 						anchorOrigin: {
 							vertical: "bottom",
@@ -61,12 +59,12 @@ const QueueSelector = ({ selectedQueueIds, onChange }) => {
 					}}
 					renderValue={selected => (
 						<div className={classes.chips}>
-							{selected.length > 0 &&
-								selected.map(value => {
-									const queue = queues.find(q => q.id === value);
+							{selected?.length > 0 &&
+								selected.map(id => {
+									const queue = queues.find(q => q.id === id);
 									return queue ? (
 										<Chip
-											key={value}
+											key={id}
 											style={{ backgroundColor: queue.color }}
 											variant="outlined"
 											label={queue.name}
@@ -88,4 +86,4 @@ const QueueSelector = ({ selectedQueueIds, onChange }) => {
 	);
 };
 
-export default QueueSelector;
+export default QueueSelect;

frontend/src/components/TicketsList/index.js

@@ -7,7 +7,10 @@ import Paper from "@material-ui/core/Paper";
 
 import TicketListItem from "../TicketListItem";
 import TicketsListSkeleton from "../TicketsListSkeleton";
+import TicketsListQueueSelect from "../TicketsListQueueSelect";
+
 import useTickets from "../../hooks/useTickets";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
 import { i18n } from "../../translate/i18n";
 import { ListSubheader } from "@material-ui/core";
 import { AuthContext } from "../../context/Auth/AuthContext";
@@ -35,6 +38,9 @@ const useStyles = makeStyles(theme => ({
 		zIndex: 2,
 		backgroundColor: "white",
 		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
 	},
 
 	ticketsCount: {
@@ -154,17 +160,36 @@ const TicketsList = ({ status, searchParam, showAll }) => {
 	const [pageNumber, setPageNumber] = useState(1);
 	const [ticketsList, dispatch] = useReducer(reducer, []);
 	const { user } = useContext(AuthContext);
+	const [pendingSelectedQueueIds, setPendingSelectedQueueIds] = useLocalStorage(
+		"pendingSelectedQueues",
+		[]
+	);
+	const [openSelectedQueueIds, setOpenSelectedQueueIds] = useLocalStorage(
+		"openSelectedQueues",
+		[]
+	);
 
 	useEffect(() => {
 		dispatch({ type: "RESET" });
 		setPageNumber(1);
-	}, [status, searchParam, dispatch, showAll]);
+	}, [
+		status,
+		searchParam,
+		dispatch,
+		showAll,
+		openSelectedQueueIds,
+		pendingSelectedQueueIds,
+	]);
 
 	const { tickets, hasMore, loading } = useTickets({
 		pageNumber,
 		searchParam,
 		status,
 		showAll,
+		queueIds:
+			status === "open"
+				? JSON.stringify(openSelectedQueueIds)
+				: JSON.stringify(pendingSelectedQueueIds),
 	});
 
 	useEffect(() => {
@@ -251,6 +276,15 @@ const TicketsList = ({ status, searchParam, showAll }) => {
 		}
 	};
 
+	const handleSelectedQueues = values => {
+		if (status === "open") {
+			setOpenSelectedQueueIds(values);
+		}
+		if (status === "pending") {
+			setPendingSelectedQueueIds(values);
+		}
+	};
+
 	return (
 		<div className={classes.ticketsListWrapper}>
 			<Paper
@@ -263,14 +297,32 @@ const TicketsList = ({ status, searchParam, showAll }) => {
 				<List style={{ paddingTop: 0 }}>
 					{status === "open" && (
 						<ListSubheader className={classes.ticketsListHeader}>
-							{i18n.t("ticketsList.assignedHeader")}
-							<span className={classes.ticketsCount}>{ticketsList.length}</span>
+							<div>
+								{i18n.t("ticketsList.assignedHeader")}
+								<span className={classes.ticketsCount}>
+									{ticketsList.length}
+								</span>
+							</div>
+							<TicketsListQueueSelect
+								selectedQueueIds={openSelectedQueueIds}
+								userQueues={user?.queues}
+								onChange={handleSelectedQueues}
+							/>
 						</ListSubheader>
 					)}
 					{status === "pending" && (
 						<ListSubheader className={classes.ticketsListHeader}>
-							{i18n.t("ticketsList.pendingHeader")}
-							<span className={classes.ticketsCount}>{ticketsList.length}</span>
+							<div>
+								{i18n.t("ticketsList.pendingHeader")}
+								<span className={classes.ticketsCount}>
+									{ticketsList.length}
+								</span>
+							</div>
+							<TicketsListQueueSelect
+								selectedQueueIds={pendingSelectedQueueIds}
+								userQueues={user?.queues}
+								onChange={handleSelectedQueues}
+							/>
 						</ListSubheader>
 					)}
 					{ticketsList.length === 0 && !loading ? (

frontend/src/components/TicketsListQueueSelect/index.js

@@ -0,0 +1,59 @@
+import React from "react";
+
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import { Checkbox, ListItemText } from "@material-ui/core";
+
+const TicketsListQueueSelect = ({
+	userQueues,
+	selectedQueueIds = [],
+	onChange,
+}) => {
+	const handleChange = e => {
+		onChange(e.target.value);
+	};
+
+	return (
+		<div style={{ width: 120, marginTop: -5 }}>
+			<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={() => "Filas"}
+				>
+					{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 TicketsListQueueSelect;

frontend/src/components/UserModal/index.js

@@ -22,7 +22,7 @@ import { i18n } from "../../translate/i18n";
 
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
-import QueueSelector from "../QueueSelector";
+import QueueSelect from "../QueueSelect";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -198,7 +198,7 @@ const UserModal = ({ open, onClose, userId }) => {
 										</Field>
 									</FormControl>
 								</div>
-								<QueueSelector
+								<QueueSelect
 									selectedQueueIds={selectedQueueIds}
 									onChange={values => setSelectedQueueIds(values)}
 								/>

frontend/src/components/WhatsAppModal/index.js

@@ -21,7 +21,7 @@ import {
 import api from "../../services/api";
 import { i18n } from "../../translate/i18n";
 import toastError from "../../errors/toastError";
-import QueueSelector from "../QueueSelector";
+import QueueSelect from "../QueueSelect";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -176,7 +176,7 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 										margin="dense"
 									/>
 								</div>
-								<QueueSelector
+								<QueueSelect
 									selectedQueueIds={selectedQueueIds}
 									onChange={values => setSelectedQueueIds(values)}
 								/>

frontend/src/context/Auth/useAuth.js

@@ -6,7 +6,6 @@ import { toast } from "react-toastify";
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
-// import { useLocalStorage } from "../../hooks/useLocalStorage";
 
 const useAuth = () => {
 	const history = useHistory();
@@ -62,12 +61,11 @@ const useAuth = () => {
 					api.defaults.headers.Authorization = `Bearer ${data.token}`;
 					setIsAuth(true);
 					setUser(data.user);
-					setLoading(false);
 				} catch (err) {
 					toastError(err);
-					setLoading(false);
 				}
 			}
+			setLoading(false);
 		})();
 	}, []);
 

frontend/src/hooks/useTickets/index.js

@@ -9,6 +9,7 @@ const useTickets = ({
 	status,
 	date,
 	showAll,
+	queueIds,
 	withUnreadMessages,
 }) => {
 	const [loading, setLoading] = useState(true);
@@ -27,6 +28,7 @@ const useTickets = ({
 							status,
 							date,
 							showAll,
+							queueIds,
 							withUnreadMessages,
 						},
 					});
@@ -41,7 +43,15 @@ const useTickets = ({
 			fetchTickets();
 		}, 500);
 		return () => clearTimeout(delayDebounceFn);
-	}, [searchParam, pageNumber, status, date, showAll, withUnreadMessages]);
+	}, [
+		searchParam,
+		pageNumber,
+		status,
+		date,
+		showAll,
+		queueIds,
+		withUnreadMessages,
+	]);
 
 	return { tickets, loading, hasMore };
 };