feat: DeleteNodeModal

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -20,6 +20,9 @@ import {
 } from "@root/questions/actions";
 import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
 import { cleardragQuestionContentId } from "@root/uiTools/actions";
+import { updateDeleteId } from "@root/uiTools/actions";
+
+import { DeleteNodeModal } from "../DeleteNodeModal";
 
 import { useRemoveNode } from "./hooks/useRemoveNode";
 import { usePopper } from "./hooks/usePopper";
@@ -229,7 +232,7 @@ function CsComponent({
 
   useEffect(() => {
     if (startRemove) {
-      removeNode(startRemove);
+      updateDeleteId(startRemove);
       setStartRemove("");
     }
   }, [startRemove]);
@@ -293,6 +296,7 @@ function CsComponent({
         }}
         autoungrabify={true}
       />
+      <DeleteNodeModal />
       {/* <button onClick={() => {
         console.log("NODES____________________________")
         cyRef.current?.elements().forEach((ele: any) => {

src/pages/Questions/BranchingMap/index.tsx

@@ -2,40 +2,53 @@ import { Box } from "@mui/material";
 import { FirstNodeField } from "./FirstNodeField";
 import CsComponent from "./CsComponent";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import {BranchingQuestionsModal} from "../BranchingQuestionsModal"
+import { BranchingQuestionsModal } from "../BranchingQuestionsModal";
 import { useUiTools } from "@root/uiTools/store";
 
-
 export const BranchingMap = () => {
   const quiz = useCurrentQuiz();
-  const { dragQuestionContentId } = useUiTools()
+  const { dragQuestionContentId } = useUiTools();
-  const [modalQuestionParentContentId, setModalQuestionParentContentId] = useState<string>("")
+  const [modalQuestionParentContentId, setModalQuestionParentContentId] =
-  const [modalQuestionTargetContentId, setModalQuestionTargetContentId] = useState<string>("")
+    useState<string>("");
-  const [openedModalQuestions, setOpenedModalQuestions] = useState<boolean>(false)
+  const [modalQuestionTargetContentId, setModalQuestionTargetContentId] =
+    useState<string>("");
+  const [openedModalQuestions, setOpenedModalQuestions] =
+    useState<boolean>(false);
 
   return (
-      <Box
+    <Box
-        id="cytoscape-container"
+      id="cytoscape-container"
-        sx={{
+      sx={{
-          overflow: "hidden",
+        overflow: "hidden",
-          padding: "20px",
+        padding: "20px",
-          background: "#FFFFFF",
+        background: "#FFFFFF",
-          borderRadius: "12px",
+        borderRadius: "12px",
-          boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
-          marginBottom: "40px",
+        marginBottom: "40px",
-          height: "568px",
+        height: "568px",
-          border: dragQuestionContentId === null ? "none" : "#7e2aea 2px dashed"
+        border: dragQuestionContentId === null ? "none" : "#7e2aea 2px dashed",
-        }}
+      }}
-      >
+    >
-
+      {quiz?.config.haveRoot ? (
-        {
+        <CsComponent
-          quiz?.config.haveRoot ?
+          modalQuestionParentContentId={modalQuestionParentContentId}
-          <CsComponent modalQuestionParentContentId={modalQuestionParentContentId} modalQuestionTargetContentId={modalQuestionTargetContentId} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionParentContentId={setModalQuestionParentContentId} setModalQuestionTargetContentId={setModalQuestionTargetContentId}/>
+          modalQuestionTargetContentId={modalQuestionTargetContentId}
-          :
+          setOpenedModalQuestions={setOpenedModalQuestions}
-          <FirstNodeField setOpenedModalQuestions={setOpenedModalQuestions} modalQuestionTargetContentId={modalQuestionTargetContentId}/>
+          setModalQuestionParentContentId={setModalQuestionParentContentId}
-        }
+          setModalQuestionTargetContentId={setModalQuestionTargetContentId}
-        <BranchingQuestionsModal openedModalQuestions={openedModalQuestions} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionTargetContentId={setModalQuestionTargetContentId} />
+        />
-      </Box>
+      ) : (
+        <FirstNodeField
+          setOpenedModalQuestions={setOpenedModalQuestions}
+          modalQuestionTargetContentId={modalQuestionTargetContentId}
+        />
+      )}
+      <BranchingQuestionsModal
+        openedModalQuestions={openedModalQuestions}
+        setOpenedModalQuestions={setOpenedModalQuestions}
+        setModalQuestionTargetContentId={setModalQuestionTargetContentId}
+      />
+    </Box>
   );
 };

src/pages/Questions/BranchingQuestionsModal/index.tsx

@@ -23,10 +23,14 @@ export const BranchingQuestionsModal = ({
   };
 
   const typedQuestions: AnyTypedQuizQuestion[] = questions.filter(
-    (question) => question.type && !question.content.rule.parentId && question.type !== "result"
+    (question) =>
+      question.type &&
+      !question.content.rule.parentId &&
+      question.type !== "result"
   ) as AnyTypedQuizQuestion[];
 
-  if (typedQuestions.length === 0) return <></>
+  if (typedQuestions.length === 0) return <></>;
+
   return (
     <Modal open={openedModalQuestions} onClose={handleClose}>
       <Box
@@ -42,7 +46,7 @@ export const BranchingQuestionsModal = ({
           borderRadius: "12px",
           boxShadow: 24,
           padding: "30px 0",
-          height: "80vh"
+          height: "80vh",
         }}
       >
         <Box sx={{ margin: "0 auto", maxWidth: "350px" }}>

src/pages/Questions/DeleteNodeModal/index.tsx

@@ -0,0 +1,122 @@
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  Link,
+  Modal,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+  useTheme,
+  Checkbox,
+} from "@mui/material";
+import { enqueueSnackbar } from "notistack";
+import {
+  AnyTypedQuizQuestion,
+  createBranchingRuleMain,
+} from "../../../model/questionTypes/shared";
+import { Select } from "../Select";
+
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
+import InfoIcon from "@icons/Info";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+
+import {
+  getQuestionById,
+  getQuestionByContentId,
+  updateQuestion,
+} from "@root/questions/actions";
+import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
+import { useUiTools } from "@root/uiTools/store";
+
+export const DeleteNodeModal = () => {
+  const { deleteNodeId } = useUiTools();
+  const targetQuestion = getQuestionById(deleteNodeId);
+
+  const saveData = () => {
+    // if (parentQuestion !== null) {
+    //   updateQuestion(
+    //     parentQuestion.content.id,
+    //     (question) => (question.content = parentQuestion.content)
+    //   );
+    // }
+    // handleClose();
+  };
+
+  const handleClose = () => {
+    updateOpenedModalSettingsId();
+  };
+
+  return (
+    <>
+      <Modal open={!!deleteNodeId} onClose={handleClose}>
+        <Box
+          sx={{
+            position: "absolute",
+            overflow: "hidden",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            maxWidth: "620px",
+            width: "100%",
+            bgcolor: "background.paper",
+            borderRadius: "12px",
+            boxShadow: 24,
+            p: 0,
+          }}
+        >
+          <Box
+            sx={{
+              boxSizing: "border-box",
+              background: "#F2F3F7",
+              height: "70px",
+              padding: "0 25px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Box sx={{ color: "#4d4d4d" }}>
+              <Typography component="span">{targetQuestion?.title}</Typography>
+            </Box>
+            <Tooltip
+              title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          </Box>
+
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "end",
+              gap: "10px",
+              margin: "20px",
+            }}
+          >
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              sx={{ width: "100%", maxWidth: "130px" }}
+            >
+              Отмена
+            </Button>
+            <Button
+              variant="contained"
+              sx={{ width: "100%", maxWidth: "130px" }}
+              onClick={saveData}
+            >
+              Готово
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  );
+};

src/stores/uiTools/actions.ts

@@ -31,4 +31,5 @@ export const updateEditSomeQuestion = (contentId?: string) => {
 };
 
 
-export const updateOpenedModalSettingsId = (id?: string) => useUiTools.setState({ openedModalSettingsId: id ? id : null });
+export const updateOpenedModalSettingsId = (id?: string) => useUiTools.setState({ openedModalSettingsId: id ? id : null });
+export const updateDeleteId = (deleteNodeId: string | null = null) => useUiTools.setState({ deleteNodeId });

src/stores/uiTools/store.ts

@@ -1,32 +1,30 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
-
 export type UiTools = {
-    openedModalSettingsId: string | null;
+  openedModalSettingsId: string | null;
-    dragQuestionContentId: string | null;
+  dragQuestionContentId: string | null;
-    openBranchingPanel: boolean;
+  openBranchingPanel: boolean;
-    desireToOpenABranchingModal: string | null;
+  desireToOpenABranchingModal: string | null;
-    editSomeQuestion: string | null;
+  editSomeQuestion: string | null;
-    lastDeletionNodeTime: number | null;
+  lastDeletionNodeTime: number | null;
+  deleteNodeId: string | null;
 };
 
 const initialState: UiTools = {
-    openedModalSettingsId: null,
+  openedModalSettingsId: null,
-    dragQuestionContentId: null,
+  dragQuestionContentId: null,
-    openBranchingPanel: false,
+  openBranchingPanel: false,
-    desireToOpenABranchingModal: null,
+  desireToOpenABranchingModal: null,
-    editSomeQuestion: null,
+  editSomeQuestion: null,
-    lastDeletionNodeTime: null
+  lastDeletionNodeTime: null,
+  deleteNodeId: null,
 };
 
 export const useUiTools = create<UiTools>()(
-    devtools(
+  devtools(() => initialState, {
-        () => initialState,
+    name: "UiTools",
-        {
+    enabled: process.env.NODE_ENV === "development",
-            name: "UiTools",
+    trace: process.env.NODE_ENV === "development",
-            enabled: process.env.NODE_ENV === "development",
+  })
-            trace: process.env.NODE_ENV === "development",
-        }
-    )
 );