From 824e938a0dfaec75f75312fe05beda58a7e458db Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Tue, 3 Nov 2020 12:39:42 -0300
Subject: [PATCH] Delete a var that doesnt make sense
---
.../Components/Inputs/CreateInstitution.js | 7 +-
.../Components/Inputs/EmailInputs.js | 513 ++++++++++--------
2 files changed, 292 insertions(+), 228 deletions(-)
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index 21f3de57..e2543ca5 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -25,7 +25,6 @@ import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
-import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
//imports local files
import { apiUrl } from '../../../../env';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -42,8 +41,6 @@ const CreateInstitution = (props) => {
const [isLoading, setIsLoading] = useState(false)
- const [UpdateList, setUpdateList] = useState(false)
-
// Handle error in name
const [errorInName, setErrorInName] = useState({
error: false,
@@ -123,7 +120,6 @@ const CreateInstitution = (props) => {
Create(api, body).then(res => {
if (res) {
HandleSnack('A instituição foi criada com sucesso', true, 'success', '#228B22')
- setUpdateList(true)
} else {
HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
}
@@ -216,6 +212,9 @@ const CreateInstitution = (props) => {
Listar
</Button>
</Grid>
+
+ <div style={{height : '1em'}}></div>
+
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
<TextField
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 2d01d00e..0d7f29e2 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -16,23 +16,25 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useRef } from "react";
//material ui components
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from "@material-ui/core/CircularProgress";
import Checkbox from "@material-ui/core/Checkbox";
import SendRoundedIcon from "@material-ui/icons/SendRounded";
import Button from "@material-ui/core/Button";
-import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
import Paper from "@material-ui/core/Paper";
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from "@material-ui/core/IconButton";
//imports from local files
-import SnackBar from '../../../../Components/SnackbarComponent';
+import SnackBar from "../../../../Components/SnackbarComponent";
import { SendEmail } from "../../../Services";
import { apiUrl } from "../../../../env";
+//Jodit
+import JoditEditor from "jodit-react";
let sendToAll = false;
let rolesArr = [];
@@ -45,15 +47,44 @@ const EmailInputs = () => {
const [emails, setEmails] = useState("");
const [emailsAdress, setEmailsAdress] = useState([]);
const [subject, setSubject] = useState("");
- const [message, setMessage] = useState("");
+ const [message, setMessage] = useState("");
+
+ const [isSending, setIsSending] = useState(false);
+
+ const editor = useRef(null);
+
+ //Configs for jodit
+ const config = {
+ zIndex: 0,
+ readonly: false,
+ activeButtonsInReadOnly: ["source", "fullsize", "print", "about"],
+ toolbarButtonSize: "middle",
+ theme: "default",
+ saveModeInCookie: false,
+ spellcheck: true,
+ editorCssClass: false,
+ triggerChangeEvent: true,
+ height: 400,
+ direction: "ltr",
+ debugLanguage: false,
+ tabIndex: -1,
+ toolbar: true,
+ enter: "P",
+ useSplitMode: false,
+ colorPickerDefaultTab: "background",
+ imageDefaultWidth: 100,
+ events: {},
+ placeholder: "Digite sua mensagem...",
+ showXPathInStatusbar: false,
+ };
//Handle snack bar
const [snackInfo, setSnackInfo] = useState({
- message: '',
- icon: '',
+ message: "",
+ icon: "",
open: false,
- color: '',
- })
+ color: "",
+ });
//Controls the state of error in the textfields
const [errorInEmails, setErrorInEmail] = useState({
@@ -89,62 +120,62 @@ const EmailInputs = () => {
const [roles, setRoles] = useState([
{
label: "Editor",
- value: "editor",
+ value: 7,
isChecked: false,
},
{
label: "Admin",
- value: "admin",
+ value: 3,
isChecked: false,
},
{
label: "Curador",
- value: "curator",
+ value: 4,
isChecked: false,
},
{
label: "Professor",
- value: "teacher",
+ value: 1,
isChecked: false,
},
{
label: "Submetedor",
- value: "submitter",
+ value: 8,
isChecked: false,
},
{
label: "Aluno",
- value: "student",
+ value: 2,
isChecked: false,
},
{
label: "Moderador",
- value: "moderator",
+ value: 5,
isChecked: false,
},
{
label: "Parceiro",
- value: "partner",
+ value: 9,
isChecked: false,
},
{
label: "Supervisor",
- value: "supervisor",
+ value: 6,
isChecked: false,
},
{
label: "Publicador",
- value: "publisher",
+ value: 10,
isChecked: false,
},
]);
const handleChange = (e) => {
- const value = e.target.value
- if (value === 'All') {
- sendToAll = true
+ const value = e.target.value;
+ if (value === "All") {
+ sendToAll = true;
} else {
- sendToAll = false
+ sendToAll = false;
}
setOption(value);
};
@@ -195,64 +226,53 @@ const EmailInputs = () => {
if (errorInSubject.error) {
setErrorInSubject({
error: false,
- message: ''
- })
+ message: "",
+ });
}
setSubject(e.target.value);
};
- const MessageHandler = (e) => {
- if (errorInMessage.error) {
- setErrorInMessage({
- error: false,
- message: ''
- })
- }
- setMessage(e.target.value);
- };
-
const OnKeyPressHandler = (key) => {
if (key === 13) {
if (!isEmpty(emails)) {
- if (emails.includes('@')) {
- const arr = [...emailsAdress]
- arr.push(emails)
- setEmails('')
- setEmailsAdress(arr)
+ if (emails.includes("@")) {
+ const arr = [...emailsAdress];
+ arr.push(emails);
+ setEmails("");
+ setEmailsAdress(arr);
setErrorInEmail({
error: false,
- message: '',
- arroba: false
- })
+ message: "",
+ arroba: false,
+ });
} else {
setErrorInEmail({
error: true,
- message: 'Esse email não contém o caractere @',
- arroba: false
- })
+ message: "Esse email não contém o caractere @",
+ arroba: false,
+ });
}
} else {
setErrorInEmail({
error: true,
- message: 'Esse campo precisa ser preenchido',
- arroba: false
- })
+ message: "Esse campo precisa ser preenchido",
+ arroba: false,
+ });
}
-
}
- }
+ };
//Delete emails adress from the list to be sent a message
const HandleDelete = (i) => {
- const copyEmail = [...emailsAdress]
- copyEmail.splice(i, 1)
- setEmailsAdress(copyEmail)
- console.log(copyEmail)
- }
+ const copyEmail = [...emailsAdress];
+ copyEmail.splice(i, 1);
+ setEmailsAdress(copyEmail);
+ console.log(copyEmail);
+ };
const isEmpty = (text) => {
return text.length === 0 ? true : false;
- }
+ };
// Handle snack infos
const HandleSnack = (message, state, icon, color) => {
@@ -260,178 +280,222 @@ const EmailInputs = () => {
message: message,
icon: icon,
open: state,
- color: color
- })
- }
+ color: color,
+ });
+ };
- const submitRequest = async () => {
- console.log(rolesArr)
- console.log(emailsAdress)
- // if (!isEmpty(message) && !isEmpty(subject) && (!isEmpty(emailsAdress) || !isEmpty(rolesArr) || sendToAll)) {
- // const api = `${apiUrl}/email`;
- // const body = {
- // email: {
- // all_users: sendToAll,
- // subject: subject,
- // body: message,
- // emails: emailsAdress,
- // roles: rolesArr
- // },
- // };
- // SendEmail(api, body).then((res) => {
- // if (res) {
- // HandleSnack('O email foi enviado com sucesso', true, 'success', '#228B22')
- // } else {
- // HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
- // }
- // })
- // } else {
- // HandleSnack('Você precisa preencher algumas informações obrigatórias', true, 'warning', '#FFC125')
- // if (isEmpty(message)) {
- // setErrorInMessage({
- // error: true,
- // message: 'Esse campo precisa ser preenchido'
- // })
- // }
- // if (isEmpty(subject)) {
- // setErrorInSubject({
- // error: true,
- // message: 'Esse campo precisa ser preenchido'
- // })
- // }
- // }
+ const CleanFields = () => {
+ setMessage("");
+ setSubject("");
+ setEmailsAdress([]);
+ };
+ const submitRequest = async () => {
+ setIsSending(true);
+ if (
+ !isEmpty(message) &&
+ !isEmpty(subject) &&
+ (!isEmpty(emailsAdress) || !isEmpty(rolesArr) || sendToAll)
+ ) {
+ const api = `${apiUrl}/email`;
+ const body = {
+ email: {
+ all_users: sendToAll,
+ subject: subject,
+ body: message,
+ emails: emailsAdress,
+ roles: rolesArr,
+ },
+ };
+ SendEmail(api, body).then((res) => {
+ if (res) {
+ HandleSnack(
+ "O email foi enviado com sucesso",
+ true,
+ "success",
+ "#228B22"
+ );
+ } else {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ }
+ setIsSending(false);
+ CleanFields();
+ });
+ } else {
+ HandleSnack(
+ "Você precisa preencher algumas informações obrigatórias",
+ true,
+ "warning",
+ "#FFC125"
+ );
+ if (isEmpty(message)) {
+ setErrorInMessage({
+ error: true,
+ message: "Esse campo precisa ser preenchido",
+ });
+ }
+ if (isEmpty(subject)) {
+ setErrorInSubject({
+ error: true,
+ message: "Esse campo precisa ser preenchido",
+ });
+ }
+ setIsSending(false);
+ CleanFields();
+ }
};
return (
- <form style={{ width: "50%", display: "flex", flexDirection: "column" }}>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
-
- <TextField
- id="outlined-input"
- label="De *"
- defaultValue="integrada.contato@mec.gov.br"
- variant="outlined"
- disabled={true}
- />
- <div style={{ height: "1em" }} />
-
- <TextField
- select
- label="Para *"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
+ <div
+ style={{
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "space-around",
+ }}
+ >
+ <form
+ style={{
+ flex: 1,
+ display: "flex",
+ flexDirection: "column",
+ }}
>
- {options.map((option, index) => (
- <MenuItem onClick={() => setIndex(index)} key={option.value} value={option.value}>
- {option.label}
- </MenuItem>
- ))}
- </TextField>
- <div style={{ height: "1em" }} />
-
- {index === 0 ? null : index === 1 ? (
- <FormGroup style={{marginBottom : '1em'}}>
- {roles.map((role, index) => (
- <FormControlLabel
- key={index}
- control={
- <Checkbox
- checked={role.isChecked}
- onChange={() => handleChangeCheckBox(index)}
- name={role.label}
- color='primary'
- />
- }
- label={role.label}
- />
- ))}
- </FormGroup>
- ) : (
- <>
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- flexWrap: "wrap",
- justifyContent: 'Space-between'
- }}
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <TextField
+ id="outlined-input"
+ label="De *"
+ defaultValue="integrada.contato@mec.gov.br"
+ variant="outlined"
+ disabled={true}
+ />
+ <div style={{ height: "1em" }} />
+
+ <TextField
+ select
+ label="Para *"
+ value={option ? option : ""}
+ onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
+ >
+ {options.map((option, index) => (
+ <MenuItem
+ onClick={() => setIndex(index)}
+ key={option.value}
+ value={option.value}
>
- {emailsAdress.map((email, index) => (
- <Paper
- elevation={3}
- key={index}
- style={{
- borderRadius: 28,
- paddingLeft: '0.5em',
- marginBottom: "1em",
- marginRight: "1em",
- backgroundColor: "#D3D3D3",
- fontSize: 14,
- display: 'flex',
- flexDirection: 'row',
- alignItems: 'center'
- }}
- >
- {email}
- <IconButton onClick={() => HandleDelete(index)}>
- <CloseRoundedIcon color='primary' />
- </IconButton>
- </Paper>
- ))}
- </div>
-
- <TextField
- id="outlined-input"
- label="Emails"
- rows={1}
- error={errorInEmails.error}
- helperText={errorInEmails.message}
- value={emails}
- onKeyPress={(key) => OnKeyPressHandler(key.which)}
- onChange={EmailsHandler}
- // onBlur={ShowEmails}
- placeholder="Digite um email por vez e pressione Enter"
- variant="outlined"
- style={{ marginBottom: "1em" }}
- />
- </>
- )}
-
- <TextField
- id="outlined-input"
- label="Assunto"
- error={errorInSubject.error}
- helperText={errorInSubject.message}
- placeholder="Digite o assunto do email"
- onChange={SubjectHandler}
- variant="outlined"
- />
+ {option.label}
+ </MenuItem>
+ ))}
+ </TextField>
+ <div style={{ height: "1em" }} />
+
+ {index === 0 ? null : index === 1 ? (
+ <FormGroup style={{ marginBottom: "1em" }}>
+ {roles.map((role, index) => (
+ <FormControlLabel
+ key={index}
+ control={
+ <Checkbox
+ checked={role.isChecked}
+ onChange={() => handleChangeCheckBox(index)}
+ name={role.label}
+ color="primary"
+ />
+ }
+ label={role.label}
+ />
+ ))}
+ </FormGroup>
+ ) : (
+ <>
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
+ justifyContent: "Space-between",
+ }}
+ >
+ {emailsAdress.map((email, index) => (
+ <Paper
+ elevation={3}
+ key={index}
+ style={{
+ borderRadius: 28,
+ paddingLeft: "0.5em",
+ marginBottom: "1em",
+ marginRight: "1em",
+ backgroundColor: "#D3D3D3",
+ fontSize: 14,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ }}
+ >
+ {email}
+ <IconButton onClick={() => HandleDelete(index)}>
+ <CloseRoundedIcon color="primary" />
+ </IconButton>
+ </Paper>
+ ))}
+ </div>
+
+ <TextField
+ id="outlined-input"
+ label="Emails"
+ rows={1}
+ error={errorInEmails.error}
+ helperText={errorInEmails.message}
+ value={emails}
+ onKeyPress={(key) => OnKeyPressHandler(key.which)}
+ onChange={EmailsHandler}
+ // onBlur={ShowEmails}
+ placeholder="Digite um email por vez e pressione Enter"
+ variant="outlined"
+ style={{ marginBottom: "1em" }}
+ />
+ </>
+ )}
+
+ <TextField
+ id="outlined-input"
+ label="Assunto"
+ value={subject}
+ error={errorInSubject.error}
+ helperText={errorInSubject.message}
+ placeholder="Digite o assunto do email"
+ onChange={SubjectHandler}
+ variant="outlined"
+ />
+ </form>
+
<div style={{ height: "1em" }} />
- <TextField
- id="outlined-multiline-static"
- label="Mensagem"
- onChange={MessageHandler}
- error={errorInMessage.error}
- helperText={errorInMessage.message}
- multiline
- rows={5}
- placeholder="Digite sua mensagem..."
- variant="outlined"
- />
+ <div style={{ flex: 1 }}>
+ <JoditEditor
+ ref={editor}
+ value={message}
+ config={config}
+ tabIndex={1} // tabIndex of textarea
+ onBlur={(newContent) => setMessage(newContent.target.innerHTML)} // preferred to use only this option to update the content for performance reasons
+ onChange={(newContent) => { }}
+ />
+ </div>
<div style={{ marginTop: 18 }}>
<Button
@@ -439,13 +503,14 @@ const EmailInputs = () => {
submitRequest();
}}
variant="contained"
+ disabled={isSending}
color="primary"
startIcon={<SendRoundedIcon />}
>
- Enviar
- </Button>
+ {isSending ? <CircularProgress /> : "Enviar"}
+ </Button>
</div>
- </form>
+ </div>
);
};
--
GitLab