diff --git a/src/pages/DesignPage/DesignFilling.tsx b/src/pages/DesignPage/DesignFilling.tsx index 418649e4..6fde9e35 100644 --- a/src/pages/DesignPage/DesignFilling.tsx +++ b/src/pages/DesignPage/DesignFilling.tsx @@ -13,21 +13,21 @@ import { useCurrentQuiz } from "@root/quizes/hooks"; import { toggleQuizPreview } from "@root/quizPreview"; import VisibilityIcon from "@mui/icons-material/Visibility"; - const ButtonsThemeLight = [ - ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"], - ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"], - ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"], - ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"], - ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"], - ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"], - ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"], - ]; - const ButtonsThemeDark = [ - ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"], - ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"], - ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"], - ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"], - ]; +const ButtonsThemeLight = [ + ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"], + ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"], + ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"], + ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"], + ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"], + ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"], + ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"], +]; +const ButtonsThemeDark = [ + ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"], + ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"], + ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"], + ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"], +]; export const DesignFilling = () => { const quiz = useCurrentQuiz(); const theme = useTheme(); @@ -51,7 +51,7 @@ export const DesignFilling = () => { borderRadius: "12px", flexWrap: "wrap", height: "calc(100vh - 280px)", - overflow: "auto" + overflow: "auto", }} > { }; console.log(quiz); - if (quiz === undefined) return + if (quiz === undefined) + return ( + + ); return ( <>
diff --git a/src/pages/Questions/BranchingPanel/index.tsx b/src/pages/Questions/BranchingPanel/index.tsx index c6ec4a1d..04cc608d 100644 --- a/src/pages/Questions/BranchingPanel/index.tsx +++ b/src/pages/Questions/BranchingPanel/index.tsx @@ -10,7 +10,6 @@ import { } from "@mui/material"; import { QuestionsList } from "./QuestionsList"; -import { updateOpenBranchingPanel } from "@root/uiTools/actions"; import { useQuestionsStore } from "@root/questions/store"; import { useRef } from "react"; import { useUiTools } from "@root/uiTools/store"; @@ -18,7 +17,6 @@ import { useUiTools } from "@root/uiTools/store"; export const BranchingPanel = (sx?: SxProps) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); - const { openBranchingPanel } = useUiTools(); const ref = useRef(); return ( @@ -35,8 +33,8 @@ export const BranchingPanel = (sx?: SxProps) => { }} > updateOpenBranchingPanel(e.target.checked)} + checked={true} + onChange={(e) => {}} sx={{ width: 50, height: 30, @@ -90,7 +88,7 @@ export const BranchingPanel = (sx?: SxProps) => { - {openBranchingPanel && } + ); }; diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 730dcec6..86e496c1 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -21,10 +21,7 @@ import { updateQuestion, getQuestionByContentId, } from "@root/questions/actions"; -import { - updateOpenBranchingPanel, - updateDesireToOpenABranchingModal, -} from "@root/uiTools/actions"; +import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon"; import Branching from "../../assets/icons/questionsPage/branching"; @@ -58,7 +55,6 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) { const [openDelete, setOpenDelete] = useState(false); const openedModal = () => { - updateOpenBranchingPanel(true); updateDesireToOpenABranchingModal(question.content.id); }; @@ -99,7 +95,6 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) { title: "Ветвление", value: "branching", myFunc: (question) => { - updateOpenBranchingPanel(true); updateDesireToOpenABranchingModal(question.content.id); }, }, diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 453d4cee..1cb55dca 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -32,10 +32,7 @@ import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import { QuizQuestionVariant } from "@model/questionTypes/variant"; import { updateOpenedModalSettingsId } from "@root/questions/actions"; -import { - updateOpenBranchingPanel, - updateDesireToOpenABranchingModal, -} from "@root/uiTools/actions"; +import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions"; import { useQuestionsStore } from "@root/questions/store"; import { enqueueSnackbar } from "notistack"; import { useCurrentQuiz } from "@root/quizes/hooks"; @@ -208,7 +205,6 @@ export default function ButtonsOptionsAndPict({ onMouseEnter={() => setButtonHover("branching")} onMouseLeave={() => setButtonHover("")} onClick={() => { - updateOpenBranchingPanel(true); updateDesireToOpenABranchingModal(question.content.id); }} sx={{ diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 24e45f68..37b25b3c 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -1,7 +1,5 @@ -import { CrossedEyeIcon } from "@icons/CrossedEyeIcon"; import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon"; import { CopyIcon } from "@icons/questionsPage/CopyIcon"; -import { OneIcon } from "@icons/questionsPage/OneIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import Answer from "@icons/questionsPage/answer"; import Date from "@icons/questionsPage/date"; @@ -9,7 +7,6 @@ import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; import Download from "@icons/questionsPage/download"; import DropDown from "@icons/questionsPage/drop_down"; import Emoji from "@icons/questionsPage/emoji"; -import { HideIcon } from "@icons/questionsPage/hideIcon"; import Input from "@icons/questionsPage/input"; import OptionsAndPict from "@icons/questionsPage/options_and_pict"; import OptionsPict from "@icons/questionsPage/options_pict"; @@ -20,9 +17,7 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import { Box, Button, - Checkbox, FormControl, - FormControlLabel, IconButton, InputAdornment, Modal, @@ -36,14 +31,11 @@ import { copyQuestion, createUntypedQuestion, deleteQuestion, - clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, - getQuestionByContentId, deleteQuestionWithTimeout, } from "@root/questions/actions"; -import { updateRootContentId } from "@root/quizes/actions"; import { useRef, useState } from "react"; import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd"; import { useDebouncedCallback } from "use-debounce"; @@ -58,7 +50,6 @@ import TypeQuestions from "../TypeQuestions"; import { QuestionType } from "@model/question/question"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { useQuestionsStore } from "@root/questions/store"; -import { updateSomeWorkBackend } from "@root/uiTools/actions"; import { DeleteFunction } from "@utils/deleteFunc"; interface Props { diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index e6a696a6..e08a5fa2 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -23,10 +23,7 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"; import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool"; import { useQuestionsStore } from "@root/questions/store"; -import { - updateOpenBranchingPanel, - updateEditSomeQuestion, -} from "@root/uiTools/actions"; +import { updateEditSomeQuestion } from "@root/uiTools/actions"; import { useUiTools } from "@root/uiTools/store"; interface Props { @@ -39,11 +36,10 @@ export default function QuestionsPage({ setOpenBranchingPage, }: Props) { const theme = useTheme(); - const { openedModalSettingsId, openBranchingPanel } = useUiTools(); + const { openedModalSettingsId } = useUiTools(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const quiz = useCurrentQuiz(); useLayoutEffect(() => { - updateOpenBranchingPanel(false); updateEditSomeQuestion(); }, []); @@ -68,7 +64,6 @@ export default function QuestionsPage({ - ) : ( - - - - )} - - - + {/* Кнопка тестового просмотра */} + + {/* Кнопка отозвать */} + + {/* Ссылка */} {quiz?.status === "start" && (!isLinkButton ? ( ))} - - {isMobile ? ( - - ) : ( - - - - )} - + {/* Маленькая кнопка ссылки */} {isMobile && quiz?.status === "start" && ( + - useUiTools.setState({ openBranchingPanel: value }); - export const cleardragQuestionContentId = () => { useUiTools.setState({ dragQuestionContentId: null }); }; diff --git a/src/stores/uiTools/store.ts b/src/stores/uiTools/store.ts index 1d59312a..3d297e39 100644 --- a/src/stores/uiTools/store.ts +++ b/src/stores/uiTools/store.ts @@ -4,7 +4,6 @@ import { devtools } from "zustand/middleware"; export type UiTools = { openedModalSettingsId: string | null; dragQuestionContentId: string | null; - openBranchingPanel: boolean; desireToOpenABranchingModal: string | null; editSomeQuestion: string | null; canCreatePublic: boolean; @@ -23,7 +22,6 @@ export type WhyCantCreatePublic = { const initialState: UiTools = { openedModalSettingsId: null as null, dragQuestionContentId: null, - openBranchingPanel: false, desireToOpenABranchingModal: null as null, editSomeQuestion: null as null, canCreatePublic: false, diff --git a/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx b/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx new file mode 100644 index 00000000..f5ab07a4 --- /dev/null +++ b/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx @@ -0,0 +1,62 @@ +import { useEffect, useState } from "react"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { useUiTools } from "@root/uiTools/store"; +import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions"; +import { updateQuiz } from "@root/quizes/actions"; +import { Button, Box } from "@mui/material"; +import { BackButtonIcon } from "@icons/BackButtonIcon"; + +export const ButtonRecallQuiz = () => { + const quiz = useCurrentQuiz(); + const { whyCantCreatePublic, canCreatePublic } = useUiTools(); + + console.log(quiz?.status); + const [buttonText, setButtonText] = useState( + quiz?.status === "stop" ? "Опубликовать" : "Отозвать", + ); + useEffect(() => { + if (!canCreatePublic) setButtonText("Опубликовать"); + }, [canCreatePublic]); + + const handleClickStatusQuiz = () => { + if (Object.keys(whyCantCreatePublic).length === 0) { + if (buttonText === "Опубликовать") { + setButtonText("Опубликовано"); + setTimeout(() => { + setButtonText("Отозвать"); + }, 1500); + } else { + setButtonText("Опубликовать"); + } + + updateQuiz(quiz?.id, (state) => { + state.status = quiz?.status === "start" ? "stop" : "start"; + }); + } else { + updateModalInfoWhyCantCreate(true); + } + }; + + return ( + + ); +}; diff --git a/src/ui_kit/Toolbars/ButtonTestPublication.tsx b/src/ui_kit/Toolbars/ButtonTestPublication.tsx new file mode 100644 index 00000000..b566ced6 --- /dev/null +++ b/src/ui_kit/Toolbars/ButtonTestPublication.tsx @@ -0,0 +1,51 @@ +import { useUiTools } from "@root/uiTools/store"; +import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions"; +import { Button } from "@mui/material"; + +export const ButtonTestPublication = () => { + const { whyCantCreatePublic, canCreatePublic } = useUiTools(); + + if (canCreatePublic) { + return ( + + + + ); + } else { + // disabled + return ( + + ); + } +}; diff --git a/src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx b/src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx new file mode 100644 index 00000000..e65ca5eb --- /dev/null +++ b/src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx @@ -0,0 +1,92 @@ +import { Box, Switch, useTheme, Typography } from "@mui/material"; + +interface Props { + openBranchingPage: boolean; + setOpenBranchingPage: (a: boolean) => void; + hideText?: boolean; +} + +export const PanelSwitchQuestionListGraph = ({ + openBranchingPage, + setOpenBranchingPage, + hideText = false, +}: Props) => { + const theme = useTheme(); + return ( + + setOpenBranchingPage(e.target.checked)} + sx={{ + width: 50, + height: 30, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: "2px", + transitionDuration: "300ms", + "&.Mui-checked": { + transform: "translateX(20px)", + color: theme.palette.brightPurple.main, + "& + .MuiSwitch-track": { + backgroundColor: "#E8DCF9", + opacity: 1, + border: 0, + }, + "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 }, + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: + theme.palette.mode === "light" + ? theme.palette.grey[100] + : theme.palette.grey[600], + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3, + }, + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 25, + height: 25, + }, + "& .MuiSwitch-track": { + borderRadius: 13, + backgroundColor: + theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500, + }), + }, + }} + /> + + + Логика ветвления + + {!hideText && ( + + Настройте связи между вопросами + + )} + + + ); +}; diff --git a/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx b/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx new file mode 100644 index 00000000..201a149a --- /dev/null +++ b/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx @@ -0,0 +1,90 @@ +import { Box, Switch, useTheme } from "@mui/material"; +import { TreeStructure } from "@icons/TreeStructure"; + +interface Props { + openBranchingPage: boolean; + setOpenBranchingPage: (a: boolean) => void; +} + +export const SmallSwitchQuestionListGraph = ({ + openBranchingPage, + setOpenBranchingPage, +}: Props) => { + const theme = useTheme(); + return ( + + } + checkedIcon={} + checked={openBranchingPage} + onChange={(e) => setOpenBranchingPage(e.target.checked)} + sx={{ + width: 50, + height: 30, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: "2px", + width: "26px", + height: "26px", + background: "#fff", + transitionDuration: "300ms", + "&:hover": { + backgroundColor: "#fff !important", + }, + "&:active": { + background: "#fff", + }, + "&.Mui-checked": { + transform: "translateX(20px)", + color: theme.palette.brightPurple.main, + "& + .MuiSwitch-track": { + backgroundColor: "#7E2AEA", + opacity: 1, + border: 0, + }, + "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 }, + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: + theme.palette.mode === "light" + ? theme.palette.grey[100] + : theme.palette.grey[600], + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3, + }, + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 25, + height: 25, + }, + "& .MuiSwitch-track": { + backgroundColor: "rgba(217, 188, 255, 0.16)", + borderRadius: 13, + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500, + }), + }, + }} + /> + + ); +};