diff --git a/frontend/src/components/TicketOptionsMenu/index.js b/frontend/src/components/TicketOptionsMenu/index.js index 804a1a3..b12c422 100644 --- a/frontend/src/components/TicketOptionsMenu/index.js +++ b/frontend/src/components/TicketOptionsMenu/index.js @@ -8,9 +8,11 @@ import Menu from "@material-ui/core/Menu"; import { i18n } from "../../translate/i18n"; import api from "../../services/api"; import ConfirmationModal from "../ConfirmationModal"; +import TransferTicketModal from "../TransferTicketModal"; const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => { const [confirmationOpen, setConfirmationOpen] = useState(false); + const [TicketOpen, setTicketOpen] = useState(false); const handleDeleteTicket = async () => { try { @@ -55,7 +57,9 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => { {i18n.t("ticketOptionsMenu.delete")} - {i18n.t("ticketOptionsMenu.transfer")} + setTicketOpen(true)} + >{i18n.t("ticketOptionsMenu.transfer")} { > {i18n.t("ticketOptionsMenu.confirmationModal.message")} + setTicketOpen(false)} + contactId = {ticket.contactId} + ticketid = {ticket.id} + + > + + + ); }; diff --git a/frontend/src/components/TransferTicketModal/index.js b/frontend/src/components/TransferTicketModal/index.js new file mode 100644 index 0000000..640fbd4 --- /dev/null +++ b/frontend/src/components/TransferTicketModal/index.js @@ -0,0 +1,187 @@ +import React, { useState, useEffect } from "react"; +import { useHistory } from "react-router-dom"; +import { toast } from "react-toastify"; + +import Button from "@material-ui/core/Button"; +import TextField from "@material-ui/core/TextField"; +import Dialog from "@material-ui/core/Dialog"; + +import DialogActions from "@material-ui/core/DialogActions"; +import DialogContent from "@material-ui/core/DialogContent"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import Autocomplete, { + createFilterOptions, +} from "@material-ui/lab/Autocomplete"; +import CircularProgress from "@material-ui/core/CircularProgress"; + +import { makeStyles } from "@material-ui/core/styles"; + +import { i18n } from "../../translate/i18n"; +import api from "../../services/api"; +import ButtonWithSpinner from "../ButtonWithSpinner"; + +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + flexWrap: "wrap", + }, +})); + +const filterOptions = createFilterOptions({ + trim: true, +}); + +const TransferTicketModal = ({ modalOpen, onClose,TechinicalId,ticketid }) => { + const history = useHistory(); + const classes = useStyles(); + const [options, setOptions] = useState([]); + const [loading, setLoading] = useState(false); + const [searchParam, setSearchParam] = useState(""); + const [selectedTechinical, setSelectedTechinical] = useState(null); + //const [hasMore, setHasMore] = useState(false); + + //const [user, setUser] = useState(null); + + + useEffect(() => { + setLoading(true); + const delayDebounceFn = setTimeout(() => { + const fetchUsers = async () => { + try { + const { data } = await api.get("/users/", { + params: { searchParam, pageNumber : 1 }, + }); + setOptions(data.users); + //setUser({ type: "LOAD_USERS", payload: data.users }); + //setHasMore(data.hasMore); + setLoading(false); + } catch (err) { + const errorMsg = err.response?.data?.error; + if (errorMsg) { + if (i18n.exists(`backendErrors.${errorMsg}`)) { + toast.error(i18n.t(`backendErrors.${errorMsg}`)); + } else { + toast.error(err.response.data.error); + } + } else { + toast.error("Unknown error"); + } + } + }; + fetchUsers(); + }, 500); + return () => clearTimeout(delayDebounceFn); + }, [searchParam, modalOpen]); + + + const handleClose = () => { + onClose(); + setSearchParam(""); + setSelectedTechinical(null); + }; + + const handleSaveTicket = async e => { + e.preventDefault(); + if (!selectedTechinical) return; + setLoading(true); + try { + + + + const { data: ticket } = await api.put("/tickets/"+ticketid , { + TechinicalId: TechinicalId, + userId: selectedTechinical.id, + status: "open", + }); + history.push(`/tickets/${ticket.id}`); + } catch (err) { + const errorMsg = err.response?.data?.error; + if (errorMsg) { + if (i18n.exists(`backendErrors.${errorMsg}`)) { + toast.error(i18n.t(`backendErrors.${errorMsg}`)); + } else { + toast.error(err.response.data.error); + } + } else { + toast.error("Unknown error"+ err); + } + } + setLoading(false); + handleClose(); + }; + + return ( +
+ +
+ + {i18n.t("TransferTicketModal.title")} + + + + + `${option.name}`} + onChange={(e, newValue) => { + setSelectedTechinical(newValue); + }} + options={options} + filterOptions={filterOptions} + noOptionsText={i18n.t("newTicketModal.noOptions")} + loading={loading} + renderInput={params => ( + setSearchParam(e.target.value)} + id="my-input" + InputProps={{ + ...params.InputProps, + endAdornment: ( + + {loading ? ( + + ) : null} + {params.InputProps.endAdornment} + + ), + }} + /> + )} + /> + + + + + {i18n.t("newTicketModal.buttons.ok")} + + +
+
+
+ ); +}; + +export default TransferTicketModal; diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js index 41a32da..0ee1d6c 100644 --- a/frontend/src/translate/languages/pt.js +++ b/frontend/src/translate/languages/pt.js @@ -164,6 +164,17 @@ const messages = { buttons: { showAll: "Todos", }, + }, + TransferTicketModal : { + title:"Transferir Chamado", + fieldLabel: "Digite aqui o nome do técnico", + buttons: { + ok : "Transferir", + cancel: "Cancelar", + } + + + }, ticketsList: { pendingHeader: "Aguardando",