Skip to content
Snippets Groups Projects
Commit 8007cab2 authored by lfr20's avatar lfr20
Browse files

Statrt to build the system to send email

parent 9b068aa8
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!40merge admin into develop,!37Merge sistema_admin into Update_Admin_System
Hide whitespace changes
Inline Side-by-side
src/Admin/Components/Components/Inputs/EmailInputs.js
+ 347
− 143
View file @ 8007cab2
......@@ -15,234 +15,438 @@ 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 } from 'react';
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 Checkbox from '@material-ui/core/Checkbox';
import React, { useState, useEffect } 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 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 Paper from "@material-ui/core/Paper";
import IconButton from '@material-ui/core/IconButton';
//imports from local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { SendEmail } from "../../../Services";
import { apiUrl } from "../../../../env";
let sendToAll = false;
let rolesArr = [];
const EmailInputs = () => {
const [option, setOption] = useState('Todos os usuários'); //labels of the text field 'to'
const [index, setIndex] = useState(0); //Used to display something above the text field 'to' depending on what the user clicks
const [option, setOption] = useState("Todos os usuários"); //labels of the text field 'to'
const [index, setIndex] = useState(0); //Used to display something above the text field 'to' depending on what the user clicks
// Capture th text insert by the user in the fields
const [emails, setEmails] = useState('');
const [subject, setSubject] = useState('');
const [message, setMessage] = useState('');
const [emails, setEmails] = useState("");
const [emailsAdress, setEmailsAdress] = useState([]);
const [subject, setSubject] = useState("");
const [message, setMessage] = useState("");
//Handle snack bar
const [snackInfo, setSnackInfo] = useState({
message: '',
icon: '',
open: false,
color: '',
})
//Controls the state of error in the textfields
const [errorInEmails, setErrorInEmail] = useState({
error: false,
arroba: false,
message: '',
message: "",
});
const [errorInSubject, setErrorInSubject] = useState({
error: false,
message: '',
message: "",
});
const [errorInMessage, setErrorInMessage] = useState({
error: false,
message: '',
message: "",
});
const options = [
{
value: 'All',
label: 'Todos os usuários',
value: "All",
label: "Todos os usuários",
},
{
value: 'Roles',
label: 'Roles/Permissões específicas',
value: "Roles",
label: "Roles/Permissões específicas",
},
{
value: 'Emails',
label: '1 ou mais emails',
value: "Emails",
label: "1 ou mais emails",
},
];
//Roles of permissions
const [roles, setRoles] = useState([
{
label: 'Editor',
label: "Editor",
value: "editor",
isChecked: false,
value: 3
},
{
label: 'Admin',
label: "Admin",
value: "admin",
isChecked: false,
value: 7
},
{
label: 'Curador',
label: "Curador",
value: "curator",
isChecked: false,
value: 5
},
{
label: 'Professor',
label: "Professor",
value: "teacher",
isChecked: false,
value: 5
},
{
label: 'Submetedor',
label: "Submetedor",
value: "submitter",
isChecked: false,
value: 5
},
{
label: 'Aluno',
label: "Aluno",
value: "student",
isChecked: false,
value: 5
},
{
label: 'Moderador',
label: "Moderador",
value: "moderator",
isChecked: false,
value: 5
},
{
label: 'Parceiro',
label: "Parceiro",
value: "partner",
isChecked: false,
value: 5
},
{
label: 'Supervisor',
label: "Supervisor",
value: "supervisor",
isChecked: false,
value: 5
},
{
label: 'Publicador',
label: "Publicador",
value: "publisher",
isChecked: false,
value: 5
},
]);
const handleChange = (e) => {
setOption(e.target.value);
const value = e.target.value
if (value === 'All') {
sendToAll = true
} else {
sendToAll = false
}
setOption(value);
};
const handleChangeCheckBox = (i) => {
const currState = [...roles];
currState[i].isChecked = !currState[i].isChecked;
setRoles(currState);
}
if (currState[i].isChecked) {
rolesArr[i] = currState[i].value;
} else {
rolesArr[i] = null;
}
};
const EmailsHandler = (e) => {
setEmails(e.target.value)
setEmails(e.target.value);
if (emails.length <= 1) {
const obj = { ...errorInEmails }
obj.error = true
obj.message = '* O email é pequeno'
setErrorInEmail(obj)
const obj = { ...errorInEmails };
obj.error = true;
obj.message = "* O email é pequeno";
setErrorInEmail(obj);
} else {
const obj = { ...errorInEmails }
obj.error = false
obj.message = ''
setErrorInEmail(obj)
const obj = { ...errorInEmails };
obj.error = false;
obj.message = "";
setErrorInEmail(obj);
const tam = emails.length;
if (emails[tam - 1] !== '@') {
const obj = { ...errorInEmails }
if(!obj.arroba){
obj.error = true
obj.message = '* Está faltando o caracter @ para ser identificado como um email válido'
setErrorInEmail(obj)
if (emails[tam - 1] !== "@") {
const obj = { ...errorInEmails };
if (!obj.arroba) {
obj.error = true;
obj.message =
"* Está faltando o caracter @ para ser identificado como um email válido";
setErrorInEmail(obj);
}
} else {
const obj = { ...errorInEmails }
obj.arroba = true
obj.error = false
obj.message = ''
setErrorInEmail(obj)
const obj = { ...errorInEmails };
obj.arroba = true;
obj.error = false;
obj.message = "";
setErrorInEmail(obj);
}
}
console.log(emails)
}
};
const SubjectHandler = (e) => {
setSubject(e.target.value)
console.log(subject)
}
if (errorInSubject.error) {
setErrorInSubject({
error: false,
message: ''
})
}
setSubject(e.target.value);
};
const MessageHandler = (e) => {
setMessage(e.target.value)
console.log(message)
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)
setErrorInEmail({
error: false,
message: '',
arroba: false
})
} else {
setErrorInEmail({
error: true,
message: 'Esse email não contém o caractere @',
arroba: false
})
}
} else {
setErrorInEmail({
error: true,
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 isEmpty = (text) => {
return text.length === 0 ? true : false;
}
// Handle snack infos
const HandleSnack = (message, state, icon, color) => {
setSnackInfo({
message: message,
icon: icon,
open: state,
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'
// })
// }
// }
};
return (
<form>
<div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
<TextField
id="outlined-input"
label="De *"
defaultValue='integrada.contato@mec.gov.br'
variant="outlined"
disabled={true}
/>
<div style={{ height: '1em' }} />
<TextField
select
label="Para *"
defaultValue={option}
value={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}>
{option.label}
</MenuItem>
<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"
>
{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}
/>
))}
</TextField>
<div style={{ height: '1em' }} />
{
index === 0 ? null :
index === 1 ?
<FormGroup>
{roles.map((role, index) => (
<FormControlLabel
key={role.value}
control={<Checkbox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label} />}
label={role.label}
/>
))}
</FormGroup>
:
<TextField
id="outlined-input"
label="Emails"
multiline
rows={2}
error={errorInEmails.error}
helperText={errorInEmails.message}
onChange={EmailsHandler}
placeholder='Digite o edereço dos emails que você deseja enviar a mensagem'
variant="outlined"
style={{ marginBottom: '1em' }}
/>
}
</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"
error={errorInSubject.error}
helperText={errorInSubject.message}
placeholder="Digite o assunto do email"
onChange={SubjectHandler}
variant="outlined"
/>
<div style={{ height: "1em" }} />
<TextField
id="outlined-input"
label="Assunto"
placeholder='Digite o assunto do email'
onChange={SubjectHandler}
variant="outlined"
/>
<div style={{ height: '1em' }} />
<TextField
id="outlined-multiline-static"
label="Mensagem"
onChange={MessageHandler}
multiline
rows={5}
placeholder='Digite sua mensagem...'
variant="outlined"
/>
<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={{ marginTop: 18 }}>
<Button
onClick={() => {
submitRequest();
}}
variant="contained"
color="primary"
startIcon={<SendRoundedIcon />}
>
Enviar
</Button>
</div>
</form>
);
}
};
export default EmailInputs;
\ No newline at end of file
export default EmailInputs;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment