фикс расположения нижнего меню

2023-12-27 14:48:25 +03:00 · 2023-12-27 14:48:25 +03:00 · db9b421066
commit db9b421066
parent 051aa27dda
3 changed files with 129 additions and 195 deletions
--- a/src/pages/Questions/QuestionSwitchWindowTool.tsx
+++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx
@ -7,42 +7,27 @@ import { useQuestionsStore } from "@root/questions/store";
 import { useUiTools } from "@root/uiTools/store";
 import { useQuestions } from "@root/questions/hooks";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import { updateSomeWorkBackend } from "@root/uiTools/actions";

-import {
-  copyQuestion,
-  deleteQuestion,
-  deleteQuestionWithTimeout,
-  clearRuleForAll,
-  updateQuestion,
-  getQuestionByContentId,
-} from "@root/questions/actions";
-import { updateRootContentId } from "@root/quizes/actions";
-
-import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
-import { DeleteFunction } from "@utils/deleteFunc";
 import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";

 interface Props {
  openBranchingPage: boolean;
-  setOpenBranchingPage: (a:boolean) => void;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export const QuestionSwitchWindowTool = ({
-  openBranchingPage,
-  setOpenBranchingPage}:Props) => {
+export const QuestionSwitchWindowTool = ({ openBranchingPage, setOpenBranchingPage }: Props) => {
  const { questions } = useQuestionsStore.getState();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const quiz = useCurrentQuiz();
-  console.log("Я компонент в котором отвечала")
+  console.log("Я компонент в котором отвечала");

  const openBranchingPageHC = () => {
    if (!openBranchingPage) {
-      deleteTimeoutedQuestions(questions, quiz)
+      deleteTimeoutedQuestions(questions, quiz);
    }
-    setOpenBranchingPage(!openBranchingPage)
-  }
+    setOpenBranchingPage(!openBranchingPage);
+  };

  return (
    <Box
@ -53,14 +38,10 @@ export const QuestionSwitchWindowTool = ({
        marginBottom: isMobile ? "20px" : undefined,
      }}
    >
-      <Box sx={{ flexBasis: "796px" }}>
-        {openBranchingPage ? <BranchingMap /> : <DraggableList />}
-      </Box>
-      <SwitchBranchingPanel 
-        openBranchingPage={openBranchingPage}
-        setOpenBranchingPage={openBranchingPageHC} 
-      
-      />
+      <Box sx={{ flexBasis: "796px" }}>{openBranchingPage ? <BranchingMap /> : <DraggableList />}</Box>
+      {openBranchingPage && (
+        <SwitchBranchingPanel openBranchingPage={openBranchingPage} setOpenBranchingPage={openBranchingPageHC} />
+      )}
    </Box>
  );
 };
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@ -15,12 +15,10 @@ import { useUiTools } from "@root/uiTools/store";

 interface Props {
  openBranchingPage: boolean;
-  setOpenBranchingPage: (a:boolean) => void;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function QuestionsPage({
-  openBranchingPage,
-  setOpenBranchingPage}:Props) {
+export default function QuestionsPage({ openBranchingPage, setOpenBranchingPage }: Props) {
  const theme = useTheme();
  const { openedModalSettingsId, openBranchingPanel } = useUiTools();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
@ -62,10 +60,7 @@ export default function QuestionsPage({
          Свернуть всё
        </Button>
      </Box>
-      <QuestionSwitchWindowTool
-        openBranchingPage={openBranchingPage}
-        setOpenBranchingPage={setOpenBranchingPage}      
-      />
+      <QuestionSwitchWindowTool openBranchingPage={openBranchingPage} setOpenBranchingPage={setOpenBranchingPage} />
      <Box
        sx={{
          display: "flex",
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -16,13 +16,7 @@ import {
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import {
-  decrementCurrentStep,
-  resetEditConfig,
-  setQuizes,
-  updateQuiz,
-  setCurrentStep,
-} from "@root/quizes/actions";
+import { decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import CustomAvatar from "@ui_kit/Header/Avatar";
@ -38,11 +32,7 @@ import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import {
-  cleanQuestions,
-  createResult,
-  setQuestions,
-} from "@root/questions/actions";
+import { cleanQuestions, createResult, setQuestions } from "@root/questions/actions";
 import {
  updateOpenBranchingPanel,
  updateCanCreatePublic,
@ -65,13 +55,13 @@ import { ConfirmLeaveModal } from "./ConfirmLeaveModal";
 import { checkQuestionHint } from "@utils/checkQuestionHint";
 import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";

-let init:() => void
+let init: () => void;
 export default function EditPage() {
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
  const { questions } = useQuestionsStore();

-  console.log('quiz ',quiz);
+  console.log("quiz ", quiz);
  console.log(questions);
  useEffect(() => {
    const getData = async () => {
@ -86,26 +76,18 @@ export default function EditPage() {

        if (
          !questions?.find(
-            (q) =>
-              (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");
-          console.log("Я не нашёл линейный резулт и собираюсь создать новый")
+          console.log("Я не нашёл линейный резулт и собираюсь создать новый");
        }
      }
-
    };
    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);
@ -119,10 +101,10 @@ export default function EditPage() {

  const openBranchingPageHC = () => {
    if (!openBranchingPage) {
-      deleteTimeoutedQuestions(questions, quiz)
+      deleteTimeoutedQuestions(questions, quiz);
    }
-    setOpenBranchingPage(old => !old)
-  }
+    setOpenBranchingPage((old) => !old);
+  };

  useEffect(() => {
    if (editQuizId === null) navigate("/list");
@ -137,21 +119,18 @@ export default function EditPage() {
    []
  );

-  const updateQuestionHint = useDebouncedCallback(
-    (questions: AnyTypedQuizQuestion[]) => {
-      const problems = checkQuestionHint(questions);
-      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);
+    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);
@ -175,6 +154,8 @@ export default function EditPage() {
  };

  if (!quizConfig) return <></>;
+
+  const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form";
  return (
    <>
      {/*хедер*/}
@ -308,45 +289,44 @@ export default function EditPage() {
          sx={{
            background: theme.palette.background.default,
            width: "100%",
-            padding: isMobile ? "16px 16px 140px 16px" : "25px 25px 140px 25px",
-            height: "calc(100vh - 80px)",
-            overflow: "auto",
-            boxSizing: "border-box",
          }}
        >
-          {/* Выбор текущей страницы редактирования чего-либо находится здесь */}
-          {quizConfig && (
-            <>
-              <Stepper activeStep={currentStep} />
-              <SwitchStepPages
-                activeStep={currentStep}
-                quizType={quizConfig.type}
-                quizResults={quizConfig.results}
-                quizStartPageType={quizConfig.startpageType}
-                openBranchingPage={openBranchingPage}
-                setOpenBranchingPage={setOpenBranchingPage}
-              />
-            </>
-          )}
-        </Box>
+          <Box
+            sx={{
+              padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px",
+              overflow: "auto",
+              height: `calc(100vh - ${isConditionMet ? "186px" : "156px"})`,

-        <Box
-          sx={{
-            position: "absolute",
-            left: 0,
-            bottom: 0,
-            width: "100%",
-            padding: isMobile ? "20px 16px" : "20px 40px 20px 250px",
-            display: "flex",
-            justifyContent: "flex-start",
-            alignItems: "center",
-            gap: "15px",
-            background: "#FFF",
-          }}
-        >
-          {[1].includes(currentStep) &&
-            !openBranchingPanel &&
-            quizConfig.type !== "form" && (
+              boxSizing: "border-box",
+            }}
+          >
+            {/* Выбор текущей страницы редактирования чего-либо находится здесь */}
+            {quizConfig && (
+              <>
+                <Stepper activeStep={currentStep} />
+                <SwitchStepPages
+                  activeStep={currentStep}
+                  quizType={quizConfig.type}
+                  quizResults={quizConfig.results}
+                  quizStartPageType={quizConfig.startpageType}
+                  openBranchingPage={openBranchingPage}
+                  setOpenBranchingPage={setOpenBranchingPage}
+                />
+              </>
+            )}
+          </Box>
+          <Box
+            sx={{
+              width: "100%",
+              padding: isMobile ? "20px 16px" : "20px 20px",
+              display: "flex",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              gap: "15px",
+              background: "#FFF",
+            }}
+          >
+            {isConditionMet && (
              <Box
                sx={{
                  display: "flex",
@ -380,10 +360,7 @@ 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,
@ -396,106 +373,87 @@ 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,
+                      }),
                    },
                  }}
                />
                <Box>
-                  <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
-                    Логика ветвления
-                  </Typography>
+                  <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>Логика ветвления</Typography>
                </Box>
              </Box>
            )}

-          {!canCreatePublic && quiz.config.type !== "form" ? (
-            <Button
-              variant="contained"
-              // disabled
-              sx={{
-                fontSize: "14px",
-                lineHeight: "18px",
-                height: "34px",
-                minWidth: "130px",
-              }}
-              onClick={() =>
-                Object.keys(whyCantCreatePublic).length === 0
-                  ? () => { }
-                  : updateModalInfoWhyCantCreate(true)
-              }
-            >
-              Тестовый просмотр
-            </Button>
-          ) : (
-            <a
-              href={`/view`}
-              target="_blank"
-              rel="noreferrer"
-              style={{ textDecoration: "none" }}
-            >
+            {!canCreatePublic && quiz.config.type !== "form" ? (
              <Button
                variant="contained"
+                // disabled
                sx={{
                  fontSize: "14px",
                  lineHeight: "18px",
                  height: "34px",
                  minWidth: "130px",
                }}
+                onClick={() =>
+                  Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)
+                }
              >
                Тестовый просмотр
              </Button>
-            </a>
-          )}
+            ) : (
+              <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
+                <Button
+                  variant="contained"
+                  sx={{
+                    fontSize: "14px",
+                    lineHeight: "18px",
+                    height: "34px",
+                    minWidth: "130px",
+                  }}
+                >
+                  Тестовый просмотр
+                </Button>
+              </a>
+            )}

-          <Button
-            variant="outlined"
-            sx={{
-              fontSize: "14px",
-              lineHeight: "18px",
-              height: "34px",
-              border: `1px solid ${theme.palette.brightPurple.main}`,
-              backgroundColor:
-                quiz?.status === "start"
-                  ? theme.palette.brightPurple.main
-                  : "transparent",
-              color:
-                quiz?.status === "start"
-                  ? "#FFFFFF"
-                  : theme.palette.brightPurple.main,
-            }}
-            onClick={
-              Object.keys(whyCantCreatePublic).length === 0
-                ? () =>
-                  updateQuiz(quiz?.id, (state) => {
-                    state.status =
-                      quiz?.status === "start" ? "stop" : "start";
-                  })
-                : () => updateModalInfoWhyCantCreate(true)
-            }
-          >
-            {quiz?.status === "start" ? "Стоп" : "Старт"}
-          </Button>
-          {quiz?.status === "start" && (
-            <Box
-              component={Link}
+            <Button
+              variant="outlined"
              sx={{
-                color: "#7e2aea",
                fontSize: "14px",
+                lineHeight: "18px",
+                height: "34px",
+                border: `1px solid ${theme.palette.brightPurple.main}`,
+                backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
+                color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
              }}
-              target="_blank"
-              to={"https://hbpn.link/" + quiz.qid}
+              onClick={
+                Object.keys(whyCantCreatePublic).length === 0
+                  ? () =>
+                      updateQuiz(quiz?.id, (state) => {
+                        state.status = quiz?.status === "start" ? "stop" : "start";
+                      })
+                  : () => updateModalInfoWhyCantCreate(true)
+              }
            >
-              https://hbpn.link/{quiz.qid}
-            </Box>
-          )}
+              {quiz?.status === "start" ? "Стоп" : "Старт"}
+            </Button>
+            {quiz?.status === "start" && (
+              <Box
+                component={Link}
+                sx={{
+                  color: "#7e2aea",
+                  fontSize: "14px",
+                }}
+                target="_blank"
+                to={"https://hbpn.link/" + quiz.qid}
+              >
+                https://hbpn.link/{quiz.qid}
+              </Box>
+            )}
+          </Box>
        </Box>
      </Box>
      <ModalInfoWhyCantCreate />