Merge pull request #6 from tonnybarros/main

Add Função espiar, aceitar, encerrar e retornar nas tags.
rtenorioh · May 13, 2022 · b3c16e2 · b3c16e2
2 parents e5118bf + 7c95ebd
commit b3c16e2
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 77 deletions.
diff --git a/frontend/src/components/ModalImageCors/index.js b/frontend/src/components/ModalImageCors/index.js
diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/TicketListItem/index.js
@@ -13,11 +13,14 @@ import Typography from "@material-ui/core/Typography";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 import Badge from "@material-ui/core/Badge";
-
+import IconButton from '@material-ui/core/IconButton';
 import { i18n } from "../../translate/i18n";
-
+import DoneIcon from '@material-ui/icons/Done';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import ReplayIcon from '@material-ui/icons/Replay';
+import StopIcon from '@material-ui/icons/Stop';
 import api from "../../services/api";
-import ButtonWithSpinner from "../ButtonWithSpinner";
+//import ButtonWithSpinner from "../ButtonWithSpinner";
 import MarkdownWrapper from "../MarkdownWrapper";
 import { Tooltip } from "@material-ui/core";
 import { AuthContext } from "../../context/Auth/AuthContext";
@@ -81,6 +84,10 @@ const useStyles = makeStyles(theme => ({
 		marginLeft: "auto",
 	},
 
+	bottomButton: {
+		top: "12px",
+	},
+
 	badgeStyle: {
 		color: "white",
 		backgroundColor: green[500],
@@ -102,12 +109,12 @@ const useStyles = makeStyles(theme => ({
 
 	userTag: {
 		position: "absolute",
-		marginRight: 35,
-		right: 10,
-		bottom: 9,
-		background:"#2576D2",
+		marginRight: 5,
+		right: 20,
+		bottom: 30,
+		background: "#2576D2",
 		color: "#ffffff",
-		border:"1px solid #CCC",
+		border: "1px solid #CCC",
 		padding: 1,
 		paddingLeft: 5,
 		paddingRight: 5,
@@ -147,6 +154,58 @@ const TicketListItem = ({ ticket }) => {
 		history.push(`/tickets/${id}`);
 	};
 
+	const handleReopenTicket = async id => {
+		setLoading(true);
+		try {
+			await api.put(`/tickets/${id}`, {
+				status: "open",
+				userId: user?.id,
+			});
+		} catch (err) {
+			setLoading(false);
+			toastError(err);
+		}
+		if (isMounted.current) {
+			setLoading(false);
+		}
+		history.push(`/tickets/${id}`);
+	};
+
+	const handleViewTicket = async id => {
+		setLoading(true);
+		try {
+			await api.put(`/tickets/${id}`, {
+				status: "pending",
+				userId: user?.id,
+			});
+		} catch (err) {
+			setLoading(false);
+			toastError(err);
+		}
+		if (isMounted.current) {
+			setLoading(false);
+		}
+		history.push(`/tickets/${id}`);
+	};	
+
+	const handleClosedTicket = async id => {
+		setLoading(true);
+		try {
+			await api.put(`/tickets/${id}`, {
+				status: "closed",
+				userId: user?.id,
+			});
+		} catch (err) {
+			setLoading(false);
+			toastError(err);
+		}
+		if (isMounted.current) {
+			setLoading(false);
+		}
+		history.push(`/tickets/${id}`);
+	};		
+
+
 	const handleSelectTicket = id => {
 		history.push(`/tickets/${id}`);
 	};
@@ -190,13 +249,6 @@ const TicketListItem = ({ ticket }) => {
 							>
 								{ticket.contact.name}
 							</Typography>
-							{ticket.status === "closed" && (
-								<Badge
-									className={classes.closedBadge}
-									badgeContent={"closed"}
-									color="primary"
-								/>
-							)}
 							{ticket.lastMessage && (
 								<Typography
 									className={classes.lastMessageTime}
@@ -211,8 +263,8 @@ const TicketListItem = ({ ticket }) => {
 									)}
 								</Typography>
 							)}
-							{ticket?.whatsappId && (
-								<div className={classes.userTag} title={i18n.t("ticketsList.connectionTitle")}>{ticket.whatsapp.name}</div>
+							{ticket.whatsappId && (
+								<div className={classes.userTag} title={i18n.t("ticketsList.connectionTitle")}>{ticket.whatsapp?.name}</div>
 							)}
 						</span>
 					}
@@ -243,17 +295,51 @@ const TicketListItem = ({ ticket }) => {
 					}
 				/>
 				{ticket.status === "pending" && (
-					<ButtonWithSpinner
-						color="primary"
-						variant="contained"
-						className={classes.acceptButton}
-						size="small"
-						loading={loading}
-						onClick={e => handleAcepptTicket(ticket.id)}
-					>
-						{i18n.t("ticketsList.buttons.accept")}
-					</ButtonWithSpinner>
+					<IconButton
+					className={classes.bottomButton}
+					color="primary"
+					onClick={e => handleAcepptTicket(ticket.id)} >
+					<DoneIcon />
+				  	</IconButton>	
+				)}
+				 {ticket.status === "pending" && (
+					<IconButton
+					className={classes.bottomButton}
+					color="primary"
+					onClick={e => handleViewTicket(ticket.id)} >
+					<VisibilityIcon />
+				  	</IconButton>								
+				)}	
+				{ticket.status === "open" && (
+					<IconButton
+					className={classes.bottomButton}
+					color="primary" 
+					onClick={e => handleViewTicket(ticket.id)} >
+					<ReplayIcon />
+				  	</IconButton>	
 				)}
+				 {ticket.status === "open" && (
+					<IconButton
+					className={classes.bottomButton}
+					color="primary"
+					onClick={e => handleClosedTicket(ticket.id)} >
+					<StopIcon />
+				  	</IconButton>								
+				)}		
+				{ticket.status === "closed" && (
+					<IconButton
+					className={classes.bottomButton}
+					color="primary" 
+					onClick={e => handleReopenTicket(ticket.id)} >
+					<ReplayIcon />
+				  	</IconButton>	
+				)}		
+				{ticket.status === "closed" && (
+					<IconButton
+					className={classes.bottomButton}
+					color="primary" >
+				  	</IconButton>	
+				)}				
 			</ListItem>
 			<Divider variant="inset" component="li" />
 		</React.Fragment>