Merge pull request #69 from canove/pr58b0ef070921

frontend/src/components/TableRowSkeleton/index.js

@@ -2,8 +2,18 @@ import React from "react";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import Skeleton from "@material-ui/lab/Skeleton";
+import { makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+	customTableCell: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+	},
+}));
 
 const TableRowSkeleton = () => {
+	const classes = useStyles();
 	return (
 		<>
 			<TableRow>
@@ -13,13 +23,21 @@ const TableRowSkeleton = () => {
 				<TableCell>
 					<Skeleton animation="wave" height={20} width={80} />
 				</TableCell>
-				<TableCell>
+				<TableCell align="center">
-					<Skeleton animation="wave" height={20} width={80} />
+					<div className={classes.customTableCell}>
+						<Skeleton align="center" animation="wave" height={20} width={80} />
+					</div>
 				</TableCell>
-				<TableCell>
+				<TableCell align="center">
-					<Skeleton animation="wave" height={20} width={80} />
+					<div className={classes.customTableCell}>
+						<Skeleton align="center" animation="wave" height={20} width={80} />
+					</div>
+				</TableCell>
+				<TableCell align="center">
+					<div className={classes.customTableCell}>
+						<Skeleton align="center" animation="wave" height={20} width={80} />
+					</div>
 				</TableCell>
-				<TableCell></TableCell>
 			</TableRow>
 		</>
 	);

frontend/src/pages/Contacts/index.js

@@ -12,7 +12,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import Avatar from "@material-ui/core/Avatar";
-
+import WhatsAppIcon from "@material-ui/icons/WhatsApp";
 import SearchIcon from "@material-ui/icons/Search";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
@@ -88,6 +88,7 @@ const useStyles = makeStyles(theme => ({
 const Contacts = () => {
 	const classes = useStyles();
 	const history = useHistory();
+	const userId = +localStorage.getItem("userId");
 
 	const [loading, setLoading] = useState(false);
 	const [pageNumber, setPageNumber] = useState(1);
@@ -164,6 +165,31 @@ const Contacts = () => {
 		setContactModalOpen(false);
 	};
 
+	const handleSaveTicket = async contactId => {
+		if (!contactId) return;
+		setLoading(true);
+		try {
+			const { data: ticket } = await api.post("/tickets", {
+				contactId: contactId,
+				userId: userId,
+				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");
+			}
+		}
+		setLoading(false);
+	};
+
 	const hadleEditContact = contactId => {
 		setSelectedContactId(contactId);
 		setContactModalOpen(true);
@@ -290,9 +316,13 @@ const Contacts = () => {
 						<TableRow>
 							<TableCell padding="checkbox" />
 							<TableCell>{i18n.t("contacts.table.name")}</TableCell>
-							<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
+							<TableCell align="center">
-							<TableCell>{i18n.t("contacts.table.email")}</TableCell>
+								{i18n.t("contacts.table.whatsapp")}
-							<TableCell align="right">
+							</TableCell>
+							<TableCell align="center">
+								{i18n.t("contacts.table.email")}
+							</TableCell>
+							<TableCell align="center">
 								{i18n.t("contacts.table.actions")}
 							</TableCell>
 						</TableRow>
@@ -305,16 +335,21 @@ const Contacts = () => {
 										{<Avatar src={contact.profilePicUrl} />}
 									</TableCell>
 									<TableCell>{contact.name}</TableCell>
-									<TableCell>{contact.number}</TableCell>
+									<TableCell align="center">{contact.number}</TableCell>
-									<TableCell>{contact.email}</TableCell>
+									<TableCell align="center">{contact.email}</TableCell>
-									<TableCell align="right">
+									<TableCell align="center">
+										<IconButton
+											size="small"
+											onClick={() => handleSaveTicket(contact.id)}
+										>
+											<WhatsAppIcon />
+										</IconButton>
 										<IconButton
 											size="small"
 											onClick={() => hadleEditContact(contact.id)}
 										>
 											<EditIcon />
 										</IconButton>
-
 										<IconButton
 											size="small"
 											onClick={e => {

frontend/src/pages/Users/index.js

@@ -28,6 +28,7 @@ import { i18n } from "../../translate/i18n";
 import TableRowSkeleton from "../../components/TableRowSkeleton";
 import UserModal from "../../components/UserModal";
 import ConfirmationModal from "../../components/ConfirmationModal";
+import { Avatar } from "@material-ui/core";
 
 const reducer = (state, action) => {
 	if (action.type === "LOAD_USERS") {
@@ -252,10 +253,15 @@ const Users = () => {
 				<Table size="small">
 					<TableHead>
 						<TableRow>
+							<TableCell padding="checkbox" />
 							<TableCell>{i18n.t("users.table.name")}</TableCell>
-							<TableCell>{i18n.t("users.table.email")}</TableCell>
+							<TableCell align="center">
-							<TableCell>{i18n.t("users.table.profile")}</TableCell>
+								{i18n.t("users.table.email")}
-							<TableCell align="right">
+							</TableCell>
+							<TableCell align="center">
+								{i18n.t("users.table.profile")}
+							</TableCell>
+							<TableCell align="center">
 								{i18n.t("users.table.actions")}
 							</TableCell>
 						</TableRow>
@@ -264,10 +270,13 @@ const Users = () => {
 						<>
 							{users.map(user => (
 								<TableRow key={user.id}>
+									<TableCell style={{ paddingRight: 0 }}>
+										{<Avatar />}
+									</TableCell>
 									<TableCell>{user.name}</TableCell>
-									<TableCell>{user.email}</TableCell>
+									<TableCell align="center">{user.email}</TableCell>
-									<TableCell>{user.profile}</TableCell>
+									<TableCell align="center">{user.profile}</TableCell>
-									<TableCell align="right">
+									<TableCell align="center">
 										<IconButton
 											size="small"
 											onClick={() => handleEditUser(user)}