frontPanel/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx

264 lines
8.1 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 { 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>
</>
);
}