менюшка для удаления, нумерация вопросов, селект в превью
This commit is contained in:
parent
a169dd0a49
commit
8b252dc6bc
@ -66,6 +66,7 @@ function DraggableListItem({ question, isDragging, index }: Props) {
|
||||
question={question}
|
||||
draggableProps={provided.dragHandleProps}
|
||||
isDragging={isDragging}
|
||||
index={index}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
<OneIcon
|
||||
<Box
|
||||
style={{
|
||||
fontSize: "30px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
marginLeft: "3px",
|
||||
color: !question.expanded ? "#FFF" : "",
|
||||
fill: question.expanded
|
||||
borderRadius: "50%",
|
||||
fontSize: "16px",
|
||||
color: question.expanded
|
||||
? theme.palette.brightPurple.main
|
||||
: "#FFF",
|
||||
background: question.expanded
|
||||
? "#EEE4FC"
|
||||
: theme.palette.brightPurple.main,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{index + 1}
|
||||
</Box>
|
||||
<IconButton
|
||||
disableRipple
|
||||
sx={{
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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) })
|
||||
);
|
||||
|
||||
@ -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,11 +80,86 @@ export default function QuizPreviewLayout() {
|
||||
sx={{
|
||||
mt: "auto",
|
||||
p: "16px",
|
||||
display: "flex",
|
||||
borderTop: "1px solid #E3E3E3",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ marginBottom: "10px" }}>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{ width: "100%", minWidth: "200px", height: "48px" }}
|
||||
>
|
||||
<MuiSelect
|
||||
id="category-select"
|
||||
variant="outlined"
|
||||
value={currentQuizStep}
|
||||
placeholder="Заголовок вопроса"
|
||||
onChange={({ target }) =>
|
||||
setCurrentQuestionIndex(window.Number(target.value))
|
||||
}
|
||||
sx={{
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: `1px solid ${theme.palette.brightPurple.main} !important`,
|
||||
},
|
||||
}}
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
mt: "8px",
|
||||
p: "4px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #EEE4FC",
|
||||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||||
},
|
||||
},
|
||||
MenuListProps: {
|
||||
sx: {
|
||||
py: 0,
|
||||
display: "flex",
|
||||
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,
|
||||
@ -134,6 +213,7 @@ export default function QuizPreviewLayout() {
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user