cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-19 04:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: started whatsapp modal queue selection

Browse Source
This commit is contained in:
canove
2021-01-10 20:01:05 -03:00
parent e64a77513f
commit a75eb49b31
4 changed files with 266 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
frontend/src/components/WhatsAppModal/index.js
View File

@@ -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>
);
};