feat(frontend): solução para transferencia de ticket para usuario
adriano
parent
bae3d86f2f
commit
1bb4f7562f
|
|
@ -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 (
|
||||
<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={''}> </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
|
||||
Loading…
Reference in New Issue