удаление вопроса из списка вопросов чистит rule потомков, кнопки с карандашиком, ветвление подсвечивает вопрос и ноду

This commit is contained in:
Nastya 2023-12-06 02:34:40 +03:00
parent 5ce160f14f
commit 253361120e
12 changed files with 228 additions and 86 deletions

@ -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<HTMLDivElement | null>(null);
const gearsContainer = useRef<HTMLDivElement | null>(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
/>
{/* <button onClick={() => {
console.log("NODES____________________________")

@ -83,7 +83,7 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
</Typography>
</Box>
</Box>
{ openBranchingPanel === true && <QuestionsList /> }
{ openBranchingPanel && <QuestionsList /> }
</Box>
);
};

@ -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 {
@ -42,24 +41,7 @@ export default function ButtonsOptions({
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
const quiz = useCurrentQuiz();
const {openBranchingPanel} = useQuestionsStore.getState()
const openedModal = () => {
updateOpenedModalSettingsId(question.id)
};
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)
}
}
const { openBranchingPanel } = useQuestionsStore.getState()
const buttonSetting: {
icon: JSX.Element;
@ -97,7 +79,10 @@ const {openBranchingPanel} = useQuestionsStore.getState()
),
title: "Ветвление",
value: "branching",
myFunc: () => handleClickBranching(question.id, openBranchingPanel),
myFunc: (question) => {
updateOpenBranchingPanel(true)
updateDesireToOpenABranchingModal(question.content.id)
}
},
];
@ -173,7 +158,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
key={title}
onClick={() => {
SSHC(value);
myFunc();
myFunc(question);
}}
sx={{
backgroundColor:

@ -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 (
<Box
sx={{
@ -205,7 +190,8 @@ export default function ButtonsOptionsAndPict({
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
handleClickBranching(question.id, openBranchingPanel)
updateOpenBranchingPanel(true)
updateDesireToOpenABranchingModal(question.content.id)
}}
sx={{
height: "30px",

@ -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 (
<Draggable draggableId={question.id.toString()} index={index}>

@ -68,6 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
return (
<>
<Paper
id={question.content.id}
data-cy="quiz-question-card"
sx={{
maxWidth: "796px",

@ -3,21 +3,20 @@ import {
Box,
} from "@mui/material";
import { DraggableList } from "./DraggableList";
import { BranchingPanel } from "./BranchingPanel";
import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
import { BranchingMap } from "./BranchingMap";
import { updateOpenBranchingPanel } from "@root/questions/actions";
import {useQuestionsStore} from "@root/questions/store";
export const QuestionSwitchWindowTool = () => {
const {openBranchingPanel} = useQuestionsStore.getState()
console.log(openBranchingPanel)
return (
<Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
<Box sx={{ flexBasis: "796px" }}>
{openBranchingPanel? <BranchingMap /> : <DraggableList />}
</Box>
<BranchingPanel
<SwitchBranchingPanel
/>
</Box>
)

@ -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() {
<>
<Box
ref={ref}
id="QuestionsPage"
sx={{
maxWidth: "796px",
width: "100%",
@ -84,21 +86,7 @@ export default function QuestionsPage() {
<AddPlus />
</IconButton>
<Button
onClick={() => {
ref.current?.scrollIntoView({
behavior: 'smooth'
}
)}}
sx={{
display: isMobile ? "none" : "block",
position: "fixed",
right: isMobile ? "60px" : "400px",
bottom: "75px",
}}
>
вверх
</Button>
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
<Button
variant="outlined"

@ -1,13 +1,15 @@
import { useParams } from "react-router-dom";
import { Box, Button, Typography } from "@mui/material";
import { Box, Button, IconButton, Typography } from "@mui/material";
import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
import { useQuestionsStore } from "@root/questions/store";
import { updateDragQuestionContentId } from "@root/questions/actions";
import { useEffect } from "react";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
import {updateOpenBranchingPanel, updateEditSomeQuestion} from "@root/questions/actions"
const getItemStyle = (isDragging:any, draggableStyle:any) => ({
const getItemStyle = (isDragging: any, draggableStyle: any) => ({
// some basic styles to make the items look a bit nicer
userSelect: "none",
padding: 5 * 2,
@ -22,7 +24,7 @@ const getItemStyle = (isDragging:any, draggableStyle:any) => ({
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
export const QuestionsList = () => {
const { questions } = useQuestionsStore()
const { questions, desireToOpenABranchingModal } = useQuestionsStore()
return (
<Box sx={{ padding: "15px" }}>
@ -51,11 +53,11 @@ export const QuestionsList = () => {
}}
>
{/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
{questions.filter((q:AnyQuestion) => q.type).map(({ title, id, content }, index) => (
<Button
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
if (!content.rule.parentId) updateDragQuestionContentId(content.id)
}}
{questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => (
<Button
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
if (!content.rule.parentId) updateDragQuestionContentId(content.id)
}}
key={index}
sx={{
width: "100%",
@ -66,6 +68,7 @@ export const QuestionsList = () => {
padding: "12px",
background: "#FFFFFF",
borderRadius: "8px",
border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none",
marginBottom: "20px",
boxShadow: "0px 10px 30px #e7e7e7",
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
@ -73,13 +76,21 @@ export const QuestionsList = () => {
"&:last-child": { marginBottom: 0 },
}}
>
<Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
<Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
{title || "нет заголовка"}
</Typography>
<IconButton
onClick={() => {
updateOpenBranchingPanel(false)
updateEditSomeQuestion(content.id)
}}
>
<Pencil />
</IconButton>
{content.rule.parentId && <CheckedIcon />}
</Button>
))}
</Box>
</Box>

@ -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 (
<Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
padding: "18px",
background: "#fff",
borderRadius: "12px",
boxShadow: "0px 10px 30px #e7e7e7",
}}
>
<Switch
value={openBranchingPanel}
onChange={(_, value) => {
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,
}),
},
}}
/>
<Box>
<Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
Логика ветвления
</Typography>
<Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
Настройте связи между вопросами
</Typography>
</Box>
</Box>
{ openBranchingPanel && <QuestionsList /> }
</Box>
);
};

@ -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<typeof setTimeout>;
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 })
}

@ -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<QuestionsStore>()(