Variáveis disponíveis

rtenorioh · Jan 30, 2023 · 426f02b · 426f02b
1 parent 6f21218
commit 426f02b
Show file tree

Hide file tree

Showing 8 changed files with 288 additions and 99 deletions.
diff --git a/frontend/src/components/FormikTextField/index.js b/frontend/src/components/FormikTextField/index.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { TextField } from "@material-ui/core";
+import { Field } from "formik";
+
+const FormikTextField = ({
+  name,
+  values,
+  touched,
+  errors,
+  isSubmitting,
+  loading,
+  ...rest
+}) => {
+  return (
+    <Field
+      as={TextField}
+      name={name}
+      error={touched[name] && Boolean(errors[name])}
+      helperText={touched[name] && errors[name]}
+      {...rest}
+    />
+  );
+};
+
+export default FormikTextField;
diff --git a/frontend/src/components/MessageVariablesPicker/index.js b/frontend/src/components/MessageVariablesPicker/index.js
@@ -0,0 +1,86 @@
+import React from "react";
+import { Chip, makeStyles } from "@material-ui/core";
+import { i18n } from "../../translate/i18n";
+import OutlinedDiv from "../OutlinedDiv";
+
+const useStyles = makeStyles(theme => ({
+    chip: {
+        margin: theme.spacing(0.5),
+        cursor: "pointer"
+    }
+}));
+
+const MessageVariablesPicker = ({ onClick, disabled }) => {
+    const classes = useStyles();
+
+    const handleClick = (e, value) => {
+        e.preventDefault();
+        if (disabled) return;
+        onClick(value);
+    };
+
+    const msgVars = [
+        {
+            name: i18n.t("messageVariablesPicker.vars.contactName"),
+            value: "{{name}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.user"),
+            value: "{{user}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.greeting"),
+            value: "{{ms}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.protocolNumber"),
+            value: "{{protocol}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.date"),
+            value: "{{date}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.hour"),
+            value: "{{hour}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.date_hour"),
+            value: "{{date_hour}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.ticket_id"),
+            value: "{{ticket_id}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.queue"),
+            value: "{{queue}} "
+        },
+        {
+            name: i18n.t("messageVariablesPicker.vars.connection"),
+            value: "{{connection}} "
+        }
+    ];
+
+    return (
+        <OutlinedDiv
+            margin="dense"
+            fullWidth
+            label={i18n.t("messageVariablesPicker.label")}
+            disabled={disabled}
+        >
+            {msgVars.map(msgVar => (
+                <Chip
+                    key={msgVar.value}
+                    onMouseDown={e => handleClick(e, msgVar.value)}
+                    label={msgVar.name}
+                    size="small"
+                    className={classes.chip}
+                    color="primary"
+                />
+            ))}
+        </OutlinedDiv>
+    );
+};
+
+export default MessageVariablesPicker;
diff --git a/frontend/src/components/OutlinedDiv/index.js b/frontend/src/components/OutlinedDiv/index.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+import TextField from "@material-ui/core/TextField";
+
+const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
+
+const OutlinedDiv = ({
+  InputProps,
+  children,
+  InputLabelProps,
+  label,
+  ...other
+}) => {
+  return (
+    <TextField
+      {...other}
+      variant="outlined"
+      label={label}
+      multiline
+      InputLabelProps={{ shrink: true, ...InputLabelProps }}
+      InputProps={{
+        inputComponent: InputComponent,
+        ...InputProps
+      }}
+      inputProps={{ children: children }}
+    />
+  );
+};
+
+export default OutlinedDiv;