feat: added transfer ticket option on frontend

2026-04-18 11:49:19 +00:00 · 2020-10-24 18:30:48 -03:00
parent f0e563269a
commit 0ee3ccc44b
5 changed files with 121 additions and 142 deletions
--- 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 (
-		<div className={classes.root}>
+		<>
 			<ContactModal
 				open={contactModalOpen}
 				initialValues={newContact}
@@ -228,7 +218,7 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
 					</ButtonWithSpinner>
 				</DialogActions>
 			</Dialog>
-		</div>
+		</>
 	);
 };

--- 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 (
 		<>
 			<Menu
@@ -57,9 +75,9 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				<MenuItem onClick={handleOpenConfirmationModal}>
 					{i18n.t("ticketOptionsMenu.delete")}
 				</MenuItem>
-				<MenuItem
-				onClick={e => setTicketOpen(true)}
-				>{i18n.t("ticketOptionsMenu.transfer")}</MenuItem>
+				<MenuItem onClick={handleOpenTransferModal}>
+					{i18n.t("ticketOptionsMenu.transfer")}
+				</MenuItem>
 			</Menu>
 			<ConfirmationModal
 				title={`${i18n.t("ticketOptionsMenu.confirmationModal.title")}${
@@ -74,20 +92,10 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				{i18n.t("ticketOptionsMenu.confirmationModal.message")}
 			</ConfirmationModal>
 			<TransferTicketModal
-				title={`${i18n.t("ticketOptionsMenu.confirmationModal.title")}${
-					ticket.id
-				} ${i18n.t("ticketOptionsMenu.confirmationModal.titleFrom")} ${
-					ticket.contact.name
-				}?`}
-				modalOpen={TicketOpen}
-				onClose={e => setTicketOpen(false)}
-				contactId = {ticket.contactId}
-				ticketid = {ticket.id}
-
-			>
-
-			</TransferTicketModal>
-
+				modalOpen={transferTicketModalOpen}
+				onClose={handleCloseTransferTicketModal}
+				ticketid={ticket.id}
+			/>
 		</>
 	);
 };
--- 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 (
-		<div className={classes.root}>
-			<Dialog
-				open={modalOpen}
-				onClose={handleClose}
-				maxWidth="lg"
-				scroll="paper"
-			>
-				<form onSubmit={handleSaveTicket}>
-					<DialogTitle id="form-dialog-title">
-						{i18n.t("TransferTicketModal.title")}
-
-						
-					</DialogTitle>
-					<DialogContent dividers>
-						<Autocomplete
-							id="Techinicals-finder"
-							style={{ width: 300 }}
-							getOptionLabel={option => `${option.name}`}
-							onChange={(e, newValue) => {
-								setSelectedTechinical(newValue);
-							}}
-							options={options}
-							filterOptions={filterOptions}
-							noOptionsText={i18n.t("newTicketModal.noOptions")}
-							loading={loading}
-							renderInput={params => (
-								<TextField
-									{...params}
-									label={i18n.t("TransferTicketModal.fieldLabel") }
-									variant="outlined"
-									required
-									autoFocus
-									onChange={e => setSearchParam(e.target.value)}
-									id="my-input"
-									InputProps={{
-										...params.InputProps,
-										endAdornment: (
-											<React.Fragment>
-												{loading ? (
-													<CircularProgress color="inherit" size={20} />
-												) : null}
-												{params.InputProps.endAdornment}
-											</React.Fragment>
-										),
-									}}
-								/>
-							)}
-						/>
-					</DialogContent>
-					<DialogActions>
-						<Button
-							onClick={handleClose}
-							color="secondary"
-							disabled={loading}
-							variant="outlined"
-						>
-							{i18n.t("newTicketModal.buttons.cancel")}
-						</Button>
-						<ButtonWithSpinner
-							variant="contained"
-							type="submit"
-							color="primary"
-							loading={loading}
-						>
-							{i18n.t("newTicketModal.buttons.ok")}
-						</ButtonWithSpinner>
-					</DialogActions>
-				</form>
-			</Dialog>
-		</div>
+		<Dialog open={modalOpen} onClose={handleClose} maxWidth="lg" scroll="paper">
+			<form onSubmit={handleSaveTicket}>
+				<DialogTitle id="form-dialog-title">
+					{i18n.t("transferTicketModal.title")}
+				</DialogTitle>
+				<DialogContent dividers>
+					<Autocomplete
+						style={{ width: 300 }}
+						getOptionLabel={option => `${option.name}`}
+						onChange={(e, newValue) => {
+							setSelectedUser(newValue);
+						}}
+						options={options}
+						filterOptions={filterOptions}
+						noOptionsText={i18n.t("transferTicketModal.noOptions")}
+						loading={loading}
+						renderInput={params => (
+							<TextField
+								{...params}
+								label={i18n.t("transferTicketModal.fieldLabel")}
+								variant="outlined"
+								required
+								autoFocus
+								onChange={e => setSearchParam(e.target.value)}
+								InputProps={{
+									...params.InputProps,
+									endAdornment: (
+										<React.Fragment>
+											{loading ? (
+												<CircularProgress color="inherit" size={20} />
+											) : null}
+											{params.InputProps.endAdornment}
+										</React.Fragment>
+									),
+								}}
+							/>
+						)}
+					/>
+				</DialogContent>
+				<DialogActions>
+					<Button
+						onClick={handleClose}
+						color="secondary"
+						disabled={loading}
+						variant="outlined"
+					>
+						{i18n.t("transferTicketModal.buttons.cancel")}
+					</Button>
+					<ButtonWithSpinner
+						variant="contained"
+						type="submit"
+						color="primary"
+						loading={loading}
+					>
+						{i18n.t("transferTicketModal.buttons.ok")}
+					</ButtonWithSpinner>
+				</DialogActions>
+			</form>
+		</Dialog>
 	);
 };

--- 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",
--- 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",