Merge branch 'dev' of penahub.gitlab.yandexcloud.net:frontend/squiz into answers-settings

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -157,6 +157,12 @@ function CsComponent({
   }, [modalQuestionTargetContentId])
 
   const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
+
+    
+    //запрещаем работу родителя-ребенка если это один и тот же вопрос
+    if (parentNodeContentId === targetNodeContentId) return
+
+
     const cy = cyRef?.current
     const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
     //если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа

src/pages/Questions/BranchingPanel/index.tsx

@@ -26,7 +26,7 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
         }}
       >
         <Switch
-          value={openBranchingPanel}
+            clicked={openBranchingPanel}
           onChange={(_, value) => {
               updateOpenBranchingPanel(value)
           }}

src/pages/Questions/Emoji/settingEmoji.tsx

@@ -85,11 +85,12 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
                 <CustomCheckbox
                     sx={{ mr: isMobile ? "0px" : "16px" }}
                     label={"Необязательный вопрос"}
-                    checked={!question.required}
-                    handleChange={(e) => updateQuestion(question.id, question => {
+                    checked={question.content.required}
+                    handleChange={({ target }) => updateQuestion(question.id, question => {
                         if (question.type !== "emoji") return;
 
-                        question.content.required = !e.target.checked;
+                        console.log(target.checked)
+                        question.content.required = target.checked;
                     })}
                 />
                 <Box

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -1,6 +1,6 @@
 
 import {
-    Box,
+    Box, useMediaQuery, useTheme,
 } from "@mui/material";
 import { DraggableList } from "./DraggableList";
 import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
@@ -10,9 +10,11 @@ import {useQuestionsStore} from "@root/questions/store";
 
 export const QuestionSwitchWindowTool = () => {
     const {openBranchingPanel, questions} = useQuestionsStore.getState()
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(600));
     console.log("questions ", questions)
     return (
-                <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
+                <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap", marginBottom: isMobile ? "20px" : undefined  }}>
                 <Box sx={{ flexBasis: "796px" }}>
                     {openBranchingPanel? <BranchingMap /> : <DraggableList />}
                 </Box>

src/pages/Questions/SwitchBranchingPanel/index.tsx

@@ -25,7 +25,7 @@ export const SwitchBranchingPanel = () => {
         }}
       >
         <Switch
-          value={openBranchingPanel}
+          clicked={openBranchingPanel}
           onChange={(_, value) => {
               updateOpenBranchingPanel(value)
           }}

src/pages/ViewPublicationPage/questions/File.tsx

@@ -41,6 +41,32 @@ export const File = ({ currentQuestion }: FileProps) => {
           maxWidth: answer?.split("|")[0] ? "640px" : "550px"
         }}
       >
+          {answer?.split("|")[0] && (
+              <Box sx={{display: "flex", alignItems: "center", gap: "15px"}}>
+                  <Typography>Вы загрузили:</Typography>
+                  <Box sx={{padding: "5px 5px 5px 16px", backgroundColor: theme.palette.brightPurple.main,
+                      borderRadius: "8px",
+                      color: "#FFFFFF",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "15px"
+                  }}>
+                      <Typography>
+                          {answer?.split("|")[0]}
+                      </Typography>
+                      <IconButton
+                          sx={{p: 0}}
+                          onClick={() => {updateAnswer(currentQuestion.content.id, "");}}
+                      >
+                          <X/>
+                      </IconButton>
+                  </Box>
+
+              </Box>
+
+          )}
+
+          {!answer?.split("|")[0] && (
               <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
                   <input
                       onChange={uploadFile}
@@ -49,8 +75,42 @@ export const File = ({ currentQuestion }: FileProps) => {
                       multiple
                       type="file"
                   />
-          <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
+                  <Box
+                      onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
+                      sx={{
+                          width: "100%",
+                          height: "120px",
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          padding: "33px 44px 33px 55px",
+                          backgroundColor: theme.palette.background.default,
+                          border: `1px solid ${theme.palette.grey2.main}`,
+                          borderRadius: "8px",
+                      }}
+                  >
+                      <UploadIcon />
+                      <Box>
+                          <Typography
+                              sx={{
+                                  color: theme.palette.grey2.main,
+                                  fontWeight: 500
+                              }}
+                          >Добавить видео</Typography>
+                          <Typography
+                              sx={{
+                                  color: theme.palette.grey2.main,
+                                  fontSize: "16px",
+                                  lineHeight: "19px",
+                              }}
+                          >
+                              Принимает .mp4 и .mov формат — максимум 100мб
+                          </Typography>
+                      </Box>
+
+                  </Box>
               </ButtonBase>
+          )}
           {answer && currentQuestion.content.type === "picture" && (
           <img
             src={answer.split("|")[1]}
@@ -73,11 +133,6 @@ export const File = ({ currentQuestion }: FileProps) => {
             }}
           />
         )}
-        {answer?.split("|")[0] && (
-          <Typography sx={{ marginTop: "15px" }}>
-            {answer?.split("|")[0]}
-          </Typography>
-        )}
       </Box>
     </Box>
   );

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -7,6 +7,7 @@ import CustomTextField from "@ui_kit/CustomTextField";
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
 
 import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
+import {CustomSlider} from "@ui_kit/CustomSlider";
 
 type NumberProps = {
   currentQuestion: QuizQuestionNumber;

src/pages/startPage/EditPage.tsx

@@ -213,7 +213,7 @@ export default function EditPage() {
                     sx={{
                         background: theme.palette.background.default,
                         width: "100%",
-                        padding: isMobile ? "16px" : "25px",
+                        padding: isMobile ? "16px 16px 140px 16px" : "25px",
                         height: "calc(100vh - 80px)",
                         overflow: "auto",
                         boxSizing: "border-box",
@@ -258,7 +258,7 @@ export default function EditPage() {
                             }}
                         >
                             <Switch
-                                value={openBranchingPanel}
+                                clicked={openBranchingPanel}
                                 onChange={(_, value) => {
                                     updateOpenBranchingPanel(value)
                                 }}
@@ -310,9 +310,6 @@ export default function EditPage() {
                                 <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
                                     Логика ветвления
                                 </Typography>
-                                <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
-                                    Настройте связи между вопросами
-                                </Typography>
                             </Box>
                         </Box>
                         <Button