diff --git a/src/components/fieldsListForms/CardForm.jsx b/src/components/fieldsListForms/CardForm.jsx index 102d08e22288ef5c7db8b0a67abccec9316f2bf3..da88546bc0c11701ce3185b7e47555552629d788 100644 --- a/src/components/fieldsListForms/CardForm.jsx +++ b/src/components/fieldsListForms/CardForm.jsx @@ -65,7 +65,7 @@ const useStyles = makeStyles(theme => ({ numberOfAnswers: { fontSize: 18, - textAlign: "left", + textAlign: "center", margin: "7px" } })); diff --git a/src/pages/ListForms.js b/src/pages/ListForms.js index 70732de9e1e28a7484a5510c9d213b45388cf0e3..d609b390ddc81456d6a1a48b1c558272ef97240d 100644 --- a/src/pages/ListForms.js +++ b/src/pages/ListForms.js @@ -9,6 +9,7 @@ import { useHistory } from "react-router-dom"; // Components import CardForm from "../components/fieldsListForms/CardForm.jsx"; import Tab from "../components/fieldsListForms/Tab.jsx"; +import { Typography } from "@material-ui/core"; const useStyles = makeStyles(theme => ({ body: { marginBottom: "15%" @@ -70,9 +71,10 @@ export default function ListForms() { * @param string - the string value to be searched. */ function searching(string) { + console.log(string); setAuxForms( [...forms].filter(value => { - return value.title.includes(string); + return value.title.toLowerCase().includes(string.toLowerCase()); }) ); } @@ -108,18 +110,26 @@ export default function ListForms() { <Tab sort={sort} searching={searching} /> <Container> <Grid className={classes.Forms}>Seus Formulários:</Grid> - <Grid container spacing={3} className={classes.body}> - {auxForms.map(form => ( - <Grid item xl={4} lg={4} md={4} sm={6} xs={12} zeroMinWidth> - <CardForm - id={form.id} - title={form.title} - description={form.description} - numberOfAnswers={form.answersNumber} - date={form.date} - /> + <Grid container justify="center" spacing={3} className={classes.body}> + {auxForms.length ? ( + auxForms.map(form => ( + <Grid item xl={4} lg={4} md={4} sm={6} xs={12} zeroMinWidth> + <CardForm + id={form.id} + title={form.title} + description={form.description} + numberOfAnswers={form.answersNumber} + date={form.date} + /> + </Grid> + )) + ) : ( + <Grid item> + <Typography variant="h4"> + Nenhum formulário foi encontrado! + </Typography> </Grid> - ))} + )} </Grid> </Container> </div>