diff --git a/src/components/fieldsListForms/CardForm.jsx b/src/components/fieldsListForms/CardForm.jsx
index 639a67db16101f5561f02a670426c2877439258f..1e2a0f9197d7c9bbb6e5e75019d910ee0010d9a3 100644
--- a/src/components/fieldsListForms/CardForm.jsx
+++ b/src/components/fieldsListForms/CardForm.jsx
@@ -1,9 +1,12 @@
import React, { useState, useEffect } from "react";
import Divider from "@material-ui/core/Divider";
+import api from "../../api";
+import createBackendForm from "../fieldsDisplayForm/utils/BackendTranslation";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import IconButton from "@material-ui/core/IconButton";
+import Chip from "@material-ui/core/Chip";
import Tooltip from "@material-ui/core/Tooltip";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
@@ -15,65 +18,69 @@ import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
import ShareButton from "./ShareButton";
import VisibilityOutlinedIcon from "@material-ui/icons/VisibilityOutlined";
import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
+import { get } from "object-path";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
title: {
fontSize: 20,
flex: 1,
width: 0,
+ marginLeft: 5,
textAlign: "center",
- color: "#667079"
+ color: "#667079",
},
description: {
- alignSelf: "center"
+ alignSelf: "center",
},
container: {
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-start",
- color: "#667079"
+ color: "#667079",
},
item: {
- margin: "5px"
+ margin: "5px",
},
expPainelD: {
- display: "block"
+ display: "block",
},
date: {
fontSize: 16,
textAlign: "center",
- color: "#667079"
+ color: "#667079",
},
create: {
fontSize: 13,
textAlign: "center",
- color: "#667079"
+ color: "#667079",
},
icons: {
marginLeft: "20%",
["@media (max-width: 370px)"]: {
- marginLeft: "10%"
- }
+ marginLeft: "10%",
+ },
},
numberOfAnswers: {
fontSize: 18,
textAlign: "center",
- margin: "7px"
- }
+ margin: "7px",
+ },
}));
function CardForm(props) {
const classes = useStyles();
const history = useHistory();
+ const [formData, setFormData] = useState(0);
+
const handleAnswer = () => {
//redirecionar para /answer/props.id
if (props.numberOfAnswers) {
@@ -96,14 +103,53 @@ function CardForm(props) {
history.push(path);
};
- function handleDelete(value) {
+ function handleDeactivate(value) {
if (value) {
- // deleteForm();
+ deactivateForm(props.status);
}
}
- async function deleteForm() {
- // const res = await api
+ async function getForm(id) {
+ const res = await api
+ .get(`/form/${id}`)
+ .then(function (res) {
+ setFormData(res.data);
+ })
+ .catch((error) => {
+ if (error.response.status === 401) {
+ window.sessionStorage.removeItem("token");
+ window.sessionStorage.removeItem("userId");
+ let path = `/signin`;
+ history.push(path);
+ return;
+ }
+ });
+ }
+
+ async function deactivateForm(status) {
+ var newForm = { ...formData };
+ newForm.status = !status;
+
+ const res = await api
+ .put(`/form/${props.id}`, newForm, {
+ headers: {
+ authorization: `bearer ${window.sessionStorage.getItem("token")}`,
+ },
+ })
+ .then(function (error) {
+ if (!error.response)
+ alert(`Formulário ${props.status ? "desativado!" : "reativado!"}`);
+ history.go(0);
+ })
+ .catch((error) => {
+ if (error.response.status === 401) {
+ window.sessionStorage.removeItem("token");
+ window.sessionStorage.removeItem("userId");
+ let path = `/signin`;
+ history.push(path);
+ return;
+ }
+ });
}
function manageDate(date) {
@@ -116,9 +162,14 @@ function CardForm(props) {
return newDate.toLocaleDateString("pt-BR", options);
}
+ useEffect(() => {
+ getForm(props.id);
+ }, [props.id]);
+
return (
- <ExpansionPanel>
+ <ExpansionPanel class={classes.card}>
<ExpansionPanelSummary expandIcon={<MoreVertOutlinedIcon />}>
+ {!props.status ? <Chip size="small" label="Desativado" /> : null}
<Typography noWrap className={classes.title}>
{props.title}
<br />
@@ -148,12 +199,15 @@ function CardForm(props) {
</Tooltip>
<Tooltip title="Respostas" arrow>
- <IconButton aria-label="delete" onClick={handleAnswer}>
+ <IconButton aria-label="answers" onClick={handleAnswer}>
<QuestionAnswerOutlinedIcon />
</IconButton>
</Tooltip>
- {/*<DeleteButton handleDelete={handleDelete} />*/}
+ <DeleteButton
+ handleDeactivate={handleDeactivate}
+ status={props.status}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
);
diff --git a/src/components/fieldsListForms/DeleteButton.jsx b/src/components/fieldsListForms/DeleteButton.jsx
index 244545bc5d3517a877ef08b9b4bf7632c516d6e3..ad9b9e6590aacf495c41d0df7badd0171f0319cf 100644
--- a/src/components/fieldsListForms/DeleteButton.jsx
+++ b/src/components/fieldsListForms/DeleteButton.jsx
@@ -1,7 +1,8 @@
import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
-import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
+import HighlightOffOutlined from "@material-ui/icons/HighlightOffOutlined";
+import CheckCircleOutline from "@material-ui/icons/CheckCircleOutline";
import IconButton from "@material-ui/core/IconButton";
import DialogActions from "@material-ui/core/DialogActions";
import Tooltip from "@material-ui/core/Tooltip";
@@ -9,13 +10,16 @@ import DialogTitle from "@material-ui/core/DialogTitle";
import { useTheme } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
-const useStyles = makeStyles(theme => ({
- buttonNo: {
- color: "red"
+const useStyles = makeStyles((theme) => ({
+ buttonDeactivate: {
+ color: "red",
+ },
+ buttonReactivate: {
+ color: "green",
},
buttonYes: {
- color: "blue"
- }
+ color: "blue",
+ },
}));
function DeleteButton(props) {
@@ -29,12 +33,12 @@ function DeleteButton(props) {
const handleCloseFalse = () => {
setOpen(false);
- props.handleDelete(false);
+ props.handleDeactivate(false);
};
const handleCloseTrue = () => {
setOpen(false);
- props.handleDelete(true);
+ props.handleDeactivate(true);
};
const handleClose = () => {
@@ -43,9 +47,9 @@ function DeleteButton(props) {
return (
<>
- <Tooltip title="Deletar" arrow>
+ <Tooltip title={props.status ? "Desativar" : "Reativar"} arrow>
<IconButton aria-label="delete" onClick={handleClickOpen}>
- <DeleteOutlineOutlinedIcon />
+ {props.status ? <HighlightOffOutlined /> : <CheckCircleOutline />}
</IconButton>
</Tooltip>
<Dialog
@@ -54,14 +58,27 @@ function DeleteButton(props) {
aria-labelledby="responsive-dialog-title"
>
<DialogTitle id="responsive-dialog-title">
- {"Tem certeza que deseja deletar este formulário?"}
+ {props.status
+ ? "Tem certeza que deseja desativar este formulário?"
+ : "Tem certeza que deseja reativar este formulário?"}
</DialogTitle>
<DialogActions>
- <Button autoFocus onClick={handleCloseFalse} className={classes.buttonYes} color="primary">
- Não deletar
+ <Button
+ autoFocus
+ onClick={handleCloseFalse}
+ className={classes.buttonYes}
+ color="primary"
+ >
+ Não {props.status ? "Desativar" : "Reativar"}
</Button>
- <Button onClick={handleCloseTrue} className={classes.buttonNo} autoFocus>
- Deletar
+ <Button
+ onClick={handleCloseTrue}
+ className={
+ props.status ? classes.buttonDeactivate : classes.buttonReactivate
+ }
+ autoFocus
+ >
+ {props.status ? "Desativar" : "Reativar"}
</Button>
</DialogActions>
</Dialog>
@@ -69,4 +86,4 @@ function DeleteButton(props) {
);
}
-export default DeleteButton;
\ No newline at end of file
+export default DeleteButton;
diff --git a/src/components/fieldsListForms/Tab.jsx b/src/components/fieldsListForms/Tab.jsx
index e4b96d696c5f59ef72f83577051a93ab5be38f5e..00fcb8d09caa6ee6ea4a6d93f2db475869235cef 100644
--- a/src/components/fieldsListForms/Tab.jsx
+++ b/src/components/fieldsListForms/Tab.jsx
@@ -1,6 +1,8 @@
import React, { useState, useEffect } from "react";
import Button from "@material-ui/core/Button";
import FormControl from "@material-ui/core/FormControl";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
import Grid from "@material-ui/core/Grid";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
@@ -9,12 +11,12 @@ import SearchBar from "./SearchBar.jsx";
import { useHistory } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
container: {
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: "white",
- marginBottom: "20px"
+ marginBottom: "20px",
},
formControl: {
@@ -22,12 +24,12 @@ const useStyles = makeStyles(theme => ({
minWidth: 120,
["@media (max-width: 446px)"]: {
marginLeft: "100px",
- marginBottom: "20px"
- }
+ marginBottom: "20px",
+ },
},
selectEmpty: {
- marginTop: theme.spacing(2)
+ marginTop: theme.spacing(2),
},
button: {
@@ -39,45 +41,69 @@ const useStyles = makeStyles(theme => ({
["@media (max-width: 710px)"]: {
marginBottom: "20px",
marginLeft: "170px",
- marginBottom: "20px"
+ marginBottom: "20px",
},
["@media (max-width: 446px)"]: {
marginLeft: "60px",
- marginBottom: "20px"
- }
+ marginBottom: "20px",
+ },
},
gridButton: {
display: "flex",
alignItems: "center",
marginRight: "20px",
- color: "white"
+ color: "white",
},
gridMenu: {
width: "254px",
display: "flex",
alignItems: "center",
- marginLeft: "20px"
+ marginLeft: "20px",
+ ["@media (max-width: 446px)"]: {
+ flexDirection: "column",
+ },
+ },
+
+ gridSwitch: {
+ width: "254px",
+ display: "flex",
+ marginLeft: "20px",
+ ["@media (max-width: 446px)"]: {
+ marginLeft: "100px",
+ },
},
searchBar: {
display: "flex",
- justifyContent: "center"
- }
+ justifyContent: "center",
+ },
}));
function Tab(props) {
const classes = useStyles();
const history = useHistory();
const [seletectedValue, setseletectedValue] = React.useState("");
+ const [disabled, setDisabled] = React.useState(false);
+ const [searchString, setSearchString] = React.useState("");
/** Function to handle event */
- const handleChange = event => {
- props.sort(event.target.value);
+ const handleChange = (event) => {
+ props.sort(event.target.value, disabled, searchString);
setseletectedValue(event.target.value);
};
+ const handleSwitch = (event) => {
+ props.sort(seletectedValue, event.target.checked, searchString);
+ setDisabled(event.target.checked);
+ };
+
+ const handleSearch = (value) => {
+ props.sort(seletectedValue, disabled, value);
+ setSearchString(value);
+ };
+
const handleClick = () => {
let path = `/create`;
history.push(path);
@@ -94,9 +120,7 @@ function Tab(props) {
className={classes.selectEmpty}
inputProps={{ "aria-label": "Without label" }}
>
- <MenuItem value="">
- Original
- </MenuItem>
+ <MenuItem value="">Original</MenuItem>
<MenuItem value={1}>Alfabética</MenuItem>
<MenuItem value={2}>Mais recente</MenuItem>
<MenuItem value={3}>Relevância</MenuItem>
@@ -104,9 +128,22 @@ function Tab(props) {
</Select>
<FormHelperText>Ordenar</FormHelperText>
</FormControl>
+ <Grid item className={classes.gridSwitch}>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={disabled}
+ onChange={handleSwitch}
+ name="checkedB"
+ color="primary"
+ />
+ }
+ label="Ocultar formulários desativados"
+ />
+ </Grid>
</Grid>
<Grid justify="center" className={classes.searchBar}>
- <SearchBar searching={props.searching} />
+ <SearchBar searching={handleSearch} />
</Grid>
<Grid item className={classes.gridButton}>
<Button
diff --git a/src/components/fieldsVisualizeForm/FormFieldSubform.js b/src/components/fieldsVisualizeForm/FormFieldSubform.js
index 038d612e0e66821f8554e839e23807f9f5f41ad8..895c5f3136e3305833f781a3a6b506f5b9a514e2 100644
--- a/src/components/fieldsVisualizeForm/FormFieldSubform.js
+++ b/src/components/fieldsVisualizeForm/FormFieldSubform.js
@@ -61,6 +61,7 @@ function FormFieldSubform(props) {
return (
<>
{formData ? (
+ formData.status ? (
formData.inputs.map((input, index) => {
if (input.type === 0)
return (
@@ -107,7 +108,7 @@ function FormFieldSubform(props) {
/>
);
})
- ) : (
+ ) : "") : (
<Grid container justify="center" className={classes.progress}>
<CircularProgress />
</Grid>
diff --git a/src/pages/AnswerForm.js b/src/pages/AnswerForm.js
index 494a09b38f9f68f1284ef065fea786868eb78c39..85d69f860964e84d8f93ec7a77609a37efe8cedd 100644
--- a/src/pages/AnswerForm.js
+++ b/src/pages/AnswerForm.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
import api from "../api";
import Button from "@material-ui/core/Button";
import { useHistory } from "react-router-dom";
@@ -277,8 +278,10 @@ function AnwserForm() {
alignItems="center"
justify="center"
>
+
<Grid item className={classes.questions}>
{formData ? (
+ formData.status ? (
<div>
<FormFieldTitle
title={formData.title}
@@ -341,22 +344,28 @@ function AnwserForm() {
);
})}
</div>
- ) : (
+ ) :
+ <Grid item>
+ <Typography variant="h4">
+ Este formulário foi desativado pelo seu dono.
+ </Typography>
+ </Grid>) : (
<Grid container justify="center" className={classes.progress}>
<CircularProgress />
</Grid>
)}
</Grid>
- <Grid>
- <Button
- type="submit"
- variant="contained"
- className={classes.button}
- onClick={() => answerForm(id)}
- >
- Responder
- </Button>
- </Grid>
+ {formData. status ?
+ <Grid>
+ <Button
+ type="submit"
+ variant="contained"
+ className={classes.button}
+ onClick={() => answerForm(id)}
+ >
+ Responder
+ </Button>
+ </Grid> : ""}
</Grid>
);
}
diff --git a/src/pages/ListForms.js b/src/pages/ListForms.js
index 7c5e07b099b7396d4289213d434d11b5d23c944b..eb279e5c73945a5a6ddb469b8ba5d94b1035a736 100644
--- a/src/pages/ListForms.js
+++ b/src/pages/ListForms.js
@@ -41,37 +41,51 @@ export default function ListForms() {
/**
* Sorting function to sort the forms by some especified type.
* @param type - the type of the sorting that was selected.
+ * @param switchstate - whether or not the "hide disabled forms" switch is active.
+ * @param string - the string value to be searched.
*/
- function sort(type) {
+ function sort(type, switchstate, string) {
+ const switchForms = switchstate ? [...forms].filter(f => f.status) : [...forms];
+ const searchForms = [...switchForms].filter(value => {
+ return value.title.toLowerCase().includes(string.toLowerCase());
+ });
+
setAuxForms([]);
if (type === "") {
- const tmp = [...forms].sort(function (a, b) {
+ const tmp = [...searchForms].sort(function (a, b) {
return a.id > b.id ? 1 : -1;
});
setAuxForms(tmp);
} else if (type === 1) {
- const tmp = [...forms].sort((a, b) => {
+ const tmp = [...searchForms].sort((a, b) => {
return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
});
setAuxForms(tmp);
} else if (type === 2) {
- const tmp = [...forms].sort(function (a, b) {
+ const tmp = [...searchForms].sort(function (a, b) {
return a.id < b.id ? 1 : -1;
});
setAuxForms(tmp);
} else if (type === 3) {
- const tmp = [...forms].sort(function (a, b) {
+ const notDisabled = [...searchForms].filter(f => f.status);
+ const disabled = [...searchForms].filter(f => !f.status);
+ const tmp1 = [...notDisabled].sort(function (a, b) {
+ return a.answersNumber < b.answersNumber ? 1 : -1;
+ });
+ const tmp2 = [...disabled].sort(function (a, b) {
return a.answersNumber < b.answersNumber ? 1 : -1;
});
+ const tmp = [...tmp1, ...tmp2];
+
setAuxForms(tmp);
} else if (type === 4) {
- let tmp = [...forms]
+ let tmp = [...searchForms]
.filter(value => {
return value.date;
})
.sort((a, b) => a.date > b.date)
.concat(
- [...forms].filter(value => {
+ [...searchForms].filter(value => {
return value.date === "";
})
);
@@ -82,7 +96,7 @@ export default function ListForms() {
/**
* Function to search for a form title.
* @param string - the string value to be searched.
- */
+
function searching(string) {
setAuxForms(
[...forms].filter(value => {
@@ -90,6 +104,7 @@ export default function ListForms() {
})
);
}
+ */
/**
* Async function to get all of the forms from an user.
@@ -99,8 +114,8 @@ export default function ListForms() {
const res = await api
.get(`/user/list/${id}`)
.then(function (res) {
- setForms(res.data.sort((a, b) => a.id > b.id));
- setAuxForms(res.data.sort((a, b) => a.id > b.id));
+ setForms((res.data.sort((a, b) => a.id > b.id)));
+ setAuxForms((res.data.sort((a, b) => a.id > b.id)));
setisLoaded(true);
})
.catch(error => {
@@ -121,7 +136,7 @@ export default function ListForms() {
return isLoaded ? (
<>
<div>
- <Tab sort={sort} searching={searching} />
+ <Tab sort={sort}/>
<Container>
<Grid className={classes.Forms}>Seus Formulários:</Grid>
<Grid container justify="center" spacing={3} className={classes.body}>
@@ -134,6 +149,8 @@ export default function ListForms() {
description={form.description}
numberOfAnswers={form.answersNumber}
date={form.date}
+ status={form.status}
+ formObj={form}
/>
</Grid>
))