feat: DeleteNodeModal

This commit is contained in:
IlyaDoronin 2023-12-21 17:56:29 +03:00
parent 25bdf1ba87
commit 78b9d66831
5 changed files with 94 additions and 55 deletions

@ -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"