Feat: Added import contacts function on frontend

frontend/src/components/ContactDrawer/index.js

@@ -151,7 +151,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 					</Paper>
 					<Paper square variant="outlined" className={classes.contactDetails}>
 						<ContactModal
-							modalOpen={modalOpen}
+							open={modalOpen}
 							onClose={e => setModalOpen(false)}
 							aria-labelledby="form-dialog-title"
 							contactId={contact.id}

frontend/src/components/ContactModal/index.js

@@ -52,19 +52,13 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const ContactModal = ({ modalOpen, onClose, contactId }) => {
+const ContactModal = ({ open, onClose, contactId }) => {
 	const classes = useStyles();
 
 	const initialState = {
 		name: "",
 		number: "",
 		email: "",
-		extraInfo: [
-			{
-				name: "",
-				value: "",
-			},
-		],
 	};
 
 	const [contact, setContact] = useState(initialState);
@@ -77,7 +71,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 		};
 
 		fetchContact();
-	}, [contactId, modalOpen]);
+	}, [contactId, open]);
 
 	const handleClose = () => {
 		onClose();
@@ -100,7 +94,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 	return (
 		<div className={classes.root}>
 			<Dialog
-				open={modalOpen}
+				open={open}
 				onClose={handleClose}
 				maxWidth="lg"
 				scroll="paper"
@@ -125,7 +119,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 						handleSubmit,
 						isSubmitting,
 					}) => (
-						<>
+						<form onSubmit={handleSubmit}>
 							<DialogTitle id="form-dialog-title">
 								{contactId ? "Editar contato" : "Adicionar contato"}
 							</DialogTitle>
@@ -148,7 +142,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 									name="number"
 									value={values.number || ""}
 									onChange={handleChange}
-									placeholder="Ex: 13912344321"
+									placeholder="Ex: 5513912344321"
 									variant="outlined"
 									margin="dense"
 									required
@@ -234,7 +228,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 									Cancelar
 								</Button>
 								<Button
-									onClick={handleSubmit}
+									type="submit"
 									color="primary"
 									disabled={isSubmitting}
 									variant="contained"
@@ -249,7 +243,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 									)}
 								</Button>
 							</DialogActions>
-						</>
+						</form>
 					)}
 				</Formik>
 			</Dialog>

frontend/src/components/NewTicketModal/index.js

@@ -9,7 +9,6 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import FormControl from "@material-ui/core/FormControl";
 import { green } from "@material-ui/core/colors";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -43,25 +42,33 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 
 	const [options, setOptions] = useState([]);
 	const [loading, setLoading] = useState(false);
+	const [searchParam, setSearchParam] = useState("");
 	const [selectedContact, setSelectedContact] = useState(null);
 
 	useEffect(() => {
+		if (!modalOpen || searchParam.length < 3) return;
 		setLoading(true);
-		const fetchContacts = async () => {
-			try {
-				const res = await api.get("contacts");
-				setOptions(res.data.contacts);
-			} catch (err) {
-				alert(err);
-			}
-		};
+		const delayDebounceFn = setTimeout(() => {
+			const fetchContacts = async () => {
+				try {
+					const res = await api.get("contacts", {
+						params: { searchParam, rowsPerPage: 20 },
+					});
+					setOptions(res.data.contacts);
+					setLoading(false);
+				} catch (err) {
+					alert(err);
+				}
+			};
 
-		fetchContacts();
-		setLoading(false);
-	}, []);
+			fetchContacts();
+		}, 1000);
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchParam, modalOpen]);
 
 	const handleClose = () => {
 		onClose();
+		setSearchParam("");
 		setSelectedContact(null);
 	};
 
@@ -82,6 +89,8 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 		handleClose();
 	};
 
+	console.log(options);
+
 	return (
 		<div className={classes.root}>
 			<Dialog
@@ -96,7 +105,7 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 						<Autocomplete
 							id="asynchronous-demo"
 							style={{ width: 300 }}
-							getOptionLabel={option => option.name}
+							getOptionLabel={option => `${option.name} - ${option.number}`}
 							onChange={(e, newValue) => {
 								setSelectedContact(newValue);
 							}}
@@ -105,9 +114,11 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 							renderInput={params => (
 								<TextField
 									{...params}
-									label="Selecione o contato"
+									label="Digite para pesquisar o contato"
 									variant="outlined"
 									required
+									autoFocus
+									onChange={e => setSearchParam(e.target.value)}
 									id="my-input"
 									InputProps={{
 										...params.InputProps,

frontend/src/components/TicketsList/index.js

@@ -211,8 +211,7 @@ const TicketsList = () => {
 	const [loading, setLoading] = useState();
 	const [searchParam, setSearchParam] = useState("");
 	const [tab, setTab] = useState("open");
-
-	const [newTicketModalOpen, setNewTicketModalOpen] = useState(true);
+	const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
 
 	useEffect(() => {
 		if (!("Notification" in window)) {