121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
import { Box, Paper } from "@mui/material";
|
|
import { createUntypedQuestion } from "@root/questions/actions";
|
|
import { useState } from "react";
|
|
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
|
|
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
|
|
import type {
|
|
AnyTypedQuizQuestion,
|
|
UntypedQuizQuestion,
|
|
} from "../../../model/questionTypes/shared";
|
|
import SwitchQuestionsPage from "../SwitchQuestionsPage";
|
|
import TypeQuestions from "../TypeQuestions";
|
|
import QuestionPageCardTitle from "./QuestionPageCardTitle";
|
|
|
|
interface Props {
|
|
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
|
|
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
|
|
isDragging: boolean;
|
|
openBranchingPage: boolean;
|
|
setOpenBranchingPage: (a: boolean) => void;
|
|
}
|
|
|
|
export default function QuestionsPageCard({
|
|
question,
|
|
draggableProps,
|
|
isDragging,
|
|
openBranchingPage,
|
|
setOpenBranchingPage,
|
|
}: Props) {
|
|
const [plusVisible, setPlusVisible] = useState<boolean>(false);
|
|
|
|
return (
|
|
<>
|
|
<Paper
|
|
id={question.id}
|
|
data-cy="quiz-question-card"
|
|
sx={{
|
|
maxWidth: "796px",
|
|
width: "100%",
|
|
borderRadius: "12px",
|
|
backgroundColor: question.expanded ? "white" : "#EEE4FC",
|
|
border: question.expanded ? "none" : "1px solid #9A9AAF",
|
|
boxShadow: "0px 10px 30px #e7e7e7",
|
|
}}
|
|
>
|
|
<QuestionPageCardTitle
|
|
draggableProps={draggableProps}
|
|
quizId={question.quizId}
|
|
questionId={question.id}
|
|
questionBackendId={question.backendId}
|
|
questionContentId={"content" in question ? question.content.id : null}
|
|
title={question.title}
|
|
questionType={question.type}
|
|
page={"page" in question ? question.page : null}
|
|
isExpanded={question.expanded}
|
|
questionHasParent={
|
|
"content" in question
|
|
? question.content.rule.parentId.length > 0
|
|
: false
|
|
}
|
|
/>
|
|
{question.expanded && (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
padding: 0,
|
|
borderRadius: "12px",
|
|
}}
|
|
>
|
|
{question.type === null ? (
|
|
<TypeQuestions question={question} />
|
|
) : (
|
|
<SwitchQuestionsPage
|
|
question={question}
|
|
openBranchingPage={openBranchingPage}
|
|
setOpenBranchingPage={setOpenBranchingPage}
|
|
/>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Paper>
|
|
<Box
|
|
onMouseEnter={() => setPlusVisible(true)}
|
|
onMouseLeave={() => setPlusVisible(false)}
|
|
sx={{
|
|
maxWidth: "825px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
height: "40px",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<Box
|
|
onClick={() => createUntypedQuestion(question.quizId, question.id)}
|
|
sx={{
|
|
display: plusVisible && !isDragging ? "flex" : "none",
|
|
width: "100%",
|
|
alignItems: "center",
|
|
columnGap: "10px",
|
|
}}
|
|
data-cy="create-question"
|
|
>
|
|
<Box
|
|
sx={{
|
|
boxSizing: "border-box",
|
|
width: "100%",
|
|
height: "1px",
|
|
backgroundPosition: "bottom",
|
|
backgroundRepeat: "repeat-x",
|
|
backgroundSize: "20px 1px",
|
|
backgroundImage:
|
|
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
|
|
}}
|
|
/>
|
|
<PlusIcon />
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|