diff --git a/src/constants/base.ts b/src/constants/base.ts index feae09e3..a39ce1d9 100644 --- a/src/constants/base.ts +++ b/src/constants/base.ts @@ -3,7 +3,7 @@ import type { QuizQuestionInitial } from "../model/questionTypes/shared"; export const QUIZ_QUESTION_BASE: Omit = { title: "", type: "nonselected", - expanded: false, + expanded: true, required: false, deleted: false, deleteTimeoutId: 0, diff --git a/src/constants/emoji.ts b/src/constants/emoji.ts index 48811534..0d0f781b 100644 --- a/src/constants/emoji.ts +++ b/src/constants/emoji.ts @@ -15,7 +15,6 @@ export const QUIZ_QUESTION_EMOJI: Omit = { variants: [ { answer: "", - hints: "", extendedText: "", }, ], diff --git a/src/constants/images.ts b/src/constants/images.ts index ed338d07..7e90ca02 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -18,7 +18,6 @@ export const QUIZ_QUESTION_IMAGES: Omit = { variants: [ { answer: "", - hints: "", extendedText: "", }, ], diff --git a/src/constants/select.ts b/src/constants/select.ts index cf1873bb..47233917 100644 --- a/src/constants/select.ts +++ b/src/constants/select.ts @@ -12,6 +12,6 @@ export const QUIZ_QUESTION_SELECT: Omit = { innerNameCheck: false, innerName: "", default: "", - variants: [{ answer: "", hints: "", extendedText: "" }], + variants: [{ answer: "", extendedText: "" }], }, }; diff --git a/src/constants/variant.ts b/src/constants/variant.ts index b16a2a7a..92ef5659 100644 --- a/src/constants/variant.ts +++ b/src/constants/variant.ts @@ -13,6 +13,6 @@ export const QUIZ_QUESTION_VARIANT: Omit = { innerNameCheck: false, required: false, innerName: "", - variants: [{ answer: "", hints: "", extendedText: "" }], + variants: [{ answer: "", extendedText: "" }], }, }; diff --git a/src/constants/varimg.ts b/src/constants/varimg.ts index 6f98bdae..92329cdf 100644 --- a/src/constants/varimg.ts +++ b/src/constants/varimg.ts @@ -11,7 +11,7 @@ export const QUIZ_QUESTION_VARIMG: Omit = { innerNameCheck: false, innerName: "", required: false, - variants: [{ answer: "", hints: "", extendedText: "" }], + variants: [{ answer: "", extendedText: "" }], largeCheck: false, replText: "", }, diff --git a/src/model/questionTypes/shared.ts b/src/model/questionTypes/shared.ts index 7789694b..1180a3b8 100644 --- a/src/model/questionTypes/shared.ts +++ b/src/model/questionTypes/shared.ts @@ -32,8 +32,6 @@ export interface QuestionHint { export type QuestionVariant = { /** Текст */ answer: string; - /** Текст подсказки */ - hints: string; /** Дополнительное поле для текста, emoji, ссылки на картинку */ extendedText: string; }; diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index 5579ae3a..3a4374c3 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -7,7 +7,6 @@ import { FormControl, InputAdornment, IconButton, - Popover, useTheme, useMediaQuery, } from "@mui/material"; @@ -17,10 +16,9 @@ import { questionStore, updateQuestionsList } from "@root/questions"; import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; -import { MessageIcon } from "@icons/messagIcon"; -import TextareaAutosize from "@mui/base/TextareaAutosize"; -import type { ChangeEvent, KeyboardEvent, ReactNode } from "react"; +import type { KeyboardEvent, ReactNode } from "react"; +import type { DroppableProvided } from "react-beautiful-dnd"; import type { QuizQuestionVariant } from "../../../model/questionTypes/variant"; import type { QuestionVariant } from "../../../model/questionTypes/shared"; @@ -29,9 +27,9 @@ type AnswerItemProps = { totalIndex: number; variants: QuestionVariant[]; variant: QuestionVariant; + provided: DroppableProvided; additionalContent?: ReactNode; additionalMobile?: ReactNode; - icon?: ReactNode; }; export const AnswerItem = ({ @@ -39,6 +37,7 @@ export const AnswerItem = ({ totalIndex, variants, variant, + provided, additionalContent, additionalMobile, }: AnswerItemProps) => { @@ -59,21 +58,9 @@ export const AnswerItem = ({ }); }, 1000); - const [isOpen, setIsOpen] = useState(false); - const [anchorEl, setAnchorEl] = useState(null); - - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - setIsOpen(true); - }; - - const handleClose = () => { - setIsOpen(false); - }; - const addNewAnswer = () => { const answerNew = variants.slice(); - answerNew.push({ answer: "", hints: "", extendedText: "" }); + answerNew.push({ answer: "", extendedText: "" }); updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew }, @@ -89,123 +76,79 @@ export const AnswerItem = ({ }); }; - const changeAnswerHint = (event: ChangeEvent) => { - const answerNew = variants.slice(); - answerNew[index].hints = event.target.value; - - updateQuestionsList(quizId, totalIndex, { - content: { ...question.content, variants: answerNew }, - }); - }; - return ( - - {(provided) => ( - - + + debounced(target.value)} + onKeyDown={(event: KeyboardEvent) => { + if (event.code === "Enter" && !question.content.largeCheck) { + addNewAnswer(); + } + }} + InputProps={{ + startAdornment: ( + <> + + + + {additionalContent} + + ), + endAdornment: ( + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: additionalContent + ? isTablet + ? "13px" + : "5px 13px" + : "13px", borderRadius: "10px", - border: "1px solid rgba(0, 0, 0, 0.23)", - background: "white", - }} - > - debounced(target.value)} - onKeyDown={(event: KeyboardEvent) => { - if (event.code === "Enter" && !question.content.largeCheck) { - addNewAnswer(); - } - }} - InputProps={{ - startAdornment: ( - <> - - - - {additionalContent} - - ), - endAdornment: ( - - - - - - - ) => event.stopPropagation()} - /> - - - - - - ), - }} - sx={{ - "& .MuiInputBase-root": { - padding: additionalContent ? "5px 13px" : "13px", - borderRadius: "10px", - background: "#ffffff", - "& input.MuiInputBase-input": { - height: "22px", - }, - "& textarea.MuiInputBase-input": { - marginTop: "1px", - }, - "& .MuiOutlinedInput-notchedOutline": { - border: "none", - }, - }, - }} - inputProps={{ - sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" }, - }} - /> - {additionalMobile} - - - )} - + background: "#ffffff", + "& input.MuiInputBase-input": { + height: "22px", + }, + "& textarea.MuiInputBase-input": { + marginTop: "1px", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" }, + }} + /> + {additionalMobile} + + ); }; diff --git a/src/pages/Questions/AnswerDraggableList/index.tsx b/src/pages/Questions/AnswerDraggableList/index.tsx index 5f2d8be7..fe730f6c 100644 --- a/src/pages/Questions/AnswerDraggableList/index.tsx +++ b/src/pages/Questions/AnswerDraggableList/index.tsx @@ -47,6 +47,7 @@ export const AnswerDraggableList = ({ totalIndex={totalIndex} variants={variants} variant={variant} + provided={provided} additionalContent={additionalContent?.(variant, index)} additionalMobile={additionalMobile?.(variant, index)} /> diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 9c2488d7..6e5686b0 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -225,7 +225,7 @@ export default function QuestionsPageCard({ sx={{ margin: isMobile ? "10px 0" : 0, "& .MuiInputBase-root": { - color: question.expanded ? "#9A9AAF" : "#4D4D4D", + color: question.expanded ? "#000000" : "#4D4D4D", backgroundColor: question.expanded ? theme.palette.background.default : "transparent", diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index 7ab48826..8a5cee31 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -29,7 +29,7 @@ export default function DropDown({ totalIndex }: Props) { const addNewAnswer = () => { const answerNew = question.content.variants.slice(); - answerNew.push({ answer: "", hints: "", extendedText: "" }); + answerNew.push({ answer: "", extendedText: "" }); updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew }, @@ -94,12 +94,22 @@ export default function DropDown({ totalIndex }: Props) { > или нажмите Enter - + )} - + ); diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index 1ac17595..4b939053 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -28,7 +28,9 @@ interface Props { export default function Emoji({ totalIndex }: Props) { const [switchState, setSwitchState] = useState("setting"); const [open, setOpen] = useState(false); - const [anchorElement, setAnchorElement] = useState(null); + const [anchorElement, setAnchorElement] = useState( + null + ); const [currentIndex, setCurrentIndex] = useState(0); const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); @@ -37,7 +39,6 @@ export default function Emoji({ totalIndex }: Props) { const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const SSHC = (data: string) => { setSwitchState(data); }; @@ -198,14 +199,21 @@ export default function Emoji({ totalIndex }: Props) { }} /> - + { const answerNew = question.content.variants.slice(); - answerNew.push({ answer: "", hints: "", extendedText: "" }); + answerNew.push({ answer: "", extendedText: "" }); updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew }, @@ -237,7 +245,11 @@ export default function Emoji({ totalIndex }: Props) { )} - + ); diff --git a/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx b/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx index b625b316..4a7d2066 100644 --- a/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx +++ b/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx @@ -27,7 +27,7 @@ export default memo( {(provided) => ( {questionData.deleted ? ( diff --git a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx index 0c5c8476..f7b34366 100644 --- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx @@ -147,11 +147,13 @@ export default function QuestionsPageCard({ ), endAdornment: ( <> - - - + {totalIndex !== 0 && ( + + + + )} ), }} diff --git a/src/pages/Questions/Form/FormDraggableList/index.tsx b/src/pages/Questions/Form/FormDraggableList/index.tsx index 894a43ad..959869b3 100644 --- a/src/pages/Questions/Form/FormDraggableList/index.tsx +++ b/src/pages/Questions/Form/FormDraggableList/index.tsx @@ -15,6 +15,10 @@ export const FormDraggableList = () => { const { listQuestions } = questionStore(); const onDragEnd = ({ destination, source }: DropResult) => { + if (destination?.index === 0) { + return; + } + if (destination) { const newItems = reorder( listQuestions[quizId], diff --git a/src/pages/Questions/Form/FormQuestionsPage.tsx b/src/pages/Questions/Form/FormQuestionsPage.tsx index e119cd53..4481dceb 100644 --- a/src/pages/Questions/Form/FormQuestionsPage.tsx +++ b/src/pages/Questions/Form/FormQuestionsPage.tsx @@ -93,13 +93,6 @@ export default function FormQuestionsPage() { }} onClick={() => { createQuestion(quizId); - updateQuestionsList( - quizId, - listQuestions[quizId].length - 1 || 0, - { - expanded: true, - } - ); }} > diff --git a/src/pages/Questions/Form/FormTypeQuestions.tsx b/src/pages/Questions/Form/FormTypeQuestions.tsx index f7da06d3..e70b2325 100644 --- a/src/pages/Questions/Form/FormTypeQuestions.tsx +++ b/src/pages/Questions/Form/FormTypeQuestions.tsx @@ -5,18 +5,14 @@ import { Box } from "@mui/material"; import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton"; import ButtonsOptions from "../ButtonsOptions"; import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions"; +import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions"; import Answer from "../../../assets/icons/questionsPage/answer"; -import OptionsPict from "../../../assets/icons/questionsPage/options_pict"; -import OptionsAndPict from "../../../assets/icons/questionsPage/options_and_pict"; -import Emoji from "../../../assets/icons/questionsPage/emoji"; import Input from "../../../assets/icons/questionsPage/input"; import DropDown from "../../../assets/icons/questionsPage/drop_down"; import Date from "../../../assets/icons/questionsPage/date"; import Slider from "../../../assets/icons/questionsPage/slider"; import Download from "../../../assets/icons/questionsPage/download"; -import Page from "../../../assets/icons/questionsPage/page"; -import RatingIcon from "../../../assets/icons/questionsPage/rating"; import { questionStore, @@ -40,27 +36,12 @@ type ButtonTypeQuestion = { value: QuizQuestionType; }; -export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [ +const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [ { icon: , title: "Варианты ответов", value: "variant", }, - { - icon: , - title: "Варианты с картинками", - value: "images", - }, - { - icon: , - title: "Варианты и картинка", - value: "varimg", - }, - { - icon: , - title: "Эмоджи", - value: "emoji", - }, { icon: , title: "Своё поле для ввода", @@ -86,16 +67,6 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [ title: "Загрузка файла", value: "file", }, - { - icon: , - title: "Страница", - value: "page", - }, - { - icon: , - title: "Рейтинг", - value: "rating", - }, ]; export default function FormTypeQuestions({ totalIndex }: Props) { @@ -114,7 +85,10 @@ export default function FormTypeQuestions({ totalIndex }: Props) { margin: "20px", }} > - {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => ( + {(totalIndex === 0 + ? BUTTON_TYPE_QUESTIONS + : BUTTON_TYPE_SHORT_QUESTIONS + ).map(({ icon, title, value }) => ( { diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index e9ffe26e..f6db2893 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -1,16 +1,16 @@ import { useState } from "react"; import { - Box, - Link, - Typography, - useTheme, - useMediaQuery, - InputAdornment, - IconButton, - Button, - Popover, - TextareaAutosize, - TextField, + Box, + Link, + Typography, + useTheme, + useMediaQuery, + InputAdornment, + IconButton, + Button, + Popover, + TextareaAutosize, + TextField, } from "@mui/material"; import { useParams } from "react-router-dom"; @@ -35,423 +35,247 @@ import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg"; import { produce } from "immer"; interface Props { - totalIndex: number; + totalIndex: number; } export default function OptionsAndPicture({ totalIndex }: Props) { - const [open, setOpen] = useState(false); - const [opened, setOpened] = useState(false); - const [switchState, setSwitchState] = useState("setting"); - const [currentIndex, setCurrentIndex] = useState(0); - const quizId = Number(useParams().quizId); - const { listQuestions } = questionStore(); - const theme = useTheme(); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const question = listQuestions[quizId][totalIndex] as QuizQuestionVarImg; + const [open, setOpen] = useState(false); + const [opened, setOpened] = useState(false); + const [switchState, setSwitchState] = useState("setting"); + const [currentIndex, setCurrentIndex] = useState(0); + const quizId = Number(useParams().quizId); + const { listQuestions } = questionStore(); + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const question = listQuestions[quizId][totalIndex] as QuizQuestionVarImg; - const SSHC = (data: string) => { - setSwitchState(data); - }; + const SSHC = (data: string) => { + setSwitchState(data); + }; - const uploadImage = (files: FileList | null) => { - if (files?.length) { - const [file] = Array.from(files); + const uploadImage = (files: FileList | null) => { + if (files?.length) { + const [file] = Array.from(files); - const clonedContent = { ...question.content }; - clonedContent.variants[currentIndex].extendedText = - URL.createObjectURL(file); - updateQuestionsList(quizId, totalIndex, { - content: clonedContent, - }); + const clonedContent = { ...question.content }; + clonedContent.variants[currentIndex].extendedText = + URL.createObjectURL(file); + updateQuestionsList(quizId, totalIndex, { + content: clonedContent, + }); - setOpen(false); - setOpened(true); - } - }; + setOpen(false); + setOpened(true); + } + }; - return ( - <> - - ( - <> - {!isMobile && ( - { - setCurrentIndex(index); - setOpen(true); - }} - > - {variant.extendedText ? ( - - - - - - - ) : ( - - )} - - )} - - )} - additionalMobile={(variant, index) => ( - <> - {isMobile && ( - { - setCurrentIndex(index); - setOpen(true); - }} - sx={{ - overflow: "hidden", - display: "flex", - alignItems: "center", - m: "8px", - position: "relative", - borderRadius: "3px", - }} - > - - {variant.extendedText ? ( - - - - ) : ( - - )} - - - + - - - )} - - )} - /> - setOpen(false)} - imgHC={uploadImage} - /> - setOpened(false)} - picture={question.content.variants[currentIndex]?.extendedText} - onCropPress={url => { - const content = produce(question.content, draft => { - draft.variants[currentIndex].extendedText = url; - }); - updateQuestionsList(quizId, totalIndex, { - content, - }); - }} - /> + return ( + <> + + ( + <> + {!isMobile && ( { + setCurrentIndex(index); + setOpen(true); + }} > - - - - - {!isMobile && ( - - - - - - + - - - )} - - ), - endAdornment: ( - - - - - - - - - - - - ), - }} - sx={{ - "& .MuiInputBase-root": { - padding: "13.5px", - borderRadius: "10px", - background: "#ffffff", - height: "48px", - }, - "& .MuiOutlinedInput-notchedOutline": { - border: "none", - }, - }} - inputProps={{ - sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, - }} - /> - - {isMobile && ( - - - - - - - - + - - - - )} - - - { - const clonedContent = { ...question.content }; - clonedContent.variants.push({ - answer: "", - hints: "", - extendedText: "", - }); - updateQuestionsList(quizId, totalIndex, { - content: clonedContent, - }); - }} + background: "#EEE4FC", + borderRadius: "3px", + margin: "0 10px", + height: "40px", + }} > - Добавьте ответ - - {isMobile ? null : ( - <> - - или нажмите Enter - - - - )} + + + + + + ) : ( + + )} - - - - - ); + )} + + )} + additionalMobile={(variant, index) => ( + <> + {isMobile && ( + { + setCurrentIndex(index); + setOpen(true); + }} + sx={{ + overflow: "hidden", + display: "flex", + alignItems: "center", + m: "8px", + position: "relative", + borderRadius: "3px", + }} + > + + {variant.extendedText ? ( + + + + ) : ( + + )} + + + + + + + )} + + )} + /> + setOpen(false)} + imgHC={uploadImage} + /> + setOpened(false)} + picture={question.content.variants[currentIndex]?.extendedText} + onCropPress={(url) => { + const content = produce(question.content, (draft) => { + draft.variants[currentIndex].extendedText = url; + }); + updateQuestionsList(quizId, totalIndex, { + content, + }); + }} + /> + + { + const clonedContent = { ...question.content }; + clonedContent.variants.push({ + answer: "", + extendedText: "", + }); + updateQuestionsList(quizId, totalIndex, { + content: clonedContent, + }); + }} + > + Добавьте ответ + + {isMobile ? null : ( + <> + + или нажмите Enter + + + + )} + + + + + + ); } diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 1be84281..27f88103 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,12 +1,12 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; import { - Box, - Link, - Typography, - Button, - useTheme, - useMediaQuery + Box, + Link, + Typography, + Button, + useTheme, + useMediaQuery, } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; @@ -25,227 +25,234 @@ import type { QuizQuestionImages } from "../../../model/questionTypes/images"; import { produce } from "immer"; interface Props { - totalIndex: number; + totalIndex: number; } export default function OptionsPicture({ totalIndex }: Props) { - const [open, setOpen] = useState(false); - const [opened, setOpened] = useState(false); - const [currentIndex, setCurrentIndex] = useState(0); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const isTablet = useMediaQuery(theme.breakpoints.down(790)); - const quizId = Number(useParams().quizId); - const [switchState, setSwitchState] = useState("setting"); - const { listQuestions } = questionStore(); - const question = listQuestions[quizId][totalIndex] as QuizQuestionImages; + const [open, setOpen] = useState(false); + const [opened, setOpened] = useState(false); + const [currentIndex, setCurrentIndex] = useState(0); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isTablet = useMediaQuery(theme.breakpoints.down(790)); + const quizId = Number(useParams().quizId); + const [switchState, setSwitchState] = useState("setting"); + const { listQuestions } = questionStore(); + const question = listQuestions[quizId][totalIndex] as QuizQuestionImages; - const SSHC = (data: string) => { - setSwitchState(data); - }; + const SSHC = (data: string) => { + setSwitchState(data); + }; - const uploadImage = (files: FileList | null) => { - if (files?.length) { - const [file] = Array.from(files); + const uploadImage = (files: FileList | null) => { + if (files?.length) { + const [file] = Array.from(files); - const clonedContent = { ...question.content }; - clonedContent.variants[currentIndex].extendedText = - URL.createObjectURL(file); - updateQuestionsList(quizId, totalIndex, { - content: clonedContent, - }); + const clonedContent = { ...question.content }; + clonedContent.variants[currentIndex].extendedText = + URL.createObjectURL(file); + updateQuestionsList(quizId, totalIndex, { + content: clonedContent, + }); - setOpen(false); - setOpened(true); - } - }; + setOpen(false); + setOpened(true); + } + }; - const addNewAnswer = () => { - const answerNew = question.content.variants.slice(); - answerNew.push({ answer: "", hints: "", extendedText: "" }); + const addNewAnswer = () => { + const answerNew = question.content.variants.slice(); + answerNew.push({ answer: "", extendedText: "" }); - updateQuestionsList(quizId, totalIndex, { - content: { ...question.content, variants: answerNew }, - }); - }; + updateQuestionsList(quizId, totalIndex, { + content: { ...question.content, variants: answerNew }, + }); + }; - return ( - <> - - ( - <> - {!isMobile && ( - { - setCurrentIndex(index); - setOpen(true); - }} - > - {variant.extendedText ? ( - - - - - - - ) : ( - - )} - - )} - - )} - additionalMobile={(variant, index) => ( - <> - {isMobile && ( - { - setCurrentIndex(index); - setOpen(true); - }} - sx={{ - overflow: "hidden", - display: "flex", - alignItems: "center", - m: "8px", - position: "relative", - borderRadius: "3px", - }} - > - - {variant.extendedText ? ( - - - - ) : ( - - )} - - - + - - - )} - - )} - /> - setOpen(false)} - imgHC={uploadImage} - /> - setOpened(false)} - picture={question.content.variants[currentIndex]?.extendedText} - onCropPress={url => { - const content = produce(question.content, draft => { - draft.variants[currentIndex].extendedText = url; - }); - updateQuestionsList(quizId, totalIndex, { - content, - }); - }} - /> - - + + ( + <> + {!isMobile && ( + { + setCurrentIndex(index); + setOpen(true); + }} + > + {variant.extendedText ? ( + - Добавьте ответ - - {isMobile ? null : ( - <> - - или нажмите Enter - - - - )} + + + + + + ) : ( + + )} - - - - - ); + )} + + )} + additionalMobile={(variant, index) => ( + <> + {isMobile && ( + { + setCurrentIndex(index); + setOpen(true); + }} + sx={{ + overflow: "hidden", + display: "flex", + alignItems: "center", + m: "8px", + position: "relative", + borderRadius: "3px", + }} + > + + {variant.extendedText ? ( + + + + ) : ( + + )} + + + + + + + )} + + )} + /> + setOpen(false)} + imgHC={uploadImage} + /> + setOpened(false)} + picture={question.content.variants[currentIndex]?.extendedText} + onCropPress={(url) => { + const content = produce(question.content, (draft) => { + draft.variants[currentIndex].extendedText = url; + }); + updateQuestionsList(quizId, totalIndex, { + content, + }); + }} + /> + + + Добавьте ответ + + {isMobile ? null : ( + <> + + или нажмите Enter + + + + )} + + + + + + ); } diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 40a30fb7..7586087e 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -1,19 +1,19 @@ import { - Box, - Button, - IconButton, - Typography, - useMediaQuery, - useTheme, + Box, + Button, + IconButton, + Typography, + useMediaQuery, + useTheme, } 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 { - questionStore, - createQuestion, - updateQuestionsList, + questionStore, + createQuestion, + updateQuestionsList, } from "@root/questions"; import { DraggableList } from "./DraggableList"; @@ -22,17 +22,17 @@ import QuizPreview from "@ui_kit/QuizPreview/QuizPreview"; import { createPortal } from "react-dom"; export default function QuestionsPage() { - const { listQuizes, updateQuizesList } = quizStore(); - const quizId = Number(useParams().quizId); - const { listQuestions } = questionStore(); - const handleNext = () => { - updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 }); - }; + const { listQuizes, updateQuizesList } = quizStore(); + const quizId = Number(useParams().quizId); + const { listQuestions } = questionStore(); + const handleNext = () => { + updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 }); + }; - const handleBack = () => { - let result = listQuizes[quizId].step - 1; - updateQuizesList(quizId, { step: result ? result : 1 }); - }; + const handleBack = () => { + let result = listQuizes[quizId].step - 1; + updateQuizesList(quizId, { step: result ? result : 1 }); + }; const collapseEverything = () => { listQuestions[quizId].forEach((item, index) => { @@ -43,12 +43,11 @@ export default function QuestionsPage() { }); }; - const theme = useTheme(); - const isTablet = useMediaQuery(theme.breakpoints.up(1000)); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(660)); return ( <> - {/* */} { createQuestion(quizId); }} + sx={{ + position: "fixed", + left: isMobile ? "20px" : "250px", + bottom: "20px", + }} > - + - - - - - ); + gap: 1, + }} + > + + {nonDeletedQuizQuestions.length > 0 + ? `Вопрос ${currentQuizStep + 1} из ${ + nonDeletedQuizQuestions.length + }` + : "Нет вопросов"} + + {nonDeletedQuizQuestions.length > 0 && ( + + )} + + + + + + + + ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx index 38021c64..c13a8908 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx @@ -1,39 +1,54 @@ import InfoIcon from "@icons/InfoIcon"; -import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material"; +import { + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + Tooltip, + Typography, +} from "@mui/material"; import { QuizQuestionEmoji } from "model/questionTypes/emoji"; import { useState, ChangeEvent } from "react"; - interface Props { - question: QuizQuestionEmoji; + question: QuizQuestionEmoji; } export default function Emoji({ question }: Props) { - const [value, setValue] = useState(null); + const [value, setValue] = useState(null); - const handleChange = (event: ChangeEvent) => { - setValue((event.target as HTMLInputElement).value); - }; + const handleChange = (event: ChangeEvent) => { + setValue((event.target as HTMLInputElement).value); + }; - return ( - - {question.title} - - {question.content.variants.map((variant, index) => ( - } label={ - - {`${variant.extendedText} ${variant.answer}`} - - - - - } /> - ))} - - - ); + return ( + + {question.title} + + {question.content.variants.map((variant, index) => ( + } + label={ + + {`${variant.extendedText} ${variant.answer}`} + + + + + + + } + /> + ))} + + + ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx index d1bde9fc..b21ba2ec 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx @@ -1,90 +1,107 @@ import InfoIcon from "@icons/InfoIcon"; -import { Box, ButtonBase, Divider, Tooltip, Typography, useTheme } from "@mui/material"; +import { + Box, + ButtonBase, + Divider, + Tooltip, + Typography, + useTheme, +} from "@mui/material"; import { QuizQuestionImages } from "model/questionTypes/images"; import { useEffect, useState } from "react"; - interface Props { - question: QuizQuestionImages; + question: QuizQuestionImages; } export default function Images({ question }: Props) { - const theme = useTheme(); - const [selectedVariants, setSelectedVariants] = useState([]); + const theme = useTheme(); + const [selectedVariants, setSelectedVariants] = useState([]); - function handleVariantClick(index: number) { - if (!question.content.multi) return setSelectedVariants([index]); + function handleVariantClick(index: number) { + if (!question.content.multi) return setSelectedVariants([index]); - const newSelectedVariants = [...selectedVariants]; - if (newSelectedVariants.includes(index)) { - newSelectedVariants.splice(newSelectedVariants.indexOf(index), 1); - } else { - newSelectedVariants.push(index); - } - setSelectedVariants(newSelectedVariants); + const newSelectedVariants = [...selectedVariants]; + if (newSelectedVariants.includes(index)) { + newSelectedVariants.splice(newSelectedVariants.indexOf(index), 1); + } else { + newSelectedVariants.push(index); } + setSelectedVariants(newSelectedVariants); + } - useEffect(function resetSelectedVariants() { - setSelectedVariants([]); - }, [question.content.multi]); + useEffect( + function resetSelectedVariants() { + setSelectedVariants([]); + }, + [question.content.multi] + ); - return ( - - {question.title} - - {question.content.variants.map((variant, index) => ( - handleVariantClick(index)} - sx={{ - display: "flex", - flexDirection: "column", - borderRadius: "8px", - overflow: "hidden", - border: "1px solid", - borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3", - }} - > - {variant.extendedText ? - question variant - : - Картинка отсутствует - } - - - {variant.answer} - - - - - - - - ))} + return ( + + {question.title} + + {question.content.variants.map((variant, index) => ( + handleVariantClick(index)} + sx={{ + display: "flex", + flexDirection: "column", + borderRadius: "8px", + overflow: "hidden", + border: "1px solid", + borderColor: selectedVariants.includes(index) + ? theme.palette.brightPurple.main + : "#E3E3E3", + }} + > + {variant.extendedText ? ( + question variant + ) : ( + Картинка отсутствует + )} + + + {variant.answer} + + + + + - - ); + + ))} + + + ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx index cded6e77..12eac675 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx @@ -1,41 +1,54 @@ import InfoIcon from "@icons/InfoIcon"; -import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material"; +import { + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + Tooltip, + Typography, +} from "@mui/material"; import { QuizQuestionVariant } from "model/questionTypes/variant"; import { ChangeEvent, useState } from "react"; - interface Props { - question: QuizQuestionVariant; + question: QuizQuestionVariant; } export default function Variant({ question }: Props) { - const [value, setValue] = useState(null); + const [value, setValue] = useState(null); - const handleChange = (event: ChangeEvent) => { - setValue((event.target as HTMLInputElement).value); - }; + const handleChange = (event: ChangeEvent) => { + setValue((event.target as HTMLInputElement).value); + }; - return ( - - {question.title} - - {question.content.variants.map((variant, index) => ( - } label={ - - {variant.answer} - - - - - - - } /> - ))} - - - ); + return ( + + {question.title} + + {question.content.variants.map((variant, index) => ( + } + label={ + + {variant.answer} + + + + + + + } + /> + ))} + + + ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx index 1383be3a..b45c6c89 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx @@ -1,80 +1,99 @@ import InfoIcon from "@icons/InfoIcon"; -import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material"; +import { + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + Tooltip, + Typography, +} from "@mui/material"; import { QuestionVariant } from "model/questionTypes/shared"; import { QuizQuestionVarImg } from "model/questionTypes/varimg"; import { useState, ChangeEvent } from "react"; - interface Props { - question: QuizQuestionVarImg; + question: QuizQuestionVarImg; } export default function Varimg({ question }: Props) { - const [selectedVariantIndex, setSelectedVariantIndex] = useState(-1); + const [selectedVariantIndex, setSelectedVariantIndex] = useState(-1); - const handleChange = (event: ChangeEvent) => { - setSelectedVariantIndex(question.content.variants.findIndex( - variant => variant.answer === event.target.value - )); - }; - - const currentVariant: QuestionVariant | undefined = question.content.variants[selectedVariantIndex]; - - return ( - - - {question.title} - - {question.content.variants.map((variant, index) => ( - } - label={ - - {variant.answer} - - - - - - - } - /> - ))} - - - - {currentVariant?.extendedText ? - question variant - : - {selectedVariantIndex === -1 ? "Выберите вариант" : "Картинка отсутствует"} - } - - + const handleChange = (event: ChangeEvent) => { + setSelectedVariantIndex( + question.content.variants.findIndex( + (variant) => variant.answer === event.target.value + ) ); + }; + + const currentVariant: QuestionVariant | undefined = + question.content.variants[selectedVariantIndex]; + + return ( + + + {question.title} + + {question.content.variants.map((variant, index) => ( + } + label={ + + {variant.answer} + + + + + + + } + /> + ))} + + + + {currentVariant?.extendedText ? ( + question variant + ) : ( + + {selectedVariantIndex === -1 + ? "Выберите вариант" + : "Картинка отсутствует"} + + )} + + + ); }