From a75eb49b31c83c63db3d69fb46006f0e103562b8 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 10 Jan 2021 20:01:05 -0300
Subject: [PATCH] feat: started whatsapp modal queue selection

---
 frontend/src/components/QueueModal/index.js   |  12 +-
 .../src/components/QueueSelector/index.js     |  91 ++++++++
 frontend/src/components/UserModal/index.js    |  75 ++++---
 .../src/components/WhatsAppModal/index.js     | 203 +++++++++++-------
 4 files changed, 266 insertions(+), 115 deletions(-)
 create mode 100644 frontend/src/components/QueueSelector/index.js

diff --git a/frontend/src/components/QueueModal/index.js b/frontend/src/components/QueueModal/index.js
index 9261cb3..b083993 100644
--- a/frontend/src/components/QueueModal/index.js
+++ b/frontend/src/components/QueueModal/index.js
@@ -13,10 +13,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import Select from "@material-ui/core/Select";
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
 
 import { i18n } from "../../translate/i18n";
 
@@ -120,7 +116,13 @@ const QueueModal = ({ open, onClose, queueId }) => {
 
 	return (
 		<div className={classes.root}>
-			<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+			<Dialog
+				open={open}
+				onClose={handleClose}
+				maxWidth="sm"
+				fullWidth
+				scroll="paper"
+			>
 				<DialogTitle>
 					{queueId
 						? `${i18n.t("queueModal.title.edit")}`
diff --git a/frontend/src/components/QueueSelector/index.js b/frontend/src/components/QueueSelector/index.js
new file mode 100644
index 0000000..545131c
--- /dev/null
+++ b/frontend/src/components/QueueSelector/index.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Chip from "@material-ui/core/Chip";
+import { OutlinedInput } from "@material-ui/core";
+import toastError from "../../errors/toastError";
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	chips: {
+		display: "flex",
+		flexWrap: "wrap",
+	},
+	chip: {
+		margin: 2,
+	},
+}));
+
+const QueueSelector = ({ selectedQueueIds, onChange }) => {
+	const classes = useStyles();
+	// const [selectedQueues, setSelectedQueues] = useState([]);
+	const [queues, setQueues] = useState([]);
+
+	useEffect(() => {
+		(async () => {
+			try {
+				const { data } = await api.get("/queue");
+				setQueues(data);
+			} catch (err) {
+				toastError(err);
+			}
+		})();
+	}, []);
+
+	const handleChange = event => {
+		onChange(event.target.value);
+	};
+
+	return (
+		<div style={{ marginTop: 6 }}>
+			<FormControl fullWidth variant="outlined">
+				<InputLabel>Filas</InputLabel>
+				<Select
+					multiple
+					value={selectedQueueIds}
+					onChange={handleChange}
+					input={<OutlinedInput label="Filas" id="select-multiple-chip" />}
+					MenuProps={{
+						anchorOrigin: {
+							vertical: "bottom",
+							horizontal: "left",
+						},
+						transformOrigin: {
+							vertical: "top",
+							horizontal: "left",
+						},
+						getContentAnchorEl: null,
+					}}
+					renderValue={selected => (
+						<div className={classes.chips}>
+							{selected.length > 0 &&
+								selected.map(value => {
+									const queue = queues.find(q => q.id === value);
+									return queue ? (
+										<Chip
+											key={value}
+											style={{ backgroundColor: queue.color }}
+											variant="outlined"
+											label={queue.name}
+											className={classes.chip}
+										/>
+									) : null;
+								})}
+						</div>
+					)}
+				>
+					{queues.map(queue => (
+						<MenuItem key={queue.id} value={queue.id}>
+							{queue.name}
+						</MenuItem>
+					))}
+				</Select>
+			</FormControl>
+		</div>
+	);
+};
+
+export default QueueSelector;
diff --git a/frontend/src/components/UserModal/index.js b/frontend/src/components/UserModal/index.js
index dffdd6e..a01012c 100644
--- a/frontend/src/components/UserModal/index.js
+++ b/frontend/src/components/UserModal/index.js
@@ -22,15 +22,18 @@ import { i18n } from "../../translate/i18n";
 
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
+import QueueSelector from "../QueueSelector";
 
 const useStyles = makeStyles(theme => ({
 	root: {
 		display: "flex",
 		flexWrap: "wrap",
 	},
-	textField: {
-		marginRight: theme.spacing(1),
-		flex: 1,
+	multFieldLine: {
+		display: "flex",
+		"& > *:not(:last-child)": {
+			marginRight: theme.spacing(1),
+		},
 	},
 
 	btnWrapper: {
@@ -71,6 +74,7 @@ const UserModal = ({ open, onClose, userId }) => {
 	};
 
 	const [user, setUser] = useState(initialState);
+	const [selectedQueueIds, setSelectedQueueIds] = useState([]);
 
 	useEffect(() => {
 		const fetchUser = async () => {
@@ -80,6 +84,8 @@ const UserModal = ({ open, onClose, userId }) => {
 				setUser(prevState => {
 					return { ...prevState, ...data };
 				});
+				const userQueueIds = data.queues?.map(queue => queue.id);
+				setSelectedQueueIds(userQueueIds);
 			} catch (err) {
 				toastError(err);
 			}
@@ -94,11 +100,12 @@ const UserModal = ({ open, onClose, userId }) => {
 	};
 
 	const handleSaveUser = async values => {
+		const userData = { ...values, queueIds: selectedQueueIds };
 		try {
 			if (userId) {
-				await api.put(`/users/${userId}`, values);
+				await api.put(`/users/${userId}`, userData);
 			} else {
-				await api.post("/users", values);
+				await api.post("/users", userData);
 			}
 			toast.success(i18n.t("userModal.success"));
 		} catch (err) {
@@ -109,7 +116,13 @@ const UserModal = ({ open, onClose, userId }) => {
 
 	return (
 		<div className={classes.root}>
-			<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+			<Dialog
+				open={open}
+				onClose={handleClose}
+				maxWidth="xs"
+				fullWidth
+				scroll="paper"
+			>
 				<DialogTitle id="form-dialog-title">
 					{userId
 						? `${i18n.t("userModal.title.edit")}`
@@ -129,27 +142,18 @@ const UserModal = ({ open, onClose, userId }) => {
 					{({ touched, errors, isSubmitting }) => (
 						<Form>
 							<DialogContent dividers>
-								<Field
-									as={TextField}
-									label={i18n.t("userModal.form.name")}
-									autoFocus
-									name="name"
-									error={touched.name && Boolean(errors.name)}
-									helperText={touched.name && errors.name}
-									variant="outlined"
-									margin="dense"
-									className={classes.textField}
-								/>
-								<Field
-									as={TextField}
-									label={i18n.t("userModal.form.email")}
-									name="email"
-									error={touched.email && Boolean(errors.email)}
-									helperText={touched.email && errors.email}
-									variant="outlined"
-									margin="dense"
-								/>
-								<div>
+								<div className={classes.multFieldLine}>
+									<Field
+										as={TextField}
+										label={i18n.t("userModal.form.name")}
+										autoFocus
+										name="name"
+										error={touched.name && Boolean(errors.name)}
+										helperText={touched.name && errors.name}
+										variant="outlined"
+										margin="dense"
+										fullWidth
+									/>
 									<Field
 										as={TextField}
 										label={i18n.t("userModal.form.password")}
@@ -159,6 +163,19 @@ const UserModal = ({ open, onClose, userId }) => {
 										helperText={touched.password && errors.password}
 										variant="outlined"
 										margin="dense"
+										fullWidth
+									/>
+								</div>
+								<div className={classes.multFieldLine}>
+									<Field
+										as={TextField}
+										label={i18n.t("userModal.form.email")}
+										name="email"
+										error={touched.email && Boolean(errors.email)}
+										helperText={touched.email && errors.email}
+										variant="outlined"
+										margin="dense"
+										fullWidth
 									/>
 									<FormControl
 										variant="outlined"
@@ -181,6 +198,10 @@ const UserModal = ({ open, onClose, userId }) => {
 										</Field>
 									</FormControl>
 								</div>
+								<QueueSelector
+									selectedQueueIds={selectedQueueIds}
+									onChange={values => setSelectedQueueIds(values)}
+								/>
 							</DialogContent>
 							<DialogActions>
 								<Button
diff --git a/frontend/src/components/WhatsAppModal/index.js b/frontend/src/components/WhatsAppModal/index.js
index 49e42df..edead91 100644
--- a/frontend/src/components/WhatsAppModal/index.js
+++ b/frontend/src/components/WhatsAppModal/index.js
@@ -21,19 +21,19 @@ import {
 import api from "../../services/api";
 import { i18n } from "../../translate/i18n";
 import toastError from "../../errors/toastError";
+import QueueSelector from "../QueueSelector";
 
 const useStyles = makeStyles(theme => ({
-	form: {
+	root: {
 		display: "flex",
-		alignItems: "center",
-		justifySelf: "center",
-		"& > *": {
-			margin: theme.spacing(1),
-		},
+		flexWrap: "wrap",
 	},
 
-	textField: {
-		flex: 1,
+	multFieldLine: {
+		display: "flex",
+		"& > *:not(:last-child)": {
+			marginRight: theme.spacing(1),
+		},
 	},
 
 	btnWrapper: {
@@ -61,9 +61,11 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 	const classes = useStyles();
 	const initialState = {
 		name: "",
+		greetingMessage: "",
 		isDefault: false,
 	};
 	const [whatsApp, setWhatsApp] = useState(initialState);
+	const [selectedQueueIds, setSelectedQueueIds] = useState([]);
 
 	useEffect(() => {
 		const fetchSession = async () => {
@@ -72,6 +74,9 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 			try {
 				const { data } = await api.get(`whatsapp/${whatsAppId}`);
 				setWhatsApp(data);
+
+				const whatsQueueIds = data.whatsappQueues?.map(q => q.queue.id);
+				setSelectedQueueIds(whatsQueueIds);
 			} catch (err) {
 				toastError(err);
 			}
@@ -80,14 +85,13 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 	}, [whatsAppId]);
 
 	const handleSaveWhatsApp = async values => {
+		const whatsappData = { ...values, queueIds: selectedQueueIds };
+		console.log("SELECTED", whatsappData);
 		try {
 			if (whatsAppId) {
-				await api.put(`/whatsapp/${whatsAppId}`, {
-					name: values.name,
-					isDefault: values.isDefault,
-				});
+				await api.put(`/whatsapp/${whatsAppId}`, whatsappData);
 			} else {
-				await api.post("/whatsapp", values);
+				await api.post("/whatsapp", whatsappData);
 			}
 			toast.success(i18n.t("whatsappModal.success"));
 		} catch (err) {
@@ -102,80 +106,113 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 	};
 
 	return (
-		<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
-			<DialogTitle>
-				{whatsAppId
-					? i18n.t("whatsappModal.title.edit")
-					: i18n.t("whatsappModal.title.add")}
-			</DialogTitle>
-			<Formik
-				initialValues={whatsApp}
-				enableReinitialize={true}
-				validationSchema={SessionSchema}
-				onSubmit={(values, actions) => {
-					setTimeout(() => {
-						handleSaveWhatsApp(values);
-						actions.setSubmitting(false);
-					}, 400);
-				}}
+		<div className={classes.root}>
+			<Dialog
+				open={open}
+				onClose={handleClose}
+				maxWidth="sm"
+				fullWidth
+				scroll="paper"
 			>
-				{({ values, touched, errors, isSubmitting }) => (
-					<Form>
-						<DialogContent dividers className={classes.form}>
-							<Field
-								as={TextField}
-								label={i18n.t("whatsappModal.form.name")}
-								autoFocus
-								name="name"
-								error={touched.name && Boolean(errors.name)}
-								helperText={touched.name && errors.name}
-								variant="outlined"
-								margin="dense"
-								className={classes.textField}
-							/>
-							<FormControlLabel
-								control={
+				<DialogTitle>
+					{whatsAppId
+						? i18n.t("whatsappModal.title.edit")
+						: i18n.t("whatsappModal.title.add")}
+				</DialogTitle>
+				<Formik
+					initialValues={whatsApp}
+					enableReinitialize={true}
+					validationSchema={SessionSchema}
+					onSubmit={(values, actions) => {
+						setTimeout(() => {
+							handleSaveWhatsApp(values);
+							actions.setSubmitting(false);
+						}, 400);
+					}}
+				>
+					{({ values, touched, errors, isSubmitting }) => (
+						<Form>
+							<DialogContent dividers>
+								<div className={classes.multFieldLine}>
 									<Field
-										as={Switch}
-										color="primary"
-										name="isDefault"
-										checked={values.isDefault}
+										as={TextField}
+										label={i18n.t("whatsappModal.form.name")}
+										autoFocus
+										name="name"
+										error={touched.name && Boolean(errors.name)}
+										helperText={touched.name && errors.name}
+										variant="outlined"
+										margin="dense"
+										className={classes.textField}
 									/>
-								}
-								label={i18n.t("whatsappModal.form.default")}
-							/>
-						</DialogContent>
-						<DialogActions>
-							<Button
-								onClick={handleClose}
-								color="secondary"
-								disabled={isSubmitting}
-								variant="outlined"
-							>
-								{i18n.t("whatsappModal.buttons.cancel")}
-							</Button>
-							<Button
-								type="submit"
-								color="primary"
-								disabled={isSubmitting}
-								variant="contained"
-								className={classes.btnWrapper}
-							>
-								{whatsAppId
-									? i18n.t("whatsappModal.buttons.okEdit")
-									: i18n.t("whatsappModal.buttons.okAdd")}
-								{isSubmitting && (
-									<CircularProgress
-										size={24}
-										className={classes.buttonProgress}
+									<FormControlLabel
+										control={
+											<Field
+												as={Switch}
+												color="primary"
+												name="isDefault"
+												checked={values.isDefault}
+											/>
+										}
+										label={i18n.t("whatsappModal.form.default")}
 									/>
-								)}
-							</Button>
-						</DialogActions>
-					</Form>
-				)}
-			</Formik>
-		</Dialog>
+								</div>
+								<div>
+									<Field
+										as={TextField}
+										label={i18n.t("queueModal.form.greetingMessage")}
+										type="greetingMessage"
+										multiline
+										rows={5}
+										fullWidth
+										name="greetingMessage"
+										error={
+											touched.greetingMessage && Boolean(errors.greetingMessage)
+										}
+										helperText={
+											touched.greetingMessage && errors.greetingMessage
+										}
+										variant="outlined"
+										margin="dense"
+									/>
+								</div>
+								<QueueSelector
+									selectedQueueIds={selectedQueueIds}
+									onChange={values => setSelectedQueueIds(values)}
+								/>
+							</DialogContent>
+							<DialogActions>
+								<Button
+									onClick={handleClose}
+									color="secondary"
+									disabled={isSubmitting}
+									variant="outlined"
+								>
+									{i18n.t("whatsappModal.buttons.cancel")}
+								</Button>
+								<Button
+									type="submit"
+									color="primary"
+									disabled={isSubmitting}
+									variant="contained"
+									className={classes.btnWrapper}
+								>
+									{whatsAppId
+										? i18n.t("whatsappModal.buttons.okEdit")
+										: i18n.t("whatsappModal.buttons.okAdd")}
+									{isSubmitting && (
+										<CircularProgress
+											size={24}
+											className={classes.buttonProgress}
+										/>
+									)}
+								</Button>
+							</DialogActions>
+						</Form>
+					)}
+				</Formik>
+			</Dialog>
+		</div>
 	);
 };