thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1038] fix: kanban layout drag permission validation (#4255)

Browse Source 
* fix: kanban layout drag permission validation

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-04-23 13:03:30 +05:30 committed by GitHub
parent 75d14ce1ef
commit f7d6219bd1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -124,6 +124,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
const [isDraggingOverBlock, setIsDraggingOverBlock] = useState(false); const [isDraggingOverBlock, setIsDraggingOverBlock] = useState(false);
const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false); const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
const canEditIssueProperties = canEditProperties(issue?.project_id);
const isDragAllowed = !isDragDisabled && !issue?.tempId && canEditIssueProperties;
// Make Issue block both as as Draggable and, // Make Issue block both as as Draggable and,
// as a DropTarget for other issues being dragged to get the location of drop // as a DropTarget for other issues being dragged to get the location of drop
useEffect(() => { useEffect(() => {
@ -134,7 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
return combine( return combine(
draggable({ draggable({
element, element,
canDrag: () => !isDragDisabled, canDrag: () => isDragAllowed,
getInitialData: () => ({ id: issue?.id, type: "ISSUE" }), getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragStart: () => { onDragStart: () => {
setIsCurrentBlockDragging(true); setIsCurrentBlockDragging(true);
@ -164,15 +168,13 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
if (!issue) return null; if (!issue) return null;
const canEditIssueProperties = canEditProperties(issue.project_id);
return ( return (
<> <>
<DropIndicator isVisible={!isCurrentBlockDragging && isDraggingOverBlock} /> <DropIndicator isVisible={!isCurrentBlockDragging && isDraggingOverBlock} />
<div <div
// make Z-index higher at the beginning of drag, to have a issue drag image of issue block without any overlaps // make Z-index higher at the beginning of drag, to have a issue drag image of issue block without any overlaps
className={cn("group/kanban-block relative p-1.5", { "z-[1]": isCurrentBlockDragging })} className={cn("group/kanban-block relative p-1.5", { "z-[1]": isCurrentBlockDragging })}
onDragStart={() => !isDragDisabled && setIsCurrentBlockDragging(true)} onDragStart={() => isDragAllowed && setIsCurrentBlockDragging(true)}
> >
<ControlLink <ControlLink
id={`issue-${issue.id}`} id={`issue-${issue.id}`}
@ -186,7 +188,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
<div <div
className={cn( className={cn(
"rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400", "rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
{ "hover:cursor-pointer": !isDragDisabled }, { "hover:cursor-pointer": isDragAllowed },
{ "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }, { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
{ "bg-custom-background-80 z-[100]": isCurrentBlockDragging } { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
)} )}