mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
refactor: dnd function (#308)
This commit is contained in:
parent
3d28cde91d
commit
8c15a1519f
@ -106,12 +106,13 @@ export const IssuesView: React.FC<Props> = ({
|
|||||||
const { source, destination } = result;
|
const { source, destination } = result;
|
||||||
|
|
||||||
const draggedItem = groupedByIssues[source.droppableId][source.index];
|
const draggedItem = groupedByIssues[source.droppableId][source.index];
|
||||||
let newSortOrder = draggedItem.sort_order;
|
|
||||||
|
|
||||||
if (destination.droppableId === "trashBox") {
|
if (destination.droppableId === "trashBox") {
|
||||||
handleDeleteIssue(draggedItem);
|
handleDeleteIssue(draggedItem);
|
||||||
} else {
|
} else {
|
||||||
if (orderBy === "sort_order") {
|
if (orderBy === "sort_order") {
|
||||||
|
let newSortOrder = draggedItem.sort_order;
|
||||||
|
|
||||||
const destinationGroupArray = groupedByIssues[destination.droppableId];
|
const destinationGroupArray = groupedByIssues[destination.droppableId];
|
||||||
|
|
||||||
if (destinationGroupArray.length !== 0) {
|
if (destinationGroupArray.length !== 0) {
|
||||||
@ -130,6 +131,8 @@ export const IssuesView: React.FC<Props> = ({
|
|||||||
destinationGroupArray[destination.index].sort_order) /
|
destinationGroupArray[destination.index].sort_order) /
|
||||||
2;
|
2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
draggedItem.sort_order = newSortOrder;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
|
if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
|
||||||
@ -138,176 +141,83 @@ export const IssuesView: React.FC<Props> = ({
|
|||||||
|
|
||||||
if (!sourceGroup || !destinationGroup) return;
|
if (!sourceGroup || !destinationGroup) return;
|
||||||
|
|
||||||
if (selectedGroup === "priority") {
|
if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
|
||||||
if (cycleId)
|
else if (selectedGroup === "state_detail.name") {
|
||||||
mutate<CycleIssueResponse[]>(
|
|
||||||
CYCLE_ISSUES(cycleId as string),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.issue_detail.id === draggedItem.id) {
|
|
||||||
return {
|
|
||||||
...issue,
|
|
||||||
issue_detail: {
|
|
||||||
...draggedItem,
|
|
||||||
priority: destinationGroup,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
if (moduleId)
|
|
||||||
mutate<ModuleIssueResponse[]>(
|
|
||||||
MODULE_ISSUES(moduleId as string),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.issue_detail.id === draggedItem.id) {
|
|
||||||
return {
|
|
||||||
...issue,
|
|
||||||
issue_detail: {
|
|
||||||
...draggedItem,
|
|
||||||
priority: destinationGroup,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
mutate<IIssue[]>(
|
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.id === draggedItem.id)
|
|
||||||
return {
|
|
||||||
...draggedItem,
|
|
||||||
priority: destinationGroup,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
};
|
|
||||||
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
|
|
||||||
return updatedIssues;
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesService
|
|
||||||
.patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
|
|
||||||
priority: destinationGroup,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
|
|
||||||
if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
|
|
||||||
|
|
||||||
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
|
||||||
});
|
|
||||||
} else if (selectedGroup === "state_detail.name") {
|
|
||||||
const destinationState = states?.find((s) => s.name === destinationGroup);
|
const destinationState = states?.find((s) => s.name === destinationGroup);
|
||||||
const destinationStateId = destinationState?.id;
|
|
||||||
|
|
||||||
// update the removed item for mutation
|
if (!destinationState) return;
|
||||||
if (!destinationStateId || !destinationState) return;
|
|
||||||
|
|
||||||
if (cycleId)
|
draggedItem.state = destinationState.id;
|
||||||
mutate<CycleIssueResponse[]>(
|
draggedItem.state_detail = destinationState;
|
||||||
CYCLE_ISSUES(cycleId as string),
|
}
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.issue_detail.id === draggedItem.id) {
|
|
||||||
return {
|
|
||||||
...issue,
|
|
||||||
issue_detail: {
|
|
||||||
...draggedItem,
|
|
||||||
state_detail: destinationState,
|
|
||||||
state: destinationStateId,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
if (moduleId)
|
if (cycleId)
|
||||||
mutate<ModuleIssueResponse[]>(
|
mutate<CycleIssueResponse[]>(
|
||||||
MODULE_ISSUES(moduleId as string),
|
CYCLE_ISSUES(cycleId as string),
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.issue_detail.id === draggedItem.id) {
|
|
||||||
return {
|
|
||||||
...issue,
|
|
||||||
issue_detail: {
|
|
||||||
...draggedItem,
|
|
||||||
state_detail: destinationState,
|
|
||||||
state: destinationStateId,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
mutate<IIssue[]>(
|
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
|
||||||
(prevData) => {
|
(prevData) => {
|
||||||
if (!prevData) return prevData;
|
if (!prevData) return prevData;
|
||||||
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
const updatedIssues = prevData.map((issue) => {
|
||||||
if (issue.id === draggedItem.id)
|
if (issue.issue_detail.id === draggedItem.id) {
|
||||||
return {
|
return {
|
||||||
...draggedItem,
|
...issue,
|
||||||
state_detail: destinationState,
|
issue_detail: draggedItem,
|
||||||
state: destinationStateId,
|
|
||||||
sort_order: newSortOrder,
|
|
||||||
};
|
};
|
||||||
|
}
|
||||||
return issue;
|
return issue;
|
||||||
});
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
return updatedIssues;
|
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
// patch request
|
if (moduleId)
|
||||||
issuesService
|
mutate<ModuleIssueResponse[]>(
|
||||||
.patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
|
MODULE_ISSUES(moduleId as string),
|
||||||
state: destinationStateId,
|
(prevData) => {
|
||||||
sort_order: newSortOrder,
|
if (!prevData) return prevData;
|
||||||
})
|
const updatedIssues = prevData.map((issue) => {
|
||||||
.then((res) => {
|
if (issue.issue_detail.id === draggedItem.id) {
|
||||||
if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
|
return {
|
||||||
if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
|
...issue,
|
||||||
|
issue_detail: draggedItem,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
mutate<IIssue[]>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
|
||||||
|
const updatedIssues = prevData.map((i) => {
|
||||||
|
if (i.id === draggedItem.id) return draggedItem;
|
||||||
|
|
||||||
|
return i;
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
return updatedIssues;
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
// patch request
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
|
||||||
|
priority: draggedItem.priority,
|
||||||
|
state: draggedItem.state,
|
||||||
|
sort_order: draggedItem.sort_order,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
|
||||||
|
if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
|
||||||
|
|
||||||
|
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user