added answer users

2024-03-16 15:30:40 +03:00 · 2024-03-16 15:30:40 +03:00 · 59033edfde
commit 59033edfde
parent 90aec8fad0
9 changed files with 118 additions and 28 deletions
--- 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;
+}
--- 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) => 
            <div className={classes.item} key={i}>
@ -11,7 +11,13 @@ const GeneratingFormFields = ({newForm, listTypeAnswer}) => {
                </div>
                <div className={classes.item__answer}>
                    {
-                        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
+                        })
                    }
                </div>
            </div>
--- a/src/components/typeAnswer/DropDownList.jsx
+++ b/src/components/typeAnswer/DropDownList.jsx
@ -10,7 +10,7 @@ const DropDownList = (props) => {
                )}
            </select> */}
            <select>
-                {props.answers.map((item, i) => 
+                {props.optionAnswer.map((item, i) => 
                    <option value={item.id} key={i}>{item.text}</option>
                )}
            </select>
--- 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 (
        <div className={classes.main}>
-            {props.answers.map((item, i) => 
+            {props.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}`}/>
                    <label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label>
--- 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 (
        <div className={classes.main}>
-            {props.answers.map((item, i) => 
+            {props.optionAnswer.map((item, i) => 
                <div class="form-check" key={i}>
-                    <input class="form-check-input" type="radio" name={`inputRadio_${props.postfix}`} id={`choice_${item.id}`}/>
+                    <input 
+                        class="form-check-input" 
+                        type="radio" 
+                        name={`inputRadio_${props.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) : () => {}}/>
                    <label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
                </div>
            )}
--- 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 (
        <div className={classes.main}>
-            <input type="text" placeholder={"Ответ..."}/>
+            <input 
+                type="text" 
+                placeholder={"Ответ..."} 
+                value={props.answers ? props.answers[props.id].answer : ""} 
+                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}/>
        </div>
    )
 }
--- 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 (
        <div className={classes.main}>
-            <textarea placeholder={"Ответ..."}></textarea>
+            <textarea 
+                placeholder={"Ответ..."} 
+                value={props.answers ? props.answers[props.id].answer : ""} 
+                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}
+            ></textarea>
        </div>
    )
 }
--- 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();
--- 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 (
        <div className={classes.main}>
+            {newForm() ? 
            <div className={classes.wrapper}>
                <div className={classes.form}>
                    <div className={classes.form__header}>
-
+                        <div className={classes.form__header__title}>
+                            <span>{newForm().title}</span>
+                        </div>
+                        <div className={classes.form__header__id}>
+                            <span>#{formId}</span>
+                        </div>
                    </div>
                    <div className={classes.form__content}>
-                        <GeneratingFormFields newForm={newForm()} listTypeAnswer={listTypeAnswer}/>
+                        <GeneratingFormFields newForm={newForm().listAnswer} listTypeAnswer={listTypeAnswer} answers={answers} updateAnswersForm={updateAnswersForm}/>
                    </div>
-                    <div className={classes.form__footer}>
-
+                </div>
+                <div className={classes.footer}>
+                    <MyButton text={"Отправить"}/>
+                    <MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => console.log(answers)}/>
+                </div>                 
+            </div> :
+            <div className={classes.wrapper}>
+                <div className={classes.form}>
+                    <div className={classes.form__unexists}>
+                        <span>Форма с идентификатором #{formId} отсутствует.</span>
                    </div>
                </div>                 
-            </div>
+            </div>}
        </div>     
    )
 }