95 lines
3.2 KiB
TypeScript
Executable File
95 lines
3.2 KiB
TypeScript
Executable File
import React from "react";
|
||
import Stepper from "@ui_kit/Stepper";
|
||
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material";
|
||
import AddPlus from "../../assets/icons/questionsPage/addPlus";
|
||
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||
import {quizStore} from "@root/quizes";
|
||
import {useParams} from "react-router-dom";
|
||
import QuestionsPageCard from "./QuestionPageCard";
|
||
import {questionStore} from "@root/questions";
|
||
import QuizCard from "../createQuize/QuizCard";
|
||
|
||
export default function QuestionsPage() {
|
||
const {listQuizes, updateQuizesList} = quizStore();
|
||
const params = Number(useParams().quizId);
|
||
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
|
||
const activeStep = listQuizes[params].step
|
||
console.log(listQuestions)
|
||
const handleNext = () => {
|
||
updateQuizesList(params, {step: listQuizes[params].step + 1})
|
||
}
|
||
|
||
const handleBack = () => {
|
||
let result = listQuizes[params].step - 1
|
||
updateQuizesList(params, {step: result ? result : 1})
|
||
};
|
||
|
||
function onDragOver(event: any) {
|
||
event.preventDefault();
|
||
}
|
||
|
||
function onDrop(event: any) {
|
||
const id = event
|
||
.dataTransfer
|
||
.getData('text');
|
||
const draggableElement = document.getElementById(id);
|
||
const dropzone = event.target;
|
||
dropzone.appendChild(draggableElement);
|
||
event
|
||
.dataTransfer
|
||
.clearData();
|
||
}
|
||
|
||
|
||
const theme = useTheme();
|
||
return (
|
||
<>
|
||
{/*<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />*/}
|
||
<Box sx={{ maxWidth: "796px", width: "100%", display: "flex", justifyContent: "space-between", margin: "60px 0 40px 0",}}>
|
||
<Typography variant={"h5"}>Заголовок квиза</Typography>
|
||
<Link sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main
|
||
}}>Свернуть всё</Link>
|
||
</Box>
|
||
<Box
|
||
onDragOver={onDragOver}
|
||
onDrop={onDrop}
|
||
>
|
||
{Object.values(listQuestions[params]).map((e, index) => (
|
||
<QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
|
||
)
|
||
)}
|
||
</Box>
|
||
|
||
<Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
|
||
<IconButton
|
||
onClick={() => {createQuestion(params)
|
||
console.log(listQuestions)
|
||
}}
|
||
>
|
||
<AddPlus />
|
||
</IconButton>
|
||
<Box sx={{ display: "flex", gap: "8px" }}>
|
||
<Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
|
||
<ArrowLeft />
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
padding: "10px 20px",
|
||
borderRadius: "8px",
|
||
background: theme.palette.brightPurple.main,
|
||
fontSize: "18px",
|
||
}}
|
||
>
|
||
Следующий шаг
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</>
|
||
);
|
||
}
|