feat(frontend): solução para transferencia de ticket para usuario

frontend/src/components/TransferTicketModal/index.js

@@ -1,30 +1,30 @@
-import React, { useState, useContext, useMemo } from "react";
+import React, { useState, useContext, useMemo, useRef, useEffect } from "react"
-import { useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom"
 
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core/Button"
-import Dialog from "@material-ui/core/Dialog";
+import Dialog from "@material-ui/core/Dialog"
-import Select from "@material-ui/core/Select";
+import Select from "@material-ui/core/Select"
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@material-ui/core/FormControl"
-import InputLabel from "@material-ui/core/InputLabel";
+import InputLabel from "@material-ui/core/InputLabel"
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@material-ui/core/MenuItem"
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core"
 
-import DialogActions from "@material-ui/core/DialogActions";
+import DialogActions from "@material-ui/core/DialogActions"
-import DialogContent from "@material-ui/core/DialogContent";
+import DialogContent from "@material-ui/core/DialogContent"
-import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogTitle from "@material-ui/core/DialogTitle"
 
-import { i18n } from "../../translate/i18n";
+import { i18n } from "../../translate/i18n"
-import api from "../../services/api";
+import api from "../../services/api"
-import ButtonWithSpinner from "../ButtonWithSpinner";
+import ButtonWithSpinner from "../ButtonWithSpinner"
-import toastError from "../../errors/toastError";
+import toastError from "../../errors/toastError"
 
-import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
+import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"
 
 const useStyles = makeStyles((theme) => ({
 	maxWidth: {
 		width: "100%",
 	},
-}));
+}))
 
 // Receive array of queues arrays
 // Return a new array with unique queues from all arrays has passed by the parameter
@@ -45,49 +45,117 @@ const queueArraysToOneArray = (array) => {
 
 
 const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
-	const history = useHistory();
+	const history = useHistory()
-	const { whatsApps } = useContext(WhatsAppsContext);
+	const { whatsApps } = useContext(WhatsAppsContext)
-	const [loading, setLoading] = useState(false);
+	const [loading, setLoading] = useState(false)
-	const [selectedQueue, setSelectedQueue] = useState('');
+	const [selectedQueue, setSelectedQueue] = useState('')
-	const classes = useStyles();
+	const [selectedUser, setSelectedUser] = useState('')
-	const queues = useMemo(() => {
+	const classes = useStyles()
+
+	const [users, setUsers] = useState([])
+	const [queues, setQueues] = useState([])
+	const isRun = useRef(false)
+
+
+	const _queues = useMemo(() => {
 		if (!whatsApps) return []
 		const whatsAppsQueues = whatsApps.map(({ queues }) => queues)
 		//const whatsAppsQueues = whatsApps.filter(({ status }) => status === "CONNECTED" ).map(({ queues }) => queues)
 		const uniqueQueuesAvailable = queueArraysToOneArray(whatsAppsQueues)
+
 		return uniqueQueuesAvailable
 	}, [whatsApps])
 	const [itemHover, setItemHover] = useState(-1)
 
+	useEffect(() => {
+		if (isRun.current) return
+		setQueues(_queues)
+
+		isRun.current = true
+	}, [whatsApps])
+
+	useEffect(() => {
+		console.log('==========> selectedUser: ', selectedUser)
+
+		if (selectedUser) {
+
+			let { queues } = users.find(u => +u.id == +selectedUser)
+			const userQueues = queues.map((q) => {
+				const { id, color, name } = q
+				return { id, color, name }
+			})
+
+			setQueues(userQueues)
+			setSelectedQueue('')
+		}
+		else {
+			setQueues(_queues)
+			setSelectedUser('')
+		}
+	}, [selectedUser])
+
 	const handleClose = () => {
-		onClose();
+		onClose()
-	};
+	}
 
 	const handleSaveTicket = async e => {
-		e.preventDefault();
+		e.preventDefault()
-		if (!ticketid) return;
+		if (!ticketid) return
-		if (!selectedQueue) return;
+		if (!selectedQueue) return
-		setLoading(true);
+		setLoading(true)
 		try {
-			let data = {};
+			let data = {}
 
 			if (selectedQueue && selectedQueue !== null) {
 				data.queueId = selectedQueue
 			}
 
-			// test del PARA APARECER NA FILA DE OUTRO ATENDENTE E O MESMO CLICAR EM ACEITAR AO INVES DE ENVIAR PARA ATENDENDO
-			data.status = 'pending'
-			data.transfer = true 
 
-			await api.put(`/tickets/${ticketid}`, data);
+			if (selectedUser) {
+				data.userId = selectedUser
+			}
+			else {
+				// test del PARA APARECER NA FILA DE OUTRO ATENDENTE E O MESMO CLICAR EM ACEITAR AO INVES DE ENVIAR PARA ATENDENDO
+				data.status = 'pending'
+				data.transfer = true
+			}
 
-			setLoading(false);
+			await api.put(`/tickets/${ticketid}`, data)
-			history.push(`/tickets`);
+
+			setLoading(false)
+			history.push(`/tickets`)
 		} catch (err) {
-			setLoading(false);
+			setLoading(false)
-			toastError(err);
+			toastError(err)
 		}
-	};
+	}
+
+
+	useEffect(() => {
+
+		const delayDebounceFn = setTimeout(() => {
+
+			const fetchUsers = async () => {
+				try {
+
+					const { data } = await api.get("/users/all", {
+						params: { profile: 'user' },
+					})
+
+					setUsers(data.users)
+
+					console.log('data.users: ', data.users)
+
+				} catch (err) {
+					console.log(err)
+				}
+			}
+
+			fetchUsers()
+
+		}, 500)
+		return () => clearTimeout(delayDebounceFn)
+	}, [])
 
 	return (
 		<Dialog open={modalOpen} onClose={handleClose} maxWidth="lg" scroll="paper">
@@ -98,6 +166,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 				<DialogContent dividers>
 					<FormControl variant="outlined" className={classes.maxWidth}>
 						<InputLabel>{i18n.t("transferTicketModal.fieldQueueLabel")}</InputLabel>
+
 						<Select
 							value={selectedQueue}
 							onChange={(e) => setSelectedQueue(e.target.value)}
@@ -118,6 +187,26 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 								</MenuItem>
 							))}
 						</Select>
+
+
+						<br />
+
+						<Select
+							value={selectedUser}
+							onChange={e => setSelectedUser(e.target.value)}
+							label={'Transfeir para usuario'}
+						>
+							<MenuItem style={{ background: "white", }} value={''}>&nbsp;</MenuItem>
+							{users.map((user) => (
+								<MenuItem
+									key={user.id}
+									value={user.id}
+								>{user.name}
+								</MenuItem>
+							))}
+						</Select>
+
+
 					</FormControl>
 				</DialogContent>
 				<DialogActions>
@@ -140,7 +229,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 				</DialogActions>
 			</form>
 		</Dialog >
-	);
+	)
-};
+}
 
-export default TransferTicketModal;
+export default TransferTicketModal