141 lines
3.7 KiB
TypeScript
141 lines
3.7 KiB
TypeScript
import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
|
||
import { useParams } from "react-router-dom";
|
||
|
||
import { FormDraggableList } from "./FormDraggableList";
|
||
|
||
import {
|
||
questionStore,
|
||
createQuestion,
|
||
updateQuestionsList,
|
||
} from "@root/questions";
|
||
import { quizStore } from "@root/quizes";
|
||
|
||
import AddPlus from "../../../assets/icons/questionsPage/addPlus";
|
||
import ArrowLeft from "../../../assets/icons/questionsPage/arrowLeft";
|
||
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";
|
||
|
||
import type {
|
||
AnyQuizQuestion,
|
||
QuizQuestionBase,
|
||
} from "../../../model/questionTypes/shared";
|
||
|
||
export default function FormQuestionsPage() {
|
||
const { listQuizes, updateQuizesList } = quizStore();
|
||
const quizId = Number(useParams().quizId);
|
||
const { listQuestions } = questionStore();
|
||
const handleNext = () => {
|
||
updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 });
|
||
};
|
||
|
||
const collapseEverything = () => {
|
||
listQuestions[quizId].forEach((item, index) => {
|
||
updateQuestionsList<AnyQuizQuestion>(quizId, index, {
|
||
...item,
|
||
expanded: false,
|
||
});
|
||
});
|
||
};
|
||
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
maxWidth: "796px",
|
||
width: "100%",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
margin: "60px 0 40px 0",
|
||
}}
|
||
>
|
||
<Typography variant={"h5"}>Заголовок анкеты</Typography>
|
||
<Button
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
padding: 0,
|
||
textDecoration: "underline",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
}}
|
||
onClick={collapseEverything}
|
||
>
|
||
Свернуть всё
|
||
</Button>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
maxWidth: "796px",
|
||
boxShadow: "0px 10px 30px #e7e7e7",
|
||
borderRadius: "12px",
|
||
marginBottom: "40px",
|
||
borderTop: "1px solid transparent",
|
||
borderBottom: "1px solid transparent",
|
||
background: "#FFFFFF",
|
||
}}
|
||
>
|
||
<FormDraggableList />
|
||
<Box
|
||
sx={{
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "15px",
|
||
padding: "4px",
|
||
margin: "15px",
|
||
border: "1px solid transparent",
|
||
borderRadius: "8px",
|
||
"&:hover": {
|
||
border: "1px solid #9A9AAF",
|
||
},
|
||
}}
|
||
onClick={() => {
|
||
createQuestion(quizId);
|
||
updateQuestionsList<QuizQuestionBase>(
|
||
quizId,
|
||
listQuestions[quizId].length - 1 || 0,
|
||
{
|
||
expanded: true,
|
||
}
|
||
);
|
||
}}
|
||
>
|
||
<AddAnswer color="#EEE4FC" />
|
||
<Typography sx={{ color: "#9A9AAF" }}>
|
||
Добавить еще один вопрос
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "flex-end",
|
||
gap: "8px",
|
||
maxWidth: "796px",
|
||
}}
|
||
>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
|
||
>
|
||
<ArrowLeft />
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
height: "44px",
|
||
padding: "10px 20px",
|
||
borderRadius: "8px",
|
||
background: theme.palette.brightPurple.main,
|
||
fontSize: "18px",
|
||
}}
|
||
onClick={handleNext}
|
||
>
|
||
Следующий шаг
|
||
</Button>
|
||
</Box>
|
||
</>
|
||
);
|
||
}
|