Issue #19: Correção de problemas na tela de criação de formulários

Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>

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}>

src/components/fieldsCreateForm/FormFieldText.js

-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

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,

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;
       }

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")