Started new ticket modal

frontend/src/components/NewTicketModal/index.js

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from "react";
+
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { green } from "@material-ui/core/colors";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+	},
+	textField: {
+		// marginLeft: theme.spacing(1),
+		marginRight: theme.spacing(1),
+		// width: "25ch",
+		flex: 1,
+	},
+
+	extraAttr: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+
+	btnWrapper: {
+		// margin: theme.spacing(1),
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
+}));
+
+const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
+	const classes = useStyles();
+
+	const [options, setOptions] = React.useState([]);
+	const [loading, setLoading] = React.useState(false);
+
+	useEffect(() => {
+		const fetchContacts = async () => {
+			try {
+				const res = await api.get("contacts");
+				setOptions(res.data.contacts);
+			} catch (err) {
+				alert(err);
+			}
+		};
+
+		fetchContacts();
+	}, []);
+
+	const handleClose = () => {
+		onClose();
+		// setTicket(initialState);
+	};
+
+	const handleSaveTicket = async selected => {
+		console.log(selected.id);
+		try {
+			await api.post("/tickets", { contactId: selected.id });
+		} catch (err) {
+			alert(err);
+		}
+		// handleClose();
+	};
+
+	return (
+		<div className={classes.root}>
+			<Dialog
+				open={modalOpen}
+				onClose={handleClose}
+				maxWidth="lg"
+				scroll="paper"
+				className={classes.modal}
+			>
+				<DialogTitle id="form-dialog-title">Criar Ticket</DialogTitle>
+				<DialogContent dividers>
+					<Autocomplete
+						id="asynchronous-demo"
+						style={{ width: 300 }}
+						getOptionLabel={option => option.name}
+						onChange={(e, newValue) => {
+							handleSaveTicket(newValue);
+						}}
+						options={options}
+						loading={loading}
+						renderInput={params => (
+							<TextField
+								{...params}
+								label="Selecione o contato"
+								variant="outlined"
+								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={isSubmitting}
+						variant="outlined"
+					>
+						Cancelar
+					</Button>
+					<Button
+						onClick={handleSaveTicket}
+						color="primary"
+						// disabled={isSubmitting}
+						variant="contained"
+						className={classes.btnWrapper}
+					>
+						Salvar
+						{loading && (
+							<CircularProgress size={24} className={classes.buttonProgress} />
+						)}
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</div>
+	);
+};
+
+export default NewTicketModal;

frontend/src/components/TicketsList/index.js

@@ -21,8 +21,11 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
+import IconButton from "@material-ui/core/IconButton";
+import AddIcon from "@material-ui/icons/Add";
 
 import TicketsSkeleton from "../TicketsSkeleton";
+import NewTicketModal from "../NewTicketModal";
 
 import api from "../../services/api";
 
@@ -98,6 +101,10 @@ const useStyles = makeStyles(theme => ({
 		fontSize: "14px",
 	},
 
+	newTicketBtn: {
+		marginLeft: "auto",
+	},
+
 	ticket: {
 		position: "relative",
 		"& .hidden-button": {
@@ -205,6 +212,8 @@ const TicketsList = () => {
 	const [searchParam, setSearchParam] = useState("");
 	const [tab, setTab] = useState("open");
 
+	const [newTicketModalOpen, setNewTicketModalOpen] = useState(true);
+
 	useEffect(() => {
 		if (!("Notification" in window)) {
 			console.log("This browser doesn't support notifications");
@@ -349,6 +358,8 @@ const TicketsList = () => {
 		history.push(`/chat/${ticketId}`);
 	};
 
+	const handleOpenNewTicketModal = () => {};
+
 	const countTickets = (status, userId) => {
 		const ticketsFound = tickets.filter(
 			t => t.status === status && t.userId === userId
@@ -467,6 +478,10 @@ const TicketsList = () => {
 
 	return (
 		<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
+			<NewTicketModal
+				modalOpen={newTicketModalOpen}
+				onClose={e => setNewTicketModalOpen(false)}
+			/>
 			<Paper elevation={0} square className={classes.tabsHeader}>
 				<Tabs
 					value={tab}
@@ -508,6 +523,13 @@ const TicketsList = () => {
 								<span className={classes.ticketsCount}>
 									{countTickets("open", userId)}
 								</span>
+								<IconButton
+									aria-label="add ticket"
+									className={classes.newTicketBtn}
+									onClick={e => setNewTicketModalOpen(true)}
+								>
+									<AddIcon />
+								</IconButton>
 							</div>
 							{renderTickets("open", userId)}
 						</List>