feat: DeleteNodeModal
This commit is contained in:
parent
25bdf1ba87
commit
78b9d66831
@ -24,6 +24,7 @@
|
||||
"cypress-file-upload": "^5.0.8",
|
||||
"cytoscape": "^3.26.0",
|
||||
"cytoscape-popper": "^2.0.0",
|
||||
"date-fns": "^3.0.4",
|
||||
"dayjs": "^1.11.10",
|
||||
"emoji-mart": "^5.5.2",
|
||||
"file-saver": "^2.0.5",
|
||||
|
@ -130,7 +130,9 @@ function CsComponent({
|
||||
if (Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
|
||||
clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||||
cy?.data('changed', true)
|
||||
createFrontResult(quiz?.backendId, targetQuestion.content.id)
|
||||
if (quiz) {
|
||||
createFrontResult(quiz.backendId, targetQuestion.content.id)
|
||||
}
|
||||
const es = cy?.add([
|
||||
{
|
||||
data: {
|
||||
@ -264,14 +266,16 @@ function CsComponent({
|
||||
}}
|
||||
autoungrabify={true}
|
||||
/>
|
||||
<DeleteNodeModal />
|
||||
<DeleteNodeModal removeNode={removeNode} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function Clear() {
|
||||
const quiz = useCurrentQuiz();
|
||||
updateRootContentId(quiz?.id, "")
|
||||
if (quiz) {
|
||||
updateRootContentId(quiz?.id, "");
|
||||
}
|
||||
clearRuleForAll()
|
||||
return <></>
|
||||
}
|
||||
|
@ -1,61 +1,82 @@
|
||||
import { useState, useRef, useEffect, useLayoutEffect } from "react";
|
||||
import { useState, useEffect } 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 { isSameDay, isSameMonth, isSameYear, getHours } from "date-fns";
|
||||
|
||||
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 { getQuestionByContentId } from "@root/questions/actions";
|
||||
import { updateDeleteId } from "@root/uiTools/actions";
|
||||
import { useUiTools } from "@root/uiTools/store";
|
||||
|
||||
export const DeleteNodeModal = () => {
|
||||
const { deleteNodeId } = useUiTools();
|
||||
const targetQuestion = getQuestionById(deleteNodeId);
|
||||
import { CheckboxIcon } from "@icons/Checkbox";
|
||||
|
||||
const saveData = () => {
|
||||
// if (parentQuestion !== null) {
|
||||
// updateQuestion(
|
||||
// parentQuestion.content.id,
|
||||
// (question) => (question.content = parentQuestion.content)
|
||||
// );
|
||||
// }
|
||||
// handleClose();
|
||||
type DeleteNodeModalProps = {
|
||||
removeNode?: (id: string) => void;
|
||||
};
|
||||
|
||||
export const DeleteNodeModal = ({ removeNode }: DeleteNodeModalProps) => {
|
||||
const [skipModal, setSkipModal] = useState<boolean>(false);
|
||||
const { deleteNodeId } = useUiTools();
|
||||
const targetQuestion = getQuestionByContentId(deleteNodeId);
|
||||
const theme = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const isSkipModal = getIsSkipModal();
|
||||
|
||||
if (isSkipModal) {
|
||||
deleteNode();
|
||||
}
|
||||
}, [deleteNodeId]);
|
||||
|
||||
const getLastDeletionNodeTime = () =>
|
||||
Number(localStorage.getItem("lastDeletionNodeTime") || 0);
|
||||
|
||||
const updateLastDeletionNodeTime = () => {
|
||||
const now = new Date().getTime();
|
||||
|
||||
localStorage.setItem("lastDeletionNodeTime", String(now));
|
||||
};
|
||||
|
||||
const getIsSkipModal = () => {
|
||||
const lastDeletionNodeTime = getLastDeletionNodeTime();
|
||||
const now = new Date().getTime();
|
||||
|
||||
console.log("hours", getHours(lastDeletionNodeTime));
|
||||
|
||||
const sameYear = isSameYear(lastDeletionNodeTime, now);
|
||||
const sameMonth = isSameMonth(lastDeletionNodeTime, now);
|
||||
const sameDay = isSameDay(lastDeletionNodeTime, now);
|
||||
|
||||
return sameYear && sameMonth && sameDay;
|
||||
};
|
||||
|
||||
const deleteNode = () => {
|
||||
if (skipModal) {
|
||||
updateLastDeletionNodeTime();
|
||||
}
|
||||
|
||||
if (deleteNodeId) {
|
||||
removeNode?.(deleteNodeId || "");
|
||||
}
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
updateOpenedModalSettingsId();
|
||||
updateDeleteId("");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal open={!!deleteNodeId} onClose={handleClose}>
|
||||
<Modal open={!!deleteNodeId && !getIsSkipModal()} onClose={handleClose}>
|
||||
<Box
|
||||
sx={{
|
||||
outline: "none",
|
||||
position: "absolute",
|
||||
overflow: "hidden",
|
||||
top: "50%",
|
||||
@ -79,19 +100,12 @@ export const DeleteNodeModal = () => {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ color: "#4d4d4d" }}>
|
||||
<Typography component="span">{targetQuestion?.title}</Typography>
|
||||
</Box>
|
||||
<Tooltip
|
||||
title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Typography component="span">{targetQuestion?.title}</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography sx={{ padding: "15px" }}>
|
||||
Вы правда хотите удалить этот узел? Данные его настроек и настроек
|
||||
его потомков будут утеряны.
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -110,11 +124,28 @@ export const DeleteNodeModal = () => {
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ width: "100%", maxWidth: "130px" }}
|
||||
onClick={saveData}
|
||||
onClick={deleteNode}
|
||||
>
|
||||
Готово
|
||||
Удалить
|
||||
</Button>
|
||||
</Box>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
disableRipple
|
||||
icon={<CheckboxIcon />}
|
||||
checkedIcon={<CheckboxIcon checked />}
|
||||
onChange={(_, value) => setSkipModal(value)}
|
||||
checked={skipModal}
|
||||
/>
|
||||
}
|
||||
label="Не спрашивать больше сегодня"
|
||||
sx={{
|
||||
userSelect: "none",
|
||||
margin: "0 0 10px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
|
@ -10,7 +10,6 @@ export type UiTools = {
|
||||
canCreatePublic: boolean;
|
||||
whyCantCreatePublic: Record<string, WhyCantCreatePublic>//ид вопроса и список претензий к нему
|
||||
openModalInfoWhyCantCreate: boolean;
|
||||
lastDeletionNodeTime: number | null;
|
||||
deleteNodeId: string | null;
|
||||
};
|
||||
export type WhyCantCreatePublic = {
|
||||
@ -28,7 +27,6 @@ const initialState: UiTools = {
|
||||
canCreatePublic: false,
|
||||
whyCantCreatePublic: {},
|
||||
openModalInfoWhyCantCreate: false,
|
||||
lastDeletionNodeTime: null,
|
||||
deleteNodeId: null,
|
||||
};
|
||||
|
||||
|
@ -4204,6 +4204,11 @@ data-urls@^2.0.0:
|
||||
whatwg-mimetype "^2.3.0"
|
||||
whatwg-url "^8.0.0"
|
||||
|
||||
date-fns@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.0.4.tgz#56eb7916d8d4666bf9be168ef84bed0deef1077c"
|
||||
integrity sha512-+daptVi95nJ/D4TPS7/gbUqneVMA0Izr4qYAsL2ZZwtcDtEP8Zge765mbXhTqWYdTSG79/VtbBigQTluiE9DBQ==
|
||||
|
||||
dayjs@^1.10.4, dayjs@^1.11.10:
|
||||
version "1.11.10"
|
||||
resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz"
|
||||
|
Loading…
Reference in New Issue
Block a user