From 18b2f8a29ca246dbae2fbbcf5dbd70ad8763321d Mon Sep 17 00:00:00 2001 From: Nastya Date: Tue, 2 Jan 2024 04:09:52 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=9A=D0=B0=D1=81=D1=82=D0=BE=D0=BC=20?= =?UTF-8?q?=D1=82=D0=B5=D0=BA=D1=81=D1=82=D1=84=D0=B8=D0=BB=D0=B4=20=D1=82?= =?UTF-8?q?=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82?= =?UTF-8?q?=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ContactFormPage/ContactFormPage.tsx | 18 +++----- src/ui_kit/CustomTextField.tsx | 44 +++++++++++-------- 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx index 3cd0772b..da6895e8 100644 --- a/src/pages/ContactFormPage/ContactFormPage.tsx +++ b/src/pages/ContactFormPage/ContactFormPage.tsx @@ -178,29 +178,21 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) { }} value={quiz.config.formContact.title} placeholder="Заголовок формы" - text={""} + maxLength={200} /> - { updateQuiz(quiz.id, (quiz) => { quiz.config.formContact.desc = target.value; }); }} value={quiz.config.formContact.desc} - id="outlined-multiline-static" - multiline rows={8} placeholder="Дополнительный текст формы" - sx={{ - backgroundColor: theme.palette.background.default, - - "& .MuiInputBase-root": { - borderRadius: "10px", - alignItems: "start", - color: theme.palette.grey2.main, - color: "black", - }, + sxForm={{ + height:"287px" }} + maxLength={300} /> ; + sxForm?: SxProps; InputProps?: Partial; type?: string; + rows?: number; } export default function CustomTextField({ @@ -37,6 +41,8 @@ export default function CustomTextField({ InputProps, maxLength = 200, type = "", + rows = 0, + sxForm }: CustomTextFieldProps) { const theme = useTheme(); @@ -74,39 +80,39 @@ export default function CustomTextField({ }; return ( - - + {error && {error}} + 0} + rows={rows} + disableUnderline sx={{ - "& .MuiInputBase-root": { - backgroundColor: theme.palette.background.default, - height: "48px", - borderRadius: "10px", - }, - "& .MuiInputLabel-root": { - fontSize: "13.5px", - marginTop: "3px", - }, - }} - InputProps={InputProps} - inputProps={{ maxLength: maxLength, - sx: { borderRadius: "10px", fontSize: "18px", lineHeight: "21px", - py: 0, - ...sx, - }, + p: "13px", + border: `${isInputActive ? "black 2px" : "#9A9AAF 1px"} solid`, + backgroundColor: theme.palette.background.default, + height: "48px", + ...sx }} data-cy="textfield" /> From bb8e8026e19d03d3c745a4e124caa21b1b1184a3 Mon Sep 17 00:00:00 2001 From: Nastya Date: Tue, 2 Jan 2024 04:31:47 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=20=D0=B2=D0=B8?= =?UTF-8?q?=D0=B7=D1=83=D0=B0=D0=BB=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=86=D1=8B=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ContactFormPage/ContactFormPage.tsx | 2 +- src/pages/DesignPage/DesignFilling.tsx | 14 ++++--- src/pages/DesignPage/DesignPage.tsx | 23 ++---------- .../Questions/BranchingModal/Settings.tsx | 12 +++--- src/ui_kit/CustomTextField.tsx | 37 ++++++++++--------- 5 files changed, 36 insertions(+), 52 deletions(-) diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx index da6895e8..0633381b 100644 --- a/src/pages/ContactFormPage/ContactFormPage.tsx +++ b/src/pages/ContactFormPage/ContactFormPage.tsx @@ -190,7 +190,7 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) { rows={8} placeholder="Дополнительный текст формы" sxForm={{ - height:"287px" + height: "287px", }} maxLength={300} /> diff --git a/src/pages/DesignPage/DesignFilling.tsx b/src/pages/DesignPage/DesignFilling.tsx index 4f1b300c..418649e4 100644 --- a/src/pages/DesignPage/DesignFilling.tsx +++ b/src/pages/DesignPage/DesignFilling.tsx @@ -12,12 +12,7 @@ import { updateQuiz } from "@root/quizes/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { toggleQuizPreview } from "@root/quizPreview"; import VisibilityIcon from "@mui/icons-material/Visibility"; -import React from "react"; -export const DesignFilling = () => { - const quiz = useCurrentQuiz(); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(830)); const ButtonsThemeLight = [ ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"], ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"], @@ -33,8 +28,13 @@ export const DesignFilling = () => { ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"], ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"], ]; +export const DesignFilling = () => { + const quiz = useCurrentQuiz(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(830)); + return ( - + Дизайн @@ -50,6 +50,8 @@ export const DesignFilling = () => { gap: "20px", borderRadius: "12px", flexWrap: "wrap", + height: "calc(100vh - 280px)", + overflow: "auto" }} > { const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); - const { questions } = useQuestionsStore(); useEffect(() => { const getData = async () => { @@ -98,7 +82,7 @@ export const DesignPage = () => { }; console.log(quiz); - if (!quiz) return <>; + if (quiz === undefined) return return ( <>
@@ -111,7 +95,6 @@ export const DesignPage = () => { {createPortal(, document.body)} - { - const date = dateString - ?.toDate() - .toLocaleDateString("ru-RU", { - year: "numeric", - month: "2-digit", - day: "2-digit", - }); + const date = dateString?.toDate().toLocaleDateString("ru-RU", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion)); newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [ date, diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx index c1b4e862..db7052d6 100755 --- a/src/ui_kit/CustomTextField.tsx +++ b/src/ui_kit/CustomTextField.tsx @@ -6,7 +6,7 @@ import { Typography, useTheme, Input, - InputLabel + InputLabel, } from "@mui/material"; import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react"; import type { InputProps, SxProps, Theme } from "@mui/material"; @@ -42,7 +42,7 @@ export default function CustomTextField({ maxLength = 200, type = "", rows = 0, - sxForm + sxForm, }: CustomTextFieldProps) { const theme = useTheme(); @@ -80,16 +80,17 @@ export default function CustomTextField({ }; return ( - - {error && + {error && ( + {error}} + }} + > + {error} + + )} From 953ba0b5a3f2623a1db410343a242340ef842520 Mon Sep 17 00:00:00 2001 From: Nastya Date: Tue, 2 Jan 2024 12:38:31 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B9?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B5=D0=B9=20?= =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D1=81=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=BE=D0=B2=20=D0=BD=D0=B0?= =?UTF-8?q?=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20=D0=B2=D0=B5=D1=82?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20+=20=D0=B2=D1=8B=D0=BD?= =?UTF-8?q?=D0=B5=D1=81=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B5=D0=BA=D0=BE?= =?UTF-8?q?=D1=82=D0=BE=D1=80=D1=8B=D1=85=20=D0=BE=D0=B1=D1=89=D0=B8=D1=85?= =?UTF-8?q?=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20?= =?UTF-8?q?=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=B2=20=D0=BA=D0=B8=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/DesignPage/DesignFilling.tsx | 32 +- src/pages/DesignPage/DesignPage.tsx | 15 +- src/pages/Questions/BranchingPanel/index.tsx | 8 +- src/pages/Questions/ButtonsOptions.tsx | 7 +- src/pages/Questions/ButtonsOptionsAndPict.tsx | 6 +- .../DraggableList/QuestionPageCard.tsx | 9 - src/pages/Questions/QuestionsPage.tsx | 9 +- .../SwitchBranchingPanel/QuestionsList.tsx | 1 - .../Questions/SwitchBranchingPanel/index.tsx | 80 +--- src/pages/startPage/EditPage.tsx | 348 ++---------------- src/stores/uiTools/actions.ts | 3 - src/stores/uiTools/store.ts | 2 - src/ui_kit/Toolbars/ButtonRecallQuiz.tsx | 62 ++++ src/ui_kit/Toolbars/ButtonTestPublication.tsx | 51 +++ .../Toolbars/PanelSwitchQuestionListGraph.tsx | 92 +++++ .../Toolbars/SmallSwitchQuestionListGraph.tsx | 90 +++++ 16 files changed, 361 insertions(+), 454 deletions(-) create mode 100644 src/ui_kit/Toolbars/ButtonRecallQuiz.tsx create mode 100644 src/ui_kit/Toolbars/ButtonTestPublication.tsx create mode 100644 src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx create mode 100644 src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx 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, + }), + }, + }} + /> + + ); +};