78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
|
import { useParams } from "react-router-dom";
|
||
|
|
import { Box, Modal, Button, Typography } from "@mui/material";
|
||
|
|
import { useQuestionsStore } from "@root/questions/store";
|
||
|
|
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
|
||
|
|
|
||
|
|
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
openedModalQuestions: boolean;
|
||
|
|
setModalQuestionTargetContentId: (contentId:string) => void;
|
||
|
|
setOpenedModalQuestions: (open:boolean) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const BranchingQuestionsModal = ({ openedModalQuestions, setOpenedModalQuestions, setModalQuestionTargetContentId}:Props) => {
|
||
|
|
const quizId = Number(useParams().quizId);
|
||
|
|
const { questions } = useQuestionsStore();
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
setOpenedModalQuestions(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal open={openedModalQuestions} 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,
|
||
|
|
padding: "30px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box sx={{ margin: "0 auto", maxWidth: "350px" }}>
|
||
|
|
{questions.filter((q:AnyQuestion) => (q.type && !q.content.rule.parentId)).map((question: AnyTypedQuizQuestion, index:number) => (
|
||
|
|
<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)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='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>
|
||
|
|
);
|
||
|
|
};
|