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