From dfd372d5c25665dbbc728af2b228aed8cb1ddecd Mon Sep 17 00:00:00 2001
From: Gabriel Silva Hermida <gash18@inf.ufpr.br>
Date: Thu, 17 Sep 2020 10:09:35 -0300
Subject: [PATCH] Issue #43: general /create and /edit fixes
Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>
---
.../fieldsDisplayForm/FieldFooterOptions.js | 36 ++---
.../fieldsDisplayForm/FormFieldCheckbox.js | 3 +
.../fieldsDisplayForm/FormFieldRadio.js | 3 +
.../fieldsDisplayForm/FormFieldSelect.js | 3 +
.../fieldsDisplayForm/FormFieldSubform.js | 10 +-
.../fieldsDisplayForm/FormFieldText.js | 7 +-
.../fieldsDisplayForm/FormFieldTitle.js | 7 +-
src/components/fieldsDisplayForm/SideMenu.js | 143 ++++++++++--------
.../utils/FormComposition.js | 2 -
.../fieldsDisplayForm/utils/schemas.js | 8 +-
src/components/header/header.jsx | 28 ++--
src/pages/SignIn.js | 2 +-
12 files changed, 143 insertions(+), 109 deletions(-)
diff --git a/src/components/fieldsDisplayForm/FieldFooterOptions.js b/src/components/fieldsDisplayForm/FieldFooterOptions.js
index b7a8b91..7cea2c3 100644
--- a/src/components/fieldsDisplayForm/FieldFooterOptions.js
+++ b/src/components/fieldsDisplayForm/FieldFooterOptions.js
@@ -14,23 +14,25 @@ function FieldFooterOptions(props) {
const { setRequiredField, deleteFromForm } = useForm();
return (
<Grid>
- <FormControlLabel
- control={
- <Tooltip
- title="Marcar como obrigatório"
- aria-label="Marcar como obrigatório"
- >
- <Switch
- onChange={(e) => setRequiredField(props.idq)}
- value="required"
- color="primary"
- checked={props.required}
- />
- </Tooltip>
- }
- style={{ size: "0px" }}
- label="Obrigatória"
- />
+ {!props.subform && (
+ <FormControlLabel
+ control={
+ <Tooltip
+ title="Marcar como obrigatório"
+ aria-label="Marcar como obrigatório"
+ >
+ <Switch
+ onChange={(e) => setRequiredField(props.idq)}
+ value="required"
+ color="primary"
+ checked={props.required}
+ />
+ </Tooltip>
+ }
+ style={{ size: "0px" }}
+ label="Obrigatória"
+ />
+ )}
<Tooltip title="Remover a pergunta" aria-label="Remover a pergunta">
<IconButton
aria-label="Remover a pergunta"
diff --git a/src/components/fieldsDisplayForm/FormFieldCheckbox.js b/src/components/fieldsDisplayForm/FormFieldCheckbox.js
index 0595faf..36849f7 100644
--- a/src/components/fieldsDisplayForm/FormFieldCheckbox.js
+++ b/src/components/fieldsDisplayForm/FormFieldCheckbox.js
@@ -62,6 +62,9 @@ function FormFieldCheckbox(props) {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
+ <Grid container item xs={12} justify="center">
+ <h4>Múltipla Escolha</h4>
+ </Grid>
<Grid container>
<DefaultField
question={props.question}
diff --git a/src/components/fieldsDisplayForm/FormFieldRadio.js b/src/components/fieldsDisplayForm/FormFieldRadio.js
index b877721..ab98b69 100644
--- a/src/components/fieldsDisplayForm/FormFieldRadio.js
+++ b/src/components/fieldsDisplayForm/FormFieldRadio.js
@@ -61,6 +61,9 @@ function FormFieldRadio(props) {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
+ <Grid container item xs={12} justify="center">
+ <h4>Seleção Única</h4>
+ </Grid>
<Grid container>
<DefaultField
question={props.question}
diff --git a/src/components/fieldsDisplayForm/FormFieldSelect.js b/src/components/fieldsDisplayForm/FormFieldSelect.js
index 959cb50..55d8727 100644
--- a/src/components/fieldsDisplayForm/FormFieldSelect.js
+++ b/src/components/fieldsDisplayForm/FormFieldSelect.js
@@ -63,6 +63,9 @@ function FormFieldSelect(props) {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
+ <Grid container item xs={12} justify="center">
+ <h4>Lista Suspensa</h4>
+ </Grid>
<Grid container>
<DefaultField
question={props.question}
diff --git a/src/components/fieldsDisplayForm/FormFieldSubform.js b/src/components/fieldsDisplayForm/FormFieldSubform.js
index cd497ee..9a3422c 100644
--- a/src/components/fieldsDisplayForm/FormFieldSubform.js
+++ b/src/components/fieldsDisplayForm/FormFieldSubform.js
@@ -134,13 +134,8 @@ export default function FormFieldSubform(props) {
>
<Grid container>
<Grid container item>
- <Grid container item xs={12}>
- <DefaultField
- question={props.question}
- description={props.description}
- idq={props.idq}
- error={props.error}
- />
+ <Grid container item xs={12} justify="center">
+ <h4>Subformulário</h4>
</Grid>
</Grid>
<Grid item xs={12} sm={6} className={classes.questionsGrid}>
@@ -166,6 +161,7 @@ export default function FormFieldSubform(props) {
className={classes.footerOptsAdjustment}
>
<FieldFooterOptions
+ subform={true}
idq={props.idq}
required={props.validation[0].value}
/>
diff --git a/src/components/fieldsDisplayForm/FormFieldText.js b/src/components/fieldsDisplayForm/FormFieldText.js
index 7c4d19a..b91f185 100644
--- a/src/components/fieldsDisplayForm/FormFieldText.js
+++ b/src/components/fieldsDisplayForm/FormFieldText.js
@@ -91,8 +91,8 @@ function FormFieldText(props) {
* The types are equivalent to the backend.
*/
const validationOpts = [
- { type: 3, name: "Mínimo de caracteres", value: "" },
- { type: 4, name: "Máximo de caracteres", value: "" },
+ { type: 3, name: "Máximo de caracteres", value: "" },
+ { type: 4, name: "Mínimo de caracteres", value: "" },
];
/** Importing functions to add, remove and set validations and it's properties. */
const {
@@ -111,6 +111,9 @@ function FormFieldText(props) {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
+ <Grid container item xs={12} justify="center">
+ <h4>Caixa de Texto</h4>
+ </Grid>
<Grid container>
<DefaultField
question={props.question}
diff --git a/src/components/fieldsDisplayForm/FormFieldTitle.js b/src/components/fieldsDisplayForm/FormFieldTitle.js
index e42eeea..8eff7e5 100644
--- a/src/components/fieldsDisplayForm/FormFieldTitle.js
+++ b/src/components/fieldsDisplayForm/FormFieldTitle.js
@@ -25,11 +25,14 @@ const useStyles = makeStyles((theme) => ({
marginBottom: "20px",
},
title: {
- fontSize: "xx-large",
+ fontSize: "x-large",
},
description: {
- fontSize: "x-large",
+ fontSize: "large",
marginBottom: "2%",
+ ["@media (max-width:370px)"]: {
+ marginBottom: "4%",
+ },
},
errorGrid: {
marginTop: "1%",
diff --git a/src/components/fieldsDisplayForm/SideMenu.js b/src/components/fieldsDisplayForm/SideMenu.js
index 51a29fb..0ef7863 100644
--- a/src/components/fieldsDisplayForm/SideMenu.js
+++ b/src/components/fieldsDisplayForm/SideMenu.js
@@ -9,6 +9,7 @@ import { makeStyles } from "@material-ui/core";
import ListAltIcon from "@material-ui/icons/ListAlt";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import useForm from "../../contexts/useForm";
+import Tooltip from "@material-ui/core/Tooltip";
const useStyles = makeStyles((theme) => ({
addButton: {
@@ -22,7 +23,9 @@ const useStyles = makeStyles((theme) => ({
},
["@media(max-width: 1050px)"]: {
fontSize: "0",
+ alignItems: "center",
},
+ alignItems: "flex-start",
},
paper: {
["@media (min-width: 600px)"]: {
@@ -57,72 +60,90 @@ function SideMenu(props) {
addToFormSubform,
} = useForm();
const classes = useStyles();
+ const msg = {
+ text: "Adicionar uma caixa de texto",
+ susp: "Adicionar lista suspensa",
+ uniq: "Adicionar seleção única",
+ mult: "Adicionar múltipla escolha",
+ sub: "Adicionar subformulário",
+ };
+
return (
<Paper className={classes.paper}>
- <Grid item container justify="flex-start" className={classes.outerGrid}>
+ <Grid item container className={classes.outerGrid}>
<Grid className={classes.newQuestionGrid} container justify="center">
<h4>Adicionar pergunta:</h4>
</Grid>
- <IconButton
- aria-label="add question"
- type="submit"
- size="medium"
- className={classes.addButton}
- onClick={() => {
- addToFormQuestion();
- }}
- >
- <TextFieldsIcon />
- Caixa de texto
- </IconButton>
- <IconButton
- aria-label="add select"
- type="submit"
- size="medium"
- className={classes.addButton}
- onClick={() => {
- addToFormSelect();
- }}
- >
- <ReorderIcon />
- Lista Suspensa
- </IconButton>
- <IconButton
- aria-label="add radio"
- type="submit"
- size="medium"
- className={classes.addButton}
- onClick={() => {
- addToFormRadio();
- }}
- >
- <RadioButtonCheckedIcon />
- Seleção Única
- </IconButton>
- <IconButton
- aria-label="add checkbox"
- type="submit"
- size="medium"
- className={classes.addButton}
- onClick={() => {
- addToFormCheckbox();
- }}
- >
- <CheckBoxOutlineBlankIcon />
- Múltipla Escolha
- </IconButton>
- <IconButton
- aria-label="add subform"
- type="submit"
- size="medium"
- className={classes.addButton}
- onClick={() => {
- addToFormSubform();
- }}
- >
- <ListAltIcon />
- Subformulário
- </IconButton>
+ <Tooltip title={msg.text} aria-label={msg.text}>
+ <IconButton
+ aria-label="add question"
+ type="submit"
+ size="medium"
+ className={classes.addButton}
+ onClick={() => {
+ addToFormQuestion();
+ }}
+ >
+ <TextFieldsIcon />
+ Caixa de Texto
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={msg.susp} aria-label={msg.susp}>
+ <IconButton
+ aria-label="add select"
+ type="submit"
+ size="medium"
+ className={classes.addButton}
+ onClick={() => {
+ addToFormSelect();
+ }}
+ >
+ <ReorderIcon />
+ Lista Suspensa
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={msg.uniq} aria-label={msg.uniq}>
+ <IconButton
+ aria-label="add radio"
+ type="submit"
+ size="medium"
+ className={classes.addButton}
+ onClick={() => {
+ addToFormRadio();
+ }}
+ >
+ <RadioButtonCheckedIcon />
+ Seleção Única
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={msg.mult} aria-label={msg.mult}>
+ <IconButton
+ aria-label="add checkbox"
+ type="submit"
+ size="medium"
+ className={classes.addButton}
+ onClick={() => {
+ addToFormCheckbox();
+ }}
+ >
+ <CheckBoxOutlineBlankIcon />
+ Múltipla Escolha
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={msg.sub} aria-label={msg.sub}>
+ <IconButton
+ aria-label="add subform"
+ type="submit"
+ size="medium"
+ className={classes.addButton}
+ onClick={() => {
+ addToFormSubform();
+ }}
+ >
+ <ListAltIcon />
+ Subformulário
+ </IconButton>
+ </Tooltip>
</Grid>
</Paper>
);
diff --git a/src/components/fieldsDisplayForm/utils/FormComposition.js b/src/components/fieldsDisplayForm/utils/FormComposition.js
index b09b3e7..133b30c 100644
--- a/src/components/fieldsDisplayForm/utils/FormComposition.js
+++ b/src/components/fieldsDisplayForm/utils/FormComposition.js
@@ -196,8 +196,6 @@ export function pushSubform(
inputId: id ? id : null,
error: {
errorMsg: {
- question: question ? "" : "Este campo é obrigatório!",
- description: "",
subformUsage: "",
},
},
diff --git a/src/components/fieldsDisplayForm/utils/schemas.js b/src/components/fieldsDisplayForm/utils/schemas.js
index ce0fffa..95c57f6 100644
--- a/src/components/fieldsDisplayForm/utils/schemas.js
+++ b/src/components/fieldsDisplayForm/utils/schemas.js
@@ -15,9 +15,11 @@ export async function testQuestionTextSchema(error, value) {
}
/** Function that applies the validation of it's used schema and sets the error messages. */
export async function testDescriptionTextSchema(error, value) {
- value && checkText(value)
- ? (error.errorMsg.description = "")
- : (error.errorMsg.description = "O caractere não é permitido");
+ value
+ ? checkText(value)
+ ? (error.errorMsg.description = "")
+ : (error.errorMsg.description = "O caractere não é permitido")
+ : (error.errorMsg.description = "");
}
/** Schema to validate the number of options at options field from FormFieldSelect, FormFieldCheckbox and FormFieldRadio. */
const selectOptionsSchema = Yup.array()
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 8c66485..d532abc 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -5,14 +5,14 @@ import logo from "./header_imgs/imgsimmc-01.png";
import { makeStyles } from "@material-ui/core";
import MenuListComposition from "./header_components/MenuList";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
header: {
background: "#05a5dd",
width: "auto",
display: "flex",
flexDirection: "column",
justifyContent: "center",
- height: "13%"
+ height: "13%",
},
simmc: {
marginTop: "5%",
@@ -20,8 +20,8 @@ const useStyles = makeStyles(theme => ({
color: "#ffffff",
marginLeft: "2%",
["@media (max-width:1040px)"]: {
- display: "none"
- }
+ display: "none",
+ },
},
form_creator: {
color: "#ffffff",
@@ -30,15 +30,15 @@ const useStyles = makeStyles(theme => ({
fontSize: "21px",
["@media (max-width:525px)"]: {
marginTop: "5%",
- marginLeft: "10%"
+ marginLeft: "10%",
},
["@media (max-width:337px)"]: {
- fontSize: "19px"
- }
- }
+ fontSize: "19px",
+ },
+ },
},
link: {
- textDecoration: "none"
+ textDecoration: "none",
},
logo: {
marginLeft: "2.5%",
@@ -47,14 +47,14 @@ const useStyles = makeStyles(theme => ({
["@media (max-width:600px)"]: {
width: "65px",
["@media (max-width:338px)"]: {
- marginTop: "3%"
- }
- }
+ marginTop: "3%",
+ },
+ },
},
userImgContainer: {
display: "flex",
- flexDirection: "column"
- }
+ flexDirection: "column",
+ },
}));
export default function Header() {
diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js
index f34aacc..33ba0f7 100644
--- a/src/pages/SignIn.js
+++ b/src/pages/SignIn.js
@@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
textAlign: "center",
},
noAcc: {
- marginTop: "10px"
+ marginTop: "10px",
},
button: {
type: "submit",
--
GitLab