sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix interaction with the survey

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-05-25 18:36:20 +05:00
parent e961d53d6c
commit 15ec6b9632
9 changed files with 495 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

140
SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
View file

@ -4,65 +4,97 @@ import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
import styles from './QuestionItem.module.css'
import Delete from '../../assets/deleteQuestion.svg?react';
import {
addNewAnswerVariant,
deleteAnswerVariant,
getAnswerVariants,
updateAnswerVariant
} from "../../api/AnswerApi.ts";
interface QuestionItemProps {
questionId: number;
initialTextQuestion?: string;
valueQuestion: string;
answerVariants: {id?: number, text: string}[];
onChangeQuestion: (valueQuestion: string) => void;
onAnswerVariantsChange: (variants: {id?: number, text: string}[]) => void;
onDeleteQuestion: (index: number) => Promise<void>;
selectedType: 'single' | 'multiply'; // Уточняем тип
setSelectedType: (type: 'single' | 'multiply') => void; // Уточняем тип
selectedType: 'single' | 'multiply';
setSelectedType: (type: 'single' | 'multiply') => void;
surveyId?: number;
}
const QuestionItem: React.FC<QuestionItemProps> = ({questionId, initialTextQuestion = `Вопрос ${questionId}`,
valueQuestion, onChangeQuestion, onDeleteQuestion, setSelectedType, selectedType}) => {
// const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
const [answerOption, setAnswerOption] = useState(['']);
const QuestionItem: React.FC<QuestionItemProps> = ({
questionId,
initialTextQuestion = `Вопрос ${questionId}`,
valueQuestion,
answerVariants: initialAnswerVariants,
onChangeQuestion,
onAnswerVariantsChange,
onDeleteQuestion,
setSelectedType,
selectedType,
surveyId
}) => {
const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
const [isEditingQuestion, setIsEditingQuestion] = useState(false);
const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
setTextQuestion(valueQuestion);
}, [valueQuestion]);
// useEffect(() => {
// if (initialAnswerVariants.length === 0 && surveyId) {
// handleAddAnswer();
// }
// }, [initialAnswerVariants.length, surveyId]);
const handleTypeChange = (type: 'single' | 'multiply') => {
setSelectedType(type);
}
};
const handleAddAnswer = () => {
setAnswerOption([...answerOption, '']);
const handleAddAnswer = async () => {
if (surveyId) {
try {
const newAnswer = await addNewAnswerVariant(surveyId, questionId, { text: '' });
onAnswerVariantsChange([...initialAnswerVariants, { id: newAnswer.id, text: '' }]);
} catch (error) {
console.error('Ошибка при добавлении варианта ответа:', error);
}
} else {
onAnswerVariantsChange([...initialAnswerVariants, { text: '' }]);
}
};
const handleQuestionClick = () => {
setIsEditingQuestion(true);
}
};
const handleTextareaQuestionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setTextQuestion(event.target.value);
if (textareaQuestionRef.current) {
textareaQuestionRef.current.style.height = 'auto';
textareaQuestionRef.current.style.height = `${textareaQuestionRef.current.scrollHeight}px`;
}
}
};
const handleSaveQuestion = () => {
setIsEditingQuestion(false);
onChangeQuestion(textQuestion);
}
};
const handleQuestionKeyDown = (keyDownEvent: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (keyDownEvent.key === 'Enter') {
keyDownEvent.preventDefault();
handleSaveQuestion()
handleSaveQuestion();
}
}
};
const handleQuestionBlur = () => {
handleSaveQuestion()
}
handleSaveQuestion();
};
useEffect(() => {
if (isEditingQuestion && textareaQuestionRef.current) {
@ -72,21 +104,51 @@ const QuestionItem: React.FC<QuestionItemProps> = ({questionId, initialTextQuest
}
}, [isEditingQuestion]);
const handleAnswerChange = (index: number, value: string) => {
const newAnswerOption = [...answerOption];
newAnswerOption[index] = value;
setAnswerOption(newAnswerOption);
}
const handleAnswerChange = async (index: number, value: string) => {
const newAnswerVariants = [...initialAnswerVariants];
newAnswerVariants[index] = { ...newAnswerVariants[index], text: value };
onAnswerVariantsChange(newAnswerVariants);
const handleDeleteAnswer = (index: number) => {
const newAnswerOption = answerOption.filter((_, i) => i !== index);
setAnswerOption(newAnswerOption);
setSelectedAnswers(selectedAnswers.filter((i) => i !== index));
// Обновляем на сервере только если вариант уже существует (имеет id)
if (surveyId && newAnswerVariants[index].id) {
try {
await updateAnswerVariant(
surveyId,
questionId,
newAnswerVariants[index].id!,
{ text: value }
);
} catch (error) {
console.error('Ошибка при обновлении варианта ответа:', error);
}
}
};
useEffect(() => {
setTextQuestion(valueQuestion);
}, [valueQuestion]);
const handleDeleteAnswer = async (index: number) => {
const answerToDelete = initialAnswerVariants[index];
if (surveyId && answerToDelete.id) {
try {
await deleteAnswerVariant(surveyId, questionId, answerToDelete.id);
const newAnswerVariants = initialAnswerVariants.filter((_, i) => i !== index);
onAnswerVariantsChange(newAnswerVariants);
setSelectedAnswers(selectedAnswers.filter((i) => i !== index));
// Обновляем список после удаления
if (surveyId) {
const variants = await getAnswerVariants(surveyId, questionId);
const answers = variants.map((v: { id: number, text: string }) => ({ id: v.id, text: v.text }));
onAnswerVariantsChange(answers);
}
} catch (error) {
console.error('Ошибка при удалении варианта ответа:', error);
}
} else {
const newAnswerVariants = initialAnswerVariants.filter((_, i) => i !== index);
onAnswerVariantsChange(newAnswerVariants);
setSelectedAnswers(selectedAnswers.filter((i) => i !== index));
}
};
const handleDeleteQuestion = async () => {
try {
@ -133,12 +195,12 @@ const QuestionItem: React.FC<QuestionItemProps> = ({questionId, initialTextQuest
<TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/>
</div>
{answerOption.map((answerText, index) => (
{initialAnswerVariants.map((answer, index) => (
<AnswerOption
key={index}
key={answer.id || index}
selectedType={selectedType}
index={index + 1}
value={answerText}
value={answer.text}
onChange={(value) => handleAnswerChange(index, value)}
onDelete={() => handleDeleteAnswer(index)}
toggleSelect={() => toggleSelect(index)}
@ -146,17 +208,15 @@ const QuestionItem: React.FC<QuestionItemProps> = ({questionId, initialTextQuest
))}
<div className={styles.questionActions}>
<AddAnswerButton
onClick={handleAddAnswer}
/>
<AddAnswerButton onClick={handleAddAnswer} />
<button className={styles.deleteQuestionButton} onClick={handleDeleteQuestion}>
Удалить{/**/}
Удалить
<Delete className={styles.basketImg}/>
</button>
</div>
</div>
</div>
);
}
};
export default QuestionItem;