менюшка для удаления, нумерация вопросов, селект в превью

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}
                             />
                         </Box>
                     )}

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<boolean>(false);
     const [open, setOpen] = useState<boolean>(false);
     const theme = useTheme();
@@ -96,7 +97,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                         <TextField
                             defaultValue={question.title}
                             placeholder={"Заголовок вопроса"}
-                            onChange={({ target }: {target: HTMLInputElement}) => setTitle(target.value)}
+                            onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value)}
                             InputProps={{
                                 startAdornment: (
                                     <Box>
@@ -262,17 +263,26 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                                 </IconButton>
                             </Box>
                         )}
-
+                        <Box
-                        <OneIcon
                             style={{
-                                fontSize: "30px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "30px",
+                                width: "30px",
                                 marginLeft: "3px",
-                                color: !question.expanded ? "#FFF" : "",
+                                borderRadius: "50%",
-                                fill: question.expanded
+                                fontSize: "16px",
+                                color: question.expanded
+                                    ? theme.palette.brightPurple.main
+                                    : "#FFF",
+                                background: question.expanded
                                     ? "#EEE4FC"
                                     : theme.palette.brightPurple.main,
                             }}
-                        />
+                        >
+                            {index + 1}
+                        </Box>
                         <IconButton
                             disableRipple
                             sx={{

src/pages/createQuize/QuizCard.tsx

@@ -1,3 +1,4 @@
+import { useState, useRef } from "react";
 import ChartIcon from "@icons/ChartIcon";
 import LinkIcon from "@icons/LinkIcon";
 import PencilIcon from "@icons/PencilIcon";
@@ -10,6 +11,8 @@ import {
     Typography,
     useMediaQuery,
     useTheme,
+    Popover,
+
 } from "@mui/material";
 import { deleteQuiz, setEditQuizId } from "@root/quizes/actions";
 import { useNavigate } from "react-router-dom";
@@ -31,6 +34,8 @@ export default function QuizCard({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(600));
     const navigate = useNavigate();
+  const [subMenuOpen, setSubMenuOpen] = useState<boolean>(false);
+  const subMenuRef = useRef<HTMLButtonElement | null>(null);
 
     function handleEditClick() {
         setEditQuizId(quiz.backendId);
@@ -134,15 +139,45 @@ export default function QuizCard({
                     }}
                 />
                 <IconButton
+                    ref={subMenuRef}
                     sx={{
                         color: theme.palette.brightPurple.main,
                         ml: "auto",
                     }}
-                    onClick={() => deleteQuiz(quiz.id)}
+                    onClick={() => setSubMenuOpen(true)}
                     data-cy="delete-quiz"
                 >
                     <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
                 </IconButton>
+                <Popover
+                    open={subMenuOpen}
+                    anchorEl={subMenuRef.current}
+                    onClose={() => setSubMenuOpen(false)}
+                    anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                >
+                    <Box onClick={() => setSubMenuOpen(false)}>
+                        <Button
+                            sx={{
+                                display: "block",
+                                width: "100%",
+                                padding: "15px 30px",
+                            }}
+                            onClick={()=>{}}
+                        >
+                            Копировать
+                        </Button>
+                        <Button
+                            sx={{
+                                display: "block",
+                                width: "100%",
+                                padding: "15px 30px",
+                            }}
+                            onClick={() => deleteQuiz(quiz.id)}
+                        >
+                            Удалить
+                        </Button>
+                    </Box>
+                </Popover>
             </Box>
         </Box>
     );

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) })
 );

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",
                 }}
             >
                 <QuestionPreviewComponent question={currentQuestion} />
@@ -76,62 +80,138 @@ export default function QuizPreviewLayout() {
                 sx={{
                     mt: "auto",
                     p: "16px",
-                    display: "flex",
                     borderTop: "1px solid #E3E3E3",
-                    alignItems: "center",
                 }}
             >
-                <Box
+                <Box sx={{ marginBottom: "10px" }}>
-                    sx={{
+                    <FormControl
-                        flexGrow: 1,
+                        fullWidth
-                        display: "flex",
+                        size="small"
-                        flexDirection: "column",
+                        sx={{ width: "100%", minWidth: "200px", height: "48px" }}
-                        gap: 1,
+                    >
-                    }}
+                        <MuiSelect
-                >
+                            id="category-select"
-                    <Typography>
+                            variant="outlined"
-                        {nonDeletedQuizQuestions.length > 0
+                            value={currentQuizStep}
-                            ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length
+                            placeholder="Заголовок вопроса"
-                            }`
+                            onChange={({ target }) =>
-                            : "Нет вопросов"}
+                                setCurrentQuestionIndex(window.Number(target.value))
-                    </Typography>
+                            }
-                    {nonDeletedQuizQuestions.length > 0 && (
-                        <LinearProgress
-                            variant="determinate"
-                            value={currentProgress}
                             sx={{
-                                "&.MuiLinearProgress-colorPrimary": {
+                                height: "48px",
-                                    backgroundColor: "fadePurple.main",
+                                borderRadius: "8px",
-                                },
+                                "& .MuiOutlinedInput-notchedOutline": {
-                                "& .MuiLinearProgress-barColorPrimary": {
+                                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
-                                    backgroundColor: "brightPurple.main",
                                 },
                             }}
-                        />
+                            MenuProps={{
-                    )}
+                                PaperProps: {
-                </Box>
+                                    sx: {
-                <Box
+                                        mt: "8px",
-                    sx={{
+                                        p: "4px",
-                        ml: 2,
+                                        borderRadius: "8px",
-                        display: "flex",
+                                        border: "1px solid #EEE4FC",
-                        gap: 1,
+                                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
-                    }}
+                                    },
-                >
+                                },
-                    <Button
+                                MenuListProps: {
-                        variant="outlined"
+                                    sx: {
-                        onClick={decrementCurrentQuestionIndex}
+                                        py: 0,
-                        disabled={currentQuizStep === 0}
+                                        display: "flex",
-                        sx={{ px: 1, minWidth: 0 }}
+                                        flexDirection: "column",
+                                        gap: "8px",
+                                        "& .Mui-selected": {
+                                            backgroundColor: theme.palette.background.default,
+                                            color: theme.palette.brightPurple.main,
+                                        },
+                                    },
+                                },
+                            }}
+                            inputProps={{
+                                sx: {
+                                    color: theme.palette.brightPurple.main,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    px: "9px",
+                                    gap: "20px",
+                                },
+                            }}
+                            IconComponent={(props) => <ArrowDownIcon {...props} />}
+                        >
+                            {Object.values(questions).map(
+                                ({ id, title }, index) => (
+                                    <MenuItem
+                                        key={id}
+                                        value={index}
+                                        sx={{
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "20px",
+                                            p: "4px",
+                                            borderRadius: "5px",
+                                            color: theme.palette.grey2.main,
+                                        }}
+                                    >
+                                        {`${index + 1}. ${title}`}
+                                    </MenuItem>
+                                )
+                            )}
+                        </MuiSelect>
+                    </FormControl>
+                    </Box>
+                    <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Box
+                        sx={{
+                            flexGrow: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 1,
+                        }}
                     >
-                        <ArrowLeft />
+                        <Typography>
-                    </Button>
+                            {nonDeletedQuizQuestions.length > 0
-                    <Button
+                                ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length
-                        variant="contained"
+                                }`
-                        onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
+                                : "Нет вопросов"}
-                        disabled={currentQuizStep >= maxCurrentQuizStep}
+                        </Typography>
+                        {nonDeletedQuizQuestions.length > 0 && (
+                            <LinearProgress
+                                variant="determinate"
+                                value={currentProgress}
+                                sx={{
+                                    "&.MuiLinearProgress-colorPrimary": {
+                                        backgroundColor: "fadePurple.main",
+                                    },
+                                    "& .MuiLinearProgress-barColorPrimary": {
+                                        backgroundColor: "brightPurple.main",
+                                    },
+                                }}
+                            />
+                        )}
+                    </Box>
+                    <Box
+                        sx={{
+                            ml: 2,
+                            display: "flex",
+                            gap: 1,
+                        }}
                     >
-                        Далее
+                        <Button
-                    </Button>
+                            variant="outlined"
+                            onClick={decrementCurrentQuestionIndex}
+                            disabled={currentQuizStep === 0}
+                            sx={{ px: 1, minWidth: 0 }}
+                        >
+                            <ArrowLeft />
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
+                            disabled={currentQuizStep >= maxCurrentQuizStep}
+                        >
+                            Далее
+                        </Button>
+                    </Box>
                 </Box>
             </Box>
         </Paper>