From 7b1dab70024b313ccb1f34a8f1071e6ae0bce76a Mon Sep 17 00:00:00 2001 From: kuwsh1n <senya.bogachev@mail.ru> Date: Mon, 18 Mar 2024 01:19:51 +0300 Subject: [PATCH] completed update components by typeAnswer --- src/assets/styles/viewForm.module.scss | 11 ++++++-- src/components/GeneratingFormFields.jsx | 1 - src/components/typeAnswer/DropDownList.jsx | 14 ++++------ src/components/typeAnswer/InputDate.jsx | 8 ++++-- src/components/typeAnswer/InputFile.jsx | 9 +++---- .../typeAnswer/InputMultipleRadio.jsx | 26 +++++++++---------- src/components/typeAnswer/InputRadio.jsx | 12 ++++----- src/components/typeAnswer/InputText.jsx | 6 ++--- src/components/typeAnswer/TextArea.jsx | 6 ++--- src/components/typeAnswer/YesNo.jsx | 22 +++++++++++++--- src/pages/ViewForm.jsx | 2 +- 11 files changed, 69 insertions(+), 48 deletions(-) diff --git a/src/assets/styles/viewForm.module.scss b/src/assets/styles/viewForm.module.scss index 8655f85..8565ae0 100644 --- a/src/assets/styles/viewForm.module.scss +++ b/src/assets/styles/viewForm.module.scss @@ -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; diff --git a/src/components/GeneratingFormFields.jsx b/src/components/GeneratingFormFields.jsx index e3786c1..250ea53 100644 --- a/src/components/GeneratingFormFields.jsx +++ b/src/components/GeneratingFormFields.jsx @@ -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 }) } diff --git a/src/components/typeAnswer/DropDownList.jsx b/src/components/typeAnswer/DropDownList.jsx index 8b3c99c..396b523 100644 --- a/src/components/typeAnswer/DropDownList.jsx +++ b/src/components/typeAnswer/DropDownList.jsx @@ -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> diff --git a/src/components/typeAnswer/InputDate.jsx b/src/components/typeAnswer/InputDate.jsx index 458f9b5..2284ff6 100644 --- a/src/components/typeAnswer/InputDate.jsx +++ b/src/components/typeAnswer/InputDate.jsx @@ -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> ) } diff --git a/src/components/typeAnswer/InputFile.jsx b/src/components/typeAnswer/InputFile.jsx index d50449b..ab1a0d4 100644 --- a/src/components/typeAnswer/InputFile.jsx +++ b/src/components/typeAnswer/InputFile.jsx @@ -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> ) diff --git a/src/components/typeAnswer/InputMultipleRadio.jsx b/src/components/typeAnswer/InputMultipleRadio.jsx index 281f880..deb2d54 100644 --- a/src/components/typeAnswer/InputMultipleRadio.jsx +++ b/src/components/typeAnswer/InputMultipleRadio.jsx @@ -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> diff --git a/src/components/typeAnswer/InputRadio.jsx b/src/components/typeAnswer/InputRadio.jsx index c9e27a6..522ac6c 100644 --- a/src/components/typeAnswer/InputRadio.jsx +++ b/src/components/typeAnswer/InputRadio.jsx @@ -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> )} diff --git a/src/components/typeAnswer/InputText.jsx b/src/components/typeAnswer/InputText.jsx index 0796ccb..ffb48e0 100644 --- a/src/components/typeAnswer/InputText.jsx +++ b/src/components/typeAnswer/InputText.jsx @@ -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> ) } diff --git a/src/components/typeAnswer/TextArea.jsx b/src/components/typeAnswer/TextArea.jsx index bd24a33..2b4d2b0 100644 --- a/src/components/typeAnswer/TextArea.jsx +++ b/src/components/typeAnswer/TextArea.jsx @@ -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> ) diff --git a/src/components/typeAnswer/YesNo.jsx b/src/components/typeAnswer/YesNo.jsx index d64679f..dc411ab 100644 --- a/src/components/typeAnswer/YesNo.jsx +++ b/src/components/typeAnswer/YesNo.jsx @@ -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> diff --git a/src/pages/ViewForm.jsx b/src/pages/ViewForm.jsx index 9fb2910..678bc86 100644 --- a/src/pages/ViewForm.jsx +++ b/src/pages/ViewForm.jsx @@ -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}>