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

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

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

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