91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import { Box, Modal, Button, Typography } from "@mui/material";
|
|
import { useQuestionsStore } from "@root/questions/store";
|
|
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
|
|
|
interface Props {
|
|
openedModalQuestions: boolean;
|
|
setModalQuestionTargetContentId: (contentId: string) => void;
|
|
setOpenedModalQuestions: (open: boolean) => void;
|
|
}
|
|
|
|
export const BranchingQuestionsModal = ({
|
|
openedModalQuestions,
|
|
setOpenedModalQuestions,
|
|
setModalQuestionTargetContentId,
|
|
}: Props) => {
|
|
const trashQuestions = useQuestionsStore().questions;
|
|
const questions = trashQuestions.filter(
|
|
(question) => question.type !== "result"
|
|
);
|
|
|
|
const handleClose = () => {
|
|
setOpenedModalQuestions(false);
|
|
};
|
|
|
|
const typedQuestions: AnyTypedQuizQuestion[] = questions.filter(
|
|
(question) =>
|
|
question.type &&
|
|
!question.content.rule.parentId &&
|
|
question.type !== "result"
|
|
) as AnyTypedQuizQuestion[];
|
|
|
|
if (typedQuestions.length === 0) return <></>;
|
|
|
|
return (
|
|
<Modal open={openedModalQuestions} onClose={handleClose}>
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
overflow: "auto",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
maxWidth: "620px",
|
|
width: "100%",
|
|
bgcolor: "background.paper",
|
|
borderRadius: "12px",
|
|
boxShadow: 24,
|
|
padding: "30px 0",
|
|
height: "80vh",
|
|
}}
|
|
>
|
|
<Box sx={{ margin: "0 auto", maxWidth: "350px" }}>
|
|
{typedQuestions.map((question) => (
|
|
<Button
|
|
key={question.content.id}
|
|
onClick={() => {
|
|
setModalQuestionTargetContentId(question.content.id);
|
|
handleClose();
|
|
}}
|
|
sx={{
|
|
width: "100%",
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: "12px",
|
|
background: "#FFFFFF",
|
|
borderRadius: "8px",
|
|
marginBottom: "20px",
|
|
boxShadow: "0px 10px 30px #e7e7e7",
|
|
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
|
|
border-radius: 8px;`,
|
|
"&:last-child": { marginBottom: 0 },
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
width: "100%",
|
|
color: "#000",
|
|
}}
|
|
>
|
|
{question.title || "нет заголовка"}
|
|
</Typography>
|
|
</Button>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
};
|