From 373215cb8b92487768f12be59e159e5c17bb3fe7 Mon Sep 17 00:00:00 2001
From: Richard Heise <rfhf19@inf.ufpr.br>
Date: Thu, 24 Sep 2020 11:07:49 -0300
Subject: [PATCH] Issue #45: User movimentation implemented
Signed-off-by: Richard Heise <rfhf19@inf.ufpr.br>
---
.../fieldsDisplayForm/DisplayForm.js | 74 +++++++++++++------
.../fieldsGetForm/JornalFolder/FormJornal.js | 2 -
.../SummaryFolder/FormSummary.js | 2 -
src/pages/GetForm.js | 49 ++++++------
src/pages/VisualizeForm.js | 30 +++++---
5 files changed, 96 insertions(+), 61 deletions(-)
diff --git a/src/components/fieldsDisplayForm/DisplayForm.js b/src/components/fieldsDisplayForm/DisplayForm.js
index a1f257e..675ef4b 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,44 +13,57 @@ 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";
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"
+ },
+ width: "12%",
+ ["@media (max-width:600px)"]: {
+ marginTop: "52px"
+ }
+ }
}));
/** CSS style used through Material Ui. */
const theme = createMuiTheme({
@@ -57,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() {
@@ -84,6 +98,13 @@ function DisplayForm() {
const columnId = uuid();
/** Error state. */
const [validToSend, setValidToSend] = useState();
+ /** variable to redirect */
+ const history = useHistory();
+
+ const toLogin = () => {
+ 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.
@@ -197,10 +218,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 d7826dc..102d5d2 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 660eb19..0904563 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 fb24c5f..edb1948 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 } 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,34 +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);
@@ -108,6 +96,10 @@ function GetForm() {
const [times, setTimes] = useState([]);
const [toLogin, setToLogin] = useState(false);
+ const GoBack = () => {
+ let path = `/signin`;
+ history.push(path);
+ };
/**
* Set selectedValue variable to the right value.
*/
@@ -220,6 +212,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 a161ada..d9e5b09 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";
@@ -23,14 +23,12 @@ const useStyles = makeStyles(theme => ({
padding: theme.spacing(1)
},
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: {
@@ -97,6 +95,11 @@ function VisualizeForm() {
});
}
+ const toLogin = () => {
+ let path = `/SignIn`;
+ history.push(path);
+ };
+
/** First thing the page does is getting the form from the API. */
useEffect(() => {
getForm(id);
@@ -158,6 +161,15 @@ function VisualizeForm() {
/>
);
})}
+ <Grid container justify="center">
+ <Button
+ variant="contained"
+ className={classes.button}
+ onClick={toLogin}
+ >
+ Voltar
+ </Button>
+ </Grid>
</div>
) : (
<p>Loading...</p>
--
GitLab