391 lines
18 KiB
TypeScript
391 lines
18 KiB
TypeScript
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
|
||
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
|
||
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
|
||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||
import type { SxProps } from "@mui/material";
|
||
import {
|
||
Box, Button,
|
||
IconButton, Modal,
|
||
Tooltip,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { copyQuestion, deleteQuestion, deleteQuestionWithTimeout, clearRuleForAll, updateQuestion, getQuestionByContentId } from "@root/questions/actions";
|
||
import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal, } from "@root/uiTools/actions";
|
||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
|
||
import Branching from "../../assets/icons/questionsPage/branching";
|
||
import Clue from "../../assets/icons/questionsPage/clue";
|
||
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
|
||
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
|
||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
|
||
import { updateRootContentId } from "@root/quizes/actions";
|
||
import { useUiTools } from "@root/uiTools/store";
|
||
import {useState} from "react";
|
||
|
||
interface Props {
|
||
switchState: string;
|
||
SSHC: (data: string) => void;
|
||
question: AnyTypedQuizQuestion;
|
||
sx?: SxProps;
|
||
}
|
||
|
||
export default function ButtonsOptions({
|
||
SSHC,
|
||
switchState,
|
||
question,
|
||
}: Props) {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
|
||
const quiz = useCurrentQuiz();
|
||
const { questions } = useQuestionsStore.getState();
|
||
const [openDelete, setOpenDelete] = useState<boolean>(false);
|
||
|
||
const openedModal = () => {
|
||
updateOpenBranchingPanel(true);
|
||
updateDesireToOpenABranchingModal(question.content.id);
|
||
};
|
||
|
||
const deleteFn = () => {
|
||
if (question.type !== null) {
|
||
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
|
||
updateRootContentId(quiz.id, "");
|
||
clearRuleForAll();
|
||
deleteQuestion(question.id);
|
||
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
|
||
const clearQuestions = [] as string[];
|
||
|
||
//записываем потомков , а их результаты удаляем
|
||
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
|
||
questions.forEach((targetQuestion) => {
|
||
if (targetQuestion.type !== null && targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
|
||
if (targetQuestion.type !== "result" && targetQuestion.type !== null) {
|
||
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
|
||
getChildren(targetQuestion); //и ищем его потомков
|
||
}
|
||
}
|
||
});
|
||
};
|
||
getChildren(question);
|
||
//чистим потомков от инфы ветвления
|
||
clearQuestions.forEach((id) => {
|
||
updateQuestion(id, question => {
|
||
question.content.rule.parentId = "";
|
||
question.content.rule.main = [];
|
||
question.content.rule.default = "";
|
||
});
|
||
});
|
||
|
||
//чистим rule родителя
|
||
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
|
||
const newRule = {};
|
||
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
|
||
newRule.parentId = parentQuestion.content.rule.parentId;
|
||
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
|
||
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
|
||
|
||
updateQuestion(question.content.rule.parentId, (PQ) => {
|
||
PQ.content.rule = newRule;
|
||
});
|
||
deleteQuestion(question.id);
|
||
}
|
||
|
||
deleteQuestion(question.id);
|
||
|
||
const result = questions.find(q => q.type === "result" && q.content.rule.parentId === question.content.id)
|
||
if (result) deleteQuestion(result.id);
|
||
|
||
} else {
|
||
deleteQuestion(question.id);
|
||
}
|
||
};
|
||
|
||
|
||
const buttonSetting: {
|
||
icon: JSX.Element;
|
||
title: string;
|
||
value: string;
|
||
myFunc?: any;
|
||
}[] = [
|
||
{
|
||
icon: (
|
||
<SettingIcon
|
||
color={
|
||
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
|
||
}
|
||
/>
|
||
),
|
||
title: "Настройки",
|
||
value: "setting",
|
||
},
|
||
// {
|
||
// icon: (
|
||
// <Clue
|
||
// color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main}
|
||
// />
|
||
// ),
|
||
// title: "Подсказка",
|
||
// value: "help",
|
||
// },
|
||
{
|
||
icon: (
|
||
<Branching
|
||
color={
|
||
switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
|
||
}
|
||
/>
|
||
),
|
||
title: "Ветвление",
|
||
value: "branching",
|
||
myFunc: (question) => {
|
||
updateOpenBranchingPanel(true);
|
||
updateDesireToOpenABranchingModal(question.content.id);
|
||
}
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
background: "#f2f3f7",
|
||
height: isMobile ? "92px" : "70px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
padding: isMobile ? " 3px 12px 11px" : "20px",
|
||
display: "flex",
|
||
flexWrap: isMobile ? "wrap" : "nowrap",
|
||
gap: "6px",
|
||
}}
|
||
>
|
||
{buttonSetting.map(({ icon, title, value, myFunc }) => (
|
||
<Box key={value}>
|
||
{value === "branching" ? (
|
||
<Tooltip
|
||
arrow
|
||
placement="right"
|
||
componentsProps={{
|
||
tooltip: {
|
||
sx: {
|
||
background: "#fff",
|
||
borderRadius: "6px",
|
||
color: "#9A9AAF",
|
||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||
"& .MuiTooltip-arrow": {
|
||
color: "#FFF",
|
||
},
|
||
},
|
||
},
|
||
}}
|
||
title={
|
||
<Box>
|
||
<Typography
|
||
sx={{
|
||
color: "#4D4D4D",
|
||
fontWeight: "bold",
|
||
fontSize: "14px",
|
||
marginBottom: "10px",
|
||
}}
|
||
>
|
||
Будет показан при условии
|
||
</Typography>
|
||
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
|
||
Название
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: "bold",
|
||
fontSize: "12px",
|
||
marginBottom: "10px",
|
||
}}
|
||
>
|
||
Условие 1, Условие 2
|
||
</Typography>
|
||
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
|
||
Все условия обязательны
|
||
</Typography>
|
||
</Box>
|
||
}
|
||
>
|
||
<MiniButtonSetting
|
||
key={title}
|
||
onClick={() => {
|
||
openedModal();
|
||
// SSHC(value);
|
||
// myFunc(question);
|
||
}}
|
||
sx={{
|
||
display: quiz.config.type === "form" ? "none" : "flex",
|
||
backgroundColor:
|
||
switchState === value
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === value
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main,
|
||
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
|
||
height: "30px",
|
||
"&:hover": {
|
||
color: theme.palette.grey3.main,
|
||
"& path": { stroke: theme.palette.grey3.main },
|
||
},
|
||
}}
|
||
>
|
||
{icon}
|
||
{isWrappMiniButtonSetting ? null : title}
|
||
</MiniButtonSetting>
|
||
</Tooltip>
|
||
) : (
|
||
<>
|
||
<MiniButtonSetting
|
||
key={title}
|
||
onClick={() => {
|
||
SSHC(value);
|
||
myFunc();
|
||
}}
|
||
sx={{
|
||
backgroundColor:
|
||
switchState === value
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === value
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main,
|
||
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
|
||
height: "30px",
|
||
"&:hover": {
|
||
color: theme.palette.grey3.main,
|
||
"& path": { stroke: theme.palette.grey3.main },
|
||
},
|
||
}}
|
||
>
|
||
{icon}
|
||
{isWrappMiniButtonSetting ? null : title}
|
||
</MiniButtonSetting>
|
||
</>
|
||
)}
|
||
</Box>
|
||
))}
|
||
<>
|
||
<MiniButtonSetting
|
||
onClick={undefined} // TODO
|
||
sx={{
|
||
minWidth: "30px",
|
||
height: "30px",
|
||
backgroundColor: "#FEDFD0",
|
||
}}
|
||
>
|
||
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={undefined} // TODO
|
||
sx={{
|
||
minWidth: "30px",
|
||
height: "30px",
|
||
backgroundColor: "#FEDFD0",
|
||
}}
|
||
>
|
||
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={undefined} // TODO
|
||
sx={{
|
||
minWidth: "30px",
|
||
height: "30px",
|
||
backgroundColor: "#FEDFD0",
|
||
}}
|
||
>
|
||
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
|
||
</MiniButtonSetting>
|
||
</>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
gap: "6px",
|
||
}}
|
||
>
|
||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||
<HideIcon style={{ color: "#4D4D4D" }} />
|
||
</IconButton>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => copyQuestion(question.id, question.quizId)}
|
||
>
|
||
<CopyIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
<IconButton
|
||
sx={{ borderRadius: "6px", padding: "2px" }}
|
||
onClick={() => {
|
||
if(question.content.rule.parentId.length !== 0) {
|
||
setOpenDelete(true)
|
||
} else {
|
||
deleteQuestionWithTimeout(question.id, deleteFn);
|
||
}
|
||
|
||
}}
|
||
data-cy="delete-question"
|
||
>
|
||
<DeleteIcon color={"#4D4D4D"} />
|
||
</IconButton>
|
||
<Modal open={openDelete} onClose={() => setOpenDelete(false)}>
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
padding: "30px",
|
||
borderRadius: "10px",
|
||
background: "#FFFFFF",
|
||
}}
|
||
>
|
||
<Typography variant="h6" sx={{textAlign: "center"}}>
|
||
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
marginTop: "30px",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
gap: "15px",
|
||
}}
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
sx={{ minWidth: "150px" }}
|
||
onClick={() => setOpenDelete(false)}
|
||
>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{ minWidth: "150px" }}
|
||
onClick={() => {
|
||
deleteQuestionWithTimeout(question.id, deleteFn);
|
||
}}
|
||
>
|
||
Подтвердить
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|