From 59033edfdebdbeb8bf8e5007269b60c9b2686eab Mon Sep 17 00:00:00 2001 From: kuwsh1n Date: Sat, 16 Mar 2024 15:30:40 +0300 Subject: [PATCH] added answer users --- src/assets/styles/viewForm.module.scss | 52 ++++++++++++++++--- src/components/GeneratingFormFields.jsx | 10 +++- src/components/typeAnswer/DropDownList.jsx | 2 +- .../typeAnswer/InputMultipleRadio.jsx | 2 +- src/components/typeAnswer/InputRadio.jsx | 11 +++- src/components/typeAnswer/InputText.jsx | 6 ++- src/components/typeAnswer/TextArea.jsx | 6 ++- src/pages/NewForm.jsx | 7 +-- src/pages/ViewForm.jsx | 50 ++++++++++++++---- 9 files changed, 118 insertions(+), 28 deletions(-) diff --git a/src/assets/styles/viewForm.module.scss b/src/assets/styles/viewForm.module.scss index 1fadb76..8655f85 100644 --- a/src/assets/styles/viewForm.module.scss +++ b/src/assets/styles/viewForm.module.scss @@ -9,19 +9,59 @@ display: flex; justify-content: center; align-items: center; + flex-direction: column; } .form { + overflow-y: auto; width: 70%; - min-height: 80%; - box-shadow: 0 0 5px 1px rgb(200, 200, 200); + height: 80%; + // box-shadow: 0 -1px 5px 1px rgb(200, 200, 200); + border: 2px solid rgb(220, 220, 220); + &::-webkit-scrollbar { + width: 7px; + border-left: 1px solid rgb(200, 200, 200); + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } &__header { - + border-bottom: 1px solid rgb(220, 220, 220); + width: 100%; + height: 10%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; } &__content { - + width: 100%; + height: 80%; } - &__footer { - + &__unexists { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + span { + display: block; + font-size: 18px; + font-family: "Montserrat", sans-serif; + font-style: italic; + color: rgb(200, 200, 200); + } } } + +.footer { + // box-shadow: 0 1px 5px 1px rgb(220, 220, 220); + width: 70%; + height: 10%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + border: 2px solid rgb(220, 220, 220); + border-top: none; +} diff --git a/src/components/GeneratingFormFields.jsx b/src/components/GeneratingFormFields.jsx index 1fafc47..e3786c1 100644 --- a/src/components/GeneratingFormFields.jsx +++ b/src/components/GeneratingFormFields.jsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import classes from "../assets/styles/generatingFormFields.module.scss"; -const GeneratingFormFields = ({newForm, listTypeAnswer}) => { +const GeneratingFormFields = ({newForm, listTypeAnswer, answers, updateAnswersForm}) => { return ( newForm.map((item, i) =>
@@ -11,7 +11,13 @@ const GeneratingFormFields = ({newForm, listTypeAnswer}) => {
{ - listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({postfix: i, answers: item.optionAnswer}) + listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({ + 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 f45edbd..87a6e26 100644 --- a/src/components/typeAnswer/DropDownList.jsx +++ b/src/components/typeAnswer/DropDownList.jsx @@ -10,7 +10,7 @@ const DropDownList = (props) => { )} */} diff --git a/src/components/typeAnswer/InputMultipleRadio.jsx b/src/components/typeAnswer/InputMultipleRadio.jsx index e561e07..309a151 100644 --- a/src/components/typeAnswer/InputMultipleRadio.jsx +++ b/src/components/typeAnswer/InputMultipleRadio.jsx @@ -4,7 +4,7 @@ import classes from "../../assets/styles/components/typeAnswer/inputMultiple.mod const InputMultipleRadio = (props) => { return (
- {props.answers.map((item, i) => + {props.optionAnswer.map((item, i) =>
diff --git a/src/components/typeAnswer/InputRadio.jsx b/src/components/typeAnswer/InputRadio.jsx index df58c86..6cfff78 100644 --- a/src/components/typeAnswer/InputRadio.jsx +++ b/src/components/typeAnswer/InputRadio.jsx @@ -4,9 +4,16 @@ import classes from "../../assets/styles/components/typeAnswer/inputRadio.module const InputRadio = (props) => { return (
- {props.answers.map((item, i) => + {props.optionAnswer.map((item, i) =>
- + props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}/>
)} diff --git a/src/components/typeAnswer/InputText.jsx b/src/components/typeAnswer/InputText.jsx index f02a7ea..0796ccb 100644 --- a/src/components/typeAnswer/InputText.jsx +++ b/src/components/typeAnswer/InputText.jsx @@ -4,7 +4,11 @@ import classes from "../../assets/styles/components/typeAnswer/inputText.module. const InputText = (props) => { return (
- + props.updateAnswersForm(e.target.value, props.id) : () => {}}/>
) } diff --git a/src/components/typeAnswer/TextArea.jsx b/src/components/typeAnswer/TextArea.jsx index 95dfa7f..bd24a33 100644 --- a/src/components/typeAnswer/TextArea.jsx +++ b/src/components/typeAnswer/TextArea.jsx @@ -4,7 +4,11 @@ import classes from "../../assets/styles/components/typeAnswer/textArea.module.s const TextArea = (props) => { return (
- +
) } diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx index b016b9f..5f134b7 100644 --- a/src/pages/NewForm.jsx +++ b/src/pages/NewForm.jsx @@ -102,7 +102,7 @@ const NewForm = () => { forms.map(item => { if (item.id === location.state.id) { item.title = 'Новая форма', - item.answers = 'Без изменений', + item.datetime = 'Без изменений', item.update = '01/01/24', item.listAnswer = newForm } @@ -118,9 +118,10 @@ const NewForm = () => { [...forms, { id: nextID(forms), title: 'Новая форма', - answers: 'Без изменений', + datetime: 'Без изменений', update: '01/01/24', - listAnswer: newForm + listAnswer: newForm, + answers: [] }] ); cleanStates(); diff --git a/src/pages/ViewForm.jsx b/src/pages/ViewForm.jsx index 8e2fc64..b42160b 100644 --- a/src/pages/ViewForm.jsx +++ b/src/pages/ViewForm.jsx @@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom"; import classes from "../assets/styles/viewForm.module.scss"; import { FormsData, TypeAnswerData } from "../context"; import GeneratingFormFields from "../components/GeneratingFormFields.jsx"; +import MyButton from "../components/MyButton.jsx"; const ViewForm = () => { const navigate = useNavigate(); @@ -11,29 +12,56 @@ const ViewForm = () => { const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData); function newForm() { - const searchForm = forms.find(item => item.id === Number(formId)) + return forms.find(item => item.id === Number(formId)) + }; - if (searchForm) { - return searchForm.listAnswer - } - return [] - } + const [answers, setAnswers] = useState( + newForm() ? newForm().listAnswer.map(item => ( + {id: item.id, answer: ""} + )) : "" + ); + + function updateAnswersForm(value, id) { + console.log(value, id) + setAnswers( + answers.map((item, i) => { + if (id === i) { + item.answer = value; + } + return item + }) + ) + }; return (
+ {newForm() ?
- +
+ {newForm().title} +
+
+ #{formId} +
- +
-
- +
+
+ + console.log(answers)}/> +
+
: +
+
+
+ Форма с идентификатором #{formId} отсутствует.
-
+
}
) }