From 80ff48dcb189f163e4d606e244d9fb8a7799014e Mon Sep 17 00:00:00 2001
From: Gabriel Silva Hermida <gash18@inf.ufpr.br>
Date: Thu, 15 Oct 2020 11:42:48 -0300
Subject: [PATCH] Issue #52: Add multiple answers interface
Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>
---
.../fieldsAnswerForm/FieldFooterOptions.js | 40 -----
.../fieldsAnswerForm/FormFieldCheckbox.js | 24 ++-
.../fieldsAnswerForm/FormFieldRadio.js | 28 ++--
.../fieldsAnswerForm/FormFieldSelect.js | 28 ++--
.../fieldsAnswerForm/FormFieldText.js | 22 ++-
.../fieldsAnswerForm/FormFieldTitle.js | 28 ++--
.../fieldsDisplayForm/DisplayForm.js | 52 ++++---
.../fieldsDisplayForm/FormFieldTitle.js | 35 ++++-
.../utils/BackendTranslation.js | 1 +
.../utils/FormComposition.js | 3 +-
.../utils/FrontEndTranslation.js | 8 +-
.../JornalFolder/FieldFooterOptions.js | 40 -----
.../JornalFolder/FormFieldCheckbox.js | 14 +-
.../JornalFolder/FormFieldRadio.js | 16 +-
.../JornalFolder/FormFieldSelect.js | 2 -
.../JornalFolder/FormFieldTitle.js | 24 ++-
.../fieldsGetForm/JornalFolder/FormJornal.js | 18 ++-
.../SummaryFolder/FieldFooterOptions.js | 33 -----
.../SummaryFolder/FormFieldTitle.js | 28 ++--
.../SummaryFolder/FormSummary.js | 14 ++
.../fieldsVisualizeForm/FieldFooterOptions.js | 40 -----
.../fieldsVisualizeForm/FormFieldCheckbox.js | 2 -
.../fieldsVisualizeForm/FormFieldRadio.js | 2 -
.../fieldsVisualizeForm/FormFieldSelect.js | 2 -
.../fieldsVisualizeForm/FormFieldTitle.js | 2 -
src/contexts/FormContext.js | 15 +-
src/contexts/useForm.js | 59 ++++----
src/pages/Acknowledgement.js | 79 ++++++++++
src/pages/AnswerForm.js | 52 ++++---
src/pages/GetForm.js | 29 ++--
src/pages/ListForms.js | 26 ++--
src/pages/SignUp.js | 140 +++++++++---------
src/pages/VisualizeForm.js | 26 +++-
src/routes.js | 4 +-
34 files changed, 459 insertions(+), 477 deletions(-)
delete mode 100644 src/components/fieldsAnswerForm/FieldFooterOptions.js
delete mode 100644 src/components/fieldsGetForm/JornalFolder/FieldFooterOptions.js
delete mode 100644 src/components/fieldsGetForm/SummaryFolder/FieldFooterOptions.js
delete mode 100644 src/components/fieldsVisualizeForm/FieldFooterOptions.js
create mode 100644 src/pages/Acknowledgement.js
diff --git a/src/components/fieldsAnswerForm/FieldFooterOptions.js b/src/components/fieldsAnswerForm/FieldFooterOptions.js
deleted file mode 100644
index f6446f0..0000000
--- a/src/components/fieldsAnswerForm/FieldFooterOptions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import TextField from '@material-ui/core/TextField';
-import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
-import IconButton from '@material-ui/core/IconButton';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-import CloseIcon from '@material-ui/icons/Close';
-import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function FieldFooterOptions(props) {
-
- return (
- <>
- <FormControlLabel
- control={
- <Switch
- onChange={e => props.setRequiredField(props.idq) }
- value="required"
- color="primary"
- checked={props.required}
- />
- }
- label="Obrigatória"
- />
- <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
- <DeleteOutlinedIcon />
- </IconButton>
- </>
- );
-
-
-}
-
-
-export default FieldFooterOptions;
\ No newline at end of file
diff --git a/src/components/fieldsAnswerForm/FormFieldCheckbox.js b/src/components/fieldsAnswerForm/FormFieldCheckbox.js
index 3cb3848..f2f9eb7 100644
--- a/src/components/fieldsAnswerForm/FormFieldCheckbox.js
+++ b/src/components/fieldsAnswerForm/FormFieldCheckbox.js
@@ -5,31 +5,29 @@ import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Checkbox from "@material-ui/core/Checkbox";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
minHeight: "15%",
margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: theme.spacing(70),
},
["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ width: theme.spacing(40),
+ },
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldCheckbox(props) {
@@ -38,7 +36,7 @@ function FormFieldCheckbox(props) {
/** Temporary array to be used as a type. */
function vetorTmp() {
let tmp = [];
- props.options.map(x => {
+ props.options.map((x) => {
tmp.push(false);
});
return tmp;
@@ -76,11 +74,11 @@ function FormFieldCheckbox(props) {
let isValid = true;
setValid("");
- props.validation.map(val => {
+ props.validation.map((val) => {
switch (val.type) {
case 6:
if (
- !answer.some(value => {
+ !answer.some((value) => {
return value === true;
})
) {
diff --git a/src/components/fieldsAnswerForm/FormFieldRadio.js b/src/components/fieldsAnswerForm/FormFieldRadio.js
index 2398fe7..ef01713 100644
--- a/src/components/fieldsAnswerForm/FormFieldRadio.js
+++ b/src/components/fieldsAnswerForm/FormFieldRadio.js
@@ -6,31 +6,29 @@ import Typography from "@material-ui/core/Typography";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
minheight: theme.spacing(18),
margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: theme.spacing(70),
},
["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ width: theme.spacing(40),
+ },
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldRadio(props) {
@@ -39,7 +37,7 @@ function FormFieldRadio(props) {
/** Temporary array to be used as a type. */
function vetorTmp() {
let tmp = [];
- props.options.map(x => {
+ props.options.map((x) => {
tmp.push(false);
});
return tmp;
@@ -62,11 +60,11 @@ function FormFieldRadio(props) {
let isValid = true;
setValid("");
- props.validation.map(val => {
+ props.validation.map((val) => {
switch (val.type) {
case 2:
if (
- !answer.some(value => {
+ !answer.some((value) => {
return value === true;
})
) {
@@ -103,12 +101,12 @@ function FormFieldRadio(props) {
* Function to set the selectedValue as the event.
* @param event - React event to get what is selected.
*/
- const handleChange = event => {
+ const handleChange = (event) => {
setSelectedValue(event.target.value);
};
/** HTML object to be displayed on component return. */
- const options = props.options.map(function(x, index) {
+ const options = props.options.map(function (x, index) {
return (
<span>
<Typography
diff --git a/src/components/fieldsAnswerForm/FormFieldSelect.js b/src/components/fieldsAnswerForm/FormFieldSelect.js
index e4845ae..e5b7964 100644
--- a/src/components/fieldsAnswerForm/FormFieldSelect.js
+++ b/src/components/fieldsAnswerForm/FormFieldSelect.js
@@ -6,31 +6,29 @@ import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
minheight: theme.spacing(18),
margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: theme.spacing(70),
},
["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ width: theme.spacing(40),
+ },
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldSelect(props) {
@@ -39,7 +37,7 @@ function FormFieldSelect(props) {
/** Temporary array to be used as a type. */
function vetorTmp() {
let tmp = [];
- props.options.map(x => {
+ props.options.map((x) => {
tmp.push(false);
});
return tmp;
@@ -59,11 +57,11 @@ function FormFieldSelect(props) {
let isValid = true;
setValid("");
- props.validation.map(val => {
+ props.validation.map((val) => {
switch (val.type) {
case 2:
if (
- !answer.some(value => {
+ !answer.some((value) => {
return value === true;
})
) {
@@ -83,7 +81,7 @@ function FormFieldSelect(props) {
* Function to set the selectedValue as the event.
* @param event - React event to get what is selected.
*/
- const handleChange = event => {
+ const handleChange = (event) => {
validate([]);
setselectedValue(event.target.value);
};
@@ -109,7 +107,7 @@ function FormFieldSelect(props) {
}
/** HTML object to be displayed on component return. */
- const options = props.options.map(function(x) {
+ const options = props.options.map(function (x) {
return <MenuItem value={x.placement}>{x.value}</MenuItem>;
});
diff --git a/src/components/fieldsAnswerForm/FormFieldText.js b/src/components/fieldsAnswerForm/FormFieldText.js
index 97a5315..bb856bc 100644
--- a/src/components/fieldsAnswerForm/FormFieldText.js
+++ b/src/components/fieldsAnswerForm/FormFieldText.js
@@ -5,31 +5,29 @@ import Paper from "@material-ui/core/Paper";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
height: "15%",
margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: theme.spacing(70),
},
["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ width: theme.spacing(40),
+ },
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldText(props) {
@@ -46,7 +44,7 @@ function FormFieldText(props) {
let isValid = true;
setValid("");
- props.validation.map(val => {
+ props.validation.map((val) => {
switch (val.type) {
case 2:
if (answer === "") {
@@ -82,7 +80,7 @@ function FormFieldText(props) {
* Function to send answer to the father component.
* @param event - React event to get what is typed in.
*/
- const handleChange = event => {
+ const handleChange = (event) => {
if (validate(event.target.value)) {
props.createAnswer(props.id, event.target.value, false);
} else {
diff --git a/src/components/fieldsAnswerForm/FormFieldTitle.js b/src/components/fieldsAnswerForm/FormFieldTitle.js
index 028d969..ce4906d 100644
--- a/src/components/fieldsAnswerForm/FormFieldTitle.js
+++ b/src/components/fieldsAnswerForm/FormFieldTitle.js
@@ -4,48 +4,46 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
margin: theme.spacing(2),
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: theme.spacing(70),
},
["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ width: theme.spacing(40),
+ },
},
questionsGrid: {
marginBottom: "20px",
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
- }
+ width: theme.spacing(70),
+ },
},
title: {
fontSize: "45px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "35px"
+ fontSize: "35px",
},
["@media (max-width:590px)"]: {
- fontSize: "25px"
- }
+ fontSize: "25px",
+ },
},
description: {
fontSize: "25px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "20px"
+ fontSize: "20px",
},
["@media (max-width:590px)"]: {
- fontSize: "15px"
- }
- }
+ fontSize: "15px",
+ },
+ },
}));
function FormFieldText(props) {
diff --git a/src/components/fieldsDisplayForm/DisplayForm.js b/src/components/fieldsDisplayForm/DisplayForm.js
index 236742f..682db7b 100644
--- a/src/components/fieldsDisplayForm/DisplayForm.js
+++ b/src/components/fieldsDisplayForm/DisplayForm.js
@@ -19,51 +19,51 @@ import { FormEditionContext } from "../../contexts/FormContext";
import useForm from "../../contexts/useForm";
import SubmitButton from "./SubmitButton";
/** CSS styles used on page components */
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
app: {
margin: "0",
padding: "40px",
display: "flex",
["@media (max-width: 600px)"]: {
flexDirection: "column-reverse",
- justifyContent: "flex-end"
+ justifyContent: "flex-end",
},
paddingBottom: "78px",
["@media (min-width: 600px)"]: {
- minHeight: "calc(100vh - 92.4px - 78px -60px)"
+ minHeight: "calc(100vh - 92.4px - 78px -60px)",
},
minHeight: "calc(100vh - 71.6px - 78px -60px)",
- marginBottom: "60px"
+ marginBottom: "60px",
},
addButton: {
- fontSize: "100%"
+ fontSize: "100%",
},
sideMenuFormatingGrid: {
["@media (max-width:600px)"]: {
- marginTop: "-90px"
- }
+ marginTop: "-90px",
+ },
},
sizeFormating: {
["@media (max-width:600px)"]: {
["@media (max-width:430px)"]: {
marginLeft: "1%",
- width: "95%"
+ width: "95%",
},
- marginLeft: "2%"
- }
+ marginLeft: "2%",
+ },
},
button: {
marginLeft: "5%",
backgroundColor: "#a30202",
minWidth: "92px",
["@media (max-width:600px)"]: {
- marginTop: "52px"
+ marginTop: "52px",
},
width: "12%",
["@media (max-width:600px)"]: {
- marginTop: "52px"
- }
- }
+ marginTop: "52px",
+ },
+ },
}));
/** CSS style used through Material Ui. */
const theme = createMuiTheme({
@@ -71,19 +71,19 @@ const theme = createMuiTheme({
MuiInput: {
underline: {
"&:before": {
- borderBottom: "1px solid #35c7fc"
+ borderBottom: "1px solid #35c7fc",
},
"&:after": {
- borderBottom: "1px solid #3f51b5"
- }
- }
+ borderBottom: "1px solid #3f51b5",
+ },
+ },
},
MuiButton: {
label: {
- color: "white"
- }
- }
- }
+ color: "white",
+ },
+ },
+ },
});
/** Main function that returns the children that composes the form creation or edition page. */
function DisplayForm() {
@@ -107,6 +107,9 @@ function DisplayForm() {
history.push(path);
}
};
+ useEffect(() => {
+ console.log(form);
+ }, [form]);
/** Error handling -> every time the form object is updated, it is verified to evaluate it's error messages,
* so the submit button can be enabled or disabled.
@@ -213,12 +216,13 @@ function DisplayForm() {
description={x.description}
idq={index}
error={x.error}
+ multAnswer={x.mult_answer}
/>
);
})
) : (
- <p> carregando... </p>
- )}
+ <p> carregando... </p>
+ )}
{provided.placeholder}
</Grid>
);
diff --git a/src/components/fieldsDisplayForm/FormFieldTitle.js b/src/components/fieldsDisplayForm/FormFieldTitle.js
index 257f5ec..108af54 100644
--- a/src/components/fieldsDisplayForm/FormFieldTitle.js
+++ b/src/components/fieldsDisplayForm/FormFieldTitle.js
@@ -4,6 +4,9 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import TextField from "@material-ui/core/TextField";
import useForm from "../../contexts/useForm";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Tooltip from "@material-ui/core/Tooltip";
+import Switch from "@material-ui/core/Switch";
/** CSS styles used on page components. */
const useStyles = makeStyles((theme) => ({
@@ -47,7 +50,11 @@ function FormFieldText(props) {
/** Style class. */
const classes = useStyles();
/** Importing functions to change the question and the description values. */
- const { setQuestionField, setDescriptionField } = useForm();
+ const {
+ setQuestionField,
+ setDescriptionField,
+ setMultipleAnswer,
+ } = useForm();
return (
<Paper className={classes.paper}>
<TextField
@@ -91,10 +98,28 @@ function FormFieldText(props) {
item
container
direction="row"
- justify="flex-end"
- alignItems="flex-end"
- xs={3}
- ></Grid>
+ justify="flex-start"
+ alignItems="flex-start"
+ xs={12}
+ >
+ <Tooltip
+ title="Marcar como obrigatório"
+ aria-label="Marcar como obrigatório"
+ >
+ <FormControlLabel
+ control={
+ <Switch
+ onChange={(e) => setMultipleAnswer()}
+ value="required"
+ color="primary"
+ checked={props.multAnswer}
+ />
+ }
+ style={{ size: "0px" }}
+ label="Habilitar resposta múltipla por usuário"
+ />
+ </Tooltip>
+ </Grid>
</Paper>
);
}
diff --git a/src/components/fieldsDisplayForm/utils/BackendTranslation.js b/src/components/fieldsDisplayForm/utils/BackendTranslation.js
index 06687d9..6e973d1 100644
--- a/src/components/fieldsDisplayForm/utils/BackendTranslation.js
+++ b/src/components/fieldsDisplayForm/utils/BackendTranslation.js
@@ -91,6 +91,7 @@ export default async function createBackendForm(form) {
title: form[0].question,
description: form[0].description,
inputs: [],
+ answerTimes: form[0].mult_answer,
};
for (var i = 1; i < form.length; i++) {
setInput(
diff --git a/src/components/fieldsDisplayForm/utils/FormComposition.js b/src/components/fieldsDisplayForm/utils/FormComposition.js
index 133b30c..6ba7816 100644
--- a/src/components/fieldsDisplayForm/utils/FormComposition.js
+++ b/src/components/fieldsDisplayForm/utils/FormComposition.js
@@ -5,11 +5,12 @@ import uuid from "uuid/v4";
* @param title - the title;
* @param description - the description of the form.
*/
-export function pushTitle(form, title, description, id) {
+export function pushTitle(form, title, description, id, answerTimes) {
return form.push({
type: "title",
question: title ? title : "",
description: description ? description : "",
+ mult_answer: answerTimes,
id: id ? id : "",
error: {
errorMsg: {
diff --git a/src/components/fieldsDisplayForm/utils/FrontEndTranslation.js b/src/components/fieldsDisplayForm/utils/FrontEndTranslation.js
index d0f158e..66b6fa7 100644
--- a/src/components/fieldsDisplayForm/utils/FrontEndTranslation.js
+++ b/src/components/fieldsDisplayForm/utils/FrontEndTranslation.js
@@ -30,7 +30,13 @@ function validationTranslate(validation) {
*/
export function createFrontendForm(formData) {
let json = [];
- pushTitle(json, formData.title, formData.description, formData.id);
+ pushTitle(
+ json,
+ formData.title,
+ formData.description,
+ formData.id,
+ formData.answerTimes
+ );
formData.inputs.forEach((option) => {
switch (option.type) {
diff --git a/src/components/fieldsGetForm/JornalFolder/FieldFooterOptions.js b/src/components/fieldsGetForm/JornalFolder/FieldFooterOptions.js
deleted file mode 100644
index f6446f0..0000000
--- a/src/components/fieldsGetForm/JornalFolder/FieldFooterOptions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import TextField from '@material-ui/core/TextField';
-import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
-import IconButton from '@material-ui/core/IconButton';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-import CloseIcon from '@material-ui/icons/Close';
-import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function FieldFooterOptions(props) {
-
- return (
- <>
- <FormControlLabel
- control={
- <Switch
- onChange={e => props.setRequiredField(props.idq) }
- value="required"
- color="primary"
- checked={props.required}
- />
- }
- label="Obrigatória"
- />
- <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
- <DeleteOutlinedIcon />
- </IconButton>
- </>
- );
-
-
-}
-
-
-export default FieldFooterOptions;
\ No newline at end of file
diff --git a/src/components/fieldsGetForm/JornalFolder/FormFieldCheckbox.js b/src/components/fieldsGetForm/JornalFolder/FormFieldCheckbox.js
index 119e9a9..5430e4d 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormFieldCheckbox.js
+++ b/src/components/fieldsGetForm/JornalFolder/FormFieldCheckbox.js
@@ -5,23 +5,21 @@ import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Checkbox from "@material-ui/core/Checkbox";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
marginBottom: "2%",
["@media (max-width: 896px)"]: {
- width: "300px"
- }
+ width: "300px",
+ },
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
- }
+ color: "black",
+ },
}));
function FormFieldCheckbox(props) {
diff --git a/src/components/fieldsGetForm/JornalFolder/FormFieldRadio.js b/src/components/fieldsGetForm/JornalFolder/FormFieldRadio.js
index 441eb79..5a58cbe 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormFieldRadio.js
+++ b/src/components/fieldsGetForm/JornalFolder/FormFieldRadio.js
@@ -6,23 +6,21 @@ import Typography from "@material-ui/core/Typography";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
marginBottom: "2%",
["@media (max-width: 896px)"]: {
- width: "300px"
- }
+ width: "300px",
+ },
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
- }
+ color: "black",
+ },
}));
function FormFieldRadio(props) {
@@ -43,7 +41,7 @@ function FormFieldRadio(props) {
}
/** HTML object to be displayed on component return. */
- const options = props.options.map(function(x, index) {
+ const options = props.options.map(function (x, index) {
return (
<span>
<Typography className={classes.text} variant="h7">
diff --git a/src/components/fieldsGetForm/JornalFolder/FormFieldSelect.js b/src/components/fieldsGetForm/JornalFolder/FormFieldSelect.js
index db34cfe..55ff6fc 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormFieldSelect.js
+++ b/src/components/fieldsGetForm/JornalFolder/FormFieldSelect.js
@@ -6,8 +6,6 @@ import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
diff --git a/src/components/fieldsGetForm/JornalFolder/FormFieldTitle.js b/src/components/fieldsGetForm/JornalFolder/FormFieldTitle.js
index d334754..7c270de 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormFieldTitle.js
+++ b/src/components/fieldsGetForm/JornalFolder/FormFieldTitle.js
@@ -4,43 +4,41 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
height: theme.spacing(22),
margin: theme.spacing(2),
- color: "#000000"
+ color: "#000000",
},
questionsGrid: {
marginBottom: "20px",
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
- }
+ width: theme.spacing(70),
+ },
},
title: {
fontSize: "45px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "35px"
+ fontSize: "35px",
},
["@media (max-width:590px)"]: {
- fontSize: "25px"
- }
+ fontSize: "25px",
+ },
},
description: {
fontSize: "30px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "25px"
+ fontSize: "25px",
},
["@media (max-width:590px)"]: {
- fontSize: "15px"
- }
- }
+ fontSize: "15px",
+ },
+ },
}));
function FormFieldText(props) {
diff --git a/src/components/fieldsGetForm/JornalFolder/FormJornal.js b/src/components/fieldsGetForm/JornalFolder/FormJornal.js
index 102d5d2..7a5db6a 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormJornal.js
+++ b/src/components/fieldsGetForm/JornalFolder/FormJornal.js
@@ -47,11 +47,8 @@ const useStyles = makeStyles(theme => ({
marginTop: "10px"
},
- date: {
- marginLeft: "30%",
- ["@media (max-width: 494px)"]: {
- marginLeft: "3%"
- }
+ msg: {
+ textAlign: "center"
}
}));
@@ -110,7 +107,16 @@ function Jornal(props) {
justify="center"
>
<div>
- <Grid container item className={classes.date}>
+ {props.multAnswer ? (
+ <Grid className={classes.msg}>
+ <Typography style={{ wordWrap: "break-word" }} gutterBottom>
+ Esse formulário permite multiplas respostas de um mesmo usuário
+ </Typography>
+ </Grid>
+ ) : (
+ <Grid />
+ )}
+ <Grid className={classes.msg}>
<Typography>
Data da resposta: {manageDate(props.timestamp[selectedForm])}
</Typography>
diff --git a/src/components/fieldsGetForm/SummaryFolder/FieldFooterOptions.js b/src/components/fieldsGetForm/SummaryFolder/FieldFooterOptions.js
deleted file mode 100644
index ebc8504..0000000
--- a/src/components/fieldsGetForm/SummaryFolder/FieldFooterOptions.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import DeleteOutlinedIcon from "@material-ui/icons/DeleteOutlined";
-import IconButton from "@material-ui/core/IconButton";
-import Switch from "@material-ui/core/Switch";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-
-function FieldFooterOptions(props) {
- return (
- <>
- <FormControlLabel
- control={
- <Switch
- onChange={e => props.setRequiredField(props.idq)}
- value="required"
- color="primary"
- checked={props.required}
- />
- }
- label="Obrigatória"
- />
- <IconButton
- aria-label="delete"
- onClick={() => {
- props.deleteFromForm(props.idq);
- }}
- >
- <DeleteOutlinedIcon />
- </IconButton>
- </>
- );
-}
-
-export default FieldFooterOptions;
diff --git a/src/components/fieldsGetForm/SummaryFolder/FormFieldTitle.js b/src/components/fieldsGetForm/SummaryFolder/FormFieldTitle.js
index cf2c22e..43fc977 100644
--- a/src/components/fieldsGetForm/SummaryFolder/FormFieldTitle.js
+++ b/src/components/fieldsGetForm/SummaryFolder/FormFieldTitle.js
@@ -4,9 +4,7 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
@@ -14,39 +12,39 @@ const useStyles = makeStyles(theme => ({
margin: theme.spacing(2),
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: theme.spacing(70),
},
["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ width: theme.spacing(40),
+ },
},
questionsGrid: {
marginBottom: "20px",
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
- }
+ width: theme.spacing(70),
+ },
},
title: {
fontSize: "45px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "35px"
+ fontSize: "35px",
},
["@media (max-width:590px)"]: {
- fontSize: "25px"
- }
+ fontSize: "25px",
+ },
},
description: {
fontSize: "30px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "25px"
+ fontSize: "25px",
},
["@media (max-width:590px)"]: {
- fontSize: "15px"
- }
- }
+ fontSize: "15px",
+ },
+ },
}));
function FormFieldText(props) {
diff --git a/src/components/fieldsGetForm/SummaryFolder/FormSummary.js b/src/components/fieldsGetForm/SummaryFolder/FormSummary.js
index 0904563..54144a9 100644
--- a/src/components/fieldsGetForm/SummaryFolder/FormSummary.js
+++ b/src/components/fieldsGetForm/SummaryFolder/FormSummary.js
@@ -1,6 +1,7 @@
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
import FormFieldText from "./FormFieldText";
import FormFieldSelect from "./FormFieldSelect";
@@ -42,6 +43,10 @@ const useStyles = makeStyles(theme => ({
},
formTitle: {
marginTop: "10px"
+ },
+
+ msg: {
+ textAlign: "center"
}
}));
function Summary(props) {
@@ -96,6 +101,15 @@ function Summary(props) {
justify="center"
>
<div>
+ {props.multAnswer ? (
+ <Grid className={classes.msg}>
+ <Typography style={{ wordWrap: "break-word" }} gutterBottom>
+ Esse formulário permite multiplas respostas de um mesmo usuário
+ </Typography>
+ </Grid>
+ ) : (
+ <Grid />
+ )}
{props.formArray[0].form.inputs.map((input, index) => {
if (input.type === 0)
return (
diff --git a/src/components/fieldsVisualizeForm/FieldFooterOptions.js b/src/components/fieldsVisualizeForm/FieldFooterOptions.js
deleted file mode 100644
index f6446f0..0000000
--- a/src/components/fieldsVisualizeForm/FieldFooterOptions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import TextField from '@material-ui/core/TextField';
-import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
-import IconButton from '@material-ui/core/IconButton';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-import CloseIcon from '@material-ui/icons/Close';
-import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function FieldFooterOptions(props) {
-
- return (
- <>
- <FormControlLabel
- control={
- <Switch
- onChange={e => props.setRequiredField(props.idq) }
- value="required"
- color="primary"
- checked={props.required}
- />
- }
- label="Obrigatória"
- />
- <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
- <DeleteOutlinedIcon />
- </IconButton>
- </>
- );
-
-
-}
-
-
-export default FieldFooterOptions;
\ No newline at end of file
diff --git a/src/components/fieldsVisualizeForm/FormFieldCheckbox.js b/src/components/fieldsVisualizeForm/FormFieldCheckbox.js
index 3f23367..8bc1def 100644
--- a/src/components/fieldsVisualizeForm/FormFieldCheckbox.js
+++ b/src/components/fieldsVisualizeForm/FormFieldCheckbox.js
@@ -5,8 +5,6 @@ import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Checkbox from "@material-ui/core/Checkbox";
-import FieldFooterOptions from "./FieldFooterOptions";
-
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
diff --git a/src/components/fieldsVisualizeForm/FormFieldRadio.js b/src/components/fieldsVisualizeForm/FormFieldRadio.js
index 24d8e1b..727f7fc 100644
--- a/src/components/fieldsVisualizeForm/FormFieldRadio.js
+++ b/src/components/fieldsVisualizeForm/FormFieldRadio.js
@@ -6,8 +6,6 @@ import Typography from "@material-ui/core/Typography";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
-import FieldFooterOptions from "./FieldFooterOptions";
-
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
diff --git a/src/components/fieldsVisualizeForm/FormFieldSelect.js b/src/components/fieldsVisualizeForm/FormFieldSelect.js
index 991dd25..4501ede 100644
--- a/src/components/fieldsVisualizeForm/FormFieldSelect.js
+++ b/src/components/fieldsVisualizeForm/FormFieldSelect.js
@@ -6,8 +6,6 @@ import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
diff --git a/src/components/fieldsVisualizeForm/FormFieldTitle.js b/src/components/fieldsVisualizeForm/FormFieldTitle.js
index 97bfb3a..722462e 100644
--- a/src/components/fieldsVisualizeForm/FormFieldTitle.js
+++ b/src/components/fieldsVisualizeForm/FormFieldTitle.js
@@ -4,8 +4,6 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from "./FieldFooterOptions";
-
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
diff --git a/src/contexts/FormContext.js b/src/contexts/FormContext.js
index e49b2a1..2ceccfd 100644
--- a/src/contexts/FormContext.js
+++ b/src/contexts/FormContext.js
@@ -5,7 +5,7 @@ import { createFrontendForm } from "../components/fieldsDisplayForm/utils/FrontE
import { useHistory } from "react-router-dom";
export const FormEditionContext = createContext();
-const FormProvider = props => {
+const FormProvider = (props) => {
const history = useHistory();
/** Getting the id from the route information */
const { id } = useParams();
@@ -19,13 +19,14 @@ const FormProvider = props => {
type: "title",
question: "",
description: "",
+ mult_answer: false,
error: {
errorMsg: {
question: "Este campo é obrigatório!",
- description: ""
- }
- }
- }
+ description: "",
+ },
+ },
+ },
]
);
@@ -34,10 +35,10 @@ const FormProvider = props => {
const fetchData = async () => {
api
.get(`/form/${id}`)
- .then(async function(res) {
+ .then(async function (res) {
setForm(await createFrontendForm(res.data));
})
- .catch(error => {
+ .catch((error) => {
if (error.response.status === 401) {
window.sessionStorage.removeItem("token");
window.sessionStorage.removeItem("userId");
diff --git a/src/contexts/useForm.js b/src/contexts/useForm.js
index f9ad274..32675eb 100644
--- a/src/contexts/useForm.js
+++ b/src/contexts/useForm.js
@@ -8,7 +8,7 @@ import {
selectOptionsTesting,
testSubformSchema,
selectOptionTextTesting,
- testTextValidation
+ testTextValidation,
} from "../components/fieldsDisplayForm/utils/schemas";
import {
pushTitle,
@@ -16,7 +16,7 @@ import {
pushSelect,
pushRadio,
pushCheckbox,
- pushSubform
+ pushSubform,
} from "../components/fieldsDisplayForm/utils/FormComposition";
import api from "../api";
@@ -30,15 +30,6 @@ const useForm = () => {
const routeId = idValue;
- /** Function that adds the title object into the form array.
- * Its parameters are used on the translation of the backend data.
- * @param title - the title;
- * @param description - the description of the form;
- * @param id - optional parameter, it is used when editing a form.
- */
- function addToFormTitle(title, description, id) {
- setForm(pushTitle(form, title, description, id));
- }
/** Function that adds a 'question' object into the form array.
* Its parameters are used on the translation of the backend data.
* @param question - the question;
@@ -206,6 +197,13 @@ const useForm = () => {
form[index].error.errorMsg.validationValue = "";
setForm([...form]);
}
+ /** Function used on FormFieldTitle to use the multiple answer property
+ */
+ function setMultipleAnswer() {
+
+ form[0].mult_answer = !form[0].mult_answer;
+ setForm([...form]);
+ }
/** Reordering the form array based on the place the question is being dragged over.
* @param result - an composed object bringing info about the drag event.
*/
@@ -237,7 +235,7 @@ const useForm = () => {
*/
async function setId() {
const fetchData = async () => {
- await api.get(`/form/${routeId}`).then(async function(res) {
+ await api.get(`/form/${routeId}`).then(async function (res) {
let backForm = createFrontendForm(res.data);
for (let i = 1; i < backForm.length; i++) {
for (let j = 1; j < form.length; j++) {
@@ -247,14 +245,14 @@ const useForm = () => {
"question",
"description",
"options",
- "subformId"
+ "subformId",
]) !==
- JSON.stringify(form[j], [
- "question",
- "description",
- "options",
- "subformId"
- ]) ||
+ JSON.stringify(form[j], [
+ "question",
+ "description",
+ "options",
+ "subformId",
+ ]) ||
differentValidation(backForm[i], form[j])
) {
form[j].inputId = null;
@@ -272,23 +270,26 @@ const useForm = () => {
*/
async function submit(validToSend) {
if (!validToSend) return;
+ if (form[0].mult_answer) {
+ document.cookie = `answerForm=${form[0].id}; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+ }
if (form[0].id) {
await setId();
let data = await createBackendForm(form, routeId);
const post_response = await api
.put(`/form/${routeId}`, data, {
headers: {
- authorization: `bearer ${window.sessionStorage.getItem("token")}`
- }
+ authorization: `bearer ${window.sessionStorage.getItem("token")}`,
+ },
})
- .then(function(error) {
+ .then(function (error) {
if (!error.response) {
alert("Seu formulário foi atualizado com sucesso.");
let path = `/signin`;
history.push(path);
}
})
- .catch(function(error) {
+ .catch(function (error) {
if (error.response.status === 401) {
window.sessionStorage.removeItem("token");
window.sessionStorage.removeItem("userId");
@@ -308,17 +309,17 @@ const useForm = () => {
const post_response = await api
.post(`/form`, await createBackendForm(form), {
headers: {
- authorization: `bearer ${window.sessionStorage.getItem("token")}`
- }
+ authorization: `bearer ${window.sessionStorage.getItem("token")}`,
+ },
})
- .then(function(error) {
+ .then(function (error) {
if (!error.response) {
alert("Seu formulário foi criado com sucesso.");
let path = `/signin`;
history.push(path);
}
})
- .catch(function(error) {
+ .catch(function (error) {
if (error.response.status === 401) {
window.sessionStorage.removeItem("token");
window.sessionStorage.removeItem("userId");
@@ -332,7 +333,6 @@ const useForm = () => {
}
return {
- addToFormTitle,
addToFormQuestion,
addToFormSelect,
addToFormRadio,
@@ -350,8 +350,9 @@ const useForm = () => {
setValidationType,
setValidationValue,
removeValidation,
+ setMultipleAnswer,
onDragEnd,
- submit
+ submit,
};
};
diff --git a/src/pages/Acknowledgement.js b/src/pages/Acknowledgement.js
new file mode 100644
index 0000000..684238d
--- /dev/null
+++ b/src/pages/Acknowledgement.js
@@ -0,0 +1,79 @@
+import React, { useEffect } from "react";
+import Grid from "@material-ui/core/Grid";
+import { Redirect, useParams } from "react-router-dom";
+import { Button, createMuiTheme, MuiThemeProvider } from "@material-ui/core";
+import IconButton from "@material-ui/core/IconButton";
+import { useHistory } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
+import FormInput from "../components/fieldsSignUp/FormInput";
+import Paper from "@material-ui/core/Paper";
+import api from "../api";
+
+const useStyles = makeStyles((theme) => ({
+ register: {
+ maxWidth: "1000px",
+ background: "#ffffff",
+ borderRadius: "2px",
+ padding: "2% 1%",
+ marginTop: "3%",
+ ["@media (max-width:590px)"]: {
+ marginTop: "20%",
+ },
+ margin: "0 auto",
+ width: "95%",
+ },
+ custom_strong: {
+ fontSize: "25px",
+ ["@media (max-width:590px)"]: {
+ fontSize: "17px",
+ },
+ textAlign: "center",
+ display: "block",
+ color: "#46525d",
+ marginBottom: "4%",
+ marginTop: "3%",
+ },
+ button: {
+ type: "submit",
+ // width: "30%",
+ marginTop: "4%",
+ background: "#0480ab",
+ color: "white",
+ borderRadius: "2px",
+ padding: "10px 20px",
+ // fontSize: "18px",
+ "&:hover": {
+ backgroundColor: "#045d7b",
+ },
+ ["@media (max-width:550px)"]: {
+ width: "55%",
+ fontSize: "60%",
+ },
+ },
+}));
+export default function SignUp() {
+ const history = useHistory();
+ const classes = useStyles();
+ const { again } = useParams();
+ console.log(again);
+ again > 0 ? console.log("É ZERO") : console.log("Não dá");
+
+ const handleClick = () => {
+ let path = `/answer/${again}`;
+ history.push(path);
+ };
+ return (
+ <Paper className={classes.register} justify="center">
+ <strong className={classes.custom_strong}>
+ Sua resposta foi registrada em nossa base de dados. <br></br>
+ Agradecemos pela sua participação.<br></br>
+ {again > 0 ? (
+ <Button className={classes.button} onClick={() => handleClick()}>
+ Responda novamente o formulário
+ </Button>
+ ) : null}
+ </strong>
+ </Paper>
+ );
+}
diff --git a/src/pages/AnswerForm.js b/src/pages/AnswerForm.js
index 0887a12..494a09b 100644
--- a/src/pages/AnswerForm.js
+++ b/src/pages/AnswerForm.js
@@ -14,17 +14,17 @@ import FormFieldCheckbox from "../components/fieldsAnswerForm/FormFieldCheckbox"
import FormFieldTitle from "../components/fieldsAnswerForm/FormFieldTitle";
import FormFieldSubform from "../components/fieldsAnswerForm/FormFieldSubform";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
menu: {
width: theme.spacing(6),
minheight: theme.spacing(15),
position: "fixed",
top: theme.spacing(10),
left: "90%",
- padding: theme.spacing(1)
+ padding: theme.spacing(1),
},
progress: {
- marginTop: "5%"
+ marginTop: "5%",
},
button: {
type: "submit",
@@ -35,17 +35,17 @@ const useStyles = makeStyles(theme => ({
padding: "10px 20px",
fontSize: "18px",
"&:hover": {
- backgroundColor: "rgb(25, 109, 23)"
- }
+ backgroundColor: "rgb(25, 109, 23)",
+ },
},
pageBody: {
minHeight: "calc(100vh - 92.4px - 78px)",
paddingBottom: "78px",
- flexDirection: "column"
+ flexDirection: "column",
},
questions: {
- marginBottom: "7%"
- }
+ marginBottom: "7%",
+ },
}));
function AnwserForm() {
@@ -72,7 +72,7 @@ function AnwserForm() {
/** Function to check if answers are valid */
function isError() {
- return answerArray.some(value => {
+ return answerArray.some((value) => {
return value.error;
});
}
@@ -82,7 +82,7 @@ function AnwserForm() {
* It wouldn't make sense to have a form answered without any answers on it.
*/
function isAnswer() {
- return answerArray.some(value => {
+ return answerArray.some((value) => {
return value.answerInput.length !== 0;
});
}
@@ -152,11 +152,15 @@ function AnwserForm() {
if (backendTranslation()) {
const res = await api
.post(`/answer/${id}`, backendTranslation())
- .then(function(res) {
- setCookie("answerForm", id, 92);
+ .then(function (res) {
+ if (!formData.answerTimes) {
+ setCookie("answerForm", id, 92);
+ }
alert("Formulário respondido!");
+ let path = formData.answerTimes ? `/post/${id}` : `/post/0`;
+ history.push(path);
})
- .catch(error => {
+ .catch((error) => {
if (error.response.status === 401) {
window.sessionStorage.removeItem("token");
window.sessionStorage.removeItem("userId");
@@ -175,9 +179,9 @@ function AnwserForm() {
* @param form - Form object that just came from the API.
*/
function mapInputs(form) {
- form.inputs.map(input => {
+ form.inputs.map((input) => {
if (
- input.validation.some(value => {
+ input.validation.some((value) => {
return value.type === 2 || value.type === 6;
})
) {
@@ -185,14 +189,14 @@ function AnwserForm() {
idInput: input.id,
typeInput: input.type,
answerInput: [],
- error: true
+ error: true,
});
} else {
answerArray.push({
idInput: input.id,
typeInput: input.type,
answerInput: [],
- error: false
+ error: false,
});
}
});
@@ -205,12 +209,12 @@ function AnwserForm() {
async function getForm(id) {
const res = await api
.get(`/form/${id}`)
- .then(function(res) {
+ .then(function (res) {
checkCookie(id);
setFormData(res.data);
mapInputs(res.data);
})
- .catch(error => {
+ .catch((error) => {
if (error.response.status === 401) {
window.sessionStorage.removeItem("token");
window.sessionStorage.removeItem("userId");
@@ -265,7 +269,7 @@ function AnwserForm() {
return "show warning";
}
}, []);
-
+ console.log(formData);
return (
<Grid
className={classes.pageBody}
@@ -338,10 +342,10 @@ function AnwserForm() {
})}
</div>
) : (
- <Grid container justify="center" className={classes.progress}>
- <CircularProgress />
- </Grid>
- )}
+ <Grid container justify="center" className={classes.progress}>
+ <CircularProgress />
+ </Grid>
+ )}
</Grid>
<Grid>
<Button
diff --git a/src/pages/GetForm.js b/src/pages/GetForm.js
index 0449266..247d633 100644
--- a/src/pages/GetForm.js
+++ b/src/pages/GetForm.js
@@ -99,6 +99,7 @@ function GetForm() {
const [selectedValue, setSelectedValue] = useState("");
const [times, setTimes] = useState([]);
const [toLogin, setToLogin] = useState(false);
+ const [multAnswer, setMultAnswer] = useState();
const GoBack = () => {
if (window.confirm("Tem certeza que deseja sair?")) {
@@ -124,13 +125,14 @@ function GetForm() {
authorization: `bearer ${window.sessionStorage.getItem("token")}`
}
})
- .then(function(res) {
+ .then(function (res) {
if (!res.data.length) {
alert("Não há respostas!");
setToLogin(true);
return;
}
setFormArray(res.data);
+ setMultAnswer(res.data[0].form.answerTimes)
res.data.map(value => {
answers.push(value.inputAnswers);
times.push(value.timestamp);
@@ -163,7 +165,7 @@ function GetForm() {
async function getAnswerNumber(id) {
const res = await api
.get(`/answerNumber/${id}`)
- .then(function(res) {
+ .then(function (res) {
setAnswerNum(res.data.answerNumber);
})
.catch(error => {
@@ -217,14 +219,15 @@ function GetForm() {
</Grid>
<Grid container item>
{selectedValue ? (
- <Summary formArray={formArray} answers={answers} />
+ <Summary multAnswer={multAnswer} formArray={formArray} answers={answers} />
) : (
- <Jornal
- formArray={formArray}
- timestamp={times}
- answerNumber={answerNum}
- />
- )}
+ <Jornal
+ multAnswer={multAnswer}
+ formArray={formArray}
+ timestamp={times}
+ answerNumber={answerNum}
+ />
+ )}
</Grid>
<Grid container justify="center">
<Button variant="contained" className={classes.button} onClick={GoBack}>
@@ -233,10 +236,10 @@ function GetForm() {
</Grid>
</Grid>
) : (
- <Grid container justify="center" className={classes.progress}>
- <CircularProgress />
- </Grid>
- );
+ <Grid container justify="center" className={classes.progress}>
+ <CircularProgress />
+ </Grid>
+ );
}
export default GetForm;
diff --git a/src/pages/ListForms.js b/src/pages/ListForms.js
index f72a1f8..dc08ca8 100644
--- a/src/pages/ListForms.js
+++ b/src/pages/ListForms.js
@@ -45,7 +45,7 @@ export default function ListForms() {
function sort(type) {
setAuxForms([]);
if (type === "") {
- const tmp = [...forms].sort(function(a, b) {
+ const tmp = [...forms].sort(function (a, b) {
return a.id > b.id ? 1 : -1;
});
setAuxForms(tmp);
@@ -55,12 +55,12 @@ export default function ListForms() {
});
setAuxForms(tmp);
} else if (type === 2) {
- const tmp = [...forms].sort(function(a, b) {
+ const tmp = [...forms].sort(function (a, b) {
return a.id < b.id ? 1 : -1;
});
setAuxForms(tmp);
} else if (type === 3) {
- const tmp = [...forms].sort(function(a, b) {
+ const tmp = [...forms].sort(function (a, b) {
return a.answersNumber < b.answersNumber ? 1 : -1;
});
setAuxForms(tmp);
@@ -98,7 +98,7 @@ export default function ListForms() {
async function fetchData(id) {
const res = await api
.get(`/user/list/${id}`)
- .then(function(res) {
+ .then(function (res) {
setForms(res.data.sort((a, b) => a.id > b.id));
setAuxForms(res.data.sort((a, b) => a.id > b.id));
setisLoaded(true);
@@ -138,19 +138,19 @@ export default function ListForms() {
</Grid>
))
) : (
- <Grid item>
- <Typography variant="h4">
- Nenhum formulário foi encontrado!
+ <Grid item>
+ <Typography variant="h4">
+ Nenhum formulário foi encontrado!
</Typography>
- </Grid>
- )}
+ </Grid>
+ )}
</Grid>
</Container>
</div>
</>
) : (
- <Grid container justify="center" className={classes.progress}>
- <CircularProgress />
- </Grid>
- );
+ <Grid container justify="center" className={classes.progress}>
+ <CircularProgress />
+ </Grid>
+ );
}
diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js
index ae6891b..a3d5964 100644
--- a/src/pages/SignUp.js
+++ b/src/pages/SignUp.js
@@ -111,8 +111,8 @@ export default function SignUp() {
function checkPasswordString() {
return values.password
? /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&+_ ():;/?\|"'-])[A-Za-z\d@$!%*?&+_ ():;/?\|"'-]{8,24}$/.test(
- values.password
- )
+ values.password
+ )
: true;
}
@@ -202,77 +202,77 @@ export default function SignUp() {
return isLoged ? (
<Redirect to="/signin" />
) : (
- <MuiThemeProvider theme={theme}>
- <Paper className={classes.register} justify="center">
- <strong className={classes.custom_strong}>
- Cadastro de Usuário
+ <MuiThemeProvider theme={theme}>
+ <Paper className={classes.register} justify="center">
+ <strong className={classes.custom_strong}>
+ Cadastro de Usuário
<p className={classes.strong_description}>
- Insira as informações abaixo
+ Insira as informações abaixo
</p>
- </strong>
- <form className={classes.form} autocomplete="off">
- <Grid>
- <FormInput
- label="Nome Completo"
- param="name"
- onUpdate={handleChange}
- error={!checkName()}
- />
- </Grid>
- <Grid>
- <FormInput
- label="E-mail"
- param="email"
- onUpdate={handleChange}
- error={!checkEmail()}
- />
- </Grid>
- <Grid>
- <FormInput
- label="Senha"
- param="password"
- onUpdate={handleChange}
- error={!checkPasswordString()}
- />
- {(!checkPasswordString() || !values.password) && (
- <Grid className={classes.errorGridOpts}>
- Sua senha deve conter entre 8 e 24 caracteres, uma letra
- maiúscula, uma minúscula e um número
+ </strong>
+ <form className={classes.form} autocomplete="off">
+ <Grid>
+ <FormInput
+ label="Nome Completo"
+ param="name"
+ onUpdate={handleChange}
+ error={!checkName()}
+ />
+ </Grid>
+ <Grid>
+ <FormInput
+ label="E-mail"
+ param="email"
+ onUpdate={handleChange}
+ error={!checkEmail()}
+ />
+ </Grid>
+ <Grid>
+ <FormInput
+ label="Senha"
+ param="password"
+ onUpdate={handleChange}
+ error={!checkPasswordString()}
+ />
+ {(!checkPasswordString() || !values.password) && (
+ <Grid className={classes.errorGridOpts}>
+ Sua senha deve conter entre 8 e 24 caracteres, uma letra
+ maiúscula, uma minúscula e um número
</Grid>
- )}
- </Grid>
- <Grid>
- <FormInput
- label="Confirmar Senha"
- param="password_confirm"
- onUpdate={handleChange}
- error={
- values.password_confirm
- ? values.password === values.password_confirm
- ? false
- : true
- : false
- }
- />
- </Grid>
- <Grid className={classes.alreadyAcc}>
- <a href="https://genforms.c3sl.ufpr.br/#/signin">
- Já é cadastrado?
+ )}
+ </Grid>
+ <Grid>
+ <FormInput
+ label="Confirmar Senha"
+ param="password_confirm"
+ onUpdate={handleChange}
+ error={
+ values.password_confirm
+ ? values.password === values.password_confirm
+ ? false
+ : true
+ : false
+ }
+ />
+ </Grid>
+ <Grid className={classes.alreadyAcc}>
+ <a href="https://genforms.c3sl.ufpr.br/#/signin">
+ Já é cadastrado?
</a>
- </Grid>
- <Grid>
- <IconButton
- size="medium"
- className={classes.button}
- id="whiteTextedButton"
- onClick={() => submit()}
- >
- <KeyboardArrowRightIcon />
- Cadastre-se
+ </Grid>
+ <Grid>
+ <IconButton
+ size="medium"
+ className={classes.button}
+ id="whiteTextedButton"
+ onClick={() => submit()}
+ >
+ <KeyboardArrowRightIcon />
+ Cadastre-se
</IconButton>
- </Grid>
- </form>
- </Paper>
- </MuiThemeProvider>
- );
+ </Grid>
+ </form>
+ </Paper>
+ </MuiThemeProvider>
+ );
}
diff --git a/src/pages/VisualizeForm.js b/src/pages/VisualizeForm.js
index e4ff0a4..b77e491 100644
--- a/src/pages/VisualizeForm.js
+++ b/src/pages/VisualizeForm.js
@@ -6,6 +6,7 @@ import api from "../api";
import { createMuiTheme, MuiThemeProvider, Button } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import CircularProgress from "@material-ui/core/CircularProgress";
+import Typography from "@material-ui/core/Typography";
import FormFieldText from "../components/fieldsVisualizeForm/FormFieldText";
import FormFieldSelect from "../components/fieldsVisualizeForm/FormFieldSelect";
@@ -36,6 +37,9 @@ const useStyles = makeStyles(theme => ({
marginLeft: "3%",
width: "92%"
}
+ },
+ msg: {
+ textAlign: "center"
}
}));
@@ -68,6 +72,7 @@ function VisualizeForm() {
/** Maped form from backend */
const [formData, setFormData] = useState(0);
+ const [multAnswer, setMultAnswer] = useState();
/**
* Function to get form object from the API.
@@ -76,7 +81,9 @@ function VisualizeForm() {
async function getForm(id) {
const res = await api
.get(`/form/${id}`)
- .then(function(res) {
+ .then(function (res) {
+ console.log(res.data)
+ setMultAnswer(res.data.answerTimes)
setFormData(res.data);
})
.catch(error => {
@@ -122,6 +129,15 @@ function VisualizeForm() {
justify="center"
className={classes.sizeFormating}
>
+ {multAnswer ? (
+ <Grid className={classes.msg}>
+ <Typography style={{ wordWrap: "break-word" }} gutterBottom>
+ Esse formulário permite multiplas respostas de um mesmo usuário
+ </Typography>
+ </Grid>
+ ) : (
+ <Grid />
+ )}
{formData ? (
<>
<FormFieldTitle
@@ -185,10 +201,10 @@ function VisualizeForm() {
</Grid>
</>
) : (
- <Grid container justify="center" className={classes.progress}>
- <CircularProgress />
- </Grid>
- )}
+ <Grid container justify="center" className={classes.progress}>
+ <CircularProgress />
+ </Grid>
+ )}
</Grid>
</div>
</MuiThemeProvider>
diff --git a/src/routes.js b/src/routes.js
index 8a23828..5e8ac2b 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -9,6 +9,7 @@ import ListForms from "./pages/ListForms";
import EditForm from "./pages/EditForm";
import GetForm from "./pages/GetForm";
import VisualizeForm from "./pages/VisualizeForm";
+import Acknowledgement from "./pages/Acknowledgement";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
const PrivateRoute = ({ component: Component, ...rest }) => {
@@ -45,10 +46,11 @@ const Routes = () => (
component={() => <VisualizeForm />}
/>
<PrivateRoute exact path="/create" component={() => <CreateForm />} />
- <PrivateRoute exact path="/answer/:id" component={() => <AnswerForm />} />
+ <Route exact path="/answer/:id" component={() => <AnswerForm />} />
<PrivateRoute exact path="/edit/:id" component={() => <EditForm />} />
<PrivateRoute exact path="/list/:id" component={() => <ListForms />} />
<PrivateRoute exact path="/form/:id" component={() => <GetForm />} />
+ <Route exact path="/post/:again" component={() => <Acknowledgement />} />
</Switch>
<Footer />
</BrowserRouter>
--
GitLab