удаление безтипового вопроса

This commit is contained in:
Nastya 2023-12-28 00:51:20 +03:00
parent ce5fea6a7e
commit 3f95f32ec9
4 changed files with 227 additions and 217 deletions

@ -26,7 +26,7 @@ import { useQuestionsStore } from "@root/questions/store";
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
import { updateRootContentId } from "@root/quizes/actions";
import { useUiTools } from "@root/uiTools/store";
import {useState} from "react";
import { useState } from "react";
import { updateSomeWorkBackend } from "@root/uiTools/actions";
import { DeleteFunction } from "@utils/deleteFunc";
@ -118,116 +118,116 @@ export default function ButtonsOptions({
>
{buttonSetting.map(({ icon, title, value, myFunc }) => (
<Box key={value}>
{value === "branching" ?
question.type === "page" || question.type === "text" || question.type === "date" || question.type === "number" ?
<></>
:
(
// <Tooltip
// arrow
// placement="right"
// componentsProps={{
// tooltip: {
// sx: {
// background: "#fff",
// borderRadius: "6px",
// color: "#9A9AAF",
// boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
// "& .MuiTooltip-arrow": {
// color: "#FFF",
// },
// },
// },
// }}
// title={
// <Box>
// <Typography
// sx={{
// color: "#4D4D4D",
// fontWeight: "bold",
// fontSize: "14px",
// marginBottom: "10px",
// }}
// >
// Будет показан при условии
// </Typography>
// <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
// Название
// </Typography>
// <Typography
// sx={{
// fontWeight: "bold",
// fontSize: "12px",
// marginBottom: "10px",
// }}
// >
// Условие 1, Условие 2
// </Typography>
// <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
// Все условия обязательны
// </Typography>
// </Box>
// }
// >
<MiniButtonSetting
key={title}
onClick={() => {
openedModal();
// SSHC(value);
// myFunc(question);
}}
sx={{
display: quiz.config.type === "form" ? "none" : "flex",
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
// </Tooltip>
) : (
<>
<MiniButtonSetting
key={title}
onClick={() => {
SSHC(value);
myFunc();
}}
sx={{
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
</>
)}
{value === "branching" ?
question.type === "page" || question.type === "text" || question.type === "date" || question.type === "number" ?
<></>
:
(
// <Tooltip
// arrow
// placement="right"
// componentsProps={{
// tooltip: {
// sx: {
// background: "#fff",
// borderRadius: "6px",
// color: "#9A9AAF",
// boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
// "& .MuiTooltip-arrow": {
// color: "#FFF",
// },
// },
// },
// }}
// title={
// <Box>
// <Typography
// sx={{
// color: "#4D4D4D",
// fontWeight: "bold",
// fontSize: "14px",
// marginBottom: "10px",
// }}
// >
// Будет показан при условии
// </Typography>
// <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
// Название
// </Typography>
// <Typography
// sx={{
// fontWeight: "bold",
// fontSize: "12px",
// marginBottom: "10px",
// }}
// >
// Условие 1, Условие 2
// </Typography>
// <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
// Все условия обязательны
// </Typography>
// </Box>
// }
// >
<MiniButtonSetting
key={title}
onClick={() => {
openedModal();
// SSHC(value);
// myFunc(question);
}}
sx={{
display: quiz.config.type === "form" ? "none" : "flex",
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
// </Tooltip>
) : (
<>
<MiniButtonSetting
key={title}
onClick={() => {
SSHC(value);
myFunc();
}}
sx={{
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
</>
)}
</Box>
))}
{/* <>
@ -282,7 +282,11 @@ export default function ButtonsOptions({
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
if(question.content.rule.parentId.length !== 0) {
if (question.type === null) {
console.log("удаление безтипового")
deleteQuestion(question.id);
}
if (question.content.rule.parentId.length !== 0) {
setOpenDelete(true)
} else {
deleteQuestionWithTimeout(question.id, () => DeleteFunction(questions, question, quiz));
@ -305,7 +309,7 @@ export default function ButtonsOptions({
background: "#FFFFFF",
}}
>
<Typography variant="h6" sx={{textAlign: "center"}}>
<Typography variant="h6" sx={{ textAlign: "center" }}>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
</Typography>
<Box

@ -315,6 +315,10 @@ export default function ButtonsOptionsAndPict({
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
if (question.type === null) {
console.log("удаление безтипового")
deleteQuestion(question.id);
}
if(question.content.rule.parentId.length !== 0) {
setOpenDelete(true)
} else {

@ -59,35 +59,35 @@ import { updateSomeWorkBackend } from "@root/uiTools/actions";
import { DeleteFunction } from "@utils/deleteFunc";
interface Props {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
isDragging: boolean;
index: number;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
isDragging: boolean;
index: number;
}
export default function QuestionsPageCard({ question, draggableProps, isDragging, index }: Props) {
const maxLengthTextField = 225;
const maxLengthTextField = 225;
const { questions } = useQuestionsStore();
const [plusVisible, setPlusVisible] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false);
const { questions } = useQuestionsStore();
const [plusVisible, setPlusVisible] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false);
const [isTextFieldtActive, setIsTextFieldtActive] = useState(false);
const [openDelete, setOpenDelete] = useState<boolean>(false);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const anchorRef = useRef(null);
const quiz = useCurrentQuiz();
const [openDelete, setOpenDelete] = useState<boolean>(false);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const anchorRef = useRef(null);
const quiz = useCurrentQuiz();
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
question.title = title;
});
}, 200);
updateQuestionFn(question.id, question => {
question.title = title;
});
}, 200);
const handleInputFocus = () => {
setIsTextFieldtActive(true);
@ -98,7 +98,7 @@ const maxLengthTextField = 225;
};
return (
return (
<>
<Paper
id={question.id}
@ -277,6 +277,10 @@ const maxLengthTextField = 225;
margin: "0 5px 0 10px",
}}
onClick={() => {
if (question.type === null) {
console.log("удаление безтипового")
deleteQuestion(question.id);
}
if (question.content.rule.parentId.length !== 0) {
setOpenDelete(true);
} else {
@ -417,85 +421,85 @@ const maxLengthTextField = 225;
}
const IconAndrom = (isExpanded: boolean, questionType: QuestionType | null) => {
switch (questionType) {
case "variant":
return (
<Answer
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "images":
return (
<OptionsPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "varimg":
return (
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji":
return (
<Emoji
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "text":
return (
<Input
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "select":
return (
<DropDown
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "date":
return (
<Date
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "number":
return (
<Slider
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "file":
return (
<Download
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "page":
return (
<Page
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "rating":
return (
<RatingIcon
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
default:
return <></>;
}
switch (questionType) {
case "variant":
return (
<Answer
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "images":
return (
<OptionsPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "varimg":
return (
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji":
return (
<Emoji
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "text":
return (
<Input
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "select":
return (
<DropDown
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "date":
return (
<Date
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "number":
return (
<Slider
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "file":
return (
<Download
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "page":
return (
<Page
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "rating":
return (
<RatingIcon
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
default:
return <></>;
}
};

@ -60,8 +60,6 @@ export const DeleteFunction = async (questions: any, question: any, quiz: any) =
const result = questions.find(q => q.type === "result" && q.content.rule.parentId === question.content.id)
if (result) await deleteQuestion(result.id);
} else {
await deleteQuestion(question.id);
}
}