KRBL/MinervaFrontend
9
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

completed update components by typeAnswer

Browse Source
This commit is contained in:
kuwsh1n 2024-03-18 01:19:51 +03:00
parent 8816dd95ef
commit 7b1dab7002
11 changed files with 69 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/styles/viewForm.module.scss
View File

@ -16,7 +16,6 @@
overflow-y: auto;
width: 70%;
height: 80%;
// box-shadow: 0 -1px 5px 1px rgb(200, 200, 200);
border: 2px solid rgb(220, 220, 220);
&::-webkit-scrollbar {
width: 7px;
@ -33,6 +32,15 @@
justify-content: space-between;
align-items: center;
padding: 10px 20px;
&__title {
font-size: 17px;
font-weight: bold;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
&__id {
}
}
&__content {
width: 100%;
@ -55,7 +63,6 @@
}
.footer {
// box-shadow: 0 1px 5px 1px rgb(220, 220, 220);
width: 70%;
height: 10%;
display: flex;

1
src/components/GeneratingFormFields.jsx
View File

@ -15,7 +15,6 @@ const GeneratingFormFields = ({newForm, listTypeAnswer, answers, updateAnswersFo
postfix: i,
optionAnswer: item.optionAnswer,
answers: answers ? answers : false,
id: i,
updateAnswersForm: updateAnswersForm ? updateAnswersForm : false
})
}

14
src/components/typeAnswer/DropDownList.jsx
View File

@ -1,18 +1,14 @@
import React, { useState } from "react";
import classes from "../../assets/styles/components/typeAnswer/dropDownList.module.scss"
const DropDownList = (props) => {
const DropDownList = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
{/* <select value={value} onChange={e => setValue(e.target.value)}>
{props.answers.map((item, i) =>
<option value={item.id} key={i}>{item.text}</option>
)}
</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) =>
value={answers ? answers[postfix].answer : ""}
onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
>
{optionAnswer.map((item, i) =>
<option value={item.id} key={i}>{item.text}</option>
)}
</select>

8
src/components/typeAnswer/InputDate.jsx
View File

@ -1,10 +1,14 @@
import React from "react";
import classes from "../../assets/styles/components/typeAnswer/inputDate.module.scss"
const InputDate = (props) => {
const InputDate = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
<input type="datetime-local" />
<input
type="datetime-local"
value={answers ? answers[postfix].answer : ""}
onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
/>
</div>
)
}

9
src/components/typeAnswer/InputFile.jsx
View File

@ -1,17 +1,16 @@
import React, { useState } from "react";
import classes from "../../assets/styles/components/typeAnswer/inputFile.module.scss"
const InputFile = (props) => {
const InputFile = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
<input
// id={`file_${props.postfix}`}
<input
type="file"
multiple
accept="image/*,image/jpeg,video/mp4,video/x-m4v,video/*"
className={classes.myModal__dialog__content__body__answer__file}
// value={file}
// onChange={event => setFile(event.target.value)}
value={answers ? answers[postfix].answer : ""}
onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
></input>
</div>
)

26
src/components/typeAnswer/InputMultipleRadio.jsx
View File

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

12
src/components/typeAnswer/InputRadio.jsx
View File

@ -1,21 +1,21 @@
import React from "react";
import classes from "../../assets/styles/components/typeAnswer/inputRadio.module.scss"
const InputRadio = (props) => {
const InputRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
{props.optionAnswer.map((item, i) =>
{optionAnswer.map((item, i) =>
<div class="form-check" key={i}>
<input
class="form-check-input"
type="radio"
name={`inputRadio_${props.postfix}`}
name={`inputRadio_${postfix}`}
id={`choice_${item.id}`}
value={i}
checked={props.answers ? props.answers[props.id].answer === i : false}
onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}
checked={answers ? answers[postfix].answer === i : false}
onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
/>
<label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
<label class="form-check-label" for={`inputRadio_${postfix}`}>{item.text}</label>
</div>
)}

6
src/components/typeAnswer/InputText.jsx
View File

@ -1,14 +1,14 @@
import React from "react";
import classes from "../../assets/styles/components/typeAnswer/inputText.module.scss"
const InputText = (props) => {
const InputText = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
<input
type="text"
placeholder={"Ответ..."}
value={props.answers ? props.answers[props.id].answer : ""}
onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}/>
value={answers ? answers[postfix].answer : ""}
onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}/>
</div>
)
}

6
src/components/typeAnswer/TextArea.jsx
View File

@ -1,13 +1,13 @@
import React from "react";
import classes from "../../assets/styles/components/typeAnswer/textArea.module.scss"
const TextArea = (props) => {
const TextArea = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
<textarea
placeholder={"Ответ..."}
value={props.answers ? props.answers[props.id].answer : ""}
onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}
value={answers ? answers[postfix].answer : ""}
onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
></textarea>
</div>
)

22
src/components/typeAnswer/YesNo.jsx
View File

@ -1,15 +1,31 @@
import React from "react";
import classes from "../../assets/styles/components/typeAnswer/yesNo.module.scss"
const YesNo = (props) => {
const YesNo = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
return (
<div className={classes.main}>
<div class="form-check">
<input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceYes"/>
<input
class="form-check-input"
type="radio"
name={`YesOrNo_${postfix}`}
id="choiceYes"
value="1"
checked={answers ? answers[postfix].answer === "1" : false}
onChange={updateAnswersForm ? () => updateAnswersForm("1", postfix) : () => {}}
/>
<label class="form-check-label" for="choiceYes">Да</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceNo"/>
<input
class="form-check-input"
type="radio"
name={`YesOrNo_${postfix}`}
id="choiceNo"
value="2"
checked={answers ? answers[postfix].answer === "2" : false}
onChange={updateAnswersForm ? () => updateAnswersForm("2", postfix) : () => {}}
/>
<label class="form-check-label" for="choiceNo">Нет</label>
</div>
</div>

2
src/pages/ViewForm.jsx
View File

@ -51,7 +51,7 @@ const ViewForm = () => {
</div>
<div className={classes.footer}>
<MyButton text={"Отправить"}/>
<MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => console.log(answers)}/>
<MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => {}}/>
</div>
</div> :
<div className={classes.wrapper}>