Merge branch 'dev' into startpage-preview-fix

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -216,6 +216,7 @@ function CsComponent({
     }
   }
 
+
   const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
     const deleteNodes = [] as string[]
     const deleteEdges: any = []
@@ -331,6 +332,7 @@ function CsComponent({
   }
 
 
+
   useEffect(() => {
     if (startCreate) {
       addNode({ parentNodeContentId: startCreate });
@@ -348,7 +350,6 @@ function CsComponent({
 
 
   const readyLO = (e) => {
-    console.log('REAdy')
     if (e.cy.data('firstNode') === 'nonroot') {
       e.cy.data('firstNode', 'root')
       e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
@@ -433,7 +434,6 @@ function CsComponent({
           task.task.forEach(n => {
             const width = n.data('subtreeWidth')
 
-            console.log('ORORORORO', n.data(), yoffset, width, oldPos, task.parent.data('subtreeWidth'))
             n.data('oldPos', { x: 250 * n.data('layer'), y: yoffset + width / 2 })
             yoffset += width
             queue.push({ task: n.cy().edges(`[source="${n.id()}"]`).targets(), parent: n })
@@ -462,7 +462,6 @@ function CsComponent({
   }
 
   useEffect(() => {
-    console.log('KEKEKE')
     document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
     const cy = cyRef.current;
     const eles = cy?.add(storeToNodes(questions.filter((question: AnyTypedQuizQuestion) => (question.type !== "result" && question.type !== null))))
@@ -510,7 +509,6 @@ function CsComponent({
     if (!container) {
       return;
     }
-    console.log('POP')
 
     container.style.overflow = "hidden";
 
@@ -540,7 +538,6 @@ function CsComponent({
       const bb = n.boundingBox()
       return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
     })
-    console.log('POPE')
 
     nodesInView
       .toArray()
@@ -553,7 +550,6 @@ function CsComponent({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
-    console.log('POPPER', item.id())
             const itemId = item.id();
             const itemElement = layoutsContainer.current?.querySelector(
               `.popper-layout[data-id='${itemId}']`
@@ -583,7 +579,6 @@ function CsComponent({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
-    console.log('POPPER+', item.id())
             const itemId = item.id();
             const itemElement = plusesContainer.current?.querySelector(
               `.popper-plus[data-id='${itemId}']`
@@ -612,7 +607,6 @@ function CsComponent({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
-    console.log('POPPERx', item.id())
             const itemId = item.id();
             const itemElement = crossesContainer.current?.querySelector(
               `.popper-cross[data-id='${itemId}']`
@@ -643,11 +637,7 @@ function CsComponent({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
-    console.log('POPPERg', item.id())
             const itemId = item.id();
-            if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
-              return;
-            }
 
             const itemElement = gearsContainer.current?.querySelector(
               `.popper-gear[data-id='${itemId}']`
@@ -670,7 +660,6 @@ function CsComponent({
         });
 
         const update = async () => {
-    console.log('POPPERi=u', item.id())
           await plusesPopper.update();
           await crossesPopper.update();
           await gearsPopper.update();
@@ -696,6 +685,18 @@ function CsComponent({
               { name: "offset", options: { offset: [0, -130 * zoom] } },
             ],
           });
+          plusesPopper.setOptions({
+            modifiers: [
+              { name: "flip", options: { boundary: node } },
+              { name: "offset", options: { offset: [0, 0 * zoom] } },
+            ],
+          });
+          gearsPopper.setOptions({
+            modifiers: [
+              { name: "flip", options: { boundary: node } },
+              { name: "offset", options: { offset: [0, 0] } },
+            ],
+          });
 
           layoutsContainer.current
             ?.querySelectorAll("#popper-layouts > .popper-layout")
@@ -735,13 +736,13 @@ function CsComponent({
         };
 
         //node?.on("position", update);
-let pressed = false
+        let pressed = false
         let hide = false
-        cy?.on('mousedown',() => {pressed = true})
+        cy?.on('mousedown', () => { pressed = true })
-        cy?.on('mouseup',() => {
+        cy?.on('mouseup', () => {
           pressed = false
           hide = false
-          
+
 
           const gc = gearsContainer.current
           if (gc) gc.style.display = 'block'
@@ -751,23 +752,23 @@ let pressed = false
           if (pc) pc.style.display = 'block'
           if (xc) xc.style.display = 'block'
           if (lc) lc.style.display = 'block'
-            update()
+          update()
         })
 
-        cy?.on('mousemove',() => {
+        cy?.on('mousemove', () => {
           if (pressed && !hide) {
             hide = true
             const gc = gearsContainer.current
             if (gc) gc.style.display = 'none'
-          const pc = plusesContainer.current
+            const pc = plusesContainer.current
-          const xc = crossesContainer.current
+            const xc = crossesContainer.current
-          const lc = layoutsContainer.current
+            const lc = layoutsContainer.current
-          if (pc) pc.style.display = 'none'
+            if (pc) pc.style.display = 'none'
-          if (xc) xc.style.display = 'none'
+            if (xc) xc.style.display = 'none'
-          if (lc) lc.style.display = 'block'
+            if (lc) lc.style.display = 'block'
           }
-          });
+        });
- 
+
         cy?.on("zoom render", onZoom);
       });
   };
@@ -785,7 +786,7 @@ let pressed = false
         variant="text"
         onClick={() => {
 
-          //код сюда
+          cyRef.current?.fit()
 
         }}
       >

src/pages/Questions/BranchingMap/FirstNodeField.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material"
 import { useEffect, useRef, useState } from "react";
-import { updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
+import { deleteQuestion, updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
 import { updateRootContentId } from "@root/quizes/actions"
 import { useCurrentQuiz } from "@root/quizes/hooks"
 import { useQuestionsStore } from "@root/questions/store"
@@ -11,8 +11,9 @@ interface Props {
     modalQuestionTargetContentId: string;
 }
 export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
+
     const quiz = useCurrentQuiz();
-    const { dragQuestionContentId } = useQuestionsStore()
+    const { dragQuestionContentId, questions } = useQuestionsStore()
     const Container = useRef<HTMLDivElement | null>(null);
 
     const modalOpen = () => setOpenedModalQuestions(true)
@@ -22,6 +23,11 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
             if (dragQuestionContentId) {
                 updateRootContentId(quiz?.id, dragQuestionContentId)
                 updateQuestion(dragQuestionContentId, (question) => question.content.rule.parentId = "root")
+                //если были результаты - удалить
+                questions.forEach((q) => {
+                    if (q.type === 'result') deleteQuestion(q.id)
+                })
+
             }
         } else {
             enqueueSnackbar("Нет информации о взятом опроснике")
@@ -44,6 +50,10 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
             if (modalQuestionTargetContentId) {
                 updateRootContentId(quiz?.id, modalQuestionTargetContentId)
                 updateQuestion(modalQuestionTargetContentId, (question) => question.content.rule.parentId = "root")
+                //если были результаты - удалить
+                questions.forEach((q) => {
+                    if (q.type === 'result') deleteQuestion(q.id)
+                })
             }
         } else {
             enqueueSnackbar("Нет информации о взятом опроснике")

src/pages/Questions/ButtonsOptions.tsx

@@ -11,7 +11,7 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
+import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal, updateOpenedModalSettingsId, clearRuleForAll } from "@root/questions/actions";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
 import Branching from "../../assets/icons/questionsPage/branching";
@@ -22,7 +22,7 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { enqueueSnackbar } from "notistack";
 import { useQuestionsStore } from "@root/questions/store";
-import { updateOpenedModalSettingsId } from "@root/questions/actions";
+import { updateRootContentId } from "@root/quizes/actions";
 
 interface Props {
     switchState: string;
@@ -40,7 +40,7 @@ export default function ButtonsOptions({
     const isMobile = useMediaQuery(theme.breakpoints.down(790));
     const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
     const quiz = useCurrentQuiz();
-    const { openBranchingPanel } = useQuestionsStore.getState()
+    const { questions } = useQuestionsStore.getState()
 
     const openedModal = () => {
         updateOpenedModalSettingsId(question.id)

src/pages/ResultPage/ResultSettings.tsx

@@ -33,7 +33,6 @@ export const ResultSettings = () => {
         isReadyToLeave = false;
       }
     });
-    console.log(`setting isReadyToLeaveRef to ${isReadyToLeave}`);
     isReadyToLeaveRef.current = isReadyToLeave;
   }, [results])
 

src/pages/ViewPublicationPage/questions/Date.tsx

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers";
 import { Box, Typography } from "@mui/material";
 
@@ -14,10 +15,9 @@ type DateProps = {
 
 export const Date = ({ currentQuestion }: DateProps) => {
   const { answers } = useQuizViewStore();
-  const { answer } =
+  const answer = answers.find(
-    answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
-      ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;
-    ) ?? {};
   const [day, month, year] = answer?.split(".") || [];
 
   return (
@@ -32,50 +32,54 @@ export const Date = ({ currentQuestion }: DateProps) => {
         }}
       >
         <DatePicker
-            slots={{
+          slots={{
-                openPickerIcon: () => <CalendarIcon />,
+            openPickerIcon: () => <CalendarIcon />,
-            }}
+          }}
-          selected={
+          value={dayjs(
             answer
               ? new window.Date(`${month}.${day}.${year}`)
               : new window.Date()
-          }
+          )}
-          onChange={(date) =>
+          onChange={(date) => {
+            if (!date) {
+              return;
+            }
+
             updateAnswer(
               currentQuestion.content.id,
               String(
-                date?.toLocaleDateString("ru-RU", {
+                new window.Date(date.toDate()).toLocaleDateString("ru-RU", {
                   year: "numeric",
                   month: "2-digit",
                   day: "2-digit",
                 })
               )
-            )
+            );
-          }
+          }}
-            slotProps={{
+          slotProps={{
-                openPickerButton: {
+            openPickerButton: {
-                    sx: {
+              sx: {
-                        p: 0,
+                p: 0,
-                    },
+              },
-                    "data-cy": "open-datepicker",
+              "data-cy": "open-datepicker",
-                },
+            },
-            }}
+          }}
-            sx={{
+          sx={{
-                "& .MuiInputBase-root": {
+            "& .MuiInputBase-root": {
-                    backgroundColor: "#F2F3F7",
+              backgroundColor: "#F2F3F7",
-                    borderRadius: "10px",
+              borderRadius: "10px",
-                    maxWidth: "250px",
+              maxWidth: "250px",
-                    pr: "22px",
+              pr: "22px",
-                    "& input": {
+              "& input": {
-                        py: "11px",
+                py: "11px",
-                        pl: "20px",
+                pl: "20px",
-                        lineHeight: "19px",
+                lineHeight: "19px",
-                    },
+              },
-                    "& fieldset": {
+              "& fieldset": {
-                        borderColor: "#9A9AAF",
+                borderColor: "#9A9AAF",
-                    },
+              },
-                },
+            },
-            }}
+          }}
         />
       </Box>
     </Box>

src/pages/ViewPublicationPage/questions/File.tsx

@@ -16,13 +16,18 @@ type FileProps = {
 
 export const File = ({ currentQuestion }: FileProps) => {
   const { answers } = useQuizViewStore();
-  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;
 
   const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
     const file = target.files?.[0];
 
     if (file) {
-      updateAnswer(currentQuestion.content.id, `${file.name}|${URL.createObjectURL(file)}`);
+      updateAnswer(
+        currentQuestion.content.id,
+        `${file.name}|${URL.createObjectURL(file)}`
+      );
     }
   };
 
@@ -47,6 +52,28 @@ export const File = ({ currentQuestion }: FileProps) => {
           />
           <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
         </ButtonBase>
+        {answer && currentQuestion.content.type === "picture" && (
+          <img
+            src={answer.split("|")[1]}
+            alt=""
+            style={{
+              marginTop: "15px",
+              maxWidth: "300px",
+              maxHeight: "300px",
+            }}
+          />
+        )}
+        {answer && currentQuestion.content.type === "video" && (
+          <video
+            src={answer.split("|")[1]}
+            style={{
+              marginTop: "15px",
+              maxWidth: "300px",
+              maxHeight: "300px",
+              objectFit: "cover",
+            }}
+          />
+        )}
         {answer?.split("|")[0] && (
           <Typography sx={{ marginTop: "15px" }}>
             {answer?.split("|")[0]}

src/pages/ViewPublicationPage/questions/Images.tsx

@@ -60,9 +60,22 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
             <Box
               key={index}
               sx={{
+                cursor: "pointer",
                 borderRadius: "5px",
                 border: `1px solid ${theme.palette.grey2.main}`,
               }}
+              onClick={(event) => {
+                event.preventDefault();
+
+                updateAnswer(
+                  currentQuestion.content.id,
+                  currentQuestion.content.variants[index].id
+                );
+
+                if (answer === currentQuestion.content.variants[index].id) {
+                  deleteAnswer(currentQuestion.content.id);
+                }
+              }}
             >
               <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
                 <Box sx={{ width: "100%", height: "300px" }}>
@@ -88,18 +101,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                   color: theme.palette.grey2.main,
                   marginTop: "10px",
                 }}
-                onClick={(event) => {
-                  event.preventDefault();
-
-                  updateAnswer(
-                    currentQuestion.content.id,
-                    currentQuestion.content.variants[index].id
-                  );
-
-                  if (answer === currentQuestion.content.variants[index].id) {
-                    deleteAnswer(currentQuestion.content.id);
-                  }
-                }}
                 value={index}
                 control={
                   <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -37,16 +37,14 @@ export const Number = ({ currentQuestion }: NumberProps) => {
     },
     1000
   );
-  const { answer } =
+  const answer = answers.find(
-    answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
-      ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;
-    ) ?? {};
 
   const min = window.Number(currentQuestion.content.range.split("—")[0]);
   const max = window.Number(currentQuestion.content.range.split("—")[1]);
 
   useEffect(() => {
-    console.log("ans", currentQuestion.content.start);
     if (answer) {
       setMinRange(answer.split("—")[0]);
       setMaxRange(answer.split("—")[1]);
@@ -76,8 +74,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           marginTop: "20px",
         }}
       >
-
+        <Slider
-<Slider
           value={
             currentQuestion.content.chooseRange
               ? answer?.split("—").length || 0 > 1
@@ -89,34 +86,35 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           max={max}
           step={currentQuestion.content.step || 1}
           sx={{
+            marginBottom: "20px",
             color: theme.palette.brightPurple.main,
             padding: "0",
             marginTop: "75px",
-            "& .MuiSlider-valueLabel":{
+            "& .MuiSlider-valueLabel": {
-                background: theme.palette.brightPurple.main,
+              background: theme.palette.brightPurple.main,
-                borderRadius: "8px",
+              borderRadius: "8px",
-                width: "60px",
+              width: "60px",
-                height: "36px"
+              height: "36px",
             },
             "& .MuiSlider-valueLabel::before": {
-                width: "6px",
+              width: "6px",
-                height: "2px",
+              height: "2px",
-                transform: "translate(-50%, 50%) rotate(90deg)",
+              transform: "translate(-50%, 50%) rotate(90deg)",
-                bottom: "-5px"
+              bottom: "-5px",
+            },
+            "& .MuiSlider-rail": {
+              backgroundColor: "#F2F3F7",
+              border: `1px solid #9A9AAF`,
+              height: "12px",
+            },
+            "& .MuiSlider-thumb": {
+              border: "3px #f2f3f7 solid",
+              height: "23px",
+              width: "23px",
+            },
+            "& .MuiSlider-track": {
+              height: "12px",
             },
-              "& .MuiSlider-rail": {
-                  backgroundColor: "#F2F3F7",
-                  border: `1px solid #9A9AAF`,
-                  height: "12px"
-              },
-              "& .MuiSlider-thumb": {
-                  border: "3px #f2f3f7 solid",
-                  height: "23px",
-                  width: "23px"
-              },
-              "& .MuiSlider-track": {
-                height: "12px"
-              }
           }}
           onChange={(_, value) => {
             const range = String(value).replace(",", "—");
@@ -152,12 +150,13 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             }}
           />
         )}
-        
+
         {currentQuestion.content.chooseRange && (
           <Box
             sx={{
               display: "flex",
               gap: "15px",
+              alignItems: "center",
               "& .MuiFormControl-root": { width: "auto" },
             }}
           >
@@ -180,9 +179,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                 "& .MuiInputBase-input": { textAlign: "center" },
               }}
             />
-
+            <Typography>до</Typography>
-            до
-            
             <CustomTextField
               placeholder="0"
               value={maxRange}
@@ -204,7 +201,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             />
           </Box>
         )}
-        
       </Box>
     </Box>
   );

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -44,12 +44,14 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
             <StarIconMini
               color={theme.palette.brightPurple.main}
               width={50}
+              sx={{ transform: "scale(1.4)" }}
             />
           }
           emptyIcon={
             <StarIconMini
               color={theme.palette.grey2.main}
               width={50}
+              sx={{ transform: "scale(1.4)" }}
             />
           }
         />

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -2,8 +2,10 @@ import {
   Box,
   Typography,
   RadioGroup,
+  FormGroup,
   FormControlLabel,
   Radio,
+  Checkbox,
   useTheme,
 } from "@mui/material";
 
@@ -27,11 +29,13 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
       ({ questionId }) => questionId === currentQuestion.content.id
     ) ?? {};
 
+  const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
+
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
       <Box sx={{ display: "flex" }}>
-        <RadioGroup
+        <Group
           name={currentQuestion.id}
           value={currentQuestion.content.variants.findIndex(
             ({ id }) => answer === id
@@ -70,25 +74,45 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
                 value={index}
                 labelPlacement="start"
                 control={
-                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+                  currentQuestion.content.multi ? (
+                    <Checkbox
+                      checked={!!answer?.includes(variant.id)}
+                      checkedIcon={<RadioCheck />}
+                      icon={<RadioIcon />}
+                    />
+                  ) : (
+                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+                  )
                 }
                 label={variant.answer}
                 onClick={(event) => {
                   event.preventDefault();
+                  const variantId = currentQuestion.content.variants[index].id;
 
-                  updateAnswer(
+                  if (currentQuestion.content.multi) {
-                    currentQuestion.content.id,
+                    const currentAnswer =
-                    currentQuestion.content.variants[index].id
+                      typeof answer !== "string" ? answer || [] : [];
-                  );
 
-                  if (answer === currentQuestion.content.variants[index].id) {
+                    updateAnswer(
+                      currentQuestion.content.id,
+                      currentAnswer?.includes(variantId)
+                        ? currentAnswer?.filter((item) => item !== variantId)
+                        : [...currentAnswer, variantId]
+                    );
+
+                    return;
+                  }
+
+                  updateAnswer(currentQuestion.content.id, variantId);
+
+                  if (answer === variantId) {
                     deleteAnswer(currentQuestion.content.id);
                   }
                 }}
               />
             ))}
           </Box>
-        </RadioGroup>
+        </Group>
         {currentQuestion.content.back && (
           <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
             <img

src/stores/quizView.ts

@@ -3,7 +3,7 @@ import { devtools } from "zustand/middleware";
 
 type Answer = {
   questionId: string;
-  answer: string;
+  answer: string | string[];
   // Поле отвечающее за первое изменение ответа, нужно для галочки "Необязательный вопрос"
   changed: boolean;
 };
@@ -25,7 +25,7 @@ export const useQuizViewStore = create<QuizViewStore>()(
 
 export const updateAnswer = (
   questionId: string,
-  answer: string,
+  answer: string | string[],
   changed = true
 ) => {
   const answers = [...useQuizViewStore.getState().answers];