diff --git a/src/components/fieldsDisplayForm/DisplayForm.js b/src/components/fieldsDisplayForm/DisplayForm.js
index 8c5d8f21f8bb5492aec3961024647904cb92aa2b..236742fce44939b5dbc2e0a707f0f764517ecc18 100644
--- a/src/components/fieldsDisplayForm/DisplayForm.js
+++ b/src/components/fieldsDisplayForm/DisplayForm.js
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useContext } from "react";
import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
@@ -12,6 +13,7 @@ import FormFieldSubForm from "./FormFieldSubform";
import uuid from "uuid/v4";
import { verifyError } from "./utils/schemas";
import SideMenu from "./SideMenu";
+import { useHistory } from "react-router-dom";
import { FormEditionContext } from "../../contexts/FormContext";
import useForm from "../../contexts/useForm";
@@ -49,6 +51,18 @@ const useStyles = makeStyles(theme => ({
},
marginLeft: "2%"
}
+ },
+ button: {
+ marginLeft: "5%",
+ backgroundColor: "#a30202",
+ minWidth: "92px",
+ ["@media (max-width:600px)"]: {
+ marginTop: "52px"
+ },
+ width: "12%",
+ ["@media (max-width:600px)"]: {
+ marginTop: "52px"
+ }
}
}));
/** CSS style used through Material Ui. */
@@ -84,6 +98,15 @@ function DisplayForm() {
const columnId = uuid();
/** Error state. */
const [validToSend, setValidToSend] = useState();
+ /** variable to redirect */
+ const history = useHistory();
+
+ const toLogin = () => {
+ if (window.confirm("Tem certeza que deseja sair?")) {
+ let path = "/signin";
+ history.push(path);
+ }
+ };
/** 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.
@@ -201,10 +224,19 @@ function DisplayForm() {
);
}}
</Droppable>
- <SubmitButton
- validToSend={validToSend}
- formId={form ? (form[0] ? form[0].id : false) : false}
- />
+ <Grid container justify="center">
+ <SubmitButton
+ validToSend={validToSend}
+ formId={form ? (form[0] ? form[0].id : false) : false}
+ />
+ <Button
+ variant="contained"
+ className={classes.button}
+ onClick={toLogin}
+ >
+ Cancelar
+ </Button>
+ </Grid>
</Grid>
</DragDropContext>
</Grid>
diff --git a/src/components/fieldsGetForm/JornalFolder/FormJornal.js b/src/components/fieldsGetForm/JornalFolder/FormJornal.js
index d7826dc6e8bcb5c96a49f7246b47db9a35786a11..102d5d2b762bd31c84dbf5f4b0db888ddef8fe79 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormJornal.js
+++ b/src/components/fieldsGetForm/JornalFolder/FormJornal.js
@@ -36,8 +36,6 @@ const useStyles = makeStyles(theme => ({
backgroundColor: "white",
marginBottom: "20px",
marginLeft: "2%",
- minHeight: "calc(100vh - 92.4px - 78px)",
- paddingBottom: "78px",
justifyContent: "center"
},
gridMenu: {
diff --git a/src/components/fieldsGetForm/SummaryFolder/FormSummary.js b/src/components/fieldsGetForm/SummaryFolder/FormSummary.js
index 660eb19a7f245cefa40a1ae215ab8972f686bf6c..090456320d38011db8e03dbcc294969d2c166428 100644
--- a/src/components/fieldsGetForm/SummaryFolder/FormSummary.js
+++ b/src/components/fieldsGetForm/SummaryFolder/FormSummary.js
@@ -33,8 +33,6 @@ const useStyles = makeStyles(theme => ({
marginBottom: "20px",
marginTop: "25px",
marginLeft: "2%",
- minHeight: "calc(100vh - 92.4px - 78px)",
- paddingBottom: "78px",
justifyContent: "center"
},
gridMenu: {
diff --git a/src/pages/GetForm.js b/src/pages/GetForm.js
index b9eabe1a27e175f5e614ac9d6b889f88f588490e..7c190b3a9fdcf44d0ed12af979c4471aa50b364f 100644
--- a/src/pages/GetForm.js
+++ b/src/pages/GetForm.js
@@ -1,15 +1,14 @@
import React, { useState, useEffect } from "react";
-import { useParams, Route, Redirect, useHistory } from "react-router-dom";
+import { useParams, Redirect, useHistory } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import api from "../api";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
import FormControl from "@material-ui/core/FormControl";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
import FormHelperText from "@material-ui/core/FormHelperText";
import Typography from "@material-ui/core/Typography";
-
+import Button from "@material-ui/core/Button";
import Jornal from "../components/fieldsGetForm/JornalFolder/FormJornal";
import Summary from "../components/fieldsGetForm/SummaryFolder/FormSummary";
const useStyles = makeStyles(theme => ({
@@ -40,8 +39,7 @@ const useStyles = makeStyles(theme => ({
container: {
flexDirection: "row",
justifyContent: "space-between",
- backgroundColor: "white",
- marginBottom: "20px"
+ backgroundColor: "white"
},
answerNum: {
display: "flex",
@@ -55,6 +53,15 @@ const useStyles = makeStyles(theme => ({
marginLeft: "20px"
}
},
+ button: {
+ marginBottom: "15%",
+ backgroundColor: "#d3d609",
+ minWidth: "92px",
+ width: "12%",
+ ["@media (max-width:580px)"]: {
+ marginBottom: "40%"
+ }
+ },
formTitle: {
textAlign: "center",
marginTop: "10px",
@@ -73,35 +80,15 @@ const useStyles = makeStyles(theme => ({
}
}));
-const theme = createMuiTheme({
- overrides: {
- MuiInput: {
- underline: {
- "&:before": {
- borderBottom: "1px solid #35c7fc"
- },
- "&:after": {
- borderBottom: "1px solid #3f51b5"
- }
- }
- },
- MuiButton: {
- label: {
- color: "black"
- }
- }
- }
-});
-
function GetForm() {
const classes = useStyles();
const history = useHistory();
-
/** Form id got from the browser's URL */
const { id } = useParams();
/** Maped form from backend */
const [formArray, setFormArray] = useState([]);
+
const [answers, setAnswers] = useState([]);
const [answerNum, setAnswerNum] = useState(0);
const [isReady, setIsReady] = useState(false);
@@ -109,6 +96,12 @@ function GetForm() {
const [times, setTimes] = useState([]);
const [toLogin, setToLogin] = useState(false);
+ const GoBack = () => {
+ if (window.confirm("Tem certeza que deseja sair?")) {
+ let path = "/signin";
+ history.push(path);
+ }
+ };
/**
* Set selectedValue variable to the right value.
*/
@@ -228,6 +221,11 @@ function GetForm() {
/>
)}
</Grid>
+ <Grid container justify="center">
+ <Button variant="contained" className={classes.button} onClick={GoBack}>
+ Voltar
+ </Button>
+ </Grid>
</Grid>
) : (
<p>loading...</p>
diff --git a/src/pages/VisualizeForm.js b/src/pages/VisualizeForm.js
index 81c22798a22ba8b28a5197a547872bce2e6d501c..ea9951e6384a5d49bf17e9db8cc0c6c98611e5a6 100644
--- a/src/pages/VisualizeForm.js
+++ b/src/pages/VisualizeForm.js
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import api from "../api";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
+import { createMuiTheme, MuiThemeProvider, Button } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import FormFieldText from "../components/fieldsVisualizeForm/FormFieldText";
@@ -13,28 +13,26 @@ import FormFieldCheckbox from "../components/fieldsVisualizeForm/FormFieldCheckb
import FormFieldTitle from "../components/fieldsVisualizeForm/FormFieldTitle";
import FormFieldSubform from "../components/fieldsVisualizeForm/FormFieldSubform";
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
button: {
- type: "submit",
- width: "100%",
- background: "#6ec46c",
- borderRadius: "2px",
- padding: "10px 20px",
- fontSize: "18px",
- "&:hover": {
- backgroundColor: "rgb(25, 109, 23)",
- },
+ marginBottom: "15%",
+ backgroundColor: "#d3d609",
+ minWidth: "92px",
+ width: "12%",
+ ["@media (max-width:600px)"]: {
+ marginBottom: "20%"
+ }
},
pageBody: {
minHeight: "calc(100vh - 92.4px - 78px)",
- paddingBottom: "78px",
+ paddingBottom: "78px"
},
sizeFormating: {
["@media (max-width:430px)"]: {
marginLeft: "3%",
- width: "92%",
- },
- },
+ width: "92%"
+ }
+ }
}));
const theme = createMuiTheme({
@@ -42,19 +40,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: "black",
- },
- },
- },
+ color: "black"
+ }
+ }
+ }
});
function VisualizeForm() {
@@ -74,10 +72,10 @@ function VisualizeForm() {
async function getForm(id) {
const res = await api
.get(`/form/${id}`)
- .then(function (res) {
+ .then(function(res) {
setFormData(res.data);
})
- .catch((error) => {
+ .catch(error => {
if (error.response.status === 401) {
window.sessionStorage.removeItem("token");
window.sessionStorage.removeItem("userId");
@@ -97,6 +95,13 @@ function VisualizeForm() {
});
}
+ const toLogin = () => {
+ if (window.confirm("Tem certeza que deseja sair?")) {
+ let path = "/signin";
+ history.push(path);
+ }
+ };
+
/** First thing the page does is getting the form from the API. */
useEffect(() => {
getForm(id);
@@ -165,6 +170,15 @@ function VisualizeForm() {
/>
);
})}
+ <Grid container justify="center">
+ <Button
+ variant="contained"
+ className={classes.button}
+ onClick={toLogin}
+ >
+ Voltar
+ </Button>
+ </Grid>
</>
) : (
<p>Loading...</p>