264 lines
8.1 KiB
TypeScript
264 lines
8.1 KiB
TypeScript
import { useState, useRef, useEffect, useLayoutEffect } from "react";
|
||
import {
|
||
Box,
|
||
Button,
|
||
FormControl,
|
||
FormControlLabel,
|
||
Link,
|
||
Modal,
|
||
Radio,
|
||
RadioGroup,
|
||
Tooltip,
|
||
Typography,
|
||
useTheme,
|
||
Checkbox,
|
||
useMediaQuery,
|
||
} from "@mui/material";
|
||
import {
|
||
AnyTypedQuizQuestion,
|
||
createBranchingRuleMain,
|
||
} from "../../../model/questionTypes/shared";
|
||
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 { TypeSwitch, BlockRule } from "./Settings";
|
||
import {
|
||
getQuestionById,
|
||
getQuestionByContentId,
|
||
updateQuestion,
|
||
} from "@root/questions/actions";
|
||
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
|
||
import { useUiTools } from "@root/uiTools/store";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
|
||
|
||
export default function BranchingQuestions() {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||
const { openedModalSettingsId } = useUiTools();
|
||
const [targetQuestion, setTargetQuestion] =
|
||
useState<AnyTypedQuizQuestion | null>(
|
||
getQuestionById(openedModalSettingsId) ||
|
||
getQuestionByContentId(openedModalSettingsId),
|
||
);
|
||
const [parentQuestion, setParentQuestion] =
|
||
useState<AnyTypedQuizQuestion | null>(
|
||
getQuestionByContentId(targetQuestion?.content.rule.parentId),
|
||
);
|
||
|
||
useLayoutEffect(() => {
|
||
if (parentQuestion === null) return;
|
||
if (parentQuestion.content.rule.main.length === 0) {
|
||
let mutate = JSON.parse(JSON.stringify(parentQuestion));
|
||
mutate.content.rule.main = [
|
||
{
|
||
next: targetQuestion.content.id,
|
||
or: true,
|
||
rules: [
|
||
{
|
||
question: parentQuestion.content.id,
|
||
answers: [],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
setParentQuestion(mutate);
|
||
}
|
||
});
|
||
|
||
if (targetQuestion === null || parentQuestion === null) {
|
||
enqueueSnackbar("Невозможно найти данные ветвления для этого вопроса");
|
||
return <></>;
|
||
}
|
||
|
||
const saveData = () => {
|
||
if (parentQuestion !== null) {
|
||
updateQuestion(
|
||
parentQuestion.content.id,
|
||
(question) => (question.content = parentQuestion.content),
|
||
);
|
||
}
|
||
handleClose();
|
||
};
|
||
|
||
const handleClose = () => {
|
||
updateOpenedModalSettingsId();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Modal open={openedModalSettingsId !== null} 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: "#4d4d4d" }}>
|
||
<Typography component="span">{targetQuestion.title}</Typography>
|
||
</Box>
|
||
{isMobile ? (
|
||
<TooltipClickInfo
|
||
title={
|
||
"Настройте условия, при которых данный вопрос будет отображаться в quiz."
|
||
}
|
||
/>
|
||
) : (
|
||
<Tooltip
|
||
title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
|
||
placement="top"
|
||
>
|
||
<Box>
|
||
<InfoIcon />
|
||
</Box>
|
||
</Tooltip>
|
||
)}
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
height: "400px",
|
||
overflow: "auto",
|
||
}}
|
||
>
|
||
{parentQuestion.content.rule.main.length ? (
|
||
parentQuestion.content.rule.main.map((e: any, i: number) => {
|
||
if (e.next === targetQuestion.content.id) {
|
||
return (
|
||
<TypeSwitch
|
||
key={i}
|
||
setParentQuestion={setParentQuestion}
|
||
targetQuestion={targetQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={i}
|
||
/>
|
||
);
|
||
} else {
|
||
<></>;
|
||
}
|
||
})
|
||
) : (
|
||
<TypeSwitch
|
||
targetQuestion={targetQuestion}
|
||
setParentQuestion={setParentQuestion}
|
||
parentQuestion={parentQuestion}
|
||
ruleIndex={0}
|
||
/>
|
||
)}
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
margin: "20px 0 0 20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Link
|
||
variant="body2"
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
marginBottom: "10px",
|
||
cursor: "pointer",
|
||
}}
|
||
onClick={() => {
|
||
const mutate = JSON.parse(JSON.stringify(parentQuestion));
|
||
mutate.content.rule.main.push(
|
||
createBranchingRuleMain(
|
||
targetQuestion.content.id,
|
||
parentQuestion.content.id,
|
||
),
|
||
);
|
||
setParentQuestion(mutate);
|
||
}}
|
||
>
|
||
Добавить условие
|
||
</Link>
|
||
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox
|
||
sx={{
|
||
margin: 0,
|
||
}}
|
||
checked={
|
||
parentQuestion.content.rule.default ===
|
||
targetQuestion.content.id
|
||
}
|
||
onClick={() => {
|
||
let mutate = JSON.parse(JSON.stringify(parentQuestion));
|
||
|
||
if (parentQuestion.content.rule.children.length === 1) {
|
||
//Если потомок 1 - можно только чекнуть чекбокс (по-умолчанию и так должен быть чекнут единственный)
|
||
mutate.content.rule.default = targetQuestion.content.id;
|
||
} else {
|
||
//Изменять чекбокс можно только если много потомков
|
||
mutate.content.rule.default =
|
||
parentQuestion.content.rule.default ===
|
||
targetQuestion.content.id
|
||
? ""
|
||
: targetQuestion.content.id;
|
||
}
|
||
|
||
setParentQuestion(mutate);
|
||
}}
|
||
/>
|
||
}
|
||
label="Следующий вопрос по-умолчанию"
|
||
/>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "end",
|
||
gap: "10px",
|
||
margin: "20px",
|
||
}}
|
||
>
|
||
<Button
|
||
variant="outlined"
|
||
onClick={handleClose}
|
||
sx={{ width: "100%", maxWidth: "130px" }}
|
||
>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{ width: "100%", maxWidth: "130px" }}
|
||
onClick={saveData}
|
||
>
|
||
Готово
|
||
</Button>
|
||
</Box>
|
||
</>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|