This commit is contained in:
Nastya 2024-09-02 23:48:06 +03:00
parent 7d0ad493c3
commit f301308c74
25 changed files with 219 additions and 178 deletions

@ -38,7 +38,7 @@
align-items: center;
justify-content: center;
border-radius: 6px;
background-image: url("../../../../assets/icons/ArrowGear.svg");
background-image: url("../../../../../assets/icons/ArrowGear.svg");
font-size: 0px;
background-repeat: no-repeat;
background-size: contain;

@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
import SwitchDropDown from "./switchDropDown";
import type { QuizQuestionSelect } from "@frontend/squzanswerer";

@ -6,7 +6,7 @@ import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import type { QuizQuestionEmoji } from "@frontend/squzanswerer";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
import EmojiAnswerItem from "./EmojiAnswerItem/EmojiAnswerItem";
import SwitchEmoji from "./switchEmoji";

@ -5,7 +5,7 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { useEffect, useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "@frontend/squzanswerer";
import ButtonsOptionsAndPict from "../QuestionOptions/ButtonsOptionsAndPict";
import ButtonsOptionsAndPict from "../QuestionOptions/ButtonsOptions/ButtonsOptionsAndPict";
import SwitchTextField from "./switchTextField";
interface Props {

@ -8,11 +8,12 @@ import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { DeleteFunction } from "@utils/deleteFunc";
import { memo, useState } from "react";
import { CopyIcon } from "../../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../../assets/icons/questionsPage/branching";
import SettingIcon from "../../../assets/icons/questionsPage/settingIcon";
import { CopyIcon } from "../../../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../../../assets/icons/questionsPage/branching";
import SettingIcon from "../../../../assets/icons/questionsPage/settingIcon";
import { QuestionType } from "@model/question/question";
import type { AnyTypedQuizQuestion } from "@frontend/squzanswerer";
import { DeleteBranchingQuestionModal } from "./DeleteBranchingQuestionModal";
interface Props {
switchState: string;
@ -54,21 +55,21 @@ const ButtonsOptions = memo<Props>(function ({
value: string;
myFunc?: any;
}[] = [
{
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Настройки",
value: "setting",
},
{
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Ветвление",
value: "branching",
myFunc: (question: AnyTypedQuizQuestion) => {
setOpenBranchingPage(true);
updateDesireToOpenABranchingModal(question.content.id);
{
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Настройки",
value: "setting",
},
},
];
{
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Ветвление",
value: "branching",
myFunc: (question: AnyTypedQuizQuestion) => {
setOpenBranchingPage(true);
updateDesireToOpenABranchingModal(question.content.id);
},
},
];
return (
<Box
@ -81,6 +82,7 @@ const ButtonsOptions = memo<Props>(function ({
height: isMobile ? "92px" : "70px",
}}
>
ButtonsOptions
<Box
sx={{
padding: isMobile ? " 3px 12px 11px" : "20px",
@ -170,55 +172,11 @@ const ButtonsOptions = memo<Props>(function ({
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
)}
<Modal
<DeleteBranchingQuestionModal
open={openDelete}
onClose={() => setOpenDelete(false)}
>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "30px",
borderRadius: "10px",
background: "#FFFFFF",
}}
>
<Typography
variant="h6"
sx={{ textAlign: "center" }}
>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что
хотите удалить вопрос?
</Typography>
<Box
sx={{
marginTop: "30px",
display: "flex",
justifyContent: "center",
gap: "15px",
}}
>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => setOpenDelete(false)}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => {
deleteQuestionWithTimeout(questionId, () => DeleteFunction(questionId));
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
onclose={() => setOpenDelete(false)}
questionId={questionId}
/>
</Box>
</Box>
);

@ -1,3 +1,4 @@
import { QuestionType } from "@model/question/question";
import {
Box,
@ -20,11 +21,12 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import { DeleteFunction } from "@utils/deleteFunc";
import { memo, useState } from "react";
import { CopyIcon } from "../../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../../assets/icons/questionsPage/branching";
import { DeleteIcon } from "../../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../../assets/icons/questionsPage/imgIcon";
import SettingIcon from "../../../assets/icons/questionsPage/settingIcon";
import { CopyIcon } from "@/assets/icons/questionsPage/CopyIcon";
import Branching from "@/assets/icons/questionsPage/branching";
import { DeleteIcon } from "@/assets/icons/questionsPage/deleteIcon";
import ImgIcon from "@/assets/icons/questionsPage/imgIcon";
import SettingIcon from "@/assets/icons/questionsPage/settingIcon";
import { DeleteBranchingQuestionModal } from "./DeleteBranchingQuestionModal";
interface Props {
switchState: string;
@ -47,9 +49,9 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
questionContentId,
questionHasParent,
}) {
const [buttonHover, setButtonHover] = useState<string>("");
const [openedReallyChangingModal, setOpenedReallyChangingModal] =
useState<boolean>(false);
const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState<boolean>(false);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
@ -72,6 +74,7 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
height: isMobile ? "92px" : "70px",
}}
>
ButtonsOptionsAndPict
<Box
sx={{
padding: isMobile ? " 3px 12px 11px" : "20px",
@ -217,51 +220,11 @@ const ButtonsOptionsAndPict = memo<Props>(function ({
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
)}
<Modal open={openDelete} onClose={() => setOpenDelete(false)}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "30px",
borderRadius: "10px",
background: "#FFFFFF",
}}
>
<Typography variant="h6" sx={{ textAlign: "center" }}>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки
потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
</Typography>
<Box
sx={{
marginTop: "30px",
display: "flex",
justifyContent: "center",
gap: "15px",
}}
>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => setOpenDelete(false)}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => {
deleteQuestionWithTimeout(questionId, () =>
DeleteFunction(questionId),
);
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
<DeleteBranchingQuestionModal
open={openDelete}
onclose={() => setOpenDelete(false)}
questionId={questionId}
/>
</Box>
<ReallyChangingModal
opened={openedReallyChangingModal}

@ -0,0 +1,66 @@
import { deleteQuestionWithTimeout } from "@/stores/questions/actions";
import { DeleteFunction } from "@/utils/deleteFunc";
import { Box, Button, Modal, Typography } from "@mui/material";
interface Props {
open: boolean;
onclose: () => void;
questionId: string;
}
export const DeleteBranchingQuestionModal = ({
open,
onclose,
questionId,
}: Props) => {
return (
<Modal
open={open}
onClose={onclose}
>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "30px",
borderRadius: "10px",
background: "#FFFFFF",
}}
>
<Typography
variant="h6"
sx={{ textAlign: "center" }}
>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
</Typography>
<Box
sx={{
marginTop: "30px",
display: "flex",
justifyContent: "center",
gap: "15px",
}}
>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={onclose}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => {
deleteQuestionWithTimeout(questionId, () => DeleteFunction(questionId));
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
)
}

@ -0,0 +1,54 @@
//Передаём сюда тип вопроса и получаем нужный набор
const KIT = {
variant: {
settings: ["required"],
branch: true,
image: true,
},
images: {
settings: [],
branch: true,
image: true,
},
varimg: {
settings: [],
branch: true,
image: true,
},
emoji: {
settings: [],
branch: true,
image: true,
},
text: {
settings: [],
branch: true,
image: true,
},
select: {
settings: [],
branch: true,
image: true,
},
date: {
settings: [],
branch: true,
image: true,
},
number: {
settings: [],
branch: true,
image: true,
},
file: {
settings: [],
branch: true,
image: false,
},
rating: {
settings: [],
branch: true,
image: true,
},
}

@ -1,7 +1,7 @@
import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import ButtonsOptions from "../ButtonsOptions";
import InfoIcon from "@/assets/icons/InfoIcon";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import SwitchData from "./switchData";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { QuizQuestionDate } from "@frontend/squzanswerer";

@ -1,5 +1,5 @@
import { QuizQuestionDate } from "@frontend/squzanswerer";
import HelpQuestions from "../helpQuestions";
import HelpQuestions from "../../helpQuestions";
import SettingData from "./settingData";
interface Props {

@ -3,13 +3,13 @@ import { addQuestionVariant, clearQuestionImages, uploadQuestionImage } from "@r
import { useCurrentQuiz } from "@root/quizes/hooks";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
import { useEffect, useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import { EnterIcon } from "@/assets/icons/questionsPage/enterIcon";
import type { QuizQuestionVarImg } from "@frontend/squzanswerer";
import { useDisclosure } from "../../../utils/useDisclosure";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ImageEditAnswerItem from "../AnswerDraggableList/ImageEditAnswerItem";
import ButtonsOptionsAndPict from "../QuestionOptions/ButtonsOptionsAndPict";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { useDisclosure } from "@/utils/useDisclosure";
import { AnswerDraggableList } from "../../AnswerDraggableList";
import ImageEditAnswerItem from "../../AnswerDraggableList/ImageEditAnswerItem";
import ButtonsOptionsAndPict from "../ButtonsOptions/ButtonsOptionsAndPict";
import { UploadImageModal } from "../../UploadImage/UploadImageModal";
import SwitchOptionsAndPict from "./switchOptionsAndPict";
interface Props {

@ -1,6 +1,6 @@
import { QuizQuestionVarImg } from "@frontend/squzanswerer";
import UploadImage from "../UploadImage";
import HelpQuestions from "../helpQuestions";
import UploadImage from "../../UploadImage";
import HelpQuestions from "../../helpQuestions";
import SettingOptionsAndPict from "./SettingOptionsAndPict";
interface Props {

@ -3,14 +3,14 @@ import { clearQuestionImages, uploadQuestionImage } from "@root/questions/action
import { useCurrentQuiz } from "@root/quizes/hooks";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
import { useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import { EnterIcon } from "@/assets/icons/questionsPage/enterIcon";
import type { QuizQuestionImages } from "@frontend/squzanswerer";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { useDisclosure } from "../../../utils/useDisclosure";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ImageEditAnswerItem from "../AnswerDraggableList/ImageEditAnswerItem";
import ButtonsOptions from "../ButtonsOptions";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { useAddAnswer } from "@/utils/hooks/useAddAnswer";
import { useDisclosure } from "@/utils/useDisclosure";
import { AnswerDraggableList } from "../../AnswerDraggableList";
import ImageEditAnswerItem from "../../AnswerDraggableList/ImageEditAnswerItem";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import { UploadImageModal } from "../../UploadImage/UploadImageModal";
import SwitchAnswerOptionsPict from "./switchOptionsPict";
interface Props {

@ -3,11 +3,11 @@ import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { memo } from "react";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
import FormatIcon1 from "@/assets/icons/questionsPage/FormatIcon1";
import FormatIcon2 from "@/assets/icons/questionsPage/FormatIcon2";
import ProportionsIcon11 from "@/assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "@/assets/icons/questionsPage/ProportionsIcon12";
import ProportionsIcon21 from "@/assets/icons/questionsPage/ProportionsIcon21";
type Proportion = "1:1" | "1:2" | "2:1";

@ -1,5 +1,5 @@
import { QuizQuestionImages } from "@frontend/squzanswerer";
import HelpQuestions from "../helpQuestions";
import HelpQuestions from "../../helpQuestions";
import SettingOpytionsPict from "./settingOpytionsPict";
interface Props {

@ -1,15 +1,15 @@
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import { FC, useLayoutEffect, useRef, useState } from "react";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
import FlagIcon from "@/assets/icons/questionsPage/FlagIcon";
import StarIconMini from "@/assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "@/assets/icons/questionsPage/hashtagIcon";
import HeartIcon from "@/assets/icons/questionsPage/heartIcon";
import LightbulbIcon from "@/assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "@/assets/icons/questionsPage/likeIcon";
import TropfyIcon from "@/assets/icons/questionsPage/tropfyIcon";
import type { QuizQuestionRating } from "@frontend/squzanswerer";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import SwitchRating from "./switchRating";
const TextField = MuiTextField as unknown as FC<TextFieldProps>;

@ -2,13 +2,13 @@ import { QuizQuestionRating } from "@frontend/squzanswerer";
import { Box, ButtonBase, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
import FlagIcon from "@/assets/icons/questionsPage/FlagIcon";
import StarIconMini from "@/assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "@/assets/icons/questionsPage/hashtagIcon";
import HeartIcon from "@/assets/icons/questionsPage/heartIcon";
import LightbulbIcon from "@/assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "@/assets/icons/questionsPage/likeIcon";
import TropfyIcon from "@/assets/icons/questionsPage/tropfyIcon";
import type { ButtonRatingFrom } from "./RatingOptions";
type SettingSliderProps = {

@ -1,5 +1,5 @@
import { QuizQuestionRating } from "@frontend/squzanswerer";
import HelpQuestions from "../helpQuestions";
import HelpQuestions from "../../helpQuestions";
import SettingRating from "./settingRating";
interface Props {

@ -4,7 +4,7 @@ import { useDebouncedCallback } from "use-debounce";
import CustomNumberField from "@ui_kit/CustomNumberField";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions";
import ButtonsOptions from "../ButtonsOptions/ButtonsOptions";
import SwitchSlider from "./switchSlider";
import { updateQuestion } from "@root/questions/actions";

@ -1,5 +1,5 @@
import { QuizQuestionNumber } from "@frontend/squzanswerer";
import HelpQuestions from "../helpQuestions";
import HelpQuestions from "../../helpQuestions";
import SettingSlider from "./settingSlider";
interface Props {

@ -1,11 +1,11 @@
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useEffect, useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import { EnterIcon } from "@/assets/icons/questionsPage/enterIcon";
import type { QuizQuestionVariant } from "@frontend/squzanswerer";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../AnswerDraggableList";
import AnswerItem from "../AnswerDraggableList/AnswerItem";
import ButtonsOptionsAndPict from "../QuestionOptions/ButtonsOptionsAndPict";
import { useAddAnswer } from "@/utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../../AnswerDraggableList";
import AnswerItem from "../../AnswerDraggableList/AnswerItem";
import ButtonsOptionsAndPict from "../ButtonsOptions/ButtonsOptionsAndPict";
import SwitchAnswerOptions from "./switchAnswerOptions";
interface Props {

@ -1,6 +1,6 @@
import { QuizQuestionVariant } from "@frontend/squzanswerer";
import UploadImage from "../UploadImage";
import HelpQuestions from "../helpQuestions";
import UploadImage from "../../UploadImage";
import HelpQuestions from "../../helpQuestions";
import ResponseSettings from "./responseSettings";
interface Props {

@ -1,14 +1,14 @@
import DataOptions from "./DataOptions/DataOptions";
import DataOptions from "./QuestionOptions/DataOptions/DataOptions";
import DropDown from "./DropDown/DropDown";
import Emoji from "./Emoji/Emoji";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import OptionsAndPicture from "./QuestionOptions/OptionsAndPicture/OptionsAndPicture";
import OptionsPicture from "./QuestionOptions/OptionsPicture/OptionsPicture";
import OwnTextField from "./OwnTextField/OwnTextField";
import PageOptions from "./PageOptions/PageOptions";
import RatingOptions from "./RatingOptions/RatingOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import PageOptions from "./QuestionOptions/PageOptions/PageOptions";
import RatingOptions from "./QuestionOptions/RatingOptions/RatingOptions";
import SliderOptions from "./QuestionOptions/SliderOptions/SliderOptions";
import UploadFile from "./UploadFile/UploadFile";
import AnswerOptions from "./answerOptions/AnswerOptions";
import AnswerOptions from "./QuestionOptions/answerOptions/AnswerOptions";
import { notReachable } from "../../utils/notReachable";
import { AnyTypedQuizQuestion } from "@frontend/squzanswerer";

@ -13,7 +13,7 @@ import { updateQuestion } from "@root/questions/actions";
import { useEffect, useState } from "react";
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import InfoIcon from "../../../assets/icons/InfoIcon";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions";
import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions";
import SwitchUpload from "./switchUpload";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { QuizQuestionFile, UploadFileType } from "@frontend/squzanswerer";