Merge branch 'dev' into 'main'

удаление вопроса из списка вопросов чистит rule потомков, кнопки с...

See merge request frontend/squiz!65

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -19,7 +19,7 @@ import type {
   AbstractEventObject,
   ElementDefinition,
 } from "cytoscape";
-import { QuestionsList } from "../BranchingPanel/QuestionsList";
+import { QuestionsList } from "../SwitchBranchingPanel/QuestionsList";
 import { enqueueSnackbar } from "notistack";
 
 type PopperItem = {
@@ -65,6 +65,14 @@ const stylesheet: Stylesheet[] = [
       "text-max-width": "80",
     },
   },
+  {
+    selector: "[?eroticeyeblink]",
+    style: {
+      "border-width": "4px",
+      "border-style": "solid",
+      "border-color": "#7e2aea",
+    },
+  },
   {
     selector: ".multiline-auto",
     style: {
@@ -112,7 +120,7 @@ export const CsComponent = ({
 }: Props) => {
   const quiz = useCurrentQuiz();
 
-  const { dragQuestionContentId, questions } = useQuestionsStore()
+  const { dragQuestionContentId, questions, desireToOpenABranchingModal } = useQuestionsStore()
   const [startCreate, setStartCreate] = useState("");
   const [startRemove, setStartRemove] = useState("");
 
@@ -122,9 +130,19 @@ export const CsComponent = ({
   const crossesContainer = useRef<HTMLDivElement | null>(null);
   const gearsContainer = useRef<HTMLDivElement | null>(null);
 
-   useLayoutEffect(() => {
+  useLayoutEffect(() => {
-     updateOpenedModalSettingsId()
+const cy = cyRef?.current
-   }, [])
+    if (desireToOpenABranchingModal) {
+    setTimeout(() => {
+      cy?.getElementById(desireToOpenABranchingModal)?.data("eroticeyeblink", true)
+    }, 250)
+    } else {
+      cy?.elements().data("eroticeyeblink", false)
+    }
+  }, [desireToOpenABranchingModal])
+  useLayoutEffect(() => {
+    updateOpenedModalSettingsId()
+  }, [])
   useEffect(() => {
     if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
       addNode({ parentNodeContentId: modalQuestionParentContentId, targetNodeContentId: modalQuestionTargetContentId })
@@ -390,6 +408,7 @@ export const CsComponent = ({
     const cy = cyRef.current;
     const eles = cy?.add(storeToNodes(questions))
     cy.data('changed', true)
+    // cy.data('changed', true)
     const elecs = eles.layout(lyopts).run()
     cy?.on('add', () => cy.data('changed', true))
     cy?.fit()
@@ -665,6 +684,7 @@ export const CsComponent = ({
         cy={(cy) => {
           cyRef.current = cy;
         }}
+      // autolock
       />
       {/* <button onClick={() => {
         console.log("NODES____________________________")

src/pages/Questions/BranchingModal/Settings.tsx

@@ -290,7 +290,12 @@ const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQu
             }
             <DatePicker
                 value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
-                onChange={(e) => console.log(e)}
+                onChange={(dateString) => {
+                    const date = dateString?.$d?.toLocaleDateString("ru-RU", { year: "numeric", month: "2-digit", day: "2-digit" });
+                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
+                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [date]
+                    // setParentQuestion(newParentQuestion)
+                }}
                 slots={{
                     openPickerIcon: () => <CalendarIcon />,
                 }}

src/pages/Questions/BranchingPanel/index.tsx

@@ -1,13 +1,16 @@
-import { Box, Typography, Switch, useTheme } from "@mui/material";
+import {Box, Typography, Switch, useTheme, Button, useMediaQuery, SxProps, Theme} from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
 import { updateOpenBranchingPanel } from "@root/questions/actions";
 import {useQuestionsStore} from "@root/questions/store";
+import {useRef} from "react";
 
 
-export const BranchingPanel = () => {
+export const BranchingPanel = (sx?: SxProps<Theme>) => {
   const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const {openBranchingPanel} = useQuestionsStore.getState()
+  const ref = useRef()
   return (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
       <Box
@@ -19,12 +22,13 @@ export const BranchingPanel = () => {
           background: "#fff",
           borderRadius: "12px",
           boxShadow: "0px 10px 30px #e7e7e7",
+          ...sx
         }}
       >
         <Switch
           value={openBranchingPanel}
           onChange={(_, value) => {
-              updateOpenBranchingPanel(!value)
+              updateOpenBranchingPanel(value)
           }}
           sx={{
             width: 50,
@@ -71,7 +75,7 @@ export const BranchingPanel = () => {
           }}
         />
         <Box>
-          <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
             Логика ветвления
           </Typography>
           <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
@@ -79,7 +83,7 @@ export const BranchingPanel = () => {
           </Typography>
         </Box>
       </Box>
-      { openBranchingPanel === true && <QuestionsList /> }
+      { openBranchingPanel && <QuestionsList /> }
     </Box>
   );
 };

src/pages/Questions/ButtonsOptions.tsx

@@ -11,7 +11,7 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import {copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateQuestion} from "@root/questions/actions";
+import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
 import Branching from "../../assets/icons/questionsPage/branching";
@@ -19,10 +19,9 @@ import Clue from "../../assets/icons/questionsPage/clue";
 import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
-import { updateOpenedModalSettingsId } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import {enqueueSnackbar} from "notistack";
+import { enqueueSnackbar } from "notistack";
-import {useQuestionsStore} from "@root/questions/store";
+import { useQuestionsStore } from "@root/questions/store";
 
 
 interface Props {
@@ -42,25 +41,7 @@ export default function ButtonsOptions({
     const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
     const quiz = useCurrentQuiz();
 
-const {openBranchingPanel} = useQuestionsStore.getState()
+    const { openBranchingPanel } = useQuestionsStore.getState()
-    const openedModal = () => {
-        updateOpenedModalSettingsId(question.id)
-    };
-
-    const handleClickBranching = (_, value) => {
-        const parentId = question.content.rule.parentId
-        if (parentId.length === 0 ){
-            return enqueueSnackbar("Вопрос не учавствует в ветвлении")
-        }
-        if (parentId ===  "root") {
-            return enqueueSnackbar("У корня нет условий ветвления")
-        }
-        if (parentId.length !== 0) {
-            updateOpenBranchingPanel(!value)
-            openedModal()
-        }
-
-    }
 
     const buttonSetting: {
         icon: JSX.Element;
@@ -98,7 +79,10 @@ const {openBranchingPanel} = useQuestionsStore.getState()
                 ),
                 title: "Ветвление",
                 value: "branching",
-                myFunc: () => handleClickBranching(question.id, openBranchingPanel),
+                myFunc: (question) => {
+                    updateOpenBranchingPanel(true)
+                    updateDesireToOpenABranchingModal(question.content.id)
+                }
             },
         ];
 
@@ -174,7 +158,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
                                     key={title}
                                     onClick={() => {
                                         SSHC(value);
-                                        myFunc();
+                                        myFunc(question);
                                     }}
                                     sx={{
                                         backgroundColor:

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -23,8 +23,8 @@ import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import { QuizQuestionVariant } from "@model/questionTypes/variant";
 import { updateOpenedModalSettingsId } from "@root/questions/actions";
-import { updateOpenBranchingPanel } from "@root/questions/actions";
+import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
-import {useQuestionsStore} from "@root/questions/store";
+import { useQuestionsStore } from "@root/questions/store";
 import { enqueueSnackbar } from "notistack";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 
@@ -46,7 +46,7 @@ export default function ButtonsOptionsAndPict({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(790));
     const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
-    const {openBranchingPanel} = useQuestionsStore.getState()
+    const { openBranchingPanel } = useQuestionsStore.getState()
     const quiz = useCurrentQuiz();
 
     useEffect(() => {
@@ -55,22 +55,6 @@ export default function ButtonsOptionsAndPict({
         }
     }, [question]);
 
-    const handleClickBranching = (_, value) => {
-        
-        const parentId = question.content.rule.parentId
-        if (parentId.length === 0 ) {
-            return enqueueSnackbar("Вопрос не учавствует в ветвлении")
-        }
-        if (parentId ===  "root") {
-            return enqueueSnackbar("У корня нет условий ветвления")
-        }
-        if (parentId.length !== 0) {
-            updateOpenBranchingPanel(!value)
-            updateOpenedModalSettingsId(question.id)
-        }
-
-    }
-
     return (
         <Box
             sx={{
@@ -206,7 +190,8 @@ export default function ButtonsOptionsAndPict({
                             onMouseEnter={() => setButtonHover("branching")}
                             onMouseLeave={() => setButtonHover("")}
                             onClick={() => {
-                                handleClickBranching(question.id, openBranchingPanel)
+                                updateOpenBranchingPanel(true)
+                                updateDesireToOpenABranchingModal(question.content.id)
                             }}
                             sx={{
                                 height: "30px",

src/pages/Questions/DraggableList/DraggableListItem.tsx

@@ -1,8 +1,10 @@
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
 import { Box, ListItem, Typography, useTheme } from "@mui/material";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import QuestionsPageCard from "./QuestionPageCard";
+import { updateEditSomeQuestion } from "@root/questions/actions"
+import { useQuestionsStore } from "@root/questions/store"
 
 
 type Props = {
@@ -13,6 +15,23 @@ type Props = {
 
 function DraggableListItem({ question, isDragging, index }: Props) {
     const theme = useTheme();
+    const { editSomeQuestion } = useQuestionsStore()
+
+    useEffect(() => {
+        if (editSomeQuestion !== null) {
+            const setI = setInterval(() => {
+                let comp = document.getElementById(editSomeQuestion)
+                console.log(comp)
+                    if(comp !== null) {    
+                        clearInterval(setI)
+                        comp.scrollIntoView({behavior: 'instant'})
+                        updateEditSomeQuestion()
+                    }
+            }, 200)
+
+        }
+        console.log(editSomeQuestion)
+    }, [editSomeQuestion])
 
     return (
         <Draggable draggableId={question.id.toString()} index={index}>

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -68,6 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
     return (
         <>
             <Paper
+            id={question.content.id}
                 data-cy="quiz-question-card"
                 sx={{
                     maxWidth: "796px",

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -3,21 +3,20 @@ import {
     Box,
   } from "@mui/material";
 import { DraggableList } from "./DraggableList";
-import { BranchingPanel } from "./BranchingPanel";
+import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
 import { BranchingMap } from "./BranchingMap";
-import { updateOpenBranchingPanel } from "@root/questions/actions";
 import {useQuestionsStore} from "@root/questions/store";
 
 
-
 export const QuestionSwitchWindowTool = () => {
     const {openBranchingPanel} = useQuestionsStore.getState()
+console.log(openBranchingPanel)
     return (
                 <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
                 <Box sx={{ flexBasis: "796px" }}>
                     {openBranchingPanel? <BranchingMap /> : <DraggableList />}
                 </Box>
-                <BranchingPanel
+                <SwitchBranchingPanel
                 />
             </Box>
     )

src/pages/Questions/QuestionsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useLayoutEffect } from "react"
+import { useState, useEffect, useLayoutEffect, useRef } from "react"
 import {
     Box,
     Button,
@@ -17,7 +17,7 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
 import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
 import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
 import { useQuestionsStore } from "@root/questions/store";
-import { updateOpenBranchingPanel } from "@root/questions/actions";
+import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/questions/actions";
 
 
 export default function QuestionsPage() {
@@ -27,15 +27,19 @@ export default function QuestionsPage() {
     const quiz = useCurrentQuiz();
     const {openBranchingPanel} = useQuestionsStore.getState()
     useLayoutEffect(() => {
-        updateOpenBranchingPanel(true)
+        updateOpenBranchingPanel(false)
+        updateEditSomeQuestion()
     },[])
 
+    const ref = useRef()
     if (!quiz) return null;
 
 
     return (
         <>
             <Box
+                ref={ref}
+                id="QuestionsPage"
                 sx={{
                     maxWidth: "796px",
                     width: "100%",
@@ -81,6 +85,8 @@ export default function QuestionsPage() {
                 >
                     <AddPlus />
                 </IconButton>
+
+                
                 <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
                     <Button
                         variant="outlined"
@@ -109,4 +115,4 @@ export default function QuestionsPage() {
             {openedModalSettingsId !== null && <BranchingQuestions/>}
         </>
     );
-}
+}

src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx

@@ -1,13 +1,15 @@
 import { useParams } from "react-router-dom";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
 import { useQuestionsStore } from "@root/questions/store";
 import { updateDragQuestionContentId } from "@root/questions/actions";
 import { useEffect } from "react";
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
+import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
+import {updateOpenBranchingPanel, updateEditSomeQuestion} from "@root/questions/actions"
 
 
-const getItemStyle = (isDragging:any, draggableStyle:any) => ({
+const getItemStyle = (isDragging: any, draggableStyle: any) => ({
   // some basic styles to make the items look a bit nicer
   userSelect: "none",
   padding: 5 * 2,
@@ -22,7 +24,7 @@ const getItemStyle = (isDragging:any, draggableStyle:any) => ({
 type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
 
 export const QuestionsList = () => {
-  const { questions } = useQuestionsStore()
+  const { questions, desireToOpenABranchingModal } = useQuestionsStore()
 
   return (
     <Box sx={{ padding: "15px" }}>
@@ -51,11 +53,11 @@ export const QuestionsList = () => {
         }}
       >
         {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
-        {questions.filter((q:AnyQuestion) => q.type).map(({ title, id, content }, index) => (
+        {questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => (
-              <Button
+          <Button
-              onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
+            onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
-                if (!content.rule.parentId) updateDragQuestionContentId(content.id)
+              if (!content.rule.parentId) updateDragQuestionContentId(content.id)
-              }}
+            }}
             key={index}
             sx={{
               width: "100%",
@@ -66,6 +68,7 @@ export const QuestionsList = () => {
               padding: "12px",
               background: "#FFFFFF",
               borderRadius: "8px",
+              border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none",
               marginBottom: "20px",
               boxShadow: "0px 10px 30px #e7e7e7",
               backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
@@ -73,13 +76,21 @@ export const QuestionsList = () => {
               "&:last-child": { marginBottom: 0 },
             }}
           >
-            <Typography sx={{  width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
+            <Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
               {title || "нет заголовка"}
             </Typography>
+            <IconButton
+              onClick={() => {
+                updateOpenBranchingPanel(false)
+                updateEditSomeQuestion(content.id)
+              }}
+            >
+              <Pencil />
+            </IconButton>
             {content.rule.parentId && <CheckedIcon />}
           </Button>
-              
+
-          
+
         ))}
       </Box>
     </Box>

src/pages/Questions/SwitchBranchingPanel/index.tsx

@@ -0,0 +1,91 @@
+import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material";
+
+import { QuestionsList } from "./QuestionsList";
+import { updateOpenBranchingPanel } from "@root/questions/actions";
+import {useQuestionsStore} from "@root/questions/store";
+import {useRef} from "react";
+
+
+export const SwitchBranchingPanel = () => {
+  const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(660));
+    const {openBranchingPanel} = useQuestionsStore.getState()
+    console.log(openBranchingPanel)
+  const ref = useRef()
+  return (
+    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: "15px",
+          padding: "18px",
+          background: "#fff",
+          borderRadius: "12px",
+          boxShadow: "0px 10px 30px #e7e7e7",
+        }}
+      >
+        <Switch
+          value={openBranchingPanel}
+          onChange={(_, value) => {
+            console.log("меняю на " + value)
+              updateOpenBranchingPanel(value)
+          }}
+          sx={{
+            width: 50,
+            height: 30,
+            padding: 0,
+            "& .MuiSwitch-switchBase": {
+              padding: 0,
+              margin: "2px",
+              transitionDuration: "300ms",
+              "&.Mui-checked": {
+                transform: "translateX(20px)",
+                color: theme.palette.brightPurple.main,
+                "& + .MuiSwitch-track": {
+                  backgroundColor: "#E8DCF9",
+                  opacity: 1,
+                  border: 0,
+                },
+                "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+              },
+              "&.Mui-disabled .MuiSwitch-thumb": {
+                color:
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[600],
+              },
+              "&.Mui-disabled + .MuiSwitch-track": {
+                opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+              },
+            },
+            "& .MuiSwitch-thumb": {
+              boxSizing: "border-box",
+              width: 25,
+              height: 25,
+            },
+            "& .MuiSwitch-track": {
+              borderRadius: 13,
+              backgroundColor:
+                theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+              opacity: 1,
+              transition: theme.transitions.create(["background-color"], {
+                duration: 500,
+              }),
+            },
+          }}
+        />
+        <Box>
+          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+            Логика ветвления
+          </Typography>
+          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+            Настройте связи между вопросами
+          </Typography>
+        </Box>
+        
+      </Box>
+      { openBranchingPanel && <QuestionsList /> }
+    </Box>
+  );
+};

src/pages/ViewPublicationPage/Footer.tsx

@@ -19,13 +19,69 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
   const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
     new Set()
   );
+  const [disablePreviousButton, setDisablePreviousButton] =
+    useState<boolean>(false);
+  const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
   const { answers } = useQuizViewStore();
   const theme = useTheme();
 
+  useEffect(() => {
+    // Логика для аргумента disabled у кнопки "Назад"
+    if (question?.content.rule.parentId === "root") {
+      setDisablePreviousButton(true);
+    } else {
+      setDisablePreviousButton(false);
+    }
+
+    // Логика для аргумента disabled у кнопки "Далее"
+    const nextQuestionId = getNextQuestionId();
+    if (nextQuestionId) {
+      setDisableNextButton(false);
+    } else {
+      const nextQuestion = getQuestionByContentId(
+        question.content.rule.default
+      );
+      if (nextQuestion?.type) {
+        setDisableNextButton(false);
+      } else {
+        setDisableNextButton(true);
+      }
+    }
+  }, [question]);
+
+  const getNextQuestionId = () => {
+    if (answers.length) {
+      const answer = answers.find(
+        ({ questionId }) => questionId === question.content.id
+      );
+
+      let readyBeNextQuestion = "";
+
+      question.content.rule.main.forEach(({ next, rules }) => {
+        let longerArray = Math.max(
+          rules[0].answers.length,
+          [answer?.answer].length
+        );
+
+        for (
+          var i = 0;
+          i < longerArray;
+          i++ // Цикл по всем эле­мен­там бОльшего массива
+        ) {
+          if (rules[0].answers[i] === answer?.answer) {
+            readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
+          }
+        }
+      });
+
+      return readyBeNextQuestion;
+    }
+  };
+
   const followPreviousStep = () => {
     if (question?.content.rule.parentId !== "root") {
       const parent = getQuestionByContentId(question?.content.rule.parentId);
-      if (parent) {
+      if (parent?.type) {
         setCurrentQuestion(parent);
       } else {
         enqueueSnackbar("не могу получить предыдущий вопрос");
@@ -36,45 +92,25 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
   };
 
   const followNextStep = () => {
-    if (answers.length) {
+    const nextQuestionId = getNextQuestionId();
-      let readyBeNextQuestion = "";
 
-      question.content.rule.main.forEach(({ next, rules }) => {
+    if (nextQuestionId) {
+      const nextQuestion = getQuestionByContentId(nextQuestionId);
 
-        let longerArray = Math.max(
+      if (nextQuestion?.type) {
-          rules[0].answers.length,
+        setCurrentQuestion(nextQuestion);
-          [answers.at(-1)?.answer].length
+        return;
-        );
-
-        for (
-          var i = 0;
-          i < longerArray;
-          i++ // Цикл по всем эле­мен­там бОльшего массива
-        ) {
-          if (rules[0].answers[i] === answers.at(-1)?.answer) {
-            readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
-          }
-        }
-      });
-      if (readyBeNextQuestion) {
-
-        const nextQuestion = getQuestionByContentId(readyBeNextQuestion);
-
-        if (nextQuestion) {
-          setCurrentQuestion(nextQuestion);
-          return;
-        } else {
-          enqueueSnackbar("не могу получить последующий вопрос");
-        }
       } else {
-        const nextQuestion = getQuestionByContentId(
+        enqueueSnackbar("не могу получить последующий вопрос");
-          question.content.rule.default
+      }
-        );
+    } else {
-        if (nextQuestion) {
+      const nextQuestion = getQuestionByContentId(
-          setCurrentQuestion(nextQuestion);
+        question.content.rule.default
-        } else {
+      );
-          enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
+      if (nextQuestion?.type) {
-        }
+        setCurrentQuestion(nextQuestion);
+      } else {
+        enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
       }
     }
   };
@@ -128,6 +164,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
           </Typography> */}
         </Box>
         <Button
+          disabled={disablePreviousButton}
           variant="contained"
           sx={{ fontSize: "16px", padding: "10px 15px" }}
           onClick={followPreviousStep}
@@ -135,6 +172,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
           ← Назад
         </Button>
         <Button
+          disabled={disableNextButton}
           variant="contained"
           sx={{ fontSize: "16px", padding: "10px 15px" }}
           onClick={followNextStep}

src/pages/ViewPublicationPage/questions/Date.tsx

@@ -13,7 +13,10 @@ type DateProps = {
 
 export const Date = ({ currentQuestion }: DateProps) => {
   const { answers } = useQuizViewStore();
-  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
+  const { answer } =
+    answers.find(
+      ({ questionId }) => questionId === currentQuestion.content.id
+    ) ?? {};
 
   return (
     <Box>
@@ -28,7 +31,18 @@ export const Date = ({ currentQuestion }: DateProps) => {
       >
         <DatePicker
           selected={answer ? new window.Date(answer) : new window.Date()}
-          onChange={(date) => updateAnswer(currentQuestion.content.id, String(date))}
+          onChange={(date) =>
+            updateAnswer(
+              currentQuestion.content.id,
+              String(
+                date?.toLocaleDateString("ru-RU", {
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                })
+              )
+            )
+          }
         />
       </Box>
     </Box>

src/pages/startPage/StartPage.tsx

@@ -9,8 +9,8 @@ import {
     Button,
     Container,
     FormControl,
-    IconButton,
+    IconButton, Switch,
-    TextField,
+    TextField, Typography,
     useMediaQuery,
     useTheme,
 } from "@mui/material";
@@ -29,7 +29,9 @@ import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import { cleanQuestions } from "@root/questions/actions";
+import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
+import {BranchingPanel} from "../Questions/BranchingPanel";
+import {useQuestionsStore} from "@root/questions/store";
 
 
 export default function StartPage() {
@@ -50,7 +52,7 @@ export default function StartPage() {
     const isTablet = useMediaQuery(theme.breakpoints.down(1000));
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
-
+    const {openBranchingPanel} = useQuestionsStore.getState()
     const quizConfig = quiz?.config;
 
     useEffect(() => {
@@ -228,9 +230,9 @@ export default function StartPage() {
                     <Box
                         sx={{
                             position: "absolute",
-                            left: isMobile ? 0 : "230px",
+                            left: 0,
                             bottom: 0,
-                            width: isMobile ? "100%" : "calc(100% - 230px)",
+                            width: "100%",
                             padding: "20px 40px",
                             display: "flex",
                             justifyContent: "flex-end",
@@ -238,6 +240,75 @@ export default function StartPage() {
                             background: "#FFF",
                         }}
                     >
+                        <Box
+                            sx={{
+                                display: openBranchingPanel ? "none" : "display",
+                                alignItems: "center",
+                                gap: "15px",
+                                padding: "18px",
+                                background: "#fff",
+                                borderRadius: "12px",
+                                boxShadow: "0px 10px 30px #e7e7e7",
+                            }}
+                        >
+                            <Switch
+                                value={openBranchingPanel}
+                                onChange={(_, value) => {
+                                    updateOpenBranchingPanel(value)
+                                }}
+                                sx={{
+                                    width: 50,
+                                    height: 30,
+                                    padding: 0,
+                                    "& .MuiSwitch-switchBase": {
+                                        padding: 0,
+                                        margin: "2px",
+                                        transitionDuration: "300ms",
+                                        "&.Mui-checked": {
+                                            transform: "translateX(20px)",
+                                            color: theme.palette.brightPurple.main,
+                                            "& + .MuiSwitch-track": {
+                                                backgroundColor: "#E8DCF9",
+                                                opacity: 1,
+                                                border: 0,
+                                            },
+                                            "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+                                        },
+                                        "&.Mui-disabled .MuiSwitch-thumb": {
+                                            color:
+                                                theme.palette.mode === "light"
+                                                    ? theme.palette.grey[100]
+                                                    : theme.palette.grey[600],
+                                        },
+                                        "&.Mui-disabled + .MuiSwitch-track": {
+                                            opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+                                        },
+                                    },
+                                    "& .MuiSwitch-thumb": {
+                                        boxSizing: "border-box",
+                                        width: 25,
+                                        height: 25,
+                                    },
+                                    "& .MuiSwitch-track": {
+                                        borderRadius: 13,
+                                        backgroundColor:
+                                            theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+                                        opacity: 1,
+                                        transition: theme.transitions.create(["background-color"], {
+                                            duration: 500,
+                                        }),
+                                    },
+                                }}
+                            />
+                            <Box>
+                                <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+                                    Логика ветвления
+                                </Typography>
+                                <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+                                    Настройте связи между вопросами
+                                </Typography>
+                            </Box>
+                        </Box>
                         <Button
                             variant="contained"
                             sx={{

src/stores/questions/actions.ts

@@ -308,8 +308,8 @@ export const createTypedQuestion = async (
 });
 
 export const deleteQuestion = async (questionId: string, quizId: string) => requestQueue.enqueue(async () => {
-
+    const { questions } = useQuestionsStore.getState()
-    const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
+    const question = questions.find(q => q.id === questionId);
     if (!question) return;
 
     if (question.type === null) {
@@ -322,6 +322,27 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ
         if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
             updateRootContentId(quizId, "")
             clearRoleForAll()
+        } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очищаем его потомков
+            const clearQuestions = [] as string[]
+
+            const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
+                questions.forEach((targetQuestion) => {
+                    if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
+                        if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
+                        getChildren(targetQuestion) //и ищем его потомков
+                    }
+                })
+            }
+            getChildren(question)
+            //чистим потомков от инфы ветвления
+            clearQuestions.forEach((id) => {
+                updateQuestion(id, question => {
+                    question.content.rule.parentId = ""
+                    question.content.rule.main = []
+                    question.content.rule.default = ""
+                })
+            })
+
         }
 
         removeQuestion(questionId);
@@ -394,7 +415,7 @@ export const getQuestionByContentId = (questionContentId: string | null) => {
     if (questionContentId === null) return null;
     return useQuestionsStore.getState().questions.find(q => {
         if (q.type === null) return false;
-        
+
         return (q.content.id === questionContentId);
     }) || null;
 };
@@ -417,4 +438,20 @@ export const clearRoleForAll = () => {
     });
 }
 
-export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value});
+export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({ openBranchingPanel: value });
+
+
+let UDTOABM: ReturnType<typeof setTimeout>;
+export const updateDesireToOpenABranchingModal = (contentId: string) => {
+    useQuestionsStore.setState({ desireToOpenABranchingModal: contentId })
+    clearTimeout(UDTOABM)
+    UDTOABM = setTimeout(() => {
+        useQuestionsStore.setState({ desireToOpenABranchingModal: null })
+    }, 7000)
+}
+export const clearDesireToOpenABranchingModal = () => {
+    useQuestionsStore.setState({ desireToOpenABranchingModal: null })
+}
+export const updateEditSomeQuestion = (contentId?: string) => {
+    useQuestionsStore.setState({ editSomeQuestion: contentId === undefined ? null : contentId })
+}

src/stores/questions/store.ts

@@ -8,6 +8,8 @@ export type QuestionsStore = {
     openedModalSettingsId: string | null;
     dragQuestionContentId: string | null;
     openBranchingPanel: boolean;
+    desireToOpenABranchingModal: string | null;
+    editSomeQuestion: string | null;
 };
 
 const initialState: QuestionsStore = {
@@ -15,6 +17,9 @@ const initialState: QuestionsStore = {
     openedModalSettingsId: null as null,
     dragQuestionContentId: null,
     openBranchingPanel: false,
+    desireToOpenABranchingModal: null as null,
+    editSomeQuestion: null as null,
+
 };
 
 export const useQuestionsStore = create<QuestionsStore>()(

src/ui_kit/Sidebar.tsx

@@ -46,6 +46,7 @@ export default function Sidebar() {
                 overflow: "hidden",
                 whiteSpace: "nowrap",
                 boxSizing: "border-box",
+                zIndex: 1
             }}
         >
             <Box