fix: drag&drop bug

This commit is contained in:
IlyaDoronin 2024-01-12 12:35:50 +03:00
parent fbde202ce5
commit e76c90cb78
4 changed files with 43 additions and 40 deletions

@ -295,27 +295,26 @@ export default function ButtonsOptions({
> >
<CopyIcon color={"#4D4D4D"} /> <CopyIcon color={"#4D4D4D"} />
</IconButton> </IconButton>
<IconButton {(quiz?.config.type !== "form" || question.id !== questions[0].id) && (
sx={{ borderRadius: "6px", padding: "2px" }} <IconButton
onClick={() => { sx={{ borderRadius: "6px", padding: "2px" }}
if (question.type === null) { onClick={() => {
deleteQuestion(question.id); if (question.type === null) {
} deleteQuestion(question.id);
if (question.content.rule.parentId.length !== 0) { }
setOpenDelete(true); if (question.content.rule.parentId.length !== 0) {
} else { setOpenDelete(true);
deleteQuestionWithTimeout(question.id, () => } else {
DeleteFunction(questions, question, quiz), deleteQuestionWithTimeout(question.id, () =>
); DeleteFunction(questions, question, quiz),
} );
}} }
data-cy="delete-question" }}
> data-cy="delete-question"
{(quiz?.config.type !== "form" || >
question.id !== questions[0].id) && (
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon color={"#4D4D4D"} />
)} </IconButton>
</IconButton> )}
<Modal open={openDelete} onClose={() => setOpenDelete(false)}> <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
<Box <Box
sx={{ sx={{

@ -323,24 +323,26 @@ export default function ButtonsOptionsAndPict({
> >
<CopyIcon style={{ color: "#4D4D4D" }} /> <CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton {(quiz?.config.type !== "form" || question.id !== questions[0].id) && (
sx={{ borderRadius: "6px", padding: "2px" }} <IconButton
onClick={() => { sx={{ borderRadius: "6px", padding: "2px" }}
if (question.type === null) { onClick={() => {
deleteQuestion(question.id); if (question.type === null) {
} deleteQuestion(question.id);
if (question.content.rule.parentId.length !== 0) { }
setOpenDelete(true); if (question.content.rule.parentId.length !== 0) {
} else { setOpenDelete(true);
deleteQuestionWithTimeout(question.id, () => } else {
DeleteFunction(questions, question, quiz), deleteQuestionWithTimeout(question.id, () =>
); DeleteFunction(questions, question, quiz),
} );
}} }
data-cy="delete-question" }}
> data-cy="delete-question"
<DeleteIcon style={{ color: "#4D4D4D" }} /> >
</IconButton> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
)}
<Modal open={openDelete} onClose={() => setOpenDelete(false)}> <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
<Box <Box
sx={{ sx={{

@ -87,7 +87,7 @@ export const FormItem = ({
export const FormDraggableListItem = memo( export const FormDraggableListItem = memo(
({ question, questionIndex }: FormDraggableListItemProps) => ( ({ question, questionIndex }: FormDraggableListItemProps) => (
<Draggable draggableId={String(questionIndex)} index={questionIndex}> <Draggable draggableId={String(question.id)} index={questionIndex}>
{(provided) => ( {(provided) => (
<ListItem <ListItem
ref={provided.innerRef} ref={provided.innerRef}

@ -8,7 +8,9 @@ import { useQuestions } from "@root/questions/hooks";
export const FormDraggableList = () => { export const FormDraggableList = () => {
const questions = useQuestions().questions.filter((q) => q.type !== "result"); const questions = useQuestions().questions.filter((q) => q.type !== "result");
const onDragEnd = ({ destination, source }: DropResult) => { const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index); if (destination) {
reorderQuestions(source.index, destination.index);
}
}; };
return ( return (