Skip to content
Snippets Groups Projects
Commit 166e54d2 authored by pdg16's avatar pdg16
Browse files

add select field option

parent 45b18fa5
No related branches found
No related tags found
3 merge requests!58Version 1.1,!54Issue #53: Fix password info,!15Issue/4
......@@ -6,6 +6,7 @@ import TextField from '@material-ui/core/TextField';
import AddIcon from '@material-ui/icons/Add';
import IconButton from '@material-ui/core/IconButton';
import ReorderIcon from '@material-ui/icons/Reorder';
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
import FormFieldText from './components/FormFieldText'
......@@ -15,7 +16,7 @@ import FormFieldSelect from './components/FormFieldSelect'
const useStyles = makeStyles(theme => ({
menu: {
width: theme.spacing(6),
height: theme.spacing(15),
minheight: theme.spacing(15),
position: 'fixed',
top: theme.spacing(10),
left: '90%',
......@@ -29,12 +30,22 @@ function App() {
const [form, setForm] = useState([]);
function addToFormQuestion() {
setForm([...form, {type: "question", question: ""}]);
setForm([...form, {type: "question", required: false, question: ""}]);
console.log(form);
}
function addToFormSelect() {
setForm([...form, {type: "select", question: "", options: []}]);
setForm([...form, {type: "select", question: "", required: false, options: [""]}]);
console.log(form);
}
function addToFormRadio() {
}
function addSelectOption(index) {
form[index].options.push("");
setForm([...form]);
console.log(form);
}
......@@ -45,17 +56,29 @@ function App() {
setForm([...form]);
}
function removeSelectOption(index, idopt) {
form[index].options.splice(idopt, 1);
setForm([...form]);
console.log(form);
}
function setTextField(value, index) {
form[index].question = value;
setForm([...form]);
console.log(form);
}
function setSelectField(value, index) {
function setSelectOption(value, index, idopt) {
form[index].options[idopt] = value;
setForm([...form]);
console.log(form);
}
function setRequiredField(index) {
form[index].required = !form[index].required;
setForm([...form]);
console.log(form);
}
return (
<div>
......@@ -69,9 +92,14 @@ function App() {
{
form.map((x, index) => {
if(x.type === "question")
return <FormFieldText question={x.question} idq={index} deleteFromForm={deleteFromForm} setTextField={setTextField}/>
return <FormFieldText question={x.question} idq={index}
deleteFromForm={deleteFromForm} setTextField={setTextField}
setRequiredField={setRequiredField}/>
else if(x.type === "select")
return <FormFieldSelect question={x.question} idq={index} deleteFromForm={deleteFromForm} setTextField={setSelectField}/>
return <FormFieldSelect question={x.question} options={x.options} idq={index}
deleteFromForm={deleteFromForm} addSelectOption={addSelectOption}
removeSelectOption={removeSelectOption} setSelectOption={setSelectOption}
setTextField={setTextField} setRequiredField={setRequiredField} />
})
}
......@@ -93,6 +121,9 @@ function App() {
<IconButton aria-label="add select" onClick={addToFormSelect}>
<ReorderIcon />
</IconButton>
<IconButton aria-label="add radio" onClick={addToFormRadio}>
<RadioButtonCheckedIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment