339 lines
16 KiB
TypeScript
339 lines
16 KiB
TypeScript
import InfoIcon from "@icons/Info";
|
||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||
import {
|
||
Box,
|
||
Button,
|
||
Chip,
|
||
FormControl,
|
||
FormControlLabel,
|
||
IconButton,
|
||
Link,
|
||
Modal,
|
||
Radio,
|
||
RadioGroup,
|
||
Tooltip,
|
||
Typography,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { updateQuestion } from "@root/questions/actions";
|
||
import RadioCheck from "@ui_kit/RadioCheck";
|
||
import RadioIcon from "@ui_kit/RadioIcon";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { Select } from "./Select";
|
||
|
||
|
||
type BranchingQuestionsProps = {
|
||
question: AnyTypedQuizQuestion;
|
||
};
|
||
|
||
const ACTIONS = ["Показать", "Скрыть"];
|
||
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
|
||
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
|
||
const CONDITIONS = [
|
||
"Все условия обязательны",
|
||
"Обязательно хотя бы одно условие",
|
||
];
|
||
|
||
export default function BranchingQuestions({
|
||
question,
|
||
}: BranchingQuestionsProps) {
|
||
const theme = useTheme();
|
||
const [title, setTitle] = useState<string>("");
|
||
const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
|
||
const titleRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
setTitleInputWidth(titleRef.current?.offsetWidth || 0);
|
||
}, [title]);
|
||
|
||
const handleClose = () => {
|
||
updateQuestion(question.id, question => {
|
||
question.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) => {
|
||
updateQuestion(question.id, question => {
|
||
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={() => {
|
||
updateQuestion(question.id, question => {
|
||
question.content.rule.reqs.splice(index, 1);
|
||
});
|
||
}}
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
</Box>
|
||
<Select
|
||
empty
|
||
activeItemIndex={request.id ? Number(request.id) : -1}
|
||
items={STIPULATIONS}
|
||
onChange={(stipulation) => {
|
||
updateQuestion(question.id, question => {
|
||
question.content.rule.reqs[index].id = String(
|
||
STIPULATIONS.findIndex((item) => item.includes(stipulation))
|
||
);
|
||
});
|
||
}}
|
||
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 answerItemIndex = ANSWERS.findIndex(
|
||
(answerItem) => answerItem === answer
|
||
);
|
||
updateQuestion(question.id, question => {
|
||
const vars = question.content.rule.reqs[index].vars;
|
||
if (vars.includes(answerItemIndex)) {
|
||
vars.push(answerItemIndex);
|
||
}
|
||
});
|
||
}}
|
||
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={() => {
|
||
updateQuestion(question.id, question => {
|
||
const vars = question.content.rule.reqs[index].vars;
|
||
|
||
const removedItemIndex = vars.findIndex((varItem) => varItem === item);
|
||
if (removedItemIndex === -1) return;
|
||
|
||
vars.splice(removedItemIndex, 1);
|
||
});
|
||
}}
|
||
/>
|
||
)
|
||
)}
|
||
</Box>
|
||
</>
|
||
)}
|
||
</Box>
|
||
))}
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "baseline",
|
||
}}
|
||
>
|
||
<Link
|
||
variant="body2"
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
marginBottom: "10px",
|
||
}}
|
||
onClick={() => {
|
||
updateQuestion(question.id, question => {
|
||
question.content.rule.reqs.push({ id: "", vars: [] });
|
||
});
|
||
}}
|
||
>
|
||
Добавить условие
|
||
</Link>
|
||
<FormControl>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
value={question.content.rule.or ? 1 : 0}
|
||
onChange={(_, value) => {
|
||
updateQuestion(question.id, question => {
|
||
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>
|
||
</>
|
||
);
|
||
}
|