102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
import { useParams } from "react-router-dom";
|
||
import { Box, Button, IconButton, Typography } from "@mui/material";
|
||
import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { updateDragQuestionContentId } from "@root/questions/actions";
|
||
import { useEffect } from "react";
|
||
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
|
||
import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
|
||
import {updateOpenBranchingPanel, updateEditSomeQuestion} from "@root/questions/actions"
|
||
|
||
|
||
const getItemStyle = (isDragging: any, draggableStyle: any) => ({
|
||
// some basic styles to make the items look a bit nicer
|
||
userSelect: "none",
|
||
padding: 5 * 2,
|
||
margin: `0 0 5px 0`,
|
||
|
||
// change background colour if dragging
|
||
background: isDragging ? "lightgreen" : "grey",
|
||
|
||
// styles we need to apply on draggables
|
||
...draggableStyle
|
||
});
|
||
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
|
||
|
||
export const QuestionsList = () => {
|
||
const { desireToOpenABranchingModal } = useQuestionsStore()
|
||
const trashQuestions = useQuestionsStore().questions
|
||
const questions = trashQuestions.filter((question) => question.type !== "result")
|
||
|
||
return (
|
||
<Box sx={{ padding: "15px" }}>
|
||
<Typography
|
||
sx={{ fontSize: "12px", color: "#9A9AAF", marginBottom: "5px" }}
|
||
>
|
||
Перетащите вопросы в карту ветвления
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
maxHeight: "400px",
|
||
overflowY: "scroll",
|
||
paddingRight: "12px",
|
||
"&::-webkit-scrollbar": { width: "8px" },
|
||
"&::-webkit-scrollbar-track": {
|
||
background: "#D4D4DF",
|
||
borderRadius: "4px",
|
||
},
|
||
"&::-webkit-scrollbar-thumb": {
|
||
boxSizing: "border-box",
|
||
background: "#9A9AAF",
|
||
borderRadius: "4px",
|
||
border: "1.5px solid transparent",
|
||
backgroundClip: "padding-box",
|
||
},
|
||
}}
|
||
>
|
||
{/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
|
||
{questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => (
|
||
<Button
|
||
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
|
||
if (!content.rule.parentId) updateDragQuestionContentId(content.id)
|
||
}}
|
||
key={index}
|
||
sx={{
|
||
width: "100%",
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
padding: "12px",
|
||
background: "#FFFFFF",
|
||
borderRadius: "8px",
|
||
border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none",
|
||
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: content.rule.parentId ? "#9A9AAF" : "#000" }}>
|
||
{title || "нет заголовка"}
|
||
</Typography>
|
||
<IconButton
|
||
onClick={() => {
|
||
updateOpenBranchingPanel(false)
|
||
updateEditSomeQuestion(content.id)
|
||
}}
|
||
>
|
||
<Pencil style={{color: "#7e2aea"}}/>
|
||
</IconButton>
|
||
{content.rule.parentId && <CheckedIcon />}
|
||
</Button>
|
||
|
||
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
|