Merge branch 'issue/45-Mov' into 'development'

Issue #45: User movimentation implemented

See merge request !40

src/components/fieldsDisplayForm/DisplayForm.js

 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>

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: {

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: {

src/pages/GetForm.js

 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>

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>