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 /> {/* - - + + ))} 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/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx index 2e11952d..90ce11c7 100644 --- a/src/pages/ViewPublicationPage/Footer.tsx +++ b/src/pages/ViewPublicationPage/Footer.tsx @@ -19,13 +19,69 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => { const [disabledQuestionsId, setDisabledQuestionsId] = useState>( new Set() ); + const [disablePreviousButton, setDisablePreviousButton] = + useState(false); + const [disableNextButton, setDisableNextButton] = useState(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) { - let readyBeNextQuestion = ""; + const nextQuestionId = getNextQuestionId(); - question.content.rule.main.forEach(({ next, rules }) => { + if (nextQuestionId) { + const nextQuestion = getQuestionByContentId(nextQuestionId); - let longerArray = Math.max( - rules[0].answers.length, - [answers.at(-1)?.answer].length - ); - - 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("не могу получить последующий вопрос"); - } + if (nextQuestion?.type) { + setCurrentQuestion(nextQuestion); + return; } else { - const nextQuestion = getQuestionByContentId( - question.content.rule.default - ); - if (nextQuestion) { - setCurrentQuestion(nextQuestion); - } else { - enqueueSnackbar("не могу получить последующий вопрос (дефолтный)"); - } + enqueueSnackbar("не могу получить последующий вопрос"); + } + } else { + const nextQuestion = getQuestionByContentId( + question.content.rule.default + ); + if (nextQuestion?.type) { + setCurrentQuestion(nextQuestion); + } else { + enqueueSnackbar("не могу получить последующий вопрос (дефолтный)"); } } }; @@ -128,6 +164,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => { */}