added dropdownlist and inputmultipleradio by generatingform

This commit is contained in:
kuwsh1n 2024-03-17 21:07:48 +03:00
parent 59033edfde
commit 8816dd95ef
5 changed files with 35 additions and 6 deletions

View File

@ -9,7 +9,9 @@ const DropDownList = (props) => {
<option value={item.id} key={i}>{item.text}</option> <option value={item.id} key={i}>{item.text}</option>
)} )}
</select> */} </select> */}
<select> <select
value={props.answers ? props.answers[props.id].answer : ""}
onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}>
{props.optionAnswer.map((item, i) => {props.optionAnswer.map((item, i) =>
<option value={item.id} key={i}>{item.text}</option> <option value={item.id} key={i}>{item.text}</option>
)} )}

View File

@ -2,11 +2,38 @@ import React from "react";
import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss" import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss"
const InputMultipleRadio = (props) => { const InputMultipleRadio = (props) => {
function checkRadio(i) {
if (props.answers[props.id].answer) {
return props.answers[props.id].answer.some(item => item === Number(i))
}
return false
}
function updateStateCheckbox(i) {
if (props.updateAnswersForm) {
if (props.answers[props.id].answer.some((item) => item === Number(i))) {
props.answers[props.id].answer.splice(props.answers[props.id].answer.indexOf(i), 1)
}
else {
props.answers[props.id].answer.push(i)
}
props.updateAnswersForm(props.answers[props.id].answer, props.id)
}
}
return ( return (
<div className={classes.main}> <div className={classes.main}>
{props.optionAnswer.map((item, i) => {props.optionAnswer.map((item, i) =>
<div class="form-check" key={i}> <div class="form-check" key={i}>
<input class="form-check-input" type="checkbox" name={`inputMultiple_${props.postfix}`} id={`inputMultiple_${props.postfix}`}/> <input
class="form-check-input"
type="checkbox"
name={`inputMultiple_${props.postfix}`}
id={`inputMultiple_${props.postfix}`}
value={i}
checked={props.answers ? checkRadio(i) : false}
onChange={() => updateStateCheckbox(i)}
/>
<label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label> <label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label>
</div> </div>
)} )}

View File

@ -13,7 +13,8 @@ const InputRadio = (props) => {
id={`choice_${item.id}`} id={`choice_${item.id}`}
value={i} value={i}
checked={props.answers ? props.answers[props.id].answer === i : false} checked={props.answers ? props.answers[props.id].answer === i : false}
onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}/> onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}
/>
<label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label> <label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
</div> </div>
)} )}

View File

@ -56,7 +56,7 @@ const Forms = () => {
{forms.map((item, i) => {forms.map((item, i) =>
<div className={classes.listForms__forms__item} key={i}> <div className={classes.listForms__forms__item} key={i}>
<div className={classes.listForms__forms__item__title} onClick={() => editForm(item)}>{item.title}</div> <div className={classes.listForms__forms__item__title} onClick={() => editForm(item)}>{item.title}</div>
<div className={classes.listForms__forms__item__answers}>{item.answers}</div> <div className={classes.listForms__forms__item__answers}>{item.datetime}</div>
<div className={classes.listForms__forms__item__update}>{item.update}</div> <div className={classes.listForms__forms__item__update}>{item.update}</div>
<i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i> <i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i>
<ul class="dropdown-menu" aria-labelledby="action"> <ul class="dropdown-menu" aria-labelledby="action">

View File

@ -17,12 +17,11 @@ const ViewForm = () => {
const [answers, setAnswers] = useState( const [answers, setAnswers] = useState(
newForm() ? newForm().listAnswer.map(item => ( newForm() ? newForm().listAnswer.map(item => (
{id: item.id, answer: ""} {id: item.id, answer: []}
)) : "" )) : ""
); );
function updateAnswersForm(value, id) { function updateAnswersForm(value, id) {
console.log(value, id)
setAnswers( setAnswers(
answers.map((item, i) => { answers.map((item, i) => {
if (id === i) { if (id === i) {