fix question type

2025-05-25 22:46:52 +05:00 · 2025-05-25 22:46:52 +05:00 · 8182bc1c43
commit 8182bc1c43
parent 6eb03dc112
7 changed files with 46 additions and 34 deletions
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
+++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
@ -9,7 +9,7 @@ interface AnswerOptionProps{
    value: string;
    onChange: (value: string) => void;
    onDelete:(index: number) => void;
-    selectedType: 'single' | 'multiply';
+    selectedType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
    toggleSelect: () => void;
 }

@ -38,7 +38,6 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
    useEffect(() => {
        if (isEditing && textAreaRef.current) {
            textAreaRef.current.focus();
-            // Установка начальной высоты
            textAreaRef.current.style.height = 'auto';
            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
        }
@ -72,7 +71,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
                className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
                onClick={toggleSelect}
            >
-                {selectedType === 'single' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
+                {selectedType === 'SingleAnswerQuestion' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
            </button>
            {isEditing ? (
                <textarea
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
@ -19,35 +19,41 @@ interface QuestionItemProps {
    onChangeQuestion: (valueQuestion: string) => void;
    onAnswerVariantsChange: (variants: {id?: number, text: string}[]) => void;
    onDeleteQuestion: (index: number) => Promise<void>;
-    selectedType: 'single' | 'multiply';
-    setSelectedType: (type: 'single' | 'multiply') => void;
+    initialQuestionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
+    onQuestionTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
+
    surveyId?: number;
 }

 const QuestionItem: React.FC<QuestionItemProps> = ({
                                                       questionId,
-                                                       // initialTextQuestion = `Вопрос ${questionId}`,
                                                       initialTextQuestion = `Вопрос`,
                                                       valueQuestion,
                                                       answerVariants: initialAnswerVariants,
                                                       onChangeQuestion,
                                                       onAnswerVariantsChange,
                                                       onDeleteQuestion,
-                                                       setSelectedType,
-                                                       selectedType,
+                                                       initialQuestionType,
+                                                       onQuestionTypeChange,
                                                       surveyId
                                                   }) => {
    const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
    const [isEditingQuestion, setIsEditingQuestion] = useState(false);
    const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
+    const [questionType, setQuestionType] = useState<'SingleAnswerQuestion' | 'MultipleAnswerQuestion'>(initialQuestionType);
    const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);

    useEffect(() => {
        setTextQuestion(valueQuestion);
    }, [valueQuestion]);

-    const handleTypeChange = (type: 'single' | 'multiply') => {
-        setSelectedType(type);
+    useEffect(() => {
+        setQuestionType(initialQuestionType);
+    }, [initialQuestionType]);
+
+    const handleTypeChange = (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
+        setQuestionType(type);
+        onQuestionTypeChange(type);
    };

    const handleAddAnswer = async () => {
@ -156,7 +162,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
    };

    const toggleSelect = (index: number) => {
-        if (selectedType === 'single') {
+        if (questionType === 'SingleAnswerQuestion') {
            setSelectedAnswers([index]);
        } else {
            setSelectedAnswers((prev) => {
@ -189,13 +195,13 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
                            <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
                        </button>
                    )}
-                    <TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/>
+                    <TypeDropdown selectedType={questionType} onTypeChange={handleTypeChange}/>
                </div>

                {initialAnswerVariants.map((answer, index) => (
                    <AnswerOption
                        key={answer.id || index}
-                        selectedType={selectedType}
+                        selectedType={questionType}
                        index={index + 1}
                        value={answer.text}
                        onChange={(value) => handleAnswerChange(index, value)}
--- a/SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx
+++ b/SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx
@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React from "react";
 import QuestionItem from "../QuestionItem/QuestionItem.tsx";
 import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx";
 import {addNewQuestion, deleteQuestion, getListQuestions} from "../../api/QuestionApi.ts";
@ -13,7 +13,7 @@ interface QuestionsListProps {
 export interface Question {
    id: number;
    text: string;
-    questionType: 'singleanswerquestion' | 'multipleanswerquestion';
+    questionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
    answerVariants: Array<{
        id?: number;
        text: string;
@ -21,14 +21,12 @@ export interface Question {
 }

 const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, surveyId}) => {
-    const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
-
    const handleAddQuestion = async () => {
        if (!surveyId) {
            const newQuestion: Question = {
                id: questions.length + 1,
                text: '',
-                questionType: selectedType === 'single' ? 'singleanswerquestion' : 'multipleanswerquestion',
+                questionType: 'SingleAnswerQuestion',
                answerVariants: [{ text: '' }],
            };
            setQuestions([...questions, newQuestion]);
@ -38,13 +36,13 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
        try {
            const newQuestion = await addNewQuestion(surveyId, {
                title: '',
-                questionType: selectedType === 'single' ? 'singleanswerquestion' : 'multipleanswerquestion'
+                questionType: 'SingleAnswerQuestion'
            });

            const questionToAdd: Question = {
                id: newQuestion.id,
                text: newQuestion.title,
-                questionType: newQuestion.questionType as 'singleanswerquestion' | 'multipleanswerquestion',
+                questionType: newQuestion.questionType,
                answerVariants: []
            };

@ -101,6 +99,14 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
        setQuestions(newQuestions);
    };

+    const handleQuestionTypeChange = (questionId: number, newType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
+        setQuestions(questions.map(question =>
+            question.id === questionId
+                ? {...question, questionType: newType}
+                : question
+        ));
+    };
+
    return (
        <>
            {questions.map((question) => (
@ -112,8 +118,8 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
                    onAnswerVariantsChange={(variants) => handleAnswerVariantsChange(question.id, variants)}
                    onDeleteQuestion={() => handleDeleteQuestion(question.id)}
                    onChangeQuestion={(value) => handleQuestionChange(question.id, value)}
-                    selectedType={selectedType}
-                    setSelectedType={setSelectedType}
+                    initialQuestionType={question.questionType}
+                    onQuestionTypeChange={(type) => handleQuestionTypeChange(question.id, type)}
                    surveyId={surveyId}
                />
            ))}
--- a/SurveyFrontend/src/components/Survey/Survey.tsx
+++ b/SurveyFrontend/src/components/Survey/Survey.tsx
@ -15,7 +15,7 @@ const Survey: React.FC = () => {
    const [survey] = useState<ISurvey | null>(null);

    const [questions, setQuestions] = useState<Question[]>([
-        { id: 1, text: '', questionType: 'singleanswerquestion', answerVariants: [{ text: '' }]},
+        { id: 1, text: '', questionType: 'SingleAnswerQuestion', answerVariants: [{ text: '' }]},
    ]);

    const handleSave = async () => {
--- a/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
+++ b/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
@ -27,7 +27,7 @@ interface QuestionActionData {
    surveyId: number;
    id?: number;
    title: string;
-    questionType: 'singleanswerquestion' | 'multipleanswerquestion';
+    questionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
 }

 interface AnswerActionData {
@ -188,7 +188,7 @@ export const SurveyPage: React.FC = () => {
                    return {
                        id: q.id,
                        text: q.title,
-                        questionType: q.questionType as 'singleanswerquestion' | 'multipleanswerquestion',
+                        questionType: q.questionType as 'SingleAnswerQuestion' | 'MultipleAnswerQuestion',
                        answerVariants: answerVariants.map((a: IAnswerVariant) => ({
                            id: a.id,
                            text: a.text
@ -233,7 +233,7 @@ export const SurveyPage: React.FC = () => {
                            surveyId: id,
                            id: question.id,
                            title: question.text,
-                            questionType: question.questionType
+                            questionType: question.questionType // Убедитесь, что передается новый тип
                        } as QuestionActionData & { id: number }
                    });
                }
@ -284,7 +284,7 @@ export const SurveyPage: React.FC = () => {
                return {
                    id: q.id,
                    text: q.title,
-                    questionType: q.questionType as 'singleanswerquestion' | 'multipleanswerquestion',
+                    questionType: q.questionType as 'SingleAnswerQuestion' | 'MultipleAnswerQuestion',
                    answerVariants: answerVariants.map((a: IAnswerVariant) => ({
                        id: a.id,
                        text: a.text
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
@ -25,6 +25,7 @@

 .selectedTypeIcon {
    margin-right: 4px;
+    width: 22px;
 }

 .dropdownArrow {
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
@ -6,8 +6,8 @@ import Multiple from '../../assets/check_box.svg?react';
 import styles from './TypeDropdown.module.css'

 interface TypeDropdownProps {
-    selectedType: 'single' | 'multiply';
-    onTypeChange: (type: 'single' | 'multiply') => void;
+    selectedType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
+    onTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
 }

 const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange}) => {
@ -18,7 +18,7 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
        setIsOpen(!isOpen);
    }

-    const handleSelect = (value: 'single' | 'multiply') => {
+    const handleSelect = (value: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
        onTypeChange(value);
        setIsOpen(false);
    }
@ -39,15 +39,15 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
    return (
        <div className={styles.dropdownContainer} ref={dropdownRef}>
            <button className={styles.dropdownButton} onClick={handleToggle}>
-                {selectedType === 'single' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
-                {selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
+                {selectedType === 'SingleAnswerQuestion' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
+                {selectedType === "SingleAnswerQuestion" ? "Одиночный выбор" : "Множественный выбор"}
                {isOpen ? <DropUp className={styles.dropdownArrow} /> : <DropDown className={styles.dropdownArrow}/>}
            </button>

            {isOpen && (
                <ul className={styles.dropdownList}>
                    <li>
-                        <button onClick={() => handleSelect("single")}
+                        <button onClick={() => handleSelect("SingleAnswerQuestion")}
                                className={styles.dropdownItem}>
                            <Single className={styles.dropdownItemIcon}/>{' '}
                            Одиночный выбор
@ -55,7 +55,7 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
                    </li>
                    <li>
                        <button className={styles.dropdownItem}
-                                onClick={() => handleSelect("multiply")}>
+                                onClick={() => handleSelect('MultipleAnswerQuestion')}>
                            <Multiple className={styles.dropdownItemIcon}/>{' '}
                            Множественный выбор
                        </button>