feat: added transfer ticket option on frontend

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>
+		</>
 	);
 };
 

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
+				<MenuItem onClick={handleOpenTransferModal}>
-				onClick={e => setTicketOpen(true)}
+					{i18n.t("ticketOptionsMenu.transfer")}
-				>{i18n.t("ticketOptionsMenu.transfer")}</MenuItem>
+				</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")}${
+				modalOpen={transferTicketModalOpen}
-					ticket.id
+				onClose={handleCloseTransferTicketModal}
-				} ${i18n.t("ticketOptionsMenu.confirmationModal.titleFrom")} ${
+				ticketid={ticket.id}
-					ticket.contact.name
+			/>
-				}?`}
-				modalOpen={TicketOpen}
-				onClose={e => setTicketOpen(false)}
-				contactId = {ticket.contactId}
-				ticketid = {ticket.id}
-
-			>
-
-			</TransferTicketModal>
-
 		</>
 	);
 };

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 [selectedUser, setSelectedUser] = useState(null);
-	//const [hasMore, setHasMore] = useState(false);
-
-	//const [user, setUser] = 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 {
-
+			await api.put(`/tickets/${ticketid}`, {
-
+				userId: selectedUser.id,
-
-			const { data: ticket } = await api.put("/tickets/"+ticketid , {
-				TechinicalId: TechinicalId,
-				userId: selectedTechinical.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">
-			<Dialog
+			<form onSubmit={handleSaveTicket}>
-				open={modalOpen}
+				<DialogTitle id="form-dialog-title">
-				onClose={handleClose}
+					{i18n.t("transferTicketModal.title")}
-				maxWidth="lg"
+				</DialogTitle>
-				scroll="paper"
+				<DialogContent dividers>
-			>
+					<Autocomplete
-				<form onSubmit={handleSaveTicket}>
+						style={{ width: 300 }}
-					<DialogTitle id="form-dialog-title">
+						getOptionLabel={option => `${option.name}`}
-						{i18n.t("TransferTicketModal.title")}
+						onChange={(e, newValue) => {
-
+							setSelectedUser(newValue);
-						
+						}}
-					</DialogTitle>
+						options={options}
-					<DialogContent dividers>
+						filterOptions={filterOptions}
-						<Autocomplete
+						noOptionsText={i18n.t("transferTicketModal.noOptions")}
-							id="Techinicals-finder"
+						loading={loading}
-							style={{ width: 300 }}
+						renderInput={params => (
-							getOptionLabel={option => `${option.name}`}
+							<TextField
-							onChange={(e, newValue) => {
+								{...params}
-								setSelectedTechinical(newValue);
+								label={i18n.t("transferTicketModal.fieldLabel")}
-							}}
+								variant="outlined"
-							options={options}
+								required
-							filterOptions={filterOptions}
+								autoFocus
-							noOptionsText={i18n.t("newTicketModal.noOptions")}
+								onChange={e => setSearchParam(e.target.value)}
-							loading={loading}
+								InputProps={{
-							renderInput={params => (
+									...params.InputProps,
-								<TextField
+									endAdornment: (
-									{...params}
+										<React.Fragment>
-									label={i18n.t("TransferTicketModal.fieldLabel") }
+											{loading ? (
-									variant="outlined"
+												<CircularProgress color="inherit" size={20} />
-									required
+											) : null}
-									autoFocus
+											{params.InputProps.endAdornment}
-									onChange={e => setSearchParam(e.target.value)}
+										</React.Fragment>
-									id="my-input"
+									),
-									InputProps={{
+								}}
-										...params.InputProps,
+							/>
-										endAdornment: (
+						)}
-											<React.Fragment>
+					/>
-												{loading ? (
+				</DialogContent>
-													<CircularProgress color="inherit" size={20} />
+				<DialogActions>
-												) : null}
+					<Button
-												{params.InputProps.endAdornment}
+						onClick={handleClose}
-											</React.Fragment>
+						color="secondary"
-										),
+						disabled={loading}
-									}}
+						variant="outlined"
-								/>
+					>
-							)}
+						{i18n.t("transferTicketModal.buttons.cancel")}
-						/>
+					</Button>
-					</DialogContent>
+					<ButtonWithSpinner
-					<DialogActions>
+						variant="contained"
-						<Button
+						type="submit"
-							onClick={handleClose}
+						color="primary"
-							color="secondary"
+						loading={loading}
-							disabled={loading}
+					>
-							variant="outlined"
+						{i18n.t("transferTicketModal.buttons.ok")}
-						>
+					</ButtonWithSpinner>
-							{i18n.t("newTicketModal.buttons.cancel")}
+				</DialogActions>
-						</Button>
+			</form>
-						<ButtonWithSpinner
+		</Dialog>
-							variant="contained"
-							type="submit"
-							color="primary"
-							loading={loading}
-						>
-							{i18n.t("newTicketModal.buttons.ok")}
-						</ButtonWithSpinner>
-					</DialogActions>
-				</form>
-			</Dialog>
-		</div>
 	);
 };
 

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

frontend/src/translate/languages/pt.js

@@ -165,16 +165,14 @@ const messages = {
 					showAll: "Todos",
 				},
 			},
-			TransferTicketModal : {
+			transferTicketModal: {
-				title:"Transferir Chamado",
+				title: "Transferir Ticket",
-				fieldLabel: "Digite aqui o nome do técnico",
+				fieldLabel: "Digite aqui o nome do usuário",
+				noOptions: "Nenhum usuário encontrado com esse nome.",
 				buttons: {
-					 ok : "Transferir",
+					ok: "Transferir",
-					 cancel: "Cancelar",
+					cancel: "Cancelar",
-				}
+				},
-
-
-
 			},
 			ticketsList: {
 				pendingHeader: "Aguardando",