fix question type

This commit is contained in:
Tatiana Nikolaeva 2025-05-25 22:46:52 +05:00
parent 6eb03dc112
commit 8182bc1c43
7 changed files with 46 additions and 34 deletions

View file

@ -9,7 +9,7 @@ interface AnswerOptionProps{
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
onDelete:(index: number) => void; onDelete:(index: number) => void;
selectedType: 'single' | 'multiply'; selectedType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
toggleSelect: () => void; toggleSelect: () => void;
} }
@ -38,7 +38,6 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
useEffect(() => { useEffect(() => {
if (isEditing && textAreaRef.current) { if (isEditing && textAreaRef.current) {
textAreaRef.current.focus(); textAreaRef.current.focus();
// Установка начальной высоты
textAreaRef.current.style.height = 'auto'; textAreaRef.current.style.height = 'auto';
textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`; 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 : ''}`} className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
onClick={toggleSelect} onClick={toggleSelect}
> >
{selectedType === 'single' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />} {selectedType === 'SingleAnswerQuestion' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
</button> </button>
{isEditing ? ( {isEditing ? (
<textarea <textarea

View file

@ -19,35 +19,41 @@ interface QuestionItemProps {
onChangeQuestion: (valueQuestion: string) => void; onChangeQuestion: (valueQuestion: string) => void;
onAnswerVariantsChange: (variants: {id?: number, text: string}[]) => void; onAnswerVariantsChange: (variants: {id?: number, text: string}[]) => void;
onDeleteQuestion: (index: number) => Promise<void>; onDeleteQuestion: (index: number) => Promise<void>;
selectedType: 'single' | 'multiply'; initialQuestionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
setSelectedType: (type: 'single' | 'multiply') => void; onQuestionTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
surveyId?: number; surveyId?: number;
} }
const QuestionItem: React.FC<QuestionItemProps> = ({ const QuestionItem: React.FC<QuestionItemProps> = ({
questionId, questionId,
// initialTextQuestion = `Вопрос ${questionId}`,
initialTextQuestion = `Вопрос`, initialTextQuestion = `Вопрос`,
valueQuestion, valueQuestion,
answerVariants: initialAnswerVariants, answerVariants: initialAnswerVariants,
onChangeQuestion, onChangeQuestion,
onAnswerVariantsChange, onAnswerVariantsChange,
onDeleteQuestion, onDeleteQuestion,
setSelectedType, initialQuestionType,
selectedType, onQuestionTypeChange,
surveyId surveyId
}) => { }) => {
const [textQuestion, setTextQuestion] = useState(initialTextQuestion); const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
const [isEditingQuestion, setIsEditingQuestion] = useState(false); const [isEditingQuestion, setIsEditingQuestion] = useState(false);
const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]); const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
const [questionType, setQuestionType] = useState<'SingleAnswerQuestion' | 'MultipleAnswerQuestion'>(initialQuestionType);
const textareaQuestionRef = useRef<HTMLTextAreaElement>(null); const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => { useEffect(() => {
setTextQuestion(valueQuestion); setTextQuestion(valueQuestion);
}, [valueQuestion]); }, [valueQuestion]);
const handleTypeChange = (type: 'single' | 'multiply') => { useEffect(() => {
setSelectedType(type); setQuestionType(initialQuestionType);
}, [initialQuestionType]);
const handleTypeChange = (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
setQuestionType(type);
onQuestionTypeChange(type);
}; };
const handleAddAnswer = async () => { const handleAddAnswer = async () => {
@ -156,7 +162,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
}; };
const toggleSelect = (index: number) => { const toggleSelect = (index: number) => {
if (selectedType === 'single') { if (questionType === 'SingleAnswerQuestion') {
setSelectedAnswers([index]); setSelectedAnswers([index]);
} else { } else {
setSelectedAnswers((prev) => { setSelectedAnswers((prev) => {
@ -189,13 +195,13 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
<h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2> <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
</button> </button>
)} )}
<TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/> <TypeDropdown selectedType={questionType} onTypeChange={handleTypeChange}/>
</div> </div>
{initialAnswerVariants.map((answer, index) => ( {initialAnswerVariants.map((answer, index) => (
<AnswerOption <AnswerOption
key={answer.id || index} key={answer.id || index}
selectedType={selectedType} selectedType={questionType}
index={index + 1} index={index + 1}
value={answer.text} value={answer.text}
onChange={(value) => handleAnswerChange(index, value)} onChange={(value) => handleAnswerChange(index, value)}

View file

@ -1,4 +1,4 @@
import React, {useState} from "react"; import React from "react";
import QuestionItem from "../QuestionItem/QuestionItem.tsx"; import QuestionItem from "../QuestionItem/QuestionItem.tsx";
import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx"; import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx";
import {addNewQuestion, deleteQuestion, getListQuestions} from "../../api/QuestionApi.ts"; import {addNewQuestion, deleteQuestion, getListQuestions} from "../../api/QuestionApi.ts";
@ -13,7 +13,7 @@ interface QuestionsListProps {
export interface Question { export interface Question {
id: number; id: number;
text: string; text: string;
questionType: 'singleanswerquestion' | 'multipleanswerquestion'; questionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
answerVariants: Array<{ answerVariants: Array<{
id?: number; id?: number;
text: string; text: string;
@ -21,14 +21,12 @@ export interface Question {
} }
const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, surveyId}) => { const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, surveyId}) => {
const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
const handleAddQuestion = async () => { const handleAddQuestion = async () => {
if (!surveyId) { if (!surveyId) {
const newQuestion: Question = { const newQuestion: Question = {
id: questions.length + 1, id: questions.length + 1,
text: '', text: '',
questionType: selectedType === 'single' ? 'singleanswerquestion' : 'multipleanswerquestion', questionType: 'SingleAnswerQuestion',
answerVariants: [{ text: '' }], answerVariants: [{ text: '' }],
}; };
setQuestions([...questions, newQuestion]); setQuestions([...questions, newQuestion]);
@ -38,13 +36,13 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
try { try {
const newQuestion = await addNewQuestion(surveyId, { const newQuestion = await addNewQuestion(surveyId, {
title: '', title: '',
questionType: selectedType === 'single' ? 'singleanswerquestion' : 'multipleanswerquestion' questionType: 'SingleAnswerQuestion'
}); });
const questionToAdd: Question = { const questionToAdd: Question = {
id: newQuestion.id, id: newQuestion.id,
text: newQuestion.title, text: newQuestion.title,
questionType: newQuestion.questionType as 'singleanswerquestion' | 'multipleanswerquestion', questionType: newQuestion.questionType,
answerVariants: [] answerVariants: []
}; };
@ -101,6 +99,14 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
setQuestions(newQuestions); setQuestions(newQuestions);
}; };
const handleQuestionTypeChange = (questionId: number, newType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
setQuestions(questions.map(question =>
question.id === questionId
? {...question, questionType: newType}
: question
));
};
return ( return (
<> <>
{questions.map((question) => ( {questions.map((question) => (
@ -112,8 +118,8 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
onAnswerVariantsChange={(variants) => handleAnswerVariantsChange(question.id, variants)} onAnswerVariantsChange={(variants) => handleAnswerVariantsChange(question.id, variants)}
onDeleteQuestion={() => handleDeleteQuestion(question.id)} onDeleteQuestion={() => handleDeleteQuestion(question.id)}
onChangeQuestion={(value) => handleQuestionChange(question.id, value)} onChangeQuestion={(value) => handleQuestionChange(question.id, value)}
selectedType={selectedType} initialQuestionType={question.questionType}
setSelectedType={setSelectedType} onQuestionTypeChange={(type) => handleQuestionTypeChange(question.id, type)}
surveyId={surveyId} surveyId={surveyId}
/> />
))} ))}

View file

@ -15,7 +15,7 @@ const Survey: React.FC = () => {
const [survey] = useState<ISurvey | null>(null); const [survey] = useState<ISurvey | null>(null);
const [questions, setQuestions] = useState<Question[]>([ const [questions, setQuestions] = useState<Question[]>([
{ id: 1, text: '', questionType: 'singleanswerquestion', answerVariants: [{ text: '' }]}, { id: 1, text: '', questionType: 'SingleAnswerQuestion', answerVariants: [{ text: '' }]},
]); ]);
const handleSave = async () => { const handleSave = async () => {

View file

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

View file

@ -25,6 +25,7 @@
.selectedTypeIcon { .selectedTypeIcon {
margin-right: 4px; margin-right: 4px;
width: 22px;
} }
.dropdownArrow { .dropdownArrow {

View file

@ -6,8 +6,8 @@ import Multiple from '../../assets/check_box.svg?react';
import styles from './TypeDropdown.module.css' import styles from './TypeDropdown.module.css'
interface TypeDropdownProps { interface TypeDropdownProps {
selectedType: 'single' | 'multiply'; selectedType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
onTypeChange: (type: 'single' | 'multiply') => void; onTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
} }
const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange}) => { const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange}) => {
@ -18,7 +18,7 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
setIsOpen(!isOpen); setIsOpen(!isOpen);
} }
const handleSelect = (value: 'single' | 'multiply') => { const handleSelect = (value: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
onTypeChange(value); onTypeChange(value);
setIsOpen(false); setIsOpen(false);
} }
@ -39,15 +39,15 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
return ( return (
<div className={styles.dropdownContainer} ref={dropdownRef}> <div className={styles.dropdownContainer} ref={dropdownRef}>
<button className={styles.dropdownButton} onClick={handleToggle}> <button className={styles.dropdownButton} onClick={handleToggle}>
{selectedType === 'single' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />} {selectedType === 'SingleAnswerQuestion' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
{selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"} {selectedType === "SingleAnswerQuestion" ? "Одиночный выбор" : "Множественный выбор"}
{isOpen ? <DropUp className={styles.dropdownArrow} /> : <DropDown className={styles.dropdownArrow}/>} {isOpen ? <DropUp className={styles.dropdownArrow} /> : <DropDown className={styles.dropdownArrow}/>}
</button> </button>
{isOpen && ( {isOpen && (
<ul className={styles.dropdownList}> <ul className={styles.dropdownList}>
<li> <li>
<button onClick={() => handleSelect("single")} <button onClick={() => handleSelect("SingleAnswerQuestion")}
className={styles.dropdownItem}> className={styles.dropdownItem}>
<Single className={styles.dropdownItemIcon}/>{' '} <Single className={styles.dropdownItemIcon}/>{' '}
Одиночный выбор Одиночный выбор
@ -55,7 +55,7 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
</li> </li>
<li> <li>
<button className={styles.dropdownItem} <button className={styles.dropdownItem}
onClick={() => handleSelect("multiply")}> onClick={() => handleSelect('MultipleAnswerQuestion')}>
<Multiple className={styles.dropdownItemIcon}/>{' '} <Multiple className={styles.dropdownItemIcon}/>{' '}
Множественный выбор Множественный выбор
</button> </button>