diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index b0a01d63..8ea8d21b 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -193,7 +193,11 @@ export default function ButtonsOptions({ ) ) : ( <> - {value !== "setting" && quize.config.type === "quize" && ( + {(value !== "setting" || + quize.config.type === "quize" || + (value === "setting" && + quize.config.type === "form" && + question.type)) && ( { diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 208de21e..1fa10c25 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -16,6 +16,7 @@ import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon"; import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import { useParams } from "react-router-dom"; +import { quizStore } from "@root/quizes"; import { questionStore, copyQuestion, @@ -44,12 +45,14 @@ export default function ButtonsOptionsAndPict({ }: Props) { const [buttonHover, setButtonHover] = useState(""); const quizId = Number(useParams().quizId); + const { listQuizes } = quizStore(); const { listQuestions } = questionStore(); const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); + const quize = listQuizes[quizId]; const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; useEffect(() => { @@ -146,151 +149,160 @@ export default function ButtonsOptionsAndPict({ /> {isIconMobile ? null : "Подсказка"} - + - - Будет показан при условии - - - Название - - - Условие 1, Условие 2 - - - Все условия обязательны - - - } - > - setButtonHover("branching")} - onMouseLeave={() => setButtonHover("")} - onClick={() => { - SSHC("branching"); - openedModal(); - }} - sx={{ - height: "30px", - maxWidth: "103px", - minWidth: isIconMobile ? "30px" : "64px", - backgroundColor: - switchState === "branching" - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === "branching" - ? "#ffffff" - : theme.palette.grey3.main, - "&:hover": { - color: - switchState === "branching" ? theme.palette.grey3.main : null, - }, - }} - > - + + Будет показан при условии + + + Название + + + Условие 1, Условие 2 + + + Все условия обязательны + + } - /> - {isIconMobile ? null : "Ветвление"} - - - setButtonHover("image")} - onMouseLeave={() => setButtonHover("")} - onClick={() => { - SSHC("image"); - }} - sx={{ - height: "30px", - maxWidth: "123px", - minWidth: isIconMobile ? "30px" : "64px", - backgroundColor: - switchState === "image" - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === "image" ? "#ffffff" : theme.palette.grey3.main, - "&:hover": { - color: switchState === "image" ? theme.palette.grey3.main : null, - }, - }} - > - - {isIconMobile ? null : "Изображение"} - - setOpenedReallyChangingModal(true)} - sx={{ - minWidth: "30px", - height: "30px", - backgroundColor: "#FEDFD0", - }} - > - - - setOpenedReallyChangingModal(true)} - sx={{ - minWidth: "30px", - height: "30px", - backgroundColor: "#FEDFD0", - }} - > - - - setOpenedReallyChangingModal(true)} - sx={{ - minWidth: "30px", - height: "30px", - backgroundColor: "#FEDFD0", - }} - > - - + > + setButtonHover("branching")} + onMouseLeave={() => setButtonHover("")} + onClick={() => { + SSHC("branching"); + openedModal(); + }} + sx={{ + height: "30px", + maxWidth: "103px", + minWidth: isIconMobile ? "30px" : "64px", + backgroundColor: + switchState === "branching" + ? theme.palette.brightPurple.main + : "transparent", + color: + switchState === "branching" + ? "#ffffff" + : theme.palette.grey3.main, + "&:hover": { + color: + switchState === "branching" + ? theme.palette.grey3.main + : null, + }, + }} + > + + {isIconMobile ? null : "Ветвление"} + + + setButtonHover("image")} + onMouseLeave={() => setButtonHover("")} + onClick={() => { + SSHC("image"); + }} + sx={{ + height: "30px", + maxWidth: "123px", + minWidth: isIconMobile ? "30px" : "64px", + backgroundColor: + switchState === "image" + ? theme.palette.brightPurple.main + : "transparent", + color: + switchState === "image" + ? "#ffffff" + : theme.palette.grey3.main, + "&:hover": { + color: + switchState === "image" ? theme.palette.grey3.main : null, + }, + }} + > + + {isIconMobile ? null : "Изображение"} + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + + )} - copyQuestion(quizId, totalIndex)} - > - - { diff --git a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx index 0d1467c4..255d9afd 100644 --- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx @@ -201,6 +201,25 @@ export default function QuestionsPageCard({ onChange={({ target }) => debounced(target.value)} sx={{ margin: "20px", width: "auto" }} InputProps={{ + startAdornment: ( + + setOpen((isOpened) => !isOpened)} + > + {IconAndrom(question.expanded, question.type)} + + setOpen(false)} + anchorRef={anchorRef} + totalIndex={totalIndex} + switchState={question.type} + /> + + ), endAdornment: ( <> diff --git a/src/pages/Questions/Form/FormTypeQuestions.tsx b/src/pages/Questions/Form/FormTypeQuestions.tsx index 3a83cb85..f7da06d3 100644 --- a/src/pages/Questions/Form/FormTypeQuestions.tsx +++ b/src/pages/Questions/Form/FormTypeQuestions.tsx @@ -1,10 +1,8 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { useDebouncedCallback } from "use-debounce"; import { Box } from "@mui/material"; import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton"; -import CustomTextField from "@ui_kit/CustomTextField"; import ButtonsOptions from "../ButtonsOptions"; import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions"; @@ -105,10 +103,6 @@ export default function FormTypeQuestions({ totalIndex }: Props) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; - const debounced = useDebouncedCallback((title) => { - updateQuestionsList(quizId, totalIndex, { title }); - }, 1000); - console.log("listQuestions[quizId]", listQuestions[quizId]); return (