From d44396288e72b6bb29bb0857df365445d06f5f9f Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 27 Dec 2023 22:13:46 +0300 Subject: [PATCH 01/15] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20=D0=B2?= =?UTF-8?q?=D0=B5=D1=80=D1=82=D0=B8=D0=BA=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B?= =?UTF-8?q?=D0=B9=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 8a0bed52..defb826e 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -426,6 +426,7 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", + whiteSpace: "nowrap", minWidth: "130px", }} onClick={() => @@ -440,9 +441,9 @@ export default function EditPage() { variant="contained" sx={{ fontSize: "14px", + whiteSpace: "nowrap", lineHeight: "18px", height: "34px", - minWidth: "130px", }} > Тестовый просмотр @@ -457,7 +458,8 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", - background: quiz?.status === "start" ? "#7E2AEA" : "#FA5B0E", + background: quiz?.status === "stop" ? "#7E2AEA" : "#FA5B0E", + p: "0 18px", }} onClick={handleClickStatusQuiz} > @@ -473,6 +475,10 @@ export default function EditPage() { Date: Wed, 27 Dec 2023 23:27:12 +0300 Subject: [PATCH 02/15] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0?= =?UTF-8?q?=D1=82=D0=B5=D0=BB=D1=8C=20=D0=B2=D0=B5=D1=82=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/TreeStructure.tsx | 33 +++++ src/pages/startPage/EditPage.tsx | 188 ++++++++++++++++++++--------- 2 files changed, 164 insertions(+), 57 deletions(-) create mode 100644 src/assets/icons/TreeStructure.tsx diff --git a/src/assets/icons/TreeStructure.tsx b/src/assets/icons/TreeStructure.tsx new file mode 100644 index 00000000..282b22ad --- /dev/null +++ b/src/assets/icons/TreeStructure.tsx @@ -0,0 +1,33 @@ +export const TreeStructure = () => ( + + + + + + + +); diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index defb826e..30e497fb 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -59,6 +59,7 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; import { toggleQuizPreview } from "@root/quizPreview"; import { LinkSimple } from "@icons/LinkSimple"; import { BackButtonIcon } from "@icons/BackButtonIcon"; +import { TreeStructure } from "@icons/TreeStructure"; let init: () => void; export default function EditPage() { @@ -311,6 +312,7 @@ export default function EditPage() { {isMobile ? : } @@ -356,66 +358,138 @@ export default function EditPage() { background: "#FFF", }} > - {isConditionMet && ( - - - - Логика ветвления + > + } + checkedIcon={} + checked={openBranchingPage} + onChange={openBranchingPageHC} + sx={{ + width: 50, + height: 30, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: "2px", + width: "26px", + height: "26px", + background: "#fff", + transitionDuration: "300ms", + "&:hover": { + background: "#fff", // Цвет при ховере, замените на ваш желаемый + }, + "&: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, + }), + }, + }} + /> - - )} + ) : ( + + + + Логика ветвления + + + ))} {!canCreatePublic && quiz.config.type !== "form" ? ( From 759a8d458c5bedf4c5bd6ee964e7eef30254de69 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 27 Dec 2023 23:28:19 +0300 Subject: [PATCH 03/15] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20=D0=BB?= =?UTF-8?q?=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 30e497fb..7d1c0a2a 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -392,10 +392,10 @@ export default function EditPage() { background: "#fff", transitionDuration: "300ms", "&:hover": { - background: "#fff", // Цвет при ховере, замените на ваш желаемый + background: "#fff", }, "&:active": { - background: "#fff", // Цвет при активном состоянии, замените на ваш желаемый + background: "#fff", }, "&.Mui-checked": { transform: "translateX(20px)", From 6184f2893a90d7e2af3ff2c91b9368b92658fef2 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 27 Dec 2023 23:34:50 +0300 Subject: [PATCH 04/15] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=86=D0=B2=D0=B5=D1=82=20=D0=BB=D0=BE=D0=B3=D0=BE?= =?UTF-8?q?=D1=82=D0=B8=D0=BF=D0=B0=20=D0=B2=20=D0=BC=D0=BE=D0=B1=D0=B8?= =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Landing/images/icons/QuizLogo.tsx | 21 ++++++++------------- src/pages/startPage/EditPage.tsx | 4 ++-- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/pages/Landing/images/icons/QuizLogo.tsx b/src/pages/Landing/images/icons/QuizLogo.tsx index 0c12503d..76ae536d 100644 --- a/src/pages/Landing/images/icons/QuizLogo.tsx +++ b/src/pages/Landing/images/icons/QuizLogo.tsx @@ -2,19 +2,14 @@ import { useTheme } from "@mui/material"; interface Props { width: number; + color?: string; } -export default function QuizLogo({ width }: Props) { +export default function QuizLogo({ width, color = "#151515" }: Props) { const theme = useTheme(); return ( - + diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 7d1c0a2a..dfa2e031 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -105,6 +105,7 @@ export default function EditPage() { const quizConfig = quiz?.config; const disableTest = quiz === undefined ? true : quiz.config.type === null; const [openBranchingPage, setOpenBranchingPage] = useState(false); + const [buttonText, setButtonText] = useState("Опубликовать"); const openBranchingPageHC = () => { if (!openBranchingPage) { @@ -164,7 +165,6 @@ export default function EditPage() { const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; - const [buttonText, setButtonText] = useState("Опубликовать"); const handleClickStatusQuiz = () => { if (Object.keys(whyCantCreatePublic).length === 0) { if (buttonText === "Опубликовать") { @@ -204,7 +204,7 @@ export default function EditPage() { }} > - {isMobile ? : } + {isMobile ? : } Date: Wed, 27 Dec 2023 23:37:58 +0300 Subject: [PATCH 05/15] =?UTF-8?q?=D0=BF=D0=BE=D1=84=D0=B8=D0=BA=D1=81?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=B2=D1=8B=D1=81=D0=BE=D1=82=D1=83=20=D0=BA?= =?UTF-8?q?=D0=BE=D0=BD=D1=82=D0=B5=D0=BD=D1=82=D0=B0=20,=20=D1=87=D1=82?= =?UTF-8?q?=D0=BE=D0=B1=D1=8B=20=D0=BD=D0=B5=D0=B1=D1=8B=D0=BB=D0=BE=20?= =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index dfa2e031..09e61868 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -327,7 +327,7 @@ export default function EditPage() { sx={{ padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px", overflow: "auto", - height: isMobile ? ` calc(100vh - 125px) ` : `calc(100vh - ${isConditionMet ? "186px" : "166px"})`, + height: isMobile ? ` calc(100vh - 125px) ` : `calc(100vh - ${isConditionMet ? "199px" : "166px"})`, boxSizing: "border-box", }} > From 13c09684ba27dd5d6122d03a0fcdf0f5aef59f87 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 28 Dec 2023 00:17:39 +0300 Subject: [PATCH 06/15] =?UTF-8?q?=D0=BF=D0=BE=D1=84=D0=B8=D0=BA=D1=81?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B8=D0=B6=D0=BD=D0=B5=D0=B3=D0=BE?= =?UTF-8?q?=20=D0=BC=D0=B5=D0=BD=D1=8E=20=D0=B2=20=D0=A1=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D0=92=D0=BE=D0=BF=D1=80=D0=BE=D1=81?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 09e61868..8730273e 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -98,6 +98,7 @@ export default function EditPage() { const navigate = useNavigate(); const currentStep = useQuizStore((state) => state.currentStep); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); const [mobileSidebar, setMobileSidebar] = useState(false); @@ -327,7 +328,13 @@ export default function EditPage() { sx={{ padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px", overflow: "auto", - height: isMobile ? ` calc(100vh - 125px) ` : `calc(100vh - ${isConditionMet ? "199px" : "166px"})`, + height: isMobile + ? `calc(100vh - 125px)` + : isConditionMet + ? isBranchingLogic + ? `calc(100vh - 166px)` + : `calc(100vh - 186px)` + : `calc(100vh - 166px)`, boxSizing: "border-box", }} > @@ -359,7 +366,7 @@ export default function EditPage() { }} > {isConditionMet && - (isMobile ? ( + (isBranchingLogic ? ( - Логика ветвления + + Логика ветвления + ))} @@ -549,7 +558,6 @@ export default function EditPage() { Date: Thu, 28 Dec 2023 00:23:44 +0300 Subject: [PATCH 07/15] =?UTF-8?q?=D0=BF=D0=BE=D1=87=D0=B8=D0=BD=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=82=D0=B5=D0=BA=D1=81=D1=82=20=D0=B2=20=D0=BA=D0=BD?= =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D0=B5=20=D0=BE=D0=BF=D1=83=D0=B1=D0=BB=D0=B8?= =?UTF-8?q?=D0=BA=D0=BE=D0=B2=D0=B0=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 8730273e..d3b789ed 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -106,7 +106,7 @@ export default function EditPage() { const quizConfig = quiz?.config; const disableTest = quiz === undefined ? true : quiz.config.type === null; const [openBranchingPage, setOpenBranchingPage] = useState(false); - const [buttonText, setButtonText] = useState("Опубликовать"); + const [buttonText, setButtonText] = useState(quiz?.status === "stop" ? "Опубликовать" : "Отозвать"); const openBranchingPageHC = () => { if (!openBranchingPage) { @@ -172,7 +172,7 @@ export default function EditPage() { setButtonText("Опубликовано"); setTimeout(() => { setButtonText("Отозвать"); - }, 3000); + }, 1500); } else { setButtonText("Опубликовать"); } From 42d563ac8fea5dd2243a7486d1e05261484a3432 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 28 Dec 2023 00:36:33 +0300 Subject: [PATCH 08/15] =?UTF-8?q?=D0=BF=D0=BE=D1=84=D0=B8=D0=BA=D1=81?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B8=D0=B6=D0=BD=D0=B5=D0=B3=D0=BE?= =?UTF-8?q?=20=D0=BC=D0=B5=D0=BD=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/startPage/EditPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index d3b789ed..15c94634 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -372,6 +372,7 @@ export default function EditPage() { width: "77px", height: "51px", position: "fixed", + zIndex: "99999", right: "0", top: "20%", background: "#333647", @@ -543,6 +544,7 @@ export default function EditPage() { height: "34px", background: quiz?.status === "stop" ? "#7E2AEA" : "#FA5B0E", p: "0 18px", + minWidth: "120px", }} onClick={handleClickStatusQuiz} > From c75c73bb3e895691aad31b93ef5107da36f19ca3 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 28 Dec 2023 00:41:35 +0300 Subject: [PATCH 09/15] style Switch --- src/pages/startPage/EditPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 15c94634..ca361e6c 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -400,7 +400,7 @@ export default function EditPage() { background: "#fff", transitionDuration: "300ms", "&:hover": { - background: "#fff", + backgroundColor: "#fff !important", }, "&:active": { background: "#fff", From fecd4a7028334c691fead0a73c0c24869cc9181d Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 28 Dec 2023 00:49:52 +0300 Subject: [PATCH 10/15] style --- src/pages/startPage/EditPage.tsx | 56 ++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 17 deletions(-) diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index ca361e6c..0199848c 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -100,6 +100,7 @@ export default function EditPage() { const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isLinkButton = useMediaQuery(theme.breakpoints.down(708)); const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); const [mobileSidebar, setMobileSidebar] = useState(false); const [nextStep, setNextStep] = useState(0); @@ -556,23 +557,44 @@ export default function EditPage() { buttonText )} - {quiz?.status === "start" && ( - - https://hbpn.link/{quiz.qid} - - )} + {quiz?.status === "start" && + (!isLinkButton ? ( + + https://hbpn.link/{quiz.qid} + + ) : ( + + + + ))} {isMobile ? ( ) : ( )} diff --git a/src/pages/ViewPublicationPage/questions/Rating.tsx b/src/pages/ViewPublicationPage/questions/Rating.tsx index 03c3758d..e2129348 100644 --- a/src/pages/ViewPublicationPage/questions/Rating.tsx +++ b/src/pages/ViewPublicationPage/questions/Rating.tsx @@ -73,15 +73,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => { alignItems: "center", gap: "20px", marginTop: "20px", + flexDirection: "column", width: isMobile ? "100%" : undefined }} > - - {currentQuestion.content.ratingNegativeDescription} - { emptyIcon={form?.icon("#9A9AAF")} /> - - {currentQuestion.content.ratingPositiveDescription} - + + {currentQuestion.content.ratingNegativeDescription} + {currentQuestion.content.ratingPositiveDescription} + ); diff --git a/src/ui_kit/LabeledDatePicker.tsx b/src/ui_kit/LabeledDatePicker.tsx index e5e365ff..0b0c99f0 100644 --- a/src/ui_kit/LabeledDatePicker.tsx +++ b/src/ui_kit/LabeledDatePicker.tsx @@ -7,11 +7,13 @@ import { Dayjs } from "dayjs"; interface Props { label?: string; sx?: SxProps; + sxIcon?: SxProps; + sxDate?: SxProps; value?: Dayjs | null; onChange?: (value: Dayjs | null) => void; } -export default function LabeledDatePicker({ label, value, onChange, sx }: Props) { +export default function LabeledDatePicker({ label, value, onChange, sx, sxIcon, sxDate }: Props) { const theme = useTheme(); const upLg = useMediaQuery(theme.breakpoints.up("md")); @@ -38,7 +40,7 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props) value={value} onChange={onChange} slots={{ - openPickerIcon: () => , + openPickerIcon: () => , }} slotProps={{ openPickerButton: { @@ -47,6 +49,9 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props) }, "data-cy": "open-datepicker", }, + layout: { + sx: {backgroundColor: theme.palette.background.default,} + } }} sx={{ "& .MuiInputBase-root": { @@ -55,13 +60,14 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props) pr: "22px", "& input": { py: "11px", - pl: upLg ? "20px" : "13px", + pl: "20px", lineHeight: "19px", }, "& fieldset": { borderColor: "#9A9AAF", }, }, + ...sxDate }} /> diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index 342d2f52..dfb9c990 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -1,10 +1,12 @@ -import { Box, IconButton } from "@mui/material"; +import {Box, IconButton, ThemeProvider} from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { useLayoutEffect, useRef } from "react"; import { Rnd } from "react-rnd"; import { useWindowSize } from "../../utils/hooks/useWindowSize"; import QuizPreviewLayout from "./QuizPreviewLayout"; import ResizeIcon from "@icons/ResizeIcon"; +import {themesPublication} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; const DRAG_PARENT_MARGIN = 0; const NAVBAR_HEIGHT = 0; @@ -20,6 +22,7 @@ interface RndPositionAndSize { export default function QuizPreview() { const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown); const rndParentRef = useRef(null); + const quiz = useCurrentQuiz(); const rndRef = useRef(null); const rndPositionAndSizeRef = useRef({ x: 0, @@ -51,66 +54,69 @@ export default function QuizPreview() { ); return ( - - {isPreviewShown && ( - { - rndPositionAndSizeRef.current.x = position.x; - rndPositionAndSizeRef.current.y = position.y; - rndPositionAndSizeRef.current.width = ref.style.width; - rndPositionAndSizeRef.current.height = ref.style.height; - }} - onDragStop={(e, d) => { - rndPositionAndSizeRef.current.x = d.x; - rndPositionAndSizeRef.current.y = d.y; - }} - onDragStart={(e, d) => { - e.preventDefault(); - }} - enableResizing={{ - topLeft: isPreviewShown, - }} - resizeHandleComponent={{ - topLeft: , - }} - resizeHandleStyles={{ - topLeft: { - top: "-1px", - left: "-1px", - }, - }} - style={{ - overflow: "hidden", - pointerEvents: "auto", - }} - > - - - )} - + + + {isPreviewShown && ( + { + rndPositionAndSizeRef.current.x = position.x; + rndPositionAndSizeRef.current.y = position.y; + rndPositionAndSizeRef.current.width = ref.style.width; + rndPositionAndSizeRef.current.height = ref.style.height; + }} + onDragStop={(e, d) => { + rndPositionAndSizeRef.current.x = d.x; + rndPositionAndSizeRef.current.y = d.y; + }} + onDragStart={(e, d) => { + e.preventDefault(); + }} + enableResizing={{ + topLeft: isPreviewShown, + }} + resizeHandleComponent={{ + topLeft: , + }} + resizeHandleStyles={{ + topLeft: { + top: "-1px", + left: "-1px", + }, + }} + style={{ + overflow: "hidden", + pointerEvents: "auto", + }} + > + + + )} + + + ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx index 003d76b7..6798d914 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx @@ -17,7 +17,7 @@ import { setCurrentQuestionIndex, } from "@root/quizPreview"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; -import { useEffect } from "react"; +import {useEffect, useRef, useState} from "react"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import Date from "./QuizPreviewQuestionTypes/Date"; import Emoji from "./QuizPreviewQuestionTypes/Emoji"; @@ -26,7 +26,7 @@ import Images from "./QuizPreviewQuestionTypes/Images"; import Number from "./QuizPreviewQuestionTypes/Number"; import Page from "./QuizPreviewQuestionTypes/Page"; import Rating from "./QuizPreviewQuestionTypes/Rating"; -import Select from "./QuizPreviewQuestionTypes/Select"; +import Select, {ArrowDownTheme} from "./QuizPreviewQuestionTypes/Select"; import Text from "./QuizPreviewQuestionTypes/Text"; import Variant from "./QuizPreviewQuestionTypes/Variant"; import Varimg from "./QuizPreviewQuestionTypes/Varimg"; @@ -37,13 +37,14 @@ export default function QuizPreviewLayout() { const theme = useTheme(); const questions = useQuestionsStore((state) => state.questions); const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex); - + const [widthPreview, setWidthPreview] = useState(null) const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted); const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0; const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100); - + const PreviewWin = useRef(0); const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; + useEffect( function resetCurrentQuizStep() { if (currentQuizStep > maxCurrentQuizStep) { @@ -53,8 +54,22 @@ export default function QuizPreviewLayout() { [currentQuizStep, maxCurrentQuizStep] ); + const observer = useRef( + new ResizeObserver((entries) => { + const { width } = entries[0].contentRect; + setWidthPreview(width) + }) + ); + + useEffect(() => { + observer.current.observe(PreviewWin.current); + }, + [PreviewWin, observer]); + + console.log('current width state: ', widthPreview); return ( - + } + IconComponent={ArrowDownTheme} > {Object.values(questions).map(({ id, title }, index) => ( {`${index + 1}. ${title}`} @@ -196,7 +216,7 @@ export default function QuizPreviewLayout() { disabled={currentQuizStep === 0} sx={{ px: 1, minWidth: 0 }} > - + - {file && Выбран файл: {file.name}} + {file && Вы загрузили: {file.name}} ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx index 3fb00fb3..c6c5bf5f 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx @@ -14,9 +14,10 @@ import type { QuizQuestionImages } from "model/questionTypes/images"; interface Props { question: QuizQuestionImages; + widthPreview: number } -export default function Images({ question }: Props) { +export default function Images({ question, widthPreview }: Props) { const theme = useTheme(); const [selectedVariants, setSelectedVariants] = useState([]); @@ -47,12 +48,13 @@ export default function Images({ question }: Props) { gap: 1, }} > - {question.title} + {question.title} {question.content.variants @@ -70,8 +72,10 @@ export default function Images({ question }: Props) { overflow: "hidden", border: "1px solid", borderColor: selectedVariants.includes(index) - ? theme.palette.brightPurple.main + ? theme.palette.primary.main : "#E3E3E3", + maxWidth: "300px", + maxHeight: "340px" }} > {variant.extendedText ? ( diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx index 8ffffb5a..e5aa80a0 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx @@ -1,9 +1,13 @@ import { useLayoutEffect, useState } from "react"; -import { Box, Typography } from "@mui/material"; +import {Box, Typography, useTheme} from "@mui/material"; import { CustomSlider } from "@ui_kit/CustomSlider"; import type { QuizQuestionNumber } from "model/questionTypes/number"; +import CustomTextField from "@ui_kit/CustomTextField"; +import {updateAnswer} from "@root/quizView"; +import {modes} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; interface Props { question: QuizQuestionNumber; @@ -11,7 +15,9 @@ interface Props { export default function Number({ question }: Props) { const [sliderValues, setSliderValues] = useState(0); - + const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); const start = question.content.start; const min = parseInt(question.content.range.split("—")[0]); const max = parseInt(question.content.range.split("—")[1]); @@ -50,7 +56,66 @@ export default function Number({ question }: Props) { defaultValue={start} valueLabelDisplay={"on"} step={question.content.step} + sx={{ + color: theme.palette.primary.main, + "& .MuiSlider-valueLabel": { + background: theme.palette.primary.main,} + }} /> + {!question.content.chooseRange && ( + + + + + )} + + {question.content.chooseRange && ( + + + до + + + )} ); diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx index c5b5e0f1..0815616e 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx @@ -53,7 +53,7 @@ export default function Rating({ question }: Props) { gap: 1, }} > - {question.title} + {question.title} @@ -89,11 +89,7 @@ export default function Rating({ question }: Props) { }} > itemNumber - ? theme.palette.brightPurple.main - : theme.palette.grey2.main - } + color={selectedRating > itemNumber ? theme.palette.primary.main : "#9A9AAF"} /> ))} diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx index 37197de4..90529f3f 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx @@ -19,7 +19,7 @@ interface Props { export default function Text({ question }: Props) { const theme = useTheme(); const [selectValue, setSelectValue] = useState(""); - + const arrowDown = function handleChange(event: SelectChangeEvent) { setSelectValue((event.target as HTMLInputElement).value); } @@ -54,8 +54,11 @@ export default function Text({ question }: Props) { height: "48px", borderRadius: "8px", "& .MuiOutlinedInput-notchedOutline": { - border: `1px solid ${theme.palette.brightPurple.main} !important`, + border: `1px solid ${theme.palette.primary.main} !important`, }, + "& .MuiSelect-icon": { + color: theme.palette.primary.main + } }} MenuProps={{ PaperProps: { @@ -64,6 +67,7 @@ export default function Text({ question }: Props) { p: "4px", borderRadius: "8px", border: "1px solid #EEE4FC", + backgroundColor: theme.palette.background.default, boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", }, }, @@ -75,19 +79,20 @@ export default function Text({ question }: Props) { gap: "8px", "& .Mui-selected": { backgroundColor: theme.palette.background.default, - color: theme.palette.brightPurple.main, + color: theme.palette.primary.main, }, }, }, }} inputProps={{ sx: { - color: theme.palette.brightPurple.main, + color: theme.palette.primary.main, display: "flex", alignItems: "center", px: "9px", gap: "20px", "& + input": !selectValue && { + backgroundColor: theme.palette.background.default, border: "none", transform: "translateY(-50%)", top: "50%", @@ -96,9 +101,10 @@ export default function Text({ question }: Props) { color: "#333", fontSize: "16px", }, + }, }} - IconComponent={(props) => } + IconComponent={ArrowDownTheme} > {question.content.variants .filter(({ answer }) => answer) @@ -113,7 +119,7 @@ export default function Text({ question }: Props) { gap: "20px", p: "4px", borderRadius: "5px", - color: theme.palette.grey2.main, + color: "#9A9AAF", }} > {variant.answer} @@ -124,3 +130,23 @@ export default function Text({ question }: Props) { ); } +export function ArrowDownTheme (props: any) { + return ( + + + + + + + ) +} \ No newline at end of file diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx index c9d33412..a19aa996 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx @@ -1,14 +1,14 @@ import { ChangeEvent, useState } from "react"; import { - Box, - FormControl, - FormControlLabel, - FormLabel, - Radio, - RadioGroup, - useRadioGroup, - Tooltip, - Typography, + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + useRadioGroup, + Tooltip, + Typography, useTheme, Checkbox, } from "@mui/material"; import InfoIcon from "@icons/InfoIcon"; @@ -17,6 +17,9 @@ import type { QuizQuestionVariant } from "model/questionTypes/variant"; import CustomRadio from "@ui_kit/CustomRadio"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; +import {modes} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; +import CheckboxIcon from "@icons/Checkbox"; interface Props { question: QuizQuestionVariant; @@ -24,14 +27,16 @@ interface Props { export default function Variant({ question }: Props) { const [value, setValue] = useState(null); - + const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); const handleChange = (event: ChangeEvent) => { setValue((event.target as HTMLInputElement).value); }; return ( - + {question.title} } icon={} - /> + control={question.content.multi ? ( + } + icon={} + /> + ) : ( + } icon={} + /> + ) + } label={ - + {variant.answer} {variant.hints && ( diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx index de202922..483a4451 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx @@ -7,7 +7,7 @@ import { Radio, RadioGroup, Tooltip, - Typography, useTheme, + Typography, useMediaQuery, useTheme, } from "@mui/material"; import InfoIcon from "@icons/InfoIcon"; @@ -16,14 +16,20 @@ import type { QuestionVariant } from "model/questionTypes/shared"; import type { QuizQuestionVarImg } from "model/questionTypes/varimg"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; +import {modes} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; interface Props { question: QuizQuestionVarImg; + widthPreview: number; } -export default function Varimg({ question }: Props) { +export default function Varimg({ question, widthPreview }: Props) { const [selectedVariantIndex, setSelectedVariantIndex] = useState(-1); const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); + const isMobile = useMediaQuery(theme.breakpoints.down(650)); const handleChange = (event: ChangeEvent) => { setSelectedVariantIndex( question.content.variants.findIndex( @@ -43,93 +49,113 @@ export default function Varimg({ question }: Props) { gap: "40px", }} > - {question.title} - - {question.content.variants - .filter(({ answer }) => answer) - .map((variant, index) => ( - + + {question.content.variants + .filter(({ answer }) => answer) + .map((variant, index) => ( + } icon={} + /> + } + label={ + + {variant.answer} + {variant.hints && ( + + + + + + )} + + } + /> + ))} + + + {currentVariant?.extendedText ? ( + question variant} icon={} /> - } - label={ - - {variant.answer} - {variant.hints && ( - - - - - - )} - - } - /> - ))} - + ) : ( + + {selectedVariantIndex === -1 + ? widthPreview < 650 ? "Выберите вариант ниже" : "Выберите вариант" + : "Картинка отсутствует"} + + )} + + + - - {currentVariant?.extendedText ? ( - question variant - ) : ( - - {selectedVariantIndex === -1 - ? "Выберите вариант" - : "Картинка отсутствует"} - - )} - + ); } diff --git a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx index 672e78a4..c1d5e8e8 100644 --- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx @@ -4,6 +4,7 @@ import YoutubeEmbedIframe from "./YoutubeEmbedIframe"; import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { notReachable } from "../../utils/notReachable"; import { useUADevice } from "../../utils/hooks/useUADevice"; +import {useEffect, useRef, useState} from "react"; export default function QuizPreviewLayout() { const theme = useTheme(); @@ -36,7 +37,18 @@ export default function QuizPreviewLayout() { ) : null; return ( - + @@ -94,19 +106,19 @@ export default function QuizPreviewLayout() { {quiz.config.info.clickable ? ( isMobileDevice ? ( - + {quiz.config.info.phonenumber} ) : ( - + {quiz.config.info.phonenumber} ) ) : ( - + {quiz.config.info.phonenumber} )} @@ -138,6 +150,46 @@ function QuizPreviewLayoutByType({ const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(630)); + function StartPageMobile() { + return( + <> + + {quizHeaderBlock} + + {quizMainBlock} + + + + {backgroundBlock} + + + + ) + } + switch (startpageType) { case null: case "standard": { @@ -191,7 +243,7 @@ function QuizPreviewLayoutByType({ width: "40%", position: "relative", padding: "16px", - zIndex: 2, + zIndex: 3, display: "flex", flexDirection: "column", justifyContent: "space-between", @@ -208,7 +260,7 @@ function QuizPreviewLayoutByType({ top: 0, height: "100%", width: "100%", - zIndex: 1, + zIndex: -1, }} > {backgroundBlock} @@ -230,7 +282,15 @@ function QuizPreviewLayoutByType({ }} > {quizHeaderBlock} - {backgroundBlock && {backgroundBlock}} + {backgroundBlock && + {backgroundBlock}} {quizMainBlock} ); diff --git a/src/ui_kit/StartPagePreview/index.tsx b/src/ui_kit/StartPagePreview/index.tsx index 6e4b782e..da0bf65a 100644 --- a/src/ui_kit/StartPagePreview/index.tsx +++ b/src/ui_kit/StartPagePreview/index.tsx @@ -1,9 +1,11 @@ -import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material"; +import {Box, IconButton, useTheme, useMediaQuery, ThemeProvider} from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; -import { useLayoutEffect, useRef } from "react"; +import {useEffect, useLayoutEffect, useRef, useState} from "react"; import { Rnd } from "react-rnd"; import QuizPreviewLayout from "./QuizPreviewLayout"; import ResizeIcon from "@icons/ResizeIcon"; +import {themesPublication} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; const DRAG_PARENT_MARGIN = 0; const NAVBAR_HEIGHT = 0; @@ -21,6 +23,7 @@ export const StartPagePreview = () => { const rndParentRef = useRef(null); const rndRef = useRef(null); const theme = useTheme(); + const quiz = useCurrentQuiz(); const isTablet = useMediaQuery(theme.breakpoints.down(630)); const rndPositionAndSizeRef = useRef({ x: 0, @@ -52,66 +55,69 @@ export const StartPagePreview = () => { ); return ( - - {isPreviewShown && ( - { - rndPositionAndSizeRef.current.x = position.x; - rndPositionAndSizeRef.current.y = position.y; - rndPositionAndSizeRef.current.width = ref.style.width; - rndPositionAndSizeRef.current.height = ref.style.height; - }} - onDragStop={(e, d) => { - rndPositionAndSizeRef.current.x = d.x; - rndPositionAndSizeRef.current.y = d.y; - }} - onDragStart={(e, d) => { - e.preventDefault(); - }} - enableResizing={{ - topLeft: isPreviewShown, - }} - resizeHandleComponent={{ - topLeft: , - }} - resizeHandleStyles={{ - topLeft: { - top: "-1px", - left: "-1px", - zIndex: 100, - }, - }} - style={{ - overflow: "hidden", - pointerEvents: "auto", - borderRadius: "5px", - }} - > - - - )} - + + + {isPreviewShown && ( + { + rndPositionAndSizeRef.current.x = position.x; + rndPositionAndSizeRef.current.y = position.y; + rndPositionAndSizeRef.current.width = ref.style.width; + rndPositionAndSizeRef.current.height = ref.style.height; + }} + onDragStop={(e, d) => { + rndPositionAndSizeRef.current.x = d.x; + rndPositionAndSizeRef.current.y = d.y; + }} + onDragStart={(e, d) => { + e.preventDefault(); + }} + enableResizing={{ + topLeft: isPreviewShown, + }} + resizeHandleComponent={{ + topLeft: , + }} + resizeHandleStyles={{ + topLeft: { + top: "-1px", + left: "-1px", + zIndex: 100, + }, + }} + style={{ + overflow: "hidden", + pointerEvents: "auto", + borderRadius: "5px", + }} + > + + + )} + + + ); }; diff --git a/src/utils/themes/Publication/genericPublication.ts b/src/utils/themes/Publication/genericPublication.ts index f6f319e6..849269ec 100644 --- a/src/utils/themes/Publication/genericPublication.ts +++ b/src/utils/themes/Publication/genericPublication.ts @@ -14,10 +14,6 @@ const themePublic = createTheme({ padding: '13px 20px', borderRadius: '8px', boxShadow: "none", - // "&:hover": { - // backgroundColor: "#581CA7" - // } - }, }, { @@ -27,11 +23,6 @@ const themePublic = createTheme({ style: { padding: '10px 20px', borderRadius: '8px', - "&:hover": { - backgroundColor: "#581CA7", - border: '1px solid #581CA7', - } - }, }, ], From 1d912c70e8f65f99cadb1024de885099d6edb3f4 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Fri, 29 Dec 2023 13:17:43 +0300 Subject: [PATCH 12/15] fix: SidebarMobile --- .../AnswerDraggableList/AnswerItem.tsx | 48 ++++-- src/pages/startPage/EditPage.tsx | 135 ++++++++++++----- src/pages/startPage/Sidebar/SidebarMobile.tsx | 138 ++++++++---------- src/ui_kit/Sidebar.tsx | 17 +-- 4 files changed, 192 insertions(+), 146 deletions(-) diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index da351340..8466085e 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -12,8 +12,12 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField } from "@root/questions/actions"; -import type { KeyboardEvent, ReactNode } from "react"; +import { + addQuestionVariant, + deleteQuestionVariant, + setQuestionVariantField, +} from "@root/questions/actions"; +import type { ChangeEvent, KeyboardEvent, ReactNode } from "react"; import { useState } from "react"; import { Draggable } from "react-beautiful-dnd"; import type { QuestionVariant } from "../../../model/questionTypes/shared"; @@ -78,28 +82,37 @@ export const AnswerItem = ({ focused={false} placeholder={"Добавьте ответ"} multiline={largeCheck} - onChange={({ target }) => { + onChange={({ target }: ChangeEvent) => { setQuestionVariantAnswer(target.value || " "); }} onKeyDown={(event: KeyboardEvent) => { - // if (disableKeyDown) { - // enqueueSnackbar("100 максимальное количество вопросов"); - // } else if (event.code === "Enter" && !largeCheck) { + if (disableKeyDown) { + enqueueSnackbar("100 максимальное количество вопросов"); + } else if (event.code === "Enter" && !largeCheck) { addQuestionVariant(questionId); - // } + } }} InputProps={{ startAdornment: ( <> - - + + {additionalContent} ), endAdornment: ( - + setQuestionVariantAnswer(e.target.value || " ")} - onKeyDown={(event: KeyboardEvent) => event.stopPropagation()} + onChange={(e) => + setQuestionVariantAnswer(e.target.value || " ") + } + onKeyDown={( + event: KeyboardEvent + ) => event.stopPropagation()} /> - deleteQuestionVariant(questionId, variant.id)}> + + deleteQuestionVariant(questionId, variant.id) + } + > (q.type === "result" && q.content.includes(':"line"')) || q.content.includes(":'line'") + (q) => + (q.type === "result" && q.content.includes(':"line"')) || + q.content.includes(":'line'") ) ) { createResult(quiz?.backendId, "line"); @@ -93,7 +105,12 @@ export default function EditPage() { getData(); }, []); - const { openBranchingPanel, whyCantCreatePublic, canCreatePublic, showConfirmLeaveModal } = useUiTools(); + const { + openBranchingPanel, + whyCantCreatePublic, + canCreatePublic, + showConfirmLeaveModal, + } = useUiTools(); const theme = useTheme(); const navigate = useNavigate(); const currentStep = useQuizStore((state) => state.currentStep); @@ -107,7 +124,6 @@ export default function EditPage() { const [openBranchingPage, setOpenBranchingPage] = useState(false); const [buttonText, setButtonText] = useState("Опубликовать"); - const openBranchingPageHC = () => { if (!openBranchingPage) { deleteTimeoutedQuestions(questions, quiz); @@ -124,23 +140,26 @@ export default function EditPage() { resetEditConfig(); cleanQuestions(); updateModalInfoWhyCantCreate(false); - updateSomeWorkBackend(false) + updateSomeWorkBackend(false); }, [] ); - const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => { - const problems = checkQuestionHint(questions, quiz); - useUiTools.setState({ whyCantCreatePublic: problems }); - if (Object.keys(problems).length > 0) { - updateQuiz(quiz?.id, (state) => { - state.status = "stop"; - }); - updateCanCreatePublic(false); - } else { - updateCanCreatePublic(true); - } - }, 600); + const updateQuestionHint = useDebouncedCallback( + (questions: AnyTypedQuizQuestion[]) => { + const problems = checkQuestionHint(questions, quiz); + useUiTools.setState({ whyCantCreatePublic: problems }); + if (Object.keys(problems).length > 0) { + updateQuiz(quiz?.id, (state) => { + state.status = "stop"; + }); + updateCanCreatePublic(false); + } else { + updateCanCreatePublic(true); + } + }, + 600 + ); useEffect(() => { updateQuestionHint(questions); @@ -165,9 +184,11 @@ export default function EditPage() { if (!quizConfig) return <>; - const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; + const isConditionMet = + [1].includes(currentStep) && + !openBranchingPanel && + quizConfig.type !== "form"; - const handleClickStatusQuiz = () => { if (Object.keys(whyCantCreatePublic).length === 0) { if (buttonText === "Опубликовать") { @@ -187,6 +208,17 @@ export default function EditPage() { } }; + const changePage = (index: number) => { + if (currentStep === 2) { + setNextStep(index); + setShowConfirmLeaveModal(true); + + return; + } + + setCurrentStep(index); + }; + return ( <> {/*хедер*/} @@ -221,12 +253,12 @@ export default function EditPage() { - updateQuiz(quiz.id, (quiz) => { - quiz.name = e.target.value; - }) - } + value={quiz.name} + onChange={(e) => + updateQuiz(quiz.id, (quiz) => { + quiz.name = e.target.value; + }) + } fullWidth id="project-name" placeholder="Название проекта окно" @@ -321,7 +353,11 @@ export default function EditPage() { display: isMobile ? "block" : "flex", }} > - {isMobile ? : } + {isMobile ? ( + + ) : ( + + )} @@ -357,7 +395,11 @@ export default function EditPage() { width: "100%", padding: isMobile ? "20px 16px" : "20px 20px", display: "flex", - justifyContent: isMobile ? (isMobileSm ? "center" : "flex-end") : "flex-start", + justifyContent: isMobile + ? isMobileSm + ? "center" + : "flex-end" + : "flex-start", flexDirection: isMobile ? "row-reverse" : "-moz-initial", alignItems: "center", gap: "15px", @@ -398,7 +440,10 @@ export default function EditPage() { "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 }, }, "&.Mui-disabled .MuiSwitch-thumb": { - color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600], + 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, @@ -411,16 +456,22 @@ export default function EditPage() { }, "& .MuiSwitch-track": { borderRadius: 13, - backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", + backgroundColor: + theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", opacity: 1, - transition: theme.transitions.create(["background-color"], { - duration: 500, - }), + transition: theme.transitions.create( + ["background-color"], + { + duration: 500, + } + ), }, }} /> - Логика ветвления + + Логика ветвления + )} @@ -437,13 +488,20 @@ export default function EditPage() { minWidth: "130px", }} onClick={() => - Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true) + Object.keys(whyCantCreatePublic).length === 0 + ? () => {} + : updateModalInfoWhyCantCreate(true) } > Тестовый просмотр ) : ( - +