From 0ee3ccc44b4c69865977f892d5bcf2ff30db6a68 Mon Sep 17 00:00:00 2001 From: canove Date: Sat, 24 Oct 2020 18:30:48 -0300 Subject: [PATCH] feat: added transfer ticket option on frontend --- .../src/components/NewTicketModal/index.js | 14 +- .../src/components/TicketOptionsMenu/index.js | 46 +++-- .../components/TransferTicketModal/index.js | 178 ++++++++---------- frontend/src/translate/languages/en.js | 9 + frontend/src/translate/languages/pt.js | 16 +- 5 files changed, 121 insertions(+), 142 deletions(-) diff --git a/frontend/src/components/NewTicketModal/index.js b/frontend/src/components/NewTicketModal/index.js index 4b77639..2b6fb9d 100644 --- a/frontend/src/components/NewTicketModal/index.js +++ b/frontend/src/components/NewTicketModal/index.js @@ -14,27 +14,17 @@ import Autocomplete, { } 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"; import ContactModal from "../ContactModal"; -const useStyles = makeStyles(theme => ({ - root: { - display: "flex", - flexWrap: "wrap", - }, -})); - const filter = createFilterOptions({ trim: true, }); const NewTicketModal = ({ modalOpen, onClose }) => { const history = useHistory(); - const classes = useStyles(); const userId = +localStorage.getItem("userId"); const [options, setOptions] = useState([]); @@ -156,7 +146,7 @@ const NewTicketModal = ({ modalOpen, onClose }) => { }; return ( -
+ <> { -
+ ); }; diff --git a/frontend/src/components/TicketOptionsMenu/index.js b/frontend/src/components/TicketOptionsMenu/index.js index b12c422..6aa21a6 100644 --- a/frontend/src/components/TicketOptionsMenu/index.js +++ b/frontend/src/components/TicketOptionsMenu/index.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { toast } from "react-toastify"; @@ -12,7 +12,14 @@ import TransferTicketModal from "../TransferTicketModal"; const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => { const [confirmationOpen, setConfirmationOpen] = useState(false); - const [TicketOpen, setTicketOpen] = useState(false); + const [transferTicketModalOpen, setTransferTicketModalOpen] = useState(false); + const isMounted = useRef(true); + + useEffect(() => { + return () => { + isMounted.current = false; + }; + }, []); const handleDeleteTicket = async () => { try { @@ -36,6 +43,17 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => { handleClose(); }; + const handleOpenTransferModal = e => { + setTransferTicketModalOpen(true); + handleClose(); + }; + + const handleCloseTransferTicketModal = () => { + if (isMounted.current) { + setTransferTicketModalOpen(false); + } + }; + return ( <> { {i18n.t("ticketOptionsMenu.delete")} - setTicketOpen(true)} - >{i18n.t("ticketOptionsMenu.transfer")} + + {i18n.t("ticketOptionsMenu.transfer")} + { {i18n.t("ticketOptionsMenu.confirmationModal.message")} setTicketOpen(false)} - contactId = {ticket.contactId} - ticketid = {ticket.id} - - > - - - + modalOpen={transferTicketModalOpen} + onClose={handleCloseTransferTicketModal} + ticketid={ticket.id} + /> ); }; diff --git a/frontend/src/components/TransferTicketModal/index.js b/frontend/src/components/TransferTicketModal/index.js index 640fbd4..33f4a32 100644 --- a/frontend/src/components/TransferTicketModal/index.js +++ b/frontend/src/components/TransferTicketModal/index.js @@ -14,48 +14,37 @@ import Autocomplete, { } 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 TransferTicketModal = ({ modalOpen, onClose, 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); - + const [selectedUser, setSelectedUser] = useState(null); useEffect(() => { + if (!modalOpen || searchParam.length < 3) { + setLoading(false); + return; + } setLoading(true); const delayDebounceFn = setTimeout(() => { const fetchUsers = async () => { try { const { data } = await api.get("/users/", { - params: { searchParam, pageNumber : 1 }, + params: { searchParam }, }); setOptions(data.users); - //setUser({ type: "LOAD_USERS", payload: data.users }); - //setHasMore(data.hasMore); setLoading(false); } catch (err) { + setLoading(false); const errorMsg = err.response?.data?.error; if (errorMsg) { if (i18n.exists(`backendErrors.${errorMsg}`)) { @@ -68,33 +57,31 @@ const TransferTicketModal = ({ modalOpen, onClose,TechinicalId,ticketid }) => { } } }; + fetchUsers(); }, 500); return () => clearTimeout(delayDebounceFn); }, [searchParam, modalOpen]); - const handleClose = () => { onClose(); setSearchParam(""); - setSelectedTechinical(null); + setSelectedUser(null); }; const handleSaveTicket = async e => { e.preventDefault(); - if (!selectedTechinical) return; + if (!ticketid || !selectedUser) return; setLoading(true); try { - - - - const { data: ticket } = await api.put("/tickets/"+ticketid , { - TechinicalId: TechinicalId, - userId: selectedTechinical.id, + await api.put(`/tickets/${ticketid}`, { + userId: selectedUser.id, status: "open", }); - history.push(`/tickets/${ticket.id}`); + setLoading(false); + history.push(`/tickets`); } catch (err) { + setLoading(false); const errorMsg = err.response?.data?.error; if (errorMsg) { if (i18n.exists(`backendErrors.${errorMsg}`)) { @@ -103,84 +90,71 @@ const TransferTicketModal = ({ modalOpen, onClose,TechinicalId,ticketid }) => { toast.error(err.response.data.error); } } else { - toast.error("Unknown error"+ err); + toast.error("Unknown error"); } } - 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")} - - -
- -
+ +
+ + {i18n.t("transferTicketModal.title")} + + + `${option.name}`} + onChange={(e, newValue) => { + setSelectedUser(newValue); + }} + options={options} + filterOptions={filterOptions} + noOptionsText={i18n.t("transferTicketModal.noOptions")} + loading={loading} + renderInput={params => ( + setSearchParam(e.target.value)} + InputProps={{ + ...params.InputProps, + endAdornment: ( + + {loading ? ( + + ) : null} + {params.InputProps.endAdornment} + + ), + }} + /> + )} + /> + + + + + {i18n.t("transferTicketModal.buttons.ok")} + + +
+ ); }; diff --git a/frontend/src/translate/languages/en.js b/frontend/src/translate/languages/en.js index 4aad66c..f8860bc 100644 --- a/frontend/src/translate/languages/en.js +++ b/frontend/src/translate/languages/en.js @@ -165,6 +165,15 @@ const messages = { showAll: "All", }, }, + transferTicketModal: { + title: "Transferir Ticket", + fieldLabel: "Digite aqui o nome do usuário", + noOptions: "Nenhum usuário encontrado com esse nome.", + buttons: { + ok: "Transferir", + cancel: "Cancelar", + }, + }, ticketsList: { pendingHeader: "Queue", assignedHeader: "Working on", diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js index 0ee1d6c..6d4bd9b 100644 --- a/frontend/src/translate/languages/pt.js +++ b/frontend/src/translate/languages/pt.js @@ -165,16 +165,14 @@ const messages = { showAll: "Todos", }, }, - TransferTicketModal : { - title:"Transferir Chamado", - fieldLabel: "Digite aqui o nome do técnico", + transferTicketModal: { + title: "Transferir Ticket", + fieldLabel: "Digite aqui o nome do usuário", + noOptions: "Nenhum usuário encontrado com esse nome.", buttons: { - ok : "Transferir", - cancel: "Cancelar", - } - - - + ok: "Transferir", + cancel: "Cancelar", + }, }, ticketsList: { pendingHeader: "Aguardando",