From 5ce160f14f15babaece0069e4af2e91d7eab5cab Mon Sep 17 00:00:00 2001 From: Tamara Date: Wed, 6 Dec 2023 01:59:15 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=BF=D0=BB=D0=B0=D1=88=D0=BA=D0=B0=20?= =?UTF-8?q?=D1=81=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0?= =?UTF-8?q?=D1=82=D0=B5=D0=BB=D0=B5=D0=BC=20=D1=81=20=D0=B2=D0=B5=D1=82?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=B0=20=D0=B2?= =?UTF-8?q?=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D1=8B=20=D0=BD=D0=B0=20=D0=BF?= =?UTF-8?q?=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D0=B2=20=D0=BC=D0=BE=D0=B1?= =?UTF-8?q?=D0=B8=D0=BB=D0=BA=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Questions/BranchingPanel/index.tsx | 22 +----- src/pages/startPage/StartPage.tsx | 83 ++++++++++++++++++-- src/ui_kit/Sidebar.tsx | 1 + 3 files changed, 82 insertions(+), 24 deletions(-) diff --git a/src/pages/Questions/BranchingPanel/index.tsx b/src/pages/Questions/BranchingPanel/index.tsx index 254d9edd..95f926aa 100644 --- a/src/pages/Questions/BranchingPanel/index.tsx +++ b/src/pages/Questions/BranchingPanel/index.tsx @@ -1,4 +1,4 @@ -import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material"; +import {Box, Typography, Switch, useTheme, Button, useMediaQuery, SxProps, Theme} from "@mui/material"; import { QuestionsList } from "./QuestionsList"; import { updateOpenBranchingPanel } from "@root/questions/actions"; @@ -6,7 +6,7 @@ import {useQuestionsStore} from "@root/questions/store"; import {useRef} from "react"; -export const BranchingPanel = () => { +export const BranchingPanel = (sx?: SxProps) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const {openBranchingPanel} = useQuestionsStore.getState() @@ -22,12 +22,13 @@ export const BranchingPanel = () => { background: "#fff", borderRadius: "12px", boxShadow: "0px 10px 30px #e7e7e7", + ...sx }} > { - updateOpenBranchingPanel(!value) + updateOpenBranchingPanel(value) }} sx={{ width: 50, @@ -81,21 +82,6 @@ export const BranchingPanel = () => { Настройте связи между вопросами - { openBranchingPanel === true && } 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, + }), + }, + }} + /> + + + Логика ветвления + + + Настройте связи между вопросами + + + + - - + + ))} 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/stores/questions/actions.ts b/src/stores/questions/actions.ts index c552ac83..6d8c0b13 100644 --- a/src/stores/questions/actions.ts +++ b/src/stores/questions/actions.ts @@ -308,8 +308,8 @@ export const createTypedQuestion = async ( }); export const deleteQuestion = async (questionId: string, quizId: string) => requestQueue.enqueue(async () => { - - const question = useQuestionsStore.getState().questions.find(q => q.id === questionId); + const { questions } = useQuestionsStore.getState() + const question = questions.find(q => q.id === questionId); if (!question) return; if (question.type === null) { @@ -322,6 +322,27 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам updateRootContentId(quizId, "") clearRoleForAll() + } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очищаем его потомков + const clearQuestions = [] as string[] + + const getChildren = (parentQuestion: AnyTypedQuizQuestion) => { + questions.forEach((targetQuestion) => { + if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его + if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id) + getChildren(targetQuestion) //и ищем его потомков + } + }) + } + getChildren(question) + //чистим потомков от инфы ветвления + clearQuestions.forEach((id) => { + updateQuestion(id, question => { + question.content.rule.parentId = "" + question.content.rule.main = [] + question.content.rule.default = "" + }) + }) + } removeQuestion(questionId); @@ -394,7 +415,7 @@ export const getQuestionByContentId = (questionContentId: string | null) => { if (questionContentId === null) return null; return useQuestionsStore.getState().questions.find(q => { if (q.type === null) return false; - + return (q.content.id === questionContentId); }) || null; }; @@ -417,4 +438,20 @@ export const clearRoleForAll = () => { }); } -export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value}); +export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({ openBranchingPanel: value }); + + +let UDTOABM: ReturnType; +export const updateDesireToOpenABranchingModal = (contentId: string) => { + useQuestionsStore.setState({ desireToOpenABranchingModal: contentId }) + clearTimeout(UDTOABM) + UDTOABM = setTimeout(() => { + useQuestionsStore.setState({ desireToOpenABranchingModal: null }) + }, 7000) +} +export const clearDesireToOpenABranchingModal = () => { + useQuestionsStore.setState({ desireToOpenABranchingModal: null }) +} +export const updateEditSomeQuestion = (contentId?: string) => { + useQuestionsStore.setState({ editSomeQuestion: contentId === undefined ? null : contentId }) +} \ No newline at end of file diff --git a/src/stores/questions/store.ts b/src/stores/questions/store.ts index c669606d..7ea73ee8 100644 --- a/src/stores/questions/store.ts +++ b/src/stores/questions/store.ts @@ -8,6 +8,8 @@ export type QuestionsStore = { openedModalSettingsId: string | null; dragQuestionContentId: string | null; openBranchingPanel: boolean; + desireToOpenABranchingModal: string | null; + editSomeQuestion: string | null; }; const initialState: QuestionsStore = { @@ -15,6 +17,9 @@ const initialState: QuestionsStore = { openedModalSettingsId: null as null, dragQuestionContentId: null, openBranchingPanel: false, + desireToOpenABranchingModal: null as null, + editSomeQuestion: null as null, + }; export const useQuestionsStore = create()(