diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx index 417b5ef9..d1559299 100644 --- a/src/pages/Questions/DraggableList/DraggableListItem.tsx +++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx @@ -66,6 +66,7 @@ function DraggableListItem({ question, isDragging, index }: Props) { question={question} draggableProps={provided.dragHandleProps} isDragging={isDragging} + index={index} /> )} diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 943555b8..c57c4416 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -45,9 +45,10 @@ interface Props { question: AnyTypedQuizQuestion | UntypedQuizQuestion; draggableProps: DraggableProvidedDragHandleProps | null | undefined; isDragging: boolean; + index: number; } -export default function QuestionsPageCard({ question, draggableProps, isDragging }: Props) { +export default function QuestionsPageCard({ question, draggableProps, isDragging, index }: Props) { const [plusVisible, setPlusVisible] = useState(false); const [open, setOpen] = useState(false); const theme = useTheme(); @@ -96,7 +97,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging setTitle(target.value)} + onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value)} InputProps={{ startAdornment: ( @@ -262,17 +263,26 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging )} - - + > + {index + 1} + (false); + const subMenuRef = useRef(null); function handleEditClick() { setEditQuizId(quiz.backendId); @@ -134,15 +139,45 @@ export default function QuizCard({ }} /> deleteQuiz(quiz.id)} + onClick={() => setSubMenuOpen(true)} data-cy="delete-quiz" > + setSubMenuOpen(false)} + anchorOrigin={{ vertical: "top", horizontal: "right" }} + > + setSubMenuOpen(false)}> + + + + ); diff --git a/src/stores/quizPreview.ts b/src/stores/quizPreview.ts index 9bdce865..6058e85b 100644 --- a/src/stores/quizPreview.ts +++ b/src/stores/quizPreview.ts @@ -28,6 +28,10 @@ export const toggleQuizPreview = () => useQuizPreviewStore.setState( state => ({ isPreviewShown: !state.isPreviewShown }) ); +export const setCurrentQuestionIndex = (step: number) => useQuizPreviewStore.setState( + state => ({ currentQuestionIndex:state.currentQuestionIndex = step }) +); + export const incrementCurrentQuestionIndex = (maxStep: number) => useQuizPreviewStore.setState( state => ({ currentQuestionIndex: Math.min(state.currentQuestionIndex + 1, maxStep) }) ); diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx index fc03434d..7e68964d 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx @@ -1,9 +1,10 @@ -import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material"; +import { Box, Button, LinearProgress, Paper, Typography, FormControl, Select as MuiSelect, MenuItem, useTheme } from "@mui/material"; import { useQuestionsStore } from "@root/questions/store"; import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore, + setCurrentQuestionIndex } from "@root/quizPreview"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; import { useEffect } from "react"; @@ -20,9 +21,10 @@ import Text from "./QuizPreviewQuestionTypes/Text"; import Variant from "./QuizPreviewQuestionTypes/Variant"; import Varimg from "./QuizPreviewQuestionTypes/Varimg"; import { notReachable } from "../../utils/notReachable"; - +import ArrowDownIcon from "@icons/ArrowDownIcon"; export default function QuizPreviewLayout() { + const theme = useTheme(); const questions = useQuestionsStore(state => state.questions); const currentQuizStep = useQuizPreviewStore( (state) => state.currentQuestionIndex @@ -67,7 +69,9 @@ export default function QuizPreviewLayout() { whiteSpace: "break-spaces", overflowY: "auto", flexGrow: 1, - "&::-webkit-scrollbar": { width: 0 }, + "&::-webkit-scrollbar": { width: 0, display: "none" }, + msOverflowStyle: "none", + scrollbarWidth: "none", }} > @@ -76,62 +80,138 @@ export default function QuizPreviewLayout() { sx={{ mt: "auto", p: "16px", - display: "flex", borderTop: "1px solid #E3E3E3", - alignItems: "center", }} > - - - {nonDeletedQuizQuestions.length > 0 - ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length - }` - : "Нет вопросов"} - - {nonDeletedQuizQuestions.length > 0 && ( - + + + setCurrentQuestionIndex(window.Number(target.value)) + } sx={{ - "&.MuiLinearProgress-colorPrimary": { - backgroundColor: "fadePurple.main", - }, - "& .MuiLinearProgress-barColorPrimary": { - backgroundColor: "brightPurple.main", + height: "48px", + borderRadius: "8px", + "& .MuiOutlinedInput-notchedOutline": { + border: `1px solid ${theme.palette.brightPurple.main} !important`, }, }} - /> - )} - - - - + + +