Merge branch 'dev' into startpage-preview-fix

2023-12-12 19:02:26 +03:00 · 2023-12-12 19:02:26 +03:00 · 24e6084d48
commit 24e6084d48
parent dfe85edc67 11200a38ca
12 changed files with 448 additions and 520 deletions
--- a/src/pages/Questions/BranchingMap/CsComponent.tsx
+++ b/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('mouseup',() => {
+        cy?.on('mousedown', () => { pressed = true })
+        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 xc = crossesContainer.current
-          const lc = layoutsContainer.current
-          if (pc) pc.style.display = 'none'
-          if (xc) xc.style.display = 'none'
-          if (lc) lc.style.display = 'block'
+            const pc = plusesContainer.current
+            const xc = crossesContainer.current
+            const lc = layoutsContainer.current
+            if (pc) pc.style.display = 'none'
+            if (xc) xc.style.display = 'none'
+            if (lc) lc.style.display = 'block'
          }
-          });
- 
+        });
+
        cy?.on("zoom render", onZoom);
      });
  };
@ -785,7 +786,7 @@ let pressed = false
        variant="text"
        onClick={() => {

-          //код сюда
+          cyRef.current?.fit()

        }}
      >
--- a/src/pages/Questions/BranchingMap/FirstNodeField.tsx
+++ b/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("Нет информации о взятом опроснике")
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/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)
--- a/src/pages/ResultPage/ResultSettings.tsx
+++ b/src/pages/ResultPage/ResultSettings.tsx
@ -33,7 +33,6 @@ export const ResultSettings = () => {
        isReadyToLeave = false;
      }
    });
-    console.log(`setting isReadyToLeaveRef to ${isReadyToLeave}`);
    isReadyToLeaveRef.current = isReadyToLeave;
  }, [results])

--- a/src/pages/ViewPublicationPage/questions/Date.tsx
+++ b/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 } =
-    answers.find(
-      ({ questionId }) => questionId === currentQuestion.content.id
-    ) ?? {};
+  const answer = answers.find(
+    ({ 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={{
-                openPickerIcon: () => <CalendarIcon />,
-            }}
-          selected={
+          slots={{
+            openPickerIcon: () => <CalendarIcon />,
+          }}
+          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={{
-                openPickerButton: {
-                    sx: {
-                        p: 0,
-                    },
-                    "data-cy": "open-datepicker",
-                },
-            }}
-            sx={{
-                "& .MuiInputBase-root": {
-                    backgroundColor: "#F2F3F7",
-                    borderRadius: "10px",
-                    maxWidth: "250px",
-                    pr: "22px",
-                    "& input": {
-                        py: "11px",
-                        pl: "20px",
-                        lineHeight: "19px",
-                    },
-                    "& fieldset": {
-                        borderColor: "#9A9AAF",
-                    },
-                },
-            }}
+            );
+          }}
+          slotProps={{
+            openPickerButton: {
+              sx: {
+                p: 0,
+              },
+              "data-cy": "open-datepicker",
+            },
+          }}
+          sx={{
+            "& .MuiInputBase-root": {
+              backgroundColor: "#F2F3F7",
+              borderRadius: "10px",
+              maxWidth: "250px",
+              pr: "22px",
+              "& input": {
+                py: "11px",
+                pl: "20px",
+                lineHeight: "19px",
+              },
+              "& fieldset": {
+                borderColor: "#9A9AAF",
+              },
+            },
+          }}
        />
      </Box>
    </Box>
--- a/src/pages/ViewPublicationPage/questions/File.tsx
+++ b/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]}
--- a/src/pages/ViewPublicationPage/questions/Images.tsx
+++ b/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 />} />
--- a/src/pages/ViewPublicationPage/questions/Number.tsx
+++ b/src/pages/ViewPublicationPage/questions/Number.tsx
@ -37,16 +37,14 @@ export const Number = ({ currentQuestion }: NumberProps) => {
    },
    1000
  );
-  const { answer } =
-    answers.find(
-      ({ questionId }) => questionId === currentQuestion.content.id
-    ) ?? {};
+  const answer = answers.find(
+    ({ 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":{
-                background: theme.palette.brightPurple.main,
-                borderRadius: "8px",
-                width: "60px",
-                height: "36px"
+            "& .MuiSlider-valueLabel": {
+              background: theme.palette.brightPurple.main,
+              borderRadius: "8px",
+              width: "60px",
+              height: "36px",
            },
            "& .MuiSlider-valueLabel::before": {
-                width: "6px",
-                height: "2px",
-                transform: "translate(-50%, 50%) rotate(90deg)",
-                bottom: "-5px"
+              width: "6px",
+              height: "2px",
+              transform: "translate(-50%, 50%) rotate(90deg)",
+              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>
  );
--- a/src/pages/ViewPublicationPage/questions/Rating.tsx
+++ b/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)" }}
            />
          }
        />
--- a/src/pages/ViewPublicationPage/questions/Variant.tsx
+++ b/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(
-                    currentQuestion.content.id,
-                    currentQuestion.content.variants[index].id
-                  );
+                  if (currentQuestion.content.multi) {
+                    const currentAnswer =
+                      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
--- a/src/stores/quizView.ts
+++ b/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];
--- a/yarn.lock
+++ b/yarn.lock