diff --git a/src/assets/icons/CopyIcon.tsx b/src/assets/icons/CopyIcon.tsx index cf63279b..16409e1e 100644 --- a/src/assets/icons/CopyIcon.tsx +++ b/src/assets/icons/CopyIcon.tsx @@ -4,9 +4,10 @@ interface Props { color?: string; bgcolor?: string; marL?: string; + width?: string } -export default function CopyIcon({ color, bgcolor, marL }: Props) { +export default function CopyIcon({ color, bgcolor, marL, width = "36px" }: Props) { const theme = useTheme(); return ( @@ -14,8 +15,8 @@ export default function CopyIcon({ color, bgcolor, marL }: Props) { sx={{ bgcolor, borderRadius: "6px", - height: "36px", - width: "36px", + height: width, + width: width, display: "flex", justifyContent: "center", alignItems: "center", diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 6b10b403..76dfdabb 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -46,6 +46,7 @@ export default function QuestionsPageCard({ draggableProps={draggableProps} quizId={question.quizId} questionId={question.id} + questionBackendId={question.backendId} questionContentId={"content" in question ? question.content.id : null} title={question.title} questionType={question.type} diff --git a/src/pages/Questions/DraggableList/QuestionPageCardTitle.tsx b/src/pages/Questions/DraggableList/QuestionPageCardTitle.tsx index a78ce508..ff2e3805 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCardTitle.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCardTitle.tsx @@ -1,5 +1,6 @@ import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon"; import { CopyIcon } from "@icons/questionsPage/CopyIcon"; +import CopyIconPurple from "@icons/CopyIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import Answer from "@icons/questionsPage/answer"; import Date from "@icons/questionsPage/date"; @@ -50,6 +51,7 @@ interface Props { draggableProps: DraggableProvidedDragHandleProps | null | undefined; quizId: number; questionId: string; + questionBackendId: number; questionContentId: string | null; title: string; questionType: QuestionType | null; @@ -62,6 +64,7 @@ const QuestionPageCardTitle = memo(function ({ draggableProps, quizId, questionId, + questionBackendId, questionContentId, title, questionType, @@ -95,258 +98,285 @@ const QuestionPageCardTitle = memo(function ({ }; return ( - - - setTitle(target.value || " ")} - onFocus={handleInputFocus} - onBlur={handleInputBlur} - inputProps={{ - maxLength: maxLengthTextField, - }} - InputProps={{ - startAdornment: ( - - setOpen((isOpened) => !isOpened)} - > - {IconAndrom(isExpanded, questionType)} - - setOpen(false)} - anchorRef={anchorRef} - questionId={questionId} - questionContentId={questionContentId} - questionType={questionType} - /> - - ), - endAdornment: isTextFieldtActive && - title.length >= maxLengthTextField - 7 && ( - - {title.length} - / - {maxLengthTextField} - - ), - }} - sx={{ - flexGrow: 1, - margin: isMobile ? "10px 0" : 0, - "& .MuiInputBase-root": { - color: "#000000", - backgroundColor: isExpanded - ? theme.palette.background.default - : "transparent", - height: "48px", - borderRadius: "10px", - ".MuiOutlinedInput-notchedOutline": { - borderWidth: "1px !important", - border: !isExpanded ? "none" : null, - }, - "& .MuiInputBase-input::placeholder": { - color: "#4D4D4D", - opacity: 0.8, - }, - }, - }} - /> - - - - - - toggleExpandQuestion(questionId)} - > - {isExpanded ? ( - - ) : ( - - )} - - {isExpanded ? ( - <> - ) : ( - + - copyQuestion(questionId, quizId)} - > - - - { - if (questionType === null) { - deleteQuestion(questionId); - return; - } - if (questionHasParent) { - setOpenDelete(true); - } else { - deleteQuestionWithTimeout(questionId, () => - DeleteFunction(questionId), - ); - } - }} - data-cy="delete-question" - > - - - setOpenDelete(false)}> - + - - Вы удаляете вопрос, участвующий в ветвлении. Все его потомки - потеряют данные ветвления. Вы уверены, что хотите удалить - вопрос? - - - - - - - - - )} - {page !== null && ( - - {page + 1} - - )} - - + InputProps={{ + startAdornment: ( + + setOpen((isOpened) => !isOpened)} + > + {IconAndrom(isExpanded, questionType)} + + setOpen(false)} + anchorRef={anchorRef} + questionId={questionId} + questionContentId={questionContentId} + questionType={questionType} + /> + + ), + endAdornment: isTextFieldtActive && + title.length >= maxLengthTextField - 7 && ( + + {title.length} + / + {maxLengthTextField} + + ), + }} + sx={{ + flexGrow: 1, + margin: isMobile ? "10px 0" : 0, + "& .MuiInputBase-root": { + color: "#000000", + backgroundColor: isExpanded + ? theme.palette.background.default + : "transparent", + height: "48px", + borderRadius: "10px", + ".MuiOutlinedInput-notchedOutline": { + borderWidth: "1px !important", + border: !isExpanded ? "none" : null, + }, + "& .MuiInputBase-input::placeholder": { + color: "#4D4D4D", + opacity: 0.8, + }, + }, + }} + /> + + + + + + toggleExpandQuestion(questionId)} + > + {isExpanded ? ( + + ) : ( + + )} + + {isExpanded ? ( + <> + ) : ( + + copyQuestion(questionId, quizId)} + > + + + { + if (questionType === null) { + deleteQuestion(questionId); + return; + } + if (questionHasParent) { + setOpenDelete(true); + } else { + deleteQuestionWithTimeout(questionId, () => + DeleteFunction(questionId), + ); + } + }} + data-cy="delete-question" + > + + + setOpenDelete(false)}> + + + Вы удаляете вопрос, участвующий в ветвлении. Все его потомки + потеряют данные ветвления. Вы уверены, что хотите удалить + вопрос? + + + + + + + + + )} + {page !== null && ( + + {page + 1} + + )} + + + + {questionType !== null && + + ID Вопроса + {questionBackendId} + navigator.clipboard.writeText(document.querySelector("#id-copy").innerText) + } + > + + + } + ); }); diff --git a/src/pages/ResultPage/cards/ResultCard.tsx b/src/pages/ResultPage/cards/ResultCard.tsx index 953fff1d..7fdc033a 100644 --- a/src/pages/ResultPage/cards/ResultCard.tsx +++ b/src/pages/ResultPage/cards/ResultCard.tsx @@ -9,16 +9,16 @@ import { useCurrentQuiz } from "@root/quizes/hooks"; import CustomTextField from "@ui_kit/CustomTextField"; import { - Box, - IconButton, - Paper, - Button, - Typography, - TextField, - useMediaQuery, - useTheme, - FormControl, - Popover, + Box, + IconButton, + Paper, + Button, + Typography, + TextField, + useMediaQuery, + useTheme, + FormControl, + Popover, InputAdornment, } from "@mui/material"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; @@ -32,6 +32,7 @@ import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay"; import type { MouseEvent } from "react"; import type { QuizQuestionResult } from "@model/questionTypes/result"; +import CopyIcon from "@icons/CopyIcon"; interface Props { resultContract: boolean; @@ -259,6 +260,28 @@ export const ResultCard = ({ resultContract, resultData }: Props) => { }} > + + ID результата + {resultData.backendId} + navigator.clipboard.writeText(document.querySelector("#id-copy").innerText) + } + > + + +