modal fix

2023-12-21 00:56:14 +03:00 · 2023-12-21 00:56:14 +03:00 · 9bdf5bf678
commit 9bdf5bf678
parent 494d750534
4 changed files with 280 additions and 269 deletions
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@ -17,6 +17,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {

  if (!quiz) return null;

+  console.log(quiz);
+
  const handleCopyNumber = () => {
    navigator.clipboard.writeText(quiz.config.info.phonenumber);
  };
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@ -17,7 +17,7 @@ import { enqueueSnackbar } from "notistack";
 import { useQuestionsStore } from "@root/questions/store";
 import { setQuestions } from "@root/questions/actions";
 import { questionApi } from "@api/question";
-import { ApologyPage } from "./ApologyPage"
+import { ApologyPage } from "./ApologyPage";

 export const ViewPage = () => {
  const quiz = useCurrentQuiz();
@ -48,15 +48,15 @@ export const ViewPage = () => {
    }
  }, [quiz?.config.startpage.favIcon]);

-  const filteredQuestions = (
-    questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
-  ).sort((previousItem, item) => previousItem.page - item.page);
+  const filteredQuestions = (questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]).sort(
+    (previousItem, item) => previousItem.page - item.page
+  );

-
-  console.log(questions)
+  console.log(questions);

  if (visualStartPage === undefined) return <></>;
-  if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return <ApologyPage message="Нет созданных вопросов"/>
+  if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result"))
+    return <ApologyPage message="Нет созданных вопросов" />;
  return (
    <Box>
      {!visualStartPage ? (
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -71,7 +71,7 @@ export default function EditPage() {
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
  const quizConfig = quiz?.config;
-  const disableTest = quiz === undefined ? true : (quiz.config.type === null)
+  const disableTest = quiz === undefined ? true : quiz.config.type === null;

  useEffect(() => {
    if (editQuizId === null) navigate("/list");
@ -81,50 +81,45 @@ export default function EditPage() {
    () => () => {
      resetEditConfig();
      cleanQuestions();
-      updateModalInfoWhyCantCreate(false)
+      updateModalInfoWhyCantCreate(false);
    },
    []
  );

-
-
  const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
-
-    const problems: any = {}
+    const problems: any = {};

    questions.forEach((question) => {
      //Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен
-      if (question.type === null
-        || question.type === "result"
-        || question.content.rule.parentId.length === 0) return
+      if (question.type === null || question.type === "result" || question.content.rule.parentId.length === 0) return;

      //если есть дети, но нет дефолта - логическая ошибка. Так нельзя
      if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) {
        problems[question.content.id] = {
          name: question.title,
-          problems: ["Не выбран дефолтный вопрос"]
-        }
+          problems: ["Не выбран дефолтный вопрос"],
+        };
      }
+    });

-    })
+    console.log(problems);
+
+    useUiTools.setState({ whyCantCreatePublic: problems });

-    useUiTools.setState({ whyCantCreatePublic: problems })
    if (Object.keys(problems).length > 0) {
-      updateQuiz(quiz?.id, (state) => { state.status = "stop" })
-      updateCanCreatePublic(false)
+      updateQuiz(quiz?.id, (state) => {
+        state.status = "stop";
+      });
+      updateCanCreatePublic(false);
    } else {
-      updateCanCreatePublic(true)
+      updateCanCreatePublic(true);
    }
-
-
  }, 600);

-
  useEffect(() => {
-    updateQuestionHint(questions)
+    updateQuestionHint(questions);
  }, [questions]);

-
  async function handleLogoutClick() {
    const [, logoutError] = await logout();

@ -137,7 +132,7 @@ export default function EditPage() {
    navigate("/");
  }

-  if (!quizConfig) return <></>
+  if (!quizConfig) return <></>;
  return (
    <>
      {/*хедер*/}
@ -366,7 +361,7 @@ export default function EditPage() {
            </Box>
          )}

-          {!canCreatePublic && quiz.config.type !== "form" ?
+          {!canCreatePublic && quiz.config.type !== "form" ? (
            <Button
              variant="contained"
              // disabled
@ -376,11 +371,13 @@ export default function EditPage() {
                height: "34px",
                minWidth: "130px",
              }}
-              onClick={() => Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)}
+              onClick={() =>
+                Object.keys(whyCantCreatePublic).length === 0 ? null : updateModalInfoWhyCantCreate(true)
+              }
            >
              Тестовый просмотр
            </Button>
-           : 
+          ) : (
            <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
              <Button
                variant="contained"
@ -394,7 +391,7 @@ export default function EditPage() {
                Тестовый просмотр
              </Button>
            </a>
-          }
+          )}

          <Button
            variant="outlined"
@ -407,24 +404,29 @@ export default function EditPage() {
              color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
            }}
            onClick={
-              Object.keys(whyCantCreatePublic).length === 0 ?
-                () => updateQuiz(quiz?.id, (state) => {
+              Object.keys(whyCantCreatePublic).length === 0
+                ? () =>
+                    updateQuiz(quiz?.id, (state) => {
                      state.status = quiz?.status === "start" ? "stop" : "start";
                    })
-               :
-                () => updateModalInfoWhyCantCreate(true)
+                : () => updateModalInfoWhyCantCreate(true)
            }
          >
            {quiz?.status === "start" ? "Стоп" : "Старт"}
          </Button>
-        {quiz?.status === "start" && <Box
+          {quiz?.status === "start" && (
+            <Box
              component={Link}
              sx={{
                color: "#7e2aea",
-            fontSize: "14px"
+                fontSize: "14px",
              }}
-          target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}
-        </Box>}
+              target="_blank"
+              to={"https://hbpn.link/" + quiz.qid}
+            >
+              https://hbpn.link/{quiz.qid}
+            </Box>
+          )}
        </Box>
      </Box>
      <ModalInfoWhyCantCreate />
--- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
@ -1,20 +1,10 @@
-import {
-    Box,
-    Button,
-    ButtonBase,
-    Link,
-    Paper,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
+import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
 import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";

-
 export default function QuizPreviewLayout() {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
@ -26,9 +16,9 @@ export default function QuizPreviewLayout() {
    navigator.clipboard.writeText(quiz.config.info.phonenumber);
  };

-    const background = quiz.config.startpage.background.type === "image"
-        ? quiz.config.startpage.background.desktop
-            ? (
+  const background =
+    quiz.config.startpage.background.type === "image" ? (
+      quiz.config.startpage.background.desktop ? (
        <img
          src={quiz.config.startpage.background.desktop}
          alt=""
@ -38,25 +28,25 @@ export default function QuizPreviewLayout() {
            objectFit: "cover",
          }}
        />
-            )
-            : null
-        : quiz.config.startpage.background.type === "video"
-            ? quiz.config.startpage.background.video
-                ? (
+      ) : null
+    ) : quiz.config.startpage.background.type === "video" ? (
+      quiz.config.startpage.background.video ? (
        <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
-                )
-                : null
-            : null;
+      ) : null
+    ) : null;

  return (
    <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
      <QuizPreviewLayoutByType
-                quizHeaderBlock={<>
-                    <Box sx={{
+        quizHeaderBlock={
+          <>
+            <Box
+              sx={{
                display: "flex",
                alignItems: "center",
                gap: "20px",
-                    }}>
+              }}
+            >
              {quiz.config.startpage.logo && (
                <img
                  src={quiz.config.startpage.logo}
@ -68,25 +58,26 @@ export default function QuizPreviewLayout() {
                  alt=""
                />
              )}
-                        <Typography sx={{ fontSize: "12px" }}>
-                            {quiz.config.info.orgname}
-                        </Typography>
+              <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.orgname}</Typography>
            </Box>
-                </>}
-                quizMainBlock={<>
-                    <Box sx={{
+          </>
+        }
+        quizMainBlock={
+          <>
+            <Box
+              sx={{
                display: "flex",
                gap: "10px",
                flexDirection: "column",
                justifyContent: "center",
-                        alignItems: (quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center")
+                alignItems:
+                  quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center"
                    ? "center"
                    : "start",
-                    }}>
+              }}
+            >
              <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
-                        <Typography sx={{ fontSize: "12px" }}>
-                            {quiz.config.startpage.description}
-                        </Typography>
+              <Typography sx={{ fontSize: "12px" }}>{quiz.config.startpage.description}</Typography>
              <Box>
                <Button
                  variant="contained"
@ -119,11 +110,10 @@ export default function QuizPreviewLayout() {
                  {quiz.config.info.phonenumber}
                </Typography>
              )}
-                        <Typography sx={{ fontSize: "12px" }}>
-                            {quiz.config.info.law}
-                        </Typography>
+              <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.law}</Typography>
            </Box>
-                </>}
+          </>
+        }
        backgroundBlock={background}
        startpageType={quiz.config.startpageType}
        alignType={quiz.config.startpage.position}
@ -132,7 +122,13 @@ export default function QuizPreviewLayout() {
  );
 }

-function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
+function QuizPreviewLayoutByType({
+  quizHeaderBlock,
+  quizMainBlock,
+  backgroundBlock,
+  startpageType,
+  alignType,
+}: {
  quizHeaderBlock: JSX.Element;
  quizMainBlock: JSX.Element;
  backgroundBlock: JSX.Element | null;
@ -146,27 +142,33 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
    case null:
    case "standard": {
      return (
-                <Box sx={{
+        <Box
+          sx={{
            display: "flex",
            flexDirection: alignType === "left" ? "row" : "row-reverse",
            flexGrow: 1,
            height: "100%",
            "&::-webkit-scrollbar": { width: 0 },
-                }}>
-                    <Box sx={{
+          }}
+        >
+          <Box
+            sx={{
              width: !isTablet ? "40%" : "100%",
              padding: "16px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              alignItems: !isTablet ? "flex-start" : "center",
-                    }}>
+            }}
+          >
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
-                    <Box sx={{
+          <Box
+            sx={{
              width: "60%",
-                    }}>
+            }}
+          >
            {backgroundBlock}
          </Box>
        </Box>
@ -174,15 +176,18 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
    }
    case "expanded": {
      return (
-                <Box sx={{
+        <Box
+          sx={{
            position: "relative",
            display: "flex",
            justifyContent: startpageAlignTypeToJustifyContent[alignType],
            flexGrow: 1,
            height: "100%",
            "&::-webkit-scrollbar": { width: 0 },
-                }}>
-                    <Box sx={{
+          }}
+        >
+          <Box
+            sx={{
              width: "40%",
              position: "relative",
              padding: "16px",
@ -191,18 +196,21 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
              flexDirection: "column",
              justifyContent: "space-between",
              alignItems: alignType === "center" ? "center" : "start",
-                    }}>
+            }}
+          >
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
-                    <Box sx={{
+          <Box
+            sx={{
              position: "absolute",
              left: 0,
              top: 0,
              height: "100%",
              width: "100%",
              zIndex: 1,
-                    }}>
+            }}
+          >
            {backgroundBlock}
          </Box>
        </Box>
@ -210,7 +218,8 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
    }
    case "centered": {
      return (
-                <Box sx={{
+        <Box
+          sx={{
            padding: "16px",
            display: "flex",
            flexDirection: "column",
@ -218,18 +227,16 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
            alignItems: "center",
            height: "100%",
            "&::-webkit-scrollbar": { width: 0 },
-                }}>
+          }}
+        >
          {quizHeaderBlock}
-                    {backgroundBlock &&
-                        <Box>
-                            {backgroundBlock}
-                        </Box>
-                    }
+          {backgroundBlock && <Box>{backgroundBlock}</Box>}
          {quizMainBlock}
        </Box>
      );
    }
-        default: notReachable(startpageType);
+    default:
+      notReachable(startpageType);
  }
 }