feat: started whatsapp modal queue selection

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")}`

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;

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: {
+	multFieldLine: {
+		display: "flex",
+		"& > *:not(:last-child)": {
 			marginRight: theme.spacing(1),
-		flex: 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,6 +142,7 @@ const UserModal = ({ open, onClose, userId }) => {
 					{({ touched, errors, isSubmitting }) => (
 						<Form>
 							<DialogContent dividers>
+								<div className={classes.multFieldLine}>
 									<Field
 										as={TextField}
 										label={i18n.t("userModal.form.name")}
@@ -138,18 +152,8 @@ const UserModal = ({ open, onClose, userId }) => {
 										helperText={touched.name && errors.name}
 										variant="outlined"
 										margin="dense"
-									className={classes.textField}
+										fullWidth
 									/>
-								<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>
 									<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

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",
+		flexWrap: "wrap",
-		justifySelf: "center",
-		"& > *": {
-			margin: theme.spacing(1),
-		},
 	},
 
-	textField: {
+	multFieldLine: {
-		flex: 1,
+		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}`, {
+				await api.put(`/whatsapp/${whatsAppId}`, whatsappData);
-					name: values.name,
-					isDefault: values.isDefault,
-				});
 			} else {
-				await api.post("/whatsapp", values);
+				await api.post("/whatsapp", whatsappData);
 			}
 			toast.success(i18n.t("whatsappModal.success"));
 		} catch (err) {
@@ -102,7 +106,14 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 	};
 
 	return (
-		<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+		<div className={classes.root}>
+			<Dialog
+				open={open}
+				onClose={handleClose}
+				maxWidth="sm"
+				fullWidth
+				scroll="paper"
+			>
 				<DialogTitle>
 					{whatsAppId
 						? i18n.t("whatsappModal.title.edit")
@@ -121,7 +132,8 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 				>
 					{({ values, touched, errors, isSubmitting }) => (
 						<Form>
-						<DialogContent dividers className={classes.form}>
+							<DialogContent dividers>
+								<div className={classes.multFieldLine}>
 									<Field
 										as={TextField}
 										label={i18n.t("whatsappModal.form.name")}
@@ -144,6 +156,30 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 										}
 										label={i18n.t("whatsappModal.form.default")}
 									/>
+								</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
@@ -176,6 +212,7 @@ const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 					)}
 				</Formik>
 			</Dialog>
+		</div>
 	);
 };