From 1bb4f7562f1bb92eac6ef683ed64c0ed49ff01aa Mon Sep 17 00:00:00 2001 From: adriano Date: Mon, 23 Oct 2023 09:07:15 -0300 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20solu=C3=A7=C3=A3o=20para=20tr?= =?UTF-8?q?ansferencia=20de=20ticket=20para=20usuario?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TransferTicketModal/index.js | 177 +++++++++++++----- 1 file changed, 133 insertions(+), 44 deletions(-) diff --git a/frontend/src/components/TransferTicketModal/index.js b/frontend/src/components/TransferTicketModal/index.js index 8680578..1a94263 100644 --- a/frontend/src/components/TransferTicketModal/index.js +++ b/frontend/src/components/TransferTicketModal/index.js @@ -1,30 +1,30 @@ -import React, { useState, useContext, useMemo } from "react"; -import { useHistory } from "react-router-dom"; +import React, { useState, useContext, useMemo, useRef, useEffect } from "react" +import { useHistory } from "react-router-dom" -import Button from "@material-ui/core/Button"; -import Dialog from "@material-ui/core/Dialog"; -import Select from "@material-ui/core/Select"; -import FormControl from "@material-ui/core/FormControl"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import { makeStyles } from "@material-ui/core"; +import Button from "@material-ui/core/Button" +import Dialog from "@material-ui/core/Dialog" +import Select from "@material-ui/core/Select" +import FormControl from "@material-ui/core/FormControl" +import InputLabel from "@material-ui/core/InputLabel" +import MenuItem from "@material-ui/core/MenuItem" +import { makeStyles } from "@material-ui/core" -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogTitle from "@material-ui/core/DialogTitle"; +import DialogActions from "@material-ui/core/DialogActions" +import DialogContent from "@material-ui/core/DialogContent" +import DialogTitle from "@material-ui/core/DialogTitle" -import { i18n } from "../../translate/i18n"; -import api from "../../services/api"; -import ButtonWithSpinner from "../ButtonWithSpinner"; -import toastError from "../../errors/toastError"; +import { i18n } from "../../translate/i18n" +import api from "../../services/api" +import ButtonWithSpinner from "../ButtonWithSpinner" +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 { whatsApps } = useContext(WhatsAppsContext); - const [loading, setLoading] = useState(false); - const [selectedQueue, setSelectedQueue] = useState(''); - const classes = useStyles(); - const queues = useMemo(() => { - if (!whatsApps) return [] + const history = useHistory() + const { whatsApps } = useContext(WhatsAppsContext) + const [loading, setLoading] = useState(false) + const [selectedQueue, setSelectedQueue] = useState('') + const [selectedUser, setSelectedUser] = useState('') + 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(); - if (!ticketid) return; - if (!selectedQueue) return; - setLoading(true); + e.preventDefault() + if (!ticketid) return + if (!selectedQueue) return + 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); - history.push(`/tickets`); + await api.put(`/tickets/${ticketid}`, data) + + setLoading(false) + history.push(`/tickets`) } catch (err) { - setLoading(false); - toastError(err); + setLoading(false) + 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 ( @@ -98,6 +166,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => { {i18n.t("transferTicketModal.fieldQueueLabel")} + + + +
+ + + + @@ -140,7 +229,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => { - ); -}; + ) +} -export default TransferTicketModal; \ No newline at end of file +export default TransferTicketModal \ No newline at end of file