Merge branch 'fixes' into 'main'

Fixes See merge request frontend/squiz!106
2024-01-04 19:46:35 +00:00 · 2024-01-04 19:46:35 +00:00 · ae32cdf07b
commit ae32cdf07b
parent 25429abe7b 25c18d7d84
15 changed files with 202 additions and 43 deletions
--- a/src/pages/DesignPage/DesignPage.tsx
+++ b/src/pages/DesignPage/DesignPage.tsx
@ -3,7 +3,7 @@ import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
 import { setQuizes, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";
--- a/src/pages/Questions/BranchingMap/hooks/usePopper.ts
+++ b/src/pages/Questions/BranchingMap/hooks/usePopper.ts
@ -135,6 +135,11 @@ export const usePopper = ({
              setModalQuestionParentContentId(item.id());
              setOpenedModalQuestions(true);
            });
+            layoutElement.addEventListener("ontouchend", () => {
+              //Узнаём грани, идущие от этой ноды
+              setModalQuestionParentContentId(item.id());
+              setOpenedModalQuestions(true);
+            });
            layoutsContainer.current?.appendChild(layoutElement);

            return layoutElement;
@ -162,6 +167,9 @@ export const usePopper = ({
            plusElement.addEventListener("mouseup", () => {
              setStartCreate(node.id());
            });
+            plusElement.addEventListener("ontouchend", () => {
+              setStartCreate(node.id());
+            });

            plusesContainer.current?.appendChild(plusElement);

@ -191,6 +199,9 @@ export const usePopper = ({
            crossElement.addEventListener("mouseup", () => {
              setStartRemove(node.id());
            });
+            crossElement.addEventListener("ontouchend", () => {
+              setStartRemove(node.id());
+            });

            return crossElement;
          },
@ -225,6 +236,9 @@ export const usePopper = ({
              gearElement.addEventListener("mouseup", () => {
                updateOpenedModalSettingsId(item.id());
              });
+              gearElement.addEventListener("ontouchend", () => {
+                updateOpenedModalSettingsId(item.id());
+              });

              console.log("собираюсь анализировать папашу");
              console.log("Тип папаши ", parentQuestion.type);
--- a/src/pages/Questions/OwnTextField/OwnTextField.tsx
+++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx
@ -13,6 +13,7 @@ import InfoIcon from "../../../assets/icons/InfoIcon";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchTextField from "./switchTextField";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 interface Props {
  question: QuizQuestionText;
@ -77,6 +78,11 @@ export default function OwnTextField({ question }: Props) {
          >
            Пользователю будет дано поле для ввода значения
          </Typography>
+          {isMobile ? (
+            <TooltipClickInfo
+              title={"Будет использоваться для ввода значения."}
+            />
+          ) : (
            <Tooltip
              title="Будет использоваться для ввода значения."
              placement="top"
@ -85,6 +91,7 @@ export default function OwnTextField({ question }: Props) {
                <InfoIcon />
              </Box>
            </Tooltip>
+          )}
        </Box>
      </Box>
      <ButtonsOptions
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@ -96,7 +96,7 @@ export default function QuestionsPage({
          }}
          sx={{
            position: "fixed",
-            bottom: "140px",
+            bottom: "103px",
          }}
          data-cy="create-question"
        >
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@ -84,6 +84,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
      ) : null
    ) : null;

+    console.log(background)
+
  return (
    <Paper
      className="quiz-preview-draghandle"
--- a/src/pages/createQuize/QuizCard.tsx
+++ b/src/pages/createQuize/QuizCard.tsx
@ -62,7 +62,7 @@ export default function QuizCard({
    const params = new URLSearchParams(window.location.search);
    const fromSquiz = params.get("action");
    if (fromSquiz === "fromhub") {
-      window.history.replaceState(null, '', "/list")
+      window.history.replaceState(null, "", "/list");
      pay();
    }
  }, []);
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@ -1,5 +1,5 @@
 import { Header } from "@ui_kit/Header/Header";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Box from "@mui/material/Box";
 import { useTheme, useMediaQuery, IconButton } from "@mui/material";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -14,7 +14,7 @@ import {
 import { setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
 import { useEffect, useState } from "react";
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -6,16 +6,24 @@ import ArrowLeft from "@icons/ArrowLeftSP";
 import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
 import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
 import LayoutStandartIcon from "@icons/LayoutStandartIcon";
+import UploadIcon from "../../assets/icons/UploadIcon";
+
 import MobilePhoneIcon from "@icons/MobilePhoneIcon";
 import { QuizStartpageType } from "@model/quizSettings";
+import InfoIcon from "@icons/InfoIcon";
+
+import UploadBox from "@ui_kit/UploadBox";
+
 import {
  Box,
  Button,
+  ButtonBase,
  Checkbox,
  FormControl,
  FormControlLabel,
  MenuItem,
  Select,
+  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
@ -294,6 +302,7 @@ export default function StartPageSettings() {
              </SelectableButton>
            </Box>

+{quiz.config.startpage.background.type === "image" &&
            <Box
              sx={{
                display:
@ -348,27 +357,67 @@ export default function StartPageSettings() {
              <ModalSizeImage />
            </Box>

+}
+
+{quiz.config.startpage.background.type === "video" && <>
            <Box
                sx={{
-                display:
-                  quiz.config.startpage.background.type === "image"
-                    ? "none"
-                    : "flex",
-                flexDirection: "column",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "7px",
                  mt: "20px",
+                  mb: "14px",
                }}
              >
-              <CustomTextField
-                placeholder="URL видео"
-                value={quiz.config.startpage.background.video ?? ""}
-                onChange={(e) =>
-                  updateQuiz(quiz.id, (quiz) => {
-                    quiz.config.startpage.background.video = e.target.value;
-                  })
-                }
-              />
+                <Typography
+                  sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+                >
+                  Добавить видео
+                </Typography>
+                <Tooltip title="Можно загрузить видео." placement="top">
+                  <Box>
+                    <InfoIcon />
                  </Box>
+                </Tooltip>
+              </Box>
+              <ButtonBase
+                component="label"
+                sx={{ justifyContent: "center",
+                height: "48px",
+                width: "48px",  
+                display: "flex",
+                alignItems: "center",
+                my: "20px"
+              }}
+              >
+                <input
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    if (file) {
+                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        quiz.config.startpage.background.video = url;
+                      });
+                      // setVideo(URL.createObjectURL(file));
+                    }
                
+                  }}
+                  hidden
+                  accept=".mp4"
+                  multiple
+                  type="file"
+                />
+                <UploadBox
+                  icon={<UploadIcon />}
+                  sx={{
+                    height: "48px",
+                    width: "48px",
+                  }}
+                />
+                </ButtonBase>
+                {quiz.config.startpage.background.video ? <video src={quiz.config.startpage.background.video} width="400" controls /> : null}
+
+
+</>}
            {designType !== "centered" && (
              <>
                <Typography
--- a/src/ui_kit/Sidebar/Sidebar.tsx
+++ b/src/ui_kit/Sidebar/Sidebar.tsx
@ -7,7 +7,7 @@ import { quizSetupSteps } from "@model/quizSettings";
 import { Box, IconButton, List, Typography, useTheme } from "@mui/material";
 import { useQuizStore } from "@root/quizes/store";
 import { useState } from "react";
-import MenuItem from "./MenuItem";
+import MenuItem from "../MenuItem";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useLocation, useNavigate } from "react-router-dom";
 import { setCurrentStep } from "@root/quizes/actions";
--- a/src/ui_kit/Sidebar/SidebarMobile.tsx
+++ b/src/ui_kit/Sidebar/SidebarMobile.tsx
@ -18,10 +18,16 @@ import { Question } from "./icons/Question";
 import { Settings } from "./icons/Settings";
 import { Pencil } from "./icons/Pencil";
 import { ArrowDown } from "./icons/ArrowDown";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import { Link, useNavigate } from "react-router-dom";
 import { updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { LogoutButton } from "@ui_kit/LogoutButton";
+import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";
+import { logout } from "@api/auth";
+import { enqueueSnackbar } from "notistack";
+import { clearAuthToken } from "@frontend/kitui";
+import { clearUserData } from "@root/user";

 interface Iprops {
  open: boolean;
@ -45,10 +51,21 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
  const [inputOpen, setInputOpen] = useState<boolean>(false);
  const quiz = useCurrentQuiz();
  const ref = useRef(null);
-
+  const navigate = useNavigate();
  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };
+  async function handleLogoutClick() {
+    const [, logoutError] = await logout();
+
+    if (logoutError) {
+      return enqueueSnackbar(logoutError);
+    }
+
+    clearAuthToken();
+    clearUserData();
+    navigate("/");
+  }

  const clickInput = (event) => {
    if (ref.current && !ref.current.contains(event.target)) setInputOpen(false);
@ -149,7 +166,7 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
      <Box
        sx={{
          width: "100%",
-          justifyContent: "end",
+          justifyContent: "space-between",
          display: "flex",
          marginTop: "20px",
          flexWrap: "wrap",
@ -173,6 +190,24 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
        {/*    {sidebarIcon}*/}
        {/*  </Box>*/}
        {/*))}*/}
+        <Box sx={{ display: "flex" }}>
+          <Box
+            sx={{
+              display: "flex",
+              ml: "auto",
+              gap: "15px",
+            }}
+          >
+            <LogoutButton
+              onClick={handleLogoutClick}
+              sx={{
+                backgroundColor: "transparent",
+                border: "1px solid #9A9AAF",
+              }}
+            />
+          </Box>
+          <ToTariffsButton color={"#F2F3F7"} />
+        </Box>
        <Box
          aria-describedby={id}
          onClick={handleClick}
--- a/src/ui_kit/Sidebar/SidebarModal/index.tsx
+++ b/src/ui_kit/Sidebar/SidebarModal/index.tsx
@ -1,6 +1,6 @@
 import { Box, Modal, Popper } from "@mui/material";

-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";

 type SidebarModalProps = {
  open: boolean;
--- a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
+++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
@ -6,14 +6,16 @@ interface Props {
 }

 export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
+
  const extractYoutubeVideoId =
    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
  const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
-  if (!videoId) return null;
+  // if (!videoId) return null;

  const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
  // https://www.youtube.com/shorts/9VgqBPd6RPA
  // https://www.youtube.com/watch?v=I2N8hTHhvGY
+  console.log()
  return (
    <Box
      sx={{
@ -27,13 +29,25 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
        ...containerSX,
      }}
    >
-      <iframe
+      <Box
+        component="video"
+        sx={{
+          width: "100%",
+          height: "100%",
+
+        }}
+        autoPlay
+        muted
+
+        src={videoUrl}
+      />
+      {/* <iframe
        src={embedUrl}
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
-      />
+      /> */}
    </Box>
  );
 }
--- a/src/ui_kit/Toolbars/ToTariffsButton.tsx
+++ b/src/ui_kit/Toolbars/ToTariffsButton.tsx
@ -1,10 +1,10 @@
 import { Button } from "@mui/material";
 import { Link } from "react-router-dom";

-export const ToTariffsButton = () => {
+export const ToTariffsButton = (color?: string) => {
  return (
    <Link to="/tariffs">
-      <Button>Пополнить</Button>
+      <Button sx={{ color: color }}>Пополнить</Button>
    </Link>
  );
 };
--- a/src/ui_kit/Toolbars/TooltipClickInfo.tsx
+++ b/src/ui_kit/Toolbars/TooltipClickInfo.tsx
@ -0,0 +1,38 @@
+import { Button, ClickAwayListener, IconButton, Tooltip } from "@mui/material";
+import InfoIcon from "@icons/InfoIcon";
+import { useState } from "react";
+
+export default function TooltipClickInfo({ title }: string) {
+  const [open, setOpen] = useState(false);
+
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
+  return (
+    <>
+      <ClickAwayListener onClickAway={handleTooltipClose}>
+        <div>
+          <Tooltip
+            PopperProps={{
+              disablePortal: true,
+            }}
+            onClose={handleTooltipClose}
+            open={open}
+            disableFocusListener
+            disableHoverListener
+            disableTouchListener
+            title={title}
+          >
+            <IconButton onClick={handleTooltipOpen}>
+              <InfoIcon />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </ClickAwayListener>
+    </>
+  );
+}