diff --git a/src/components/fieldsCreateForm/FieldFooterOptions.js b/src/components/fieldsCreateForm/FieldFooterOptions.js new file mode 100644 index 0000000000000000000000000000000000000000..f6446f0b9fbd69735a1c055d79c59f301da37250 --- /dev/null +++ b/src/components/fieldsCreateForm/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/fieldsCreateForm/FormFieldCheckbox.js b/src/components/fieldsCreateForm/FormFieldCheckbox.js new file mode 100644 index 0000000000000000000000000000000000000000..c4f88cdb7b2f7fd0b3855755d220effae4145d65 --- /dev/null +++ b/src/components/fieldsCreateForm/FormFieldCheckbox.js @@ -0,0 +1,98 @@ +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 CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; + + +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(); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <TextField value={props.question} label="sua pergunta" + onChange={e => props.setQuestionField(e.target.value, props.idq)}/> + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" xs={5} className={classes.questionsGrid} + > + { + props.options.map((x, index) => { + return <Grid container> + <Grid item container + justify="center" + alignItems="center" + xs={1} + > + <CheckBoxOutlineBlankIcon/> + </Grid> + <Grid item xs={10}> + <TextField label={"opção "+index} value={x} fullWidth + onChange={e => props.setSelectOption(e.target.value, props.idq, index)} /> + </Grid> + <Grid item xs={1}> + <IconButton aria-label="remove option" + onClick={() => { props.removeSelectOption(props.idq, index) } }> + <CloseIcon /> + </IconButton> + </Grid> + </Grid> + }) + } + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" + xs={4} + > + <IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }> + <AddCircleIcon /> + </IconButton> + </Grid> + <Grid item container + direction="row" + justify="flex-end" + alignItems="flex-end" + xs={3} + > + <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq} + setRequiredField={props.setRequiredField} required={props.required}/> + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldCheckbox; \ No newline at end of file diff --git a/src/components/fieldsCreateForm/FormFieldRadio.js b/src/components/fieldsCreateForm/FormFieldRadio.js new file mode 100644 index 0000000000000000000000000000000000000000..ce10709559547929e966015952f0e48e8dd03d4a --- /dev/null +++ b/src/components/fieldsCreateForm/FormFieldRadio.js @@ -0,0 +1,97 @@ +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 RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'; + +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(); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <TextField value={props.question} label="sua pergunta" + onChange={e => props.setQuestionField(e.target.value, props.idq)}/> + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" xs={5} className={classes.questionsGrid} + > + { + props.options.map((x, index) => { + return <Grid container> + <Grid item container + justify="center" + alignItems="center" + xs={1} + > + <RadioButtonUncheckedIcon/> + </Grid> + <Grid item xs={10}> + <TextField label={"opção "+index} value={x} fullWidth + onChange={e => props.setSelectOption(e.target.value, props.idq, index)} /> + </Grid> + <Grid item xs={1}> + <IconButton aria-label="remove option" + onClick={() => { props.removeSelectOption(props.idq, index) } }> + <CloseIcon /> + </IconButton> + </Grid> + </Grid> + }) + } + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" + xs={4} + > + <IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }> + <AddCircleIcon /> + </IconButton> + </Grid> + <Grid item container + direction="row" + justify="flex-end" + alignItems="flex-end" + xs={3} + > + <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq} + setRequiredField={props.setRequiredField} required={props.required} /> + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldRadio; \ No newline at end of file diff --git a/src/components/fieldsCreateForm/FormFieldSelect.js b/src/components/fieldsCreateForm/FormFieldSelect.js new file mode 100644 index 0000000000000000000000000000000000000000..3158b466acf45f9495309eade1ac2859283e6fb0 --- /dev/null +++ b/src/components/fieldsCreateForm/FormFieldSelect.js @@ -0,0 +1,89 @@ +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 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(); + + return ( + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={12} className={classes.questionsGrid}> + <TextField value={props.question} label="sua pergunta" + onChange={e => props.setQuestionField(e.target.value, props.idq)}/> + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" xs={5} className={classes.questionsGrid} + > + { + props.options.map((x, index) => { + return <Grid container> + <Grid item xs={11}> + <TextField label={"opção "+index} value={x} fullWidth + onChange={e => props.setSelectOption(e.target.value, props.idq, index)} /> + </Grid> + <Grid item xs={1}> + <IconButton aria-label="remove option" + onClick={() => { props.removeSelectOption(props.idq, index) } }> + <CloseIcon /> + </IconButton> + </Grid> + </Grid> + }) + } + </Grid> + <Grid item container + direction="column" + justify="flex-start" + alignItems="flex-start" + xs={4} + > + <IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }> + <AddCircleIcon /> + </IconButton> + </Grid> + <Grid item container + direction="row" + justify="flex-end" + alignItems="flex-end" + xs={3} + > + <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq} + setRequiredField={props.setRequiredField} required={props.required} /> + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldSelect; \ No newline at end of file diff --git a/src/components/fieldsCreateForm/FormFieldText.js b/src/components/fieldsCreateForm/FormFieldText.js new file mode 100644 index 0000000000000000000000000000000000000000..7b032df32bef6d8a69b7730ea78b21821a3dfb85 --- /dev/null +++ b/src/components/fieldsCreateForm/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 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}> + <TextField value={props.question} label="sua pergunta" + onChange={e => props.setQuestionField(e.target.value, props.idq)}/> + </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} + > + <FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq} + setRequiredField={props.setRequiredField} required={props.required} /> + </Grid> + </Grid> + </Paper> + ); + +} + +export default FormFieldText; \ No newline at end of file diff --git a/src/components/fieldsCreateForm/FormFieldTitle.js b/src/components/fieldsCreateForm/FormFieldTitle.js new file mode 100644 index 0000000000000000000000000000000000000000..019765277d39183f827570683cf2417ca117fc40 --- /dev/null +++ b/src/components/fieldsCreateForm/FormFieldTitle.js @@ -0,0 +1,66 @@ +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 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}> + <TextField value={props.question} label="Formulário sem título" fullWidth + onChange={e => props.setTitleField(e.target.value, props.idq)} + InputProps={{ + classes: { + input: classes.title, + }, + }}/> + </Grid> + <Grid item xs={9} className={classes.questionsGrid}> + <TextField value={props.question} label="Descrição do formulário" + onChange={e => props.setDescriptionField(e.target.value, props.idq)} + InputProps={{ + classes: { + input: classes.description, + }, + }}/> + </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