395 lines
13 KiB
TypeScript
395 lines
13 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
||
import { useParams } from "react-router-dom";
|
||
import {
|
||
Box,
|
||
Button,
|
||
Chip,
|
||
FormControl,
|
||
FormControlLabel,
|
||
IconButton,
|
||
Link,
|
||
Modal,
|
||
Radio,
|
||
RadioGroup,
|
||
Tooltip,
|
||
Typography,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
import { Select } from "./Select";
|
||
|
||
import RadioCheck from "@ui_kit/RadioCheck";
|
||
import RadioIcon from "@ui_kit/RadioIcon";
|
||
import InfoIcon from "@icons/Info";
|
||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||
|
||
import type { QuizQuestionBase } from "../../model/questionTypes/shared";
|
||
|
||
type BranchingQuestionsProps = {
|
||
totalIndex: number;
|
||
};
|
||
|
||
const ACTIONS = ["Показать", "Скрыть"];
|
||
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
|
||
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
|
||
const CONDITIONS = [
|
||
"Все условия обязательны",
|
||
"Обязательно хотя бы одно условие",
|
||
];
|
||
|
||
export default function BranchingQuestions({
|
||
totalIndex,
|
||
}: BranchingQuestionsProps) {
|
||
const theme = useTheme();
|
||
const [title, setTitle] = useState<string>("");
|
||
const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
|
||
const quizId = Number(useParams().quizId);
|
||
const { listQuestions } = questionStore();
|
||
const titleRef = useRef<HTMLDivElement>(null);
|
||
const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
|
||
|
||
useEffect(() => {
|
||
setTitleInputWidth(titleRef.current?.offsetWidth || 0);
|
||
}, [title]);
|
||
|
||
const handleClose = () => {
|
||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||
openedModalSettings: false,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Modal open={question.openedModalSettings} onClose={handleClose}>
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
overflow: "hidden",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
maxWidth: "620px",
|
||
width: "100%",
|
||
bgcolor: "background.paper",
|
||
borderRadius: "12px",
|
||
boxShadow: 24,
|
||
p: 0,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
boxSizing: "border-box",
|
||
background: "#F2F3F7",
|
||
height: "70px",
|
||
padding: "0 25px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Box sx={{ color: "#9A9AAF" }}>
|
||
<Typography component="span">(</Typography>
|
||
<Box sx={{ display: "inline" }}>
|
||
<Typography
|
||
ref={titleRef}
|
||
sx={{
|
||
position: "absolute",
|
||
opacity: 0,
|
||
zIndex: "-100",
|
||
whiteSpace: "pre",
|
||
}}
|
||
>
|
||
{title}
|
||
</Typography>
|
||
<input
|
||
type="text"
|
||
value={title}
|
||
placeholder="Заголовок вопроса"
|
||
onChange={({ target }) => setTitle(target.value)}
|
||
style={{
|
||
width: titleInputWidth ? titleInputWidth : 170,
|
||
outline: "none",
|
||
background: "transparent",
|
||
border: "none",
|
||
fontSize: "18px",
|
||
minWidth: "50px",
|
||
maxWidth: "500px",
|
||
fontFamily: "Rubik",
|
||
transition: ".2s",
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Typography component="span">)</Typography>
|
||
</Box>
|
||
<Tooltip
|
||
title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
|
||
placement="top"
|
||
>
|
||
<Box>
|
||
<InfoIcon />
|
||
</Box>
|
||
</Tooltip>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "20px",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Select
|
||
items={ACTIONS}
|
||
activeItemIndex={question.content.rule.show ? 0 : 1}
|
||
sx={{ maxWidth: "140px" }}
|
||
onChange={(action) => {
|
||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||
content: {
|
||
...question.content,
|
||
rule: {
|
||
...question.content.rule,
|
||
show: action === ACTIONS[0],
|
||
},
|
||
},
|
||
});
|
||
}}
|
||
/>
|
||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||
если в ответе на вопрос
|
||
</Typography>
|
||
</Box>
|
||
{question.content.rule.reqs.map((request, index) => (
|
||
<Box
|
||
key={index}
|
||
sx={{
|
||
padding: "20px",
|
||
borderRadius: "8px",
|
||
height: "100%",
|
||
bgcolor: "#F2F3F7",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pb: "5px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Условие 1
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
const clonedContent = { ...question.content };
|
||
clonedContent.rule.reqs.splice(index, 1);
|
||
updateQuestionsList<QuizQuestionBase>(
|
||
quizId,
|
||
totalIndex,
|
||
{
|
||
content: clonedContent,
|
||
}
|
||
);
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
<Select
|
||
empty
|
||
activeItemIndex={request.id ? Number(request.id) : -1}
|
||
items={STIPULATIONS}
|
||
onChange={(stipulation) => {
|
||
const clonedContent = { ...question.content };
|
||
|
||
clonedContent.rule.reqs[index] = {
|
||
id: String(
|
||
STIPULATIONS.findIndex((item) =>
|
||
item.includes(stipulation)
|
||
)
|
||
),
|
||
vars: request.vars,
|
||
};
|
||
|
||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||
content: clonedContent,
|
||
});
|
||
}}
|
||
sx={{ marginBottom: "15px" }}
|
||
/>
|
||
{request.id && (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
pb: "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
|
||
Дан ответ
|
||
</Typography>
|
||
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
|
||
(Укажите один или несколько вариантов)
|
||
</Typography>
|
||
</Box>
|
||
<Select
|
||
empty
|
||
activeItemIndex={-1}
|
||
items={ANSWERS}
|
||
onChange={(answer) => {
|
||
const clonedContent = { ...question.content };
|
||
const answerItemIndex = ANSWERS.findIndex(
|
||
(answerItem) => answerItem === answer
|
||
);
|
||
|
||
if (
|
||
!clonedContent.rule.reqs[index].vars.includes(
|
||
answerItemIndex
|
||
)
|
||
) {
|
||
question.content.rule.reqs[index].vars.push(
|
||
answerItemIndex
|
||
);
|
||
}
|
||
|
||
updateQuestionsList<QuizQuestionBase>(
|
||
quizId,
|
||
totalIndex,
|
||
{
|
||
content: clonedContent,
|
||
}
|
||
);
|
||
}}
|
||
sx={{
|
||
marginBottom: "10px",
|
||
".MuiSelect-select.MuiInputBase-input": {
|
||
color: "transparent",
|
||
},
|
||
}}
|
||
/>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{question.content.rule.reqs[index].vars.map(
|
||
(item, varIndex) => (
|
||
<Chip
|
||
key={varIndex}
|
||
label={ANSWERS[item]}
|
||
variant="outlined"
|
||
onDelete={() => {
|
||
const clonedContent = { ...question.content };
|
||
const removedItemIndex = clonedContent.rule.reqs[
|
||
index
|
||
].vars.findIndex((varItem) => varItem === item);
|
||
|
||
clonedContent.rule.reqs[index].vars.splice(
|
||
removedItemIndex,
|
||
1
|
||
);
|
||
|
||
updateQuestionsList<QuizQuestionBase>(
|
||
quizId,
|
||
totalIndex,
|
||
{
|
||
content: clonedContent,
|
||
}
|
||
);
|
||
}}
|
||
/>
|
||
)
|
||
)}
|
||
</Box>
|
||
</>
|
||
)}
|
||
</Box>
|
||
))}
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "baseline",
|
||
}}
|
||
>
|
||
<Link
|
||
variant="body2"
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
marginBottom: "10px",
|
||
}}
|
||
onClick={() => {
|
||
const clonedContent = { ...question.content };
|
||
clonedContent.rule.reqs.push({ id: "", vars: [] });
|
||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||
content: clonedContent,
|
||
});
|
||
}}
|
||
>
|
||
Добавить условие
|
||
</Link>
|
||
<FormControl>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
value={question.content.rule.or ? 1 : 0}
|
||
onChange={(_, value) => {
|
||
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
|
||
content: {
|
||
...question.content,
|
||
rule: {
|
||
...question.content.rule,
|
||
or: Boolean(Number(value)),
|
||
},
|
||
},
|
||
});
|
||
}}
|
||
>
|
||
{CONDITIONS.map((condition, index) => (
|
||
<FormControlLabel
|
||
key={index}
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value={index}
|
||
control={
|
||
<Radio
|
||
checkedIcon={<RadioCheck />}
|
||
icon={<RadioIcon />}
|
||
/>
|
||
}
|
||
label={condition}
|
||
/>
|
||
))}
|
||
</RadioGroup>
|
||
</FormControl>
|
||
</Box>
|
||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||
<Button
|
||
variant="outlined"
|
||
onClick={handleClose}
|
||
sx={{ width: "100%", maxWidth: "130px" }}
|
||
>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{ width: "100%", maxWidth: "130px" }}
|
||
onClick={handleClose}
|
||
>
|
||
Готово
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|