frontPanel/src/pages/Questions/answerOptions/responseSettings.tsx
2023-09-08 16:42:52 +03:00

102 lines
3.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import CustomTextField from "@ui_kit/CustomTextField";
import { questionStore, updateQuestionsList } from "@root/questions";
interface Props {
totalIndex: number;
}
export default function ResponseSettings({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
return (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
marginRight: "30px",
}}
>
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
<Typography>Настройки ответов</Typography>
<CustomCheckbox
label={"Длинный текстовый ответ"}
checked={listQuestions[quizId][totalIndex].content.largeCheck}
handleChange={(e) => {
let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.largeCheck = e.target.checked;
if (!e.target.checked) {
clonContent.large = "";
}
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
<CustomCheckbox
label={"Можно несколько"}
checked={listQuestions[quizId][totalIndex].content.multi}
handleChange={(e) => {
let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.multi = e.target.checked;
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
<CustomCheckbox
label={'Вариант "свой ответ"'}
checked={listQuestions[quizId][totalIndex].content.own}
handleChange={(e) => {
let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.own = e.target.checked;
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
</Box>
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox
label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required}
handleChange={(e) => {
updateQuestionsList(quizId, totalIndex, {
required: !e.target.checked,
});
}}
/>
<Box sx={{ display: "flex", alignItems: "center" }}>
<CustomCheckbox
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {
let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.innerNameCheck = e.target.checked;
if (!e.target.checked) {
clonContent.innerName = "";
}
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField
placeholder={"Развёрнутое описание вопроса"}
text={listQuestions[quizId][totalIndex].content.innerName}
onChange={({ target }) => {
let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.innerName = target.value;
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
)}
</Box>
</Box>
);
}