fix question type
This commit is contained in:
Tatiana Nikolaeva
parent
6eb03dc112
commit
8182bc1c43
7 changed files with 46 additions and 34 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
|
||||
.selectedTypeIcon {
|
||||
margin-right: 4px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.dropdownArrow {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue