diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx index 909a48e7..a3c3dc0a 100644 --- a/src/pages/Questions/BranchingMap/CsComponent.tsx +++ b/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(null); const gearsContainer = useRef(null); - useLayoutEffect(() => { - updateOpenedModalSettingsId() - }, []) + useLayoutEffect(() => { +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 /> {/* - { openBranchingPanel === true && } + { openBranchingPanel && } ); }; diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index a2472488..63698876 100644 --- 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, 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 {useQuestionsStore} from "@root/questions/store"; +import { enqueueSnackbar } from "notistack"; +import { useQuestionsStore } from "@root/questions/store"; interface Props { @@ -41,8 +40,8 @@ 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 {openBranchingPanel} = useQuestionsStore.getState() const openedModal = () => { updateOpenedModalSettingsId(question.id) }; @@ -98,7 +97,10 @@ const {openBranchingPanel} = useQuestionsStore.getState() ), title: "Ветвление", value: "branching", - myFunc: () => handleClickBranching(question.id, openBranchingPanel), + myFunc: (question) => { + updateOpenBranchingPanel(true) + updateDesireToOpenABranchingModal(question.content.id) + } }, ]; @@ -174,7 +176,7 @@ const {openBranchingPanel} = useQuestionsStore.getState() key={title} onClick={() => { SSHC(value); - myFunc(); + myFunc(question); }} sx={{ backgroundColor: diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 6e7ec85a..470acd5c 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/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 {useQuestionsStore} from "@root/questions/store"; +import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions"; +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,21 +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) - } - - } - return ( setButtonHover("branching")} onMouseLeave={() => setButtonHover("")} onClick={() => { - handleClickBranching(question.id, openBranchingPanel) + updateOpenBranchingPanel(true) + updateDesireToOpenABranchingModal(question.content.id) }} sx={{ height: "30px", diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx index d1559299..c4021581 100644 --- a/src/pages/Questions/DraggableList/DraggableListItem.tsx +++ b/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 ( diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 1a64c47b..34de3139 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -68,6 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging return ( <> { const {openBranchingPanel} = useQuestionsStore.getState() +console.log(openBranchingPanel) return ( {openBranchingPanel? : } - ) diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index cd9913d4..54235391 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -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,7 +27,8 @@ export default function QuestionsPage() { const quiz = useCurrentQuiz(); const {openBranchingPanel} = useQuestionsStore.getState() useLayoutEffect(() => { - updateOpenBranchingPanel(true) + updateOpenBranchingPanel(false) + updateEditSomeQuestion() },[]) const ref = useRef() @@ -38,6 +39,7 @@ export default function QuestionsPage() { <> - + - - + + ))} diff --git a/src/pages/Questions/SwitchBranchingPanel/index.tsx b/src/pages/Questions/SwitchBranchingPanel/index.tsx new file mode 100644 index 00000000..3191dad0 --- /dev/null +++ b/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 ( + + + { + 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, + }), + }, + }} + /> + + + Логика ветвления + + + Настройте связи между вопросами + + + + + { openBranchingPanel && } + + ); +}; diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index 75031c12..253ddd46 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -9,8 +9,8 @@ import { Button, Container, FormControl, - IconButton, - TextField, + IconButton, Switch, + 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(false); - + const {openBranchingPanel} = useQuestionsStore.getState() const quizConfig = quiz?.config; useEffect(() => { @@ -228,9 +230,9 @@ export default function StartPage() { + + { + 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, + }), + }, + }} + /> + + + Логика ветвления + + + Настройте связи между вопросами + + +