diff --git a/src/components/fieldsCreateForm/FormFieldSubform.js b/src/components/fieldsCreateForm/FormFieldSubform.js
index 628b6b362ce977108f2a67f16c2807dd3f5765de..b99dce2256cbea3e1bbff3f85fc6b9a0273a8c43 100644
--- a/src/components/fieldsCreateForm/FormFieldSubform.js
+++ b/src/components/fieldsCreateForm/FormFieldSubform.js
@@ -2,16 +2,13 @@ import React, { useEffect } 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 api from "../../api";
import FieldFooterOptions from "./FieldFooterOptions";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
-import InfoIcon from "@material-ui/icons/Info";
import { Draggable } from "react-beautiful-dnd";
-import Tooltip from "@material-ui/core/Tooltip";
import DefaultField from "./DefaultField";
/** CSS styles used on page components. */
@@ -57,11 +54,6 @@ const useStyles = makeStyles((theme) => ({
width: "80%",
},
},
- tooltipAdjustment: {
- ["@media (max-width: 600px)"]: {
- flexDirection: "column-reverse",
- },
- },
footerOptsAdjustment: {
["@media (min-width: 600px)"]: {
marginBottom: "3%",
@@ -71,27 +63,13 @@ const useStyles = makeStyles((theme) => ({
/** Function that returns the component to select te subform to be used. */
function SubformSelect(props) {
- /** State to store the form being used. */
- const [usedForm, setUsedForm] = React.useState({});
/** Style class. */
const classes = useStyles();
- /** State to manage errors. */
- const [error, setError] = React.useState(true);
/** Functions that handle the input changes to save it at the father component. */
const handleChange = (event) => {
- setUsedForm(props.array.filter((x) => x.id === event.target.value));
+ console.log(event.target);
props.setSubformId(event.target.value, props.idq);
- setError(false);
};
- /** Initial error state setting. */
- useEffect(() => {
- if (
- props.error.errorMsg.subformUsage ||
- props.error.errorMsg.subformSelected
- )
- setError(true);
- }, []);
-
return (
<FormControl variant="outlined" className={classes.subformSelect}>
<InputLabel
@@ -105,12 +83,11 @@ function SubformSelect(props) {
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
- value={usedForm.title}
- renderValue={usedForm.title}
+ value={props.subformId}
onChange={handleChange}
label="Selecione um subformulário"
style={{ width: "100%" }}
- error={error ? true : false}
+ error={props.subformId ? false : true}
>
{props.array.length > 0 ? (
props.array.map((form) => (
@@ -155,8 +132,8 @@ export default function FormFieldSubform(props) {
{...provided.dragHandleProps}
>
<Grid container>
- <Grid container item className={classes.tooltipAdjustment}>
- <Grid container item xs={11}>
+ <Grid container item>
+ <Grid container item xs={12}>
<DefaultField
question={props.question}
description={props.description}
@@ -166,21 +143,6 @@ export default function FormFieldSubform(props) {
error={props.error}
/>
</Grid>
- <Grid
- container
- item
- xs={12}
- sm={1}
- className={classes.questionsGrid}
- >
- <Tooltip
- // style={{ position: "absolute" }}
- title="Por favor, reordene este campo antes de lhe atribuir valor"
- aria-label="Por favor, reordene este campo antes de lhe atribuir valor"
- >
- <InfoIcon />
- </Tooltip>
- </Grid>
</Grid>
<Grid item xs={12} sm={6} className={classes.questionsGrid}>
<SubformSelect
@@ -188,6 +150,8 @@ export default function FormFieldSubform(props) {
setSubformId={props.setSubformId}
idq={props.idq}
error={props.error}
+ subformId={props.subformId}
+ subformId={props.subformId}
/>
</Grid>
<Grid item sm={2} xs={12} className={classes.errorGridSubform}>
diff --git a/src/components/fieldsCreateForm/FormFieldText.js b/src/components/fieldsCreateForm/FormFieldText.js
index 6fc95fb06f26a79882eefb5dd44351334d4b9778..18b47506728b5f83ccc97169b3db0870c8bdfd98 100644
--- a/src/components/fieldsCreateForm/FormFieldText.js
+++ b/src/components/fieldsCreateForm/FormFieldText.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+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";
@@ -10,10 +10,10 @@ import Tooltip from "@material-ui/core/Tooltip";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
-import InfoIcon from "@material-ui/icons/Info";
import { Draggable } from "react-beautiful-dnd";
import FieldFooterOptions from "./FieldFooterOptions";
import DefaultField from "./DefaultField";
+import CloseIcon from "@material-ui/icons/Close";
/** CSS styles used on page components. */
const useStyles = makeStyles((theme) => ({
@@ -43,40 +43,23 @@ const useStyles = makeStyles((theme) => ({
row: {
display: "flex",
flexDirection: "row",
+ ["@media (max-width:600px)"]: {
+ flexDirection: "column",
+ marginTop: "5%",
+ },
},
}));
/** Main function that returns the content of the option 'question'. */
function FormFieldText(props) {
/** Style class. */
const classes = useStyles();
- /** Representation of the possible 'extra' validations to be used. */
+ /** Representation of the possible 'extra' validations to be used.
+ * The types are equivalent to the backend.
+ */
const validationOpts = [
- { type: "minChar", name: "MÃnimo de caracteres", value: "" },
- { type: "maxChar", name: "Máximo de caracteres", value: "" },
+ { type: 3, name: "MÃnimo de caracteres", value: "" },
+ { type: 4, name: "Máximo de caracteres", value: "" },
];
- /** State to store the validation being used. */
- const [usedValidation, setUsedValidation] = React.useState();
- /** State to manage error properties. */
- const [error, setError] = React.useState(true);
- /** An specific handle change function that updates the type of the chosen validation. */
- const handleChangeType = (event) => {
- setUsedValidation(validationOpts[event.target.value]);
- setError(false);
- };
- /** An specific handle change function that updates the value of the chosen validation. */
- const handleChangeValue = (event) => {
- setUsedValidation({
- type: usedValidation.type,
- name: usedValidation.name,
- value: event.target.value,
- });
- };
- /** useEffect being used as a handle change function to send data (the chosen type of validation and the value) to the father component. */
- useEffect(() => {
- if (usedValidation) {
- props.setValidation(usedValidation, props.idq);
- }
- }, [usedValidation]);
return (
<Draggable key={props.id} draggableId={props.id} index={props.idq}>
@@ -113,7 +96,6 @@ function FormFieldText(props) {
alignItems="flex-end"
xs={12}
sm={4}
- className={classes.row}
>
<FieldFooterOptions
deleteFromForm={props.deleteFromForm}
@@ -136,46 +118,51 @@ function FormFieldText(props) {
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
- onChange={handleChangeType}
+ onChange={(event) =>
+ props.setValidationType(event.target.value, props.idq)
+ }
+ value={props.validationType}
label="Selecione uma validação"
style={{ minWidth: "250px" }}
- error={error ? true : false}
+ error={props.validationType ? false : true}
>
- {validationOpts.map((x, index) => (
- <MenuItem key={index} value={index}>
+ {validationOpts.map((x) => (
+ <MenuItem key={x.type} value={x.type}>
{x.name}
</MenuItem>
))}
</Select>
</Grid>
- <Grid
- container
- item
- xs={12}
- sm={1}
- className={classes.questionsGrid}
- >
- <Tooltip
- // style={{ position: "absolute" }}
- title="Por favor, reordene este campo antes de lhe atribuir valor"
- aria-label="Por favor, reordene este campo antes de lhe atribuir valor"
- >
- <InfoIcon />
- </Tooltip>
- </Grid>
- {usedValidation ? (
- <Grid item xs={12} sm={4} className={classes.questionsGrid}>
+ {props.validationType ? (
+ <Grid item xs={12} sm={5} className={classes.questionsGrid}>
<TextField
style={{ width: "45%" }}
label="Quantidade"
- value={usedValidation.value}
- onChange={handleChangeValue}
+ value={props.validationValue}
+ onChange={(event) =>
+ props.setValidationValue(event.target.value, props.idq)
+ }
/>
<Grid className={classes.errorGrid}>
{props.error.errorMsg.validation.value}
</Grid>
</Grid>
) : null}
+ <Grid item xs={1}>
+ <Tooltip
+ title="Remover a validação"
+ aria-label="Remover a validação"
+ >
+ <IconButton
+ aria-label="remove validation"
+ onClick={() => {
+ props.removeValidation(props.idq);
+ }}
+ >
+ <CloseIcon />
+ </IconButton>
+ </Tooltip>
+ </Grid>
</FormControl>
) : (
<Grid
diff --git a/src/components/fieldsCreateForm/utils/BackendTranslation.js b/src/components/fieldsCreateForm/utils/BackendTranslation.js
index 6acb5c14142ae9ea2d1089673bde847d3ee3e446..698eee307d8e2beb0f65e22143c5d042456fff13 100644
--- a/src/components/fieldsCreateForm/utils/BackendTranslation.js
+++ b/src/components/fieldsCreateForm/utils/BackendTranslation.js
@@ -65,11 +65,10 @@ function setValidation(form) {
arguments: [],
});
else if (form.type === "question" && form.validation.length > 1) {
- if (form.validation[1].type === "maxChar") {
- val.push({ type: 3, arguments: [form.validation[1].value] });
- } else {
- val.push({ type: 4, arguments: [form.validation[1].value] });
- }
+ val.push({
+ type: form.validation[1].type,
+ arguments: [form.validation[1].value],
+ });
} else
val.push({
type: 2,
diff --git a/src/components/fieldsCreateForm/utils/schemas.js b/src/components/fieldsCreateForm/utils/schemas.js
index 3255a316bf94e14b7fcf2e6fd230e97233a48467..19953840c37954a0c95bd5a768c3cc6d2638bee3 100644
--- a/src/components/fieldsCreateForm/utils/schemas.js
+++ b/src/components/fieldsCreateForm/utils/schemas.js
@@ -82,7 +82,6 @@ export async function testSubformSchema(form, index) {
.validate(form)
.then((x) => {
form[index].error.errorMsg.subformUsage = "";
- form[index].error.errorMsg.subformSelected = false;
})
.catch((err) => {
form[index].error.errorMsg.subformUsage = err.message;
@@ -139,7 +138,7 @@ export function verifyError(form) {
}
}
if (x.type === "subForm") {
- if (x.error.errorMsg.subformUsage || x.error.errorMsg.subformSelected) {
+ if (x.error.errorMsg.subformUsage || !x.subformId) {
valid = false;
return;
}
diff --git a/src/pages/CreateForm.js b/src/pages/CreateForm.js
index b75453fe6aa4cc06c991dc3447668fc264e19094..9a2a477250a6e7d16eb9dc6890b1c91623c0bd87 100644
--- a/src/pages/CreateForm.js
+++ b/src/pages/CreateForm.js
@@ -25,7 +25,6 @@ import SideMenu from "../components/fieldsCreateForm/SideMenu";
import api from "../api";
import Tooltip from "@material-ui/core/Tooltip";
-
/** CSS styles used on page components */
const useStyles = makeStyles((theme) => ({
app: {
@@ -217,7 +216,6 @@ function CreateForm() {
question: "Este campo é obrigatório!",
description: "",
subformUsage: "",
- subformSelected: true,
},
},
},
@@ -275,8 +273,8 @@ function CreateForm() {
}
/** Function to update the title, used on FormFieldTitle. */
async function setTitleField(value) {
- await testQuestionTextSchema(form, value, 0);
form[0].title = value;
+ await testQuestionTextSchema(form, value, 0);
setForm([...form]);
}
/** Function to store the selected subform Id on it's corresponding object. */
@@ -285,10 +283,21 @@ function CreateForm() {
await testSubformSchema(form, index);
setForm([...form]);
}
- /** Function used on FormFieldText to set the chosen validation, currently min and max char. */
- async function setValidation(value, index) {
- form[index].validation[1] = value;
- await testTextValidation(form, index, value.value);
+ /** Function used on FormFieldText to set the chosen validation type, currently min and max char. */
+ async function setValidationType(value, index) {
+ form[index].validation[1].type = value;
+
+ setForm([...form]);
+ }
+ /** Function used on FormFieldText to set the value of the validation*/
+ async function setValidationValue(value, index) {
+ form[index].validation[1].value = value;
+ await testTextValidation(form, index, value);
+ setForm([...form]);
+ }
+ /** Function used on FormFieldText to remove the validaiton. */
+ function removeValidation(index) {
+ form[index].validation.splice(-1, 1);
setForm([...form]);
}
/** The submit function. It's triggered when the submit button is pressed on the interface. */
@@ -366,7 +375,15 @@ function CreateForm() {
error={x.error}
validation={x.validation}
addValidation={addValidation}
- setValidation={setValidation}
+ setValidationType={setValidationType}
+ setValidationValue={setValidationValue}
+ removeValidation={removeValidation}
+ validationValue={
+ x.validation[1] ? x.validation[1].value : null
+ }
+ validationType={
+ x.validation[1] ? x.validation[1].type : null
+ }
/>
);
else if (x.type === "select")
@@ -441,6 +458,7 @@ function CreateForm() {
id={x.id}
error={x.error}
validToSend={validToSend}
+ subformId={x.subformId ? x.subformId : null}
/>
);
else if (x.type === "title")