diff --git a/src/components/fieldsAnswerForm/FieldFooterOptions.js b/src/components/fieldsAnswerForm/FieldFooterOptions.js new file mode 100644 index 0000000000000000000000000000000000000000..f6446f0b9fbd69735a1c055d79c59f301da37250 --- /dev/null +++ b/src/components/fieldsAnswerForm/FieldFooterOptions.js @@ -0,0 +1,40 @@ +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'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import IconButton from '@material-ui/core/IconButton'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; +import AddCircleIcon from '@material-ui/icons/AddCircle'; +import CloseIcon from '@material-ui/icons/Close'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +function FieldFooterOptions(props) { + + return ( + <> + <FormControlLabel + control={ + <Switch + onChange={e => props.setRequiredField(props.idq) } + value="required" + color="primary" + checked={props.required} + /> + } + label="Obrigatória" + /> + <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }> + <DeleteOutlinedIcon /> + </IconButton> + </> + ); + + +} + + +export default FieldFooterOptions; \ No newline at end of file diff --git a/src/components/fieldsAnswerForm/FormFieldCheckbox.js b/src/components/fieldsAnswerForm/FormFieldCheckbox.js new file mode 100644 index 0000000000000000000000000000000000000000..7b4adf5bcee7769442b311a8b9243a0811b966eb --- /dev/null +++ b/src/components/fieldsAnswerForm/FormFieldCheckbox.js @@ -0,0 +1,62 @@ +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'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import IconButton from '@material-ui/core/IconButton'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; +import AddCircleIcon from '@material-ui/icons/AddCircle'; +import CloseIcon from '@material-ui/icons/Close'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Typography from '@material-ui/core/Typography'; +import Checkbox from '@material-ui/core/Checkbox'; + +import FieldFooterOptions from './FieldFooterOptions'; + + +const useStyles = makeStyles(theme => ({ + paper: { + padding: theme.spacing(3), + width: theme.spacing(100), + minheight: theme.spacing(16), + margin: theme.spacing(2) + }, + questionsGrid: { + marginBottom: '20px' + }, +})); + + + +function FormFieldCheckbox(props) { + const classes = useStyles(); + + const options = props.options.map(function(x) { + return <span>{x.value} <Checkbox /></span>; + }); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <Typography variant="h6" gutterBottom> + {props.question} + </Typography> + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" xs={5} className={classes.questionsGrid} + > + {options} + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldCheckbox; \ No newline at end of file diff --git a/src/components/fieldsAnswerForm/FormFieldRadio.js b/src/components/fieldsAnswerForm/FormFieldRadio.js new file mode 100644 index 0000000000000000000000000000000000000000..4f79cfeb0621ed39e856e507a1bcd6f8a0f101b8 --- /dev/null +++ b/src/components/fieldsAnswerForm/FormFieldRadio.js @@ -0,0 +1,65 @@ +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'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import IconButton from '@material-ui/core/IconButton'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; +import AddCircleIcon from '@material-ui/icons/AddCircle'; +import CloseIcon from '@material-ui/icons/Close'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Typography from '@material-ui/core/Typography'; +import Radio from '@material-ui/core/Radio'; +import RadioGroup from '@material-ui/core/RadioGroup'; + +import FieldFooterOptions from './FieldFooterOptions'; + + +const useStyles = makeStyles(theme => ({ + paper: { + padding: theme.spacing(3), + width: theme.spacing(100), + minheight: theme.spacing(16), + margin: theme.spacing(2) + }, + questionsGrid: { + marginBottom: '20px' + }, +})); + + + +function FormFieldRadio(props) { + const classes = useStyles(); + + const options = props.options.map(function(x) { + return <span>{x.value} <Radio /></span>; + }); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <Typography variant="h6" gutterBottom> + {props.question} + </Typography> + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" xs={5} className={classes.questionsGrid} + > + <RadioGroup> + {options} + </RadioGroup> + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldRadio; \ No newline at end of file diff --git a/src/components/fieldsAnswerForm/FormFieldSelect.js b/src/components/fieldsAnswerForm/FormFieldSelect.js new file mode 100644 index 0000000000000000000000000000000000000000..46ee77babe54fa416c76aaac1f39e05cd0eb805a --- /dev/null +++ b/src/components/fieldsAnswerForm/FormFieldSelect.js @@ -0,0 +1,67 @@ +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'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import IconButton from '@material-ui/core/IconButton'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; +import AddCircleIcon from '@material-ui/icons/AddCircle'; +import CloseIcon from '@material-ui/icons/Close'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Typography from '@material-ui/core/Typography'; + +import FieldFooterOptions from './FieldFooterOptions'; + + +const useStyles = makeStyles(theme => ({ + paper: { + padding: theme.spacing(3), + width: theme.spacing(100), + minheight: theme.spacing(16), + margin: theme.spacing(2) + }, + questionsGrid: { + marginBottom: '20px' + }, +})); + + + +function FormFieldSelect(props) { + const classes = useStyles(); + + const options = props.options.map(function(x) { + return <MenuItem value={x.value}>{x.value}</MenuItem>; + }); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <Typography variant="h6" gutterBottom> + {props.question} + </Typography> + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" xs={5} className={classes.questionsGrid} + > + <Select + labelId="demo-simple-select-label" + id="demo-simple-select" + // onChange={handleChange} + > + {options} + </Select> + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldSelect; \ No newline at end of file diff --git a/src/components/fieldsAnswerForm/FormFieldText.js b/src/components/fieldsAnswerForm/FormFieldText.js new file mode 100644 index 0000000000000000000000000000000000000000..c42f755c45b67dca362bd7c632478221c516b656 --- /dev/null +++ b/src/components/fieldsAnswerForm/FormFieldText.js @@ -0,0 +1,56 @@ +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'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; + +import FieldFooterOptions from './FieldFooterOptions'; + +const useStyles = makeStyles(theme => ({ + paper: { + padding: theme.spacing(3), + width: theme.spacing(100), + height: theme.spacing(16), + margin: theme.spacing(2) + }, + questionsGrid: { + marginBottom: '20px' + }, +})); + +function FormFieldText(props) { + const classes = useStyles(); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <Typography variant="h6" gutterBottom> + {props.question} + </Typography> + </Grid> + <Grid item xs={9} className={classes.questionsGrid}> + <TextField + disabled + id="outlined-disabled" + label="" + defaultValue="Resposta curta" + /> + </Grid> + <Grid item container + direction="row" + justify="flex-end" + alignItems="flex-end" + xs={3} + > + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldText; \ No newline at end of file diff --git a/src/components/fieldsAnswerForm/FormFieldTitle.js b/src/components/fieldsAnswerForm/FormFieldTitle.js new file mode 100644 index 0000000000000000000000000000000000000000..52c907b48c241a0715c967379024f82e2d75446b --- /dev/null +++ b/src/components/fieldsAnswerForm/FormFieldTitle.js @@ -0,0 +1,59 @@ +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'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; + +import FieldFooterOptions from './FieldFooterOptions'; + +const useStyles = makeStyles(theme => ({ + paper: { + padding: theme.spacing(3), + width: theme.spacing(100), + height: theme.spacing(16), + margin: theme.spacing(2) + }, + questionsGrid: { + marginBottom: '20px' + }, + title: { + fontSize: 'xx-large' + }, + description: { + fontSize: 'x-large' + }, +})); + +function FormFieldText(props) { + const classes = useStyles(); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <Typography variant="h3" gutterBottom> + {props.title} + </Typography> + </Grid> + <Grid item xs={9} className={classes.questionsGrid}> + <Typography variant="h4" gutterBottom> + {props.description} + </Typography> + </Grid> + <Grid item container + direction="row" + justify="flex-end" + alignItems="flex-end" + xs={3} + > + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldText; \ No newline at end of file