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

[WEB-1138] feat: List lssue Layout Drag and Drop (#4536)

Browse Source 
* List Dnd Complete feature

* fix minor bugs in list dnd

* remove double overlay in kanban post refactor

* add missing dependencies to useEffects

* make provision to add to the last issue of the group

* show current child issues to also be disabled if the parent issue is being dragged

* fix last issue border

* fix code static analysis suggestions

* prevent context menu on drag handle
This commit is contained in:
rahulramesha 2024-05-21 16:25:57 +05:30 committed by GitHub
parent 0f5294c5e2
commit afc2ca65cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 751 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/labels/label-block/drag-handle.tsx → packages/ui/src/drag-handle.tsx
View File

@ -1,19 +1,29 @@
import React from "react";
import { forwardRef } from "react";
import { MoreVertical } from "lucide-react";
interface IDragHandle {
isDragging: boolean;
disabled?: boolean;
}
export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
const { isDragging } = props;
const { isDragging, disabled = false } = props;
if (disabled) {
return <div className="w-[14px] h-[18px]" />;
}
return (
<button
type="button"
className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
className={`mr-1 p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
isDragging ? "opacity-100" : "opacity-0"
}`}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
}}
ref={ref}
>
<MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />

1
packages/ui/src/index.ts
View File

@ -12,4 +12,5 @@ export * from "./tooltip";
export * from "./loader";
export * from "./control-link";
export * from "./toast";
export * from "./drag-handle";
export * from "./drop-indicator";

61
web/components/issues/issue-layouts/group-drag-overlay.tsx Normal file
View File

@ -0,0 +1,61 @@
import { AlertCircle } from "lucide-react";
import { TIssueOrderByOptions } from "@plane/types";
import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
import { cn } from "@/helpers/common.helper";
type Props = {
dragColumnOrientation: "justify-start" | "justify-center" | "justify-end";
canDropOverIssue: boolean;
isDropDisabled: boolean;
dropErrorMessage?: string;
orderBy: TIssueOrderByOptions | undefined;
isDraggingOverColumn: boolean;
};
export const GroupDragOverlay = (props: Props) => {
const { dragColumnOrientation, canDropOverIssue, isDropDisabled, dropErrorMessage, orderBy, isDraggingOverColumn } =
props;
const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
return (
<div
className={cn(
`absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay ${dragColumnOrientation}`,
{
"flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
},
{ hidden: !shouldOverlay }
)}
>
<div
className={cn(
"p-3 mt-8 flex flex-col rounded items-center",
{
"text-custom-text-200": shouldOverlay,
},
{
"text-custom-text-error": isDropDisabled,
}
)}
>
{dropErrorMessage ? (
<div className="flex items-center">
<AlertCircle width={13} height={13} /> &nbsp;
<span>{dropErrorMessage}</span>
</div>
) : (
<>
{readableOrderBy && (
<span>
The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
</span>
)}
<span>Drop here to move the issue.</span>
</>
)}
</div>
</div>
);
};

96
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -4,26 +4,24 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { TIssue } from "@plane/types";
import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
import { Spinner } from "@plane/ui";
import { DeleteIssueModal } from "@/components/issues";
import { ISSUE_DELETED } from "@/constants/event-tracker";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUser } from "@/hooks/store";
import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
import { useIssuesActions } from "@/hooks/use-issues-actions";
// store
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
// ui
// types
import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
//components
import { GroupDropLocation, handleGroupDragDrop, getSourceFromDropPayload } from "../utils";
import { getSourceFromDropPayload } from "../utils";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "./swimlanes";
export type KanbanStoreType =
| EIssuesStoreType.PROJECT
| EIssuesStoreType.MODULE
@ -65,12 +63,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
} = useIssueDetail();
const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
useIssuesActions(storeType);
const {
issues: { addCycleToIssue, removeCycleFromIssue },
} = useIssues(EIssuesStoreType.CYCLE);
const {
issues: { changeModulesInIssue },
} = useIssues(EIssuesStoreType.MODULE);
const deleteAreaRef = useRef<HTMLDivElement | null>(null);
const [isDragOverDelete, setIsDragOverDelete] = useState(false);
@ -101,6 +93,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by, sub_group_by);
const canEditProperties = useCallback(
(projectId: string | undefined) => {
const isEditingAllowedBasedOnProject =
@ -153,86 +147,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
);
}, [deleteAreaRef?.current, setIsDragOverDelete, setDraggedIssueId, setDeleteIssueModal]);
/**
* update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
* @param projectId
* @param issueId
* @param data
* @param issueUpdates
*/
const updateIssueOnDrop = async (
projectId: string,
issueId: string,
data: Partial<TIssue>,
issueUpdates: {
[groupKey: string]: {
ADD: string[];
REMOVE: string[];
};
}
) => {
const errorToastProps = {
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Error while updating issue"
}
const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
const isModuleChanged = Object.keys(data).includes(moduleKey);
const isCycleChanged = Object.keys(data).includes(cycleKey);
if (isCycleChanged && workspaceSlug) {
if(data[cycleKey]) {
addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() => setToast(errorToastProps));
} else {
removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps))
}
delete data[cycleKey];
}
if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
changeModulesInIssue(
workspaceSlug.toString(),
projectId,
issueId,
issueUpdates[moduleKey].ADD,
issueUpdates[moduleKey].REMOVE
).catch(() => setToast(errorToastProps));
delete data[moduleKey];
}
updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
};
const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
if (
source.columnId &&
destination.columnId &&
destination.columnId === source.columnId &&
destination.id === source.id
)
return;
await handleGroupDragDrop(
source,
destination,
getIssueById,
issues.getIssueIds,
updateIssueOnDrop,
group_by,
sub_group_by,
orderBy !== "sort_order"
).catch((err) => {
setToast({
title: "Error!",
type: TOAST_TYPE.ERROR,
message: err?.detail ?? "Failed to perform this action",
});
});
};
const renderQuickActions: TRenderQuickActions = useCallback(
({ issue, parentRef, customActionButton }) => (
<QuickActions

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

@ -169,7 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
}),
dropTargetForElements({
element,
canDrop: () => canDropOverIssue,
canDrop: ({ source }) => source?.data?.id !== issue?.id && canDropOverIssue,
getData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragEnter: () => {
setIsDraggingOverBlock(true);
@ -182,7 +182,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
},
})
);
}, [cardRef?.current, issue?.id, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
}, [cardRef?.current, issue?.id, isDragAllowed, canDropOverIssue, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
if (!issue) return null;

71
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@ -2,7 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { AlertCircle } from "lucide-react";
import { observer } from "mobx-react";
//types
import {
TGroupedIssues,
@ -14,13 +14,14 @@ import {
TIssueGroupByOptions,
TIssueOrderByOptions,
} from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useProjectState } from "@/hooks/store";
//components
import { GroupDragOverlay } from "../group-drag-overlay";
import { TRenderQuickActions } from "../list/list-view-types";
import { GroupDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload, getIssueBlockId } from "../utils";
import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
@ -54,7 +55,7 @@ interface IKanbanGroup {
orderBy: TIssueOrderByOptions | undefined;
}
export const KanbanGroup = (props: IKanbanGroup) => {
export const KanbanGroup = observer((props: IKanbanGroup) => {
const {
groupId,
sub_group_id,
@ -108,7 +109,17 @@ export const KanbanGroup = (props: IKanbanGroup) => {
const source = getSourceFromDropPayload(payload);
const destination = getDestinationFromDropPayload(payload);
if (!source || !destination || isDropDisabled) return;
if (!source || !destination) return;
if (isDropDisabled) {
dropErrorMessage &&
setToast({
type: TOAST_TYPE.WARNING,
title: "Warning!",
message: dropErrorMessage,
});
return;
}
handleOnDrop(source, destination);
@ -122,7 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
element,
})
);
}, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, handleOnDrop]);
}, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
const prePopulateQuickAddData = (
groupByKey: string | undefined,
@ -178,7 +189,6 @@ export const KanbanGroup = (props: IKanbanGroup) => {
const canDropOverIssue = orderBy === "sort_order";
const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
return (
<div
@ -190,45 +200,14 @@ export const KanbanGroup = (props: IKanbanGroup) => {
)}
ref={columnRef}
>
<div
//column overlay when issues are not sorted by manual
className={cn(
"absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay",
{
"flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
},
{ hidden: !shouldOverlay },
{ "justify-center": !sub_group_by }
)}
>
<div
className={cn(
"p-3 mt-8 flex flex-col rounded items-center",
{
"text-custom-text-200": shouldOverlay,
},
{
"text-custom-text-error": isDropDisabled,
}
)}
>
{dropErrorMessage ? (
<div className="flex items-center">
<AlertCircle width={13} height={13} /> &nbsp;
<span>{dropErrorMessage}</span>
</div>
) : (
<>
{readableOrderBy && (
<span>
The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
</span>
)}
<span>Drop here to move the issue.</span>
</>
)}
</div>
</div>
<GroupDragOverlay
dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
canDropOverIssue={canDropOverIssue}
isDropDisabled={isDropDisabled}
dropErrorMessage={dropErrorMessage}
orderBy={orderBy}
isDraggingOverColumn={isDraggingOverColumn}
/>
<KanbanIssueBlocksList
sub_group_id={sub_group_id}
groupId={groupId}
@ -259,4 +238,4 @@ export const KanbanGroup = (props: IKanbanGroup) => {
)}
</div>
);
};
});

14
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
import { useIssues, useUser } from "@/hooks/store";
import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
import { useIssuesActions } from "@/hooks/use-issues-actions";
// components
import { List } from "./default";
@ -17,9 +17,9 @@ type ListStoreType =
| EIssuesStoreType.MODULE
| EIssuesStoreType.CYCLE
| EIssuesStoreType.PROJECT_VIEW
| EIssuesStoreType.ARCHIVED
| EIssuesStoreType.DRAFT
| EIssuesStoreType.PROFILE;
| EIssuesStoreType.PROFILE
| EIssuesStoreType.ARCHIVED;
interface IBaseListRoot {
QuickActions: FC<IQuickActionProps>;
viewId?: string;
@ -37,7 +37,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
canEditPropertiesBasedOnProject,
isCompletedCycle = false,
} = props;
// router
//stores
const { issuesFilter, issues } = useIssues(storeType);
const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue } = useIssuesActions(storeType);
// mobx store
@ -66,8 +67,11 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
const displayProperties = issuesFilter?.issueFilters?.displayProperties;
const group_by = displayFilters?.group_by || null;
const orderBy = displayFilters?.order_by || undefined;
const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by);
const renderQuickActions: TRenderQuickActions = useCallback(
({ issue, parentRef }) => (
<QuickActions
@ -91,6 +95,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
issuesMap={issueMap}
displayProperties={displayProperties}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={renderQuickActions}
issueIds={issueIds}
@ -103,6 +108,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
storeType={storeType}
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
handleOnDrop={handleOnDrop}
/>
</div>
);

86
web/components/issues/issue-layouts/list/block-root.tsx
View File

@ -1,12 +1,18 @@
import React, { FC, MutableRefObject, useState } from "react";
import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
import { observer } from "mobx-react";
import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
// components
import { DropIndicator } from "@plane/ui";
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
import { IssueBlock } from "@/components/issues/issue-layouts/list";
// hooks
import { useIssueDetail } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// types
import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
import { TRenderQuickActions } from "./list-view-types";
type Props = {
@ -20,6 +26,11 @@ type Props = {
nestingLevel: number;
spacingLeft?: number;
containerRef: MutableRefObject<HTMLDivElement | null>;
groupId: string;
isDragAllowed: boolean;
canDropOverIssue: boolean;
isParentIssueBeingDragged?: boolean;
isLastChild?: boolean;
};
export const IssueBlockRoot: FC<Props> = observer((props) => {
@ -27,6 +38,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
issueIds,
issueId,
issuesMap,
groupId,
updateIssue,
quickActions,
canEditProperties,
@ -34,26 +46,84 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
nestingLevel,
spacingLeft = 14,
containerRef,
isDragAllowed,
canDropOverIssue,
isParentIssueBeingDragged = false,
isLastChild = false,
} = props;
// states
const [isExpanded, setExpanded] = useState<boolean>(false);
const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
// ref
const issueBlockRef = useRef<HTMLDivElement | null>(null);
// store hooks
const { subIssues: subIssuesStore } = useIssueDetail();
const isSubIssue = nestingLevel !== 0;
useEffect(() => {
const blockElement = issueBlockRef.current;
if (!blockElement) return;
return combine(
dropTargetForElements({
element: blockElement,
canDrop: ({ source }) => source?.data?.id !== issueId && !isSubIssue && canDropOverIssue,
getData: ({ input, element }) => {
const data = { id: issueId, type: "ISSUE" };
// attach instruction for last in list
return attachInstruction(data, {
input,
element,
currentLevel: 0,
indentPerLevel: 0,
mode: isLastChild ? "last-in-group" : "standard",
});
},
onDrag: ({ self }) => {
const extractedInstruction = extractInstruction(self?.data)?.type;
// check if the highlight is to be shown above or below
setInstruction(
extractedInstruction
? extractedInstruction === "reorder-below" && isLastChild
? "DRAG_BELOW"
: "DRAG_OVER"
: undefined
);
},
onDragLeave: () => {
setInstruction(undefined);
},
onDrop: () => {
setInstruction(undefined);
},
})
);
}, [issueId, isLastChild, issueBlockRef, isSubIssue, canDropOverIssue, setInstruction]);
useOutsideClickDetector(issueBlockRef, () => {
issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
});
if (!issueId) return null;
const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
return (
<>
<div className="relative" ref={issueBlockRef} id={getIssueBlockId(issueId, groupId)}>
<DropIndicator classNames={"absolute top-0 z-[2]"} isVisible={instruction === "DRAG_OVER"} />
<RenderIfVisible
key={`${issueId}`}
defaultHeight="3rem"
root={containerRef}
classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
classNames={`relative ${isLastChild ? "" : "border-b border-b-custom-border-200"}`}
>
<IssueBlock
issueId={issueId}
issuesMap={issuesMap}
groupId={groupId}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
@ -62,6 +132,9 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
setExpanded={setExpanded}
nestingLevel={nestingLevel}
spacingLeft={spacingLeft}
canDrag={!isSubIssue && isDragAllowed}
isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
setIsCurrentBlockDragging={setIsCurrentBlockDragging}
/>
</RenderIfVisible>
@ -81,8 +154,13 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
nestingLevel={nestingLevel + 1}
spacingLeft={spacingLeft + (displayProperties?.key ? 12 : 0)}
containerRef={containerRef}
groupId={groupId}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
/>
))}
</>
{isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}
</div>
);
});

59
web/components/issues/issue-layouts/list/block.tsx
View File

@ -1,10 +1,12 @@
import { Dispatch, MouseEvent, SetStateAction, useRef } from "react";
import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react-lite";
import { ChevronRight } from "lucide-react";
// types
import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
// ui
import { Spinner, Tooltip, ControlLink } from "@plane/ui";
import { Spinner, Tooltip, ControlLink, DragHandle } from "@plane/ui";
// components
import { IssueProperties } from "@/components/issues/issue-layouts/properties";
// helpers
@ -18,6 +20,7 @@ import { TRenderQuickActions } from "./list-view-types";
interface IssueBlockProps {
issueId: string;
issuesMap: TIssueMap;
groupId: string;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
@ -26,12 +29,16 @@ interface IssueBlockProps {
spacingLeft?: number;
isExpanded: boolean;
setExpanded: Dispatch<SetStateAction<boolean>>;
isCurrentBlockDragging: boolean;
setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
canDrag: boolean;
}
export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
export const IssueBlock = observer((props: IssueBlockProps) => {
const {
issuesMap,
issueId,
groupId,
updateIssue,
quickActions,
displayProperties,
@ -40,9 +47,13 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
spacingLeft = 14,
isExpanded,
setExpanded,
isCurrentBlockDragging,
setIsCurrentBlockDragging,
canDrag,
} = props;
// refs
const parentRef = useRef(null);
// ref
const issueRef = useRef<HTMLDivElement | null>(null);
const dragHandleRef = useRef(null);
// hooks
const { workspaceSlug } = useAppRouter();
const { getProjectIdentifierById } = useProject();
@ -59,6 +70,29 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
const issue = issuesMap[issueId];
const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
const { isMobile } = usePlatformOS();
useEffect(() => {
const element = issueRef.current;
const dragHandleElement = dragHandleRef.current;
if (!element || !dragHandleElement) return;
return combine(
draggable({
element,
dragHandle: dragHandleElement,
canDrag: () => canDrag,
getInitialData: () => ({ id: issueId, type: "ISSUE", groupId }),
onDragStart: () => {
setIsCurrentBlockDragging(true);
},
onDrop: () => {
setIsCurrentBlockDragging(false);
},
})
);
}, [issueRef?.current, canDrag, issueId, groupId, dragHandleRef?.current, setIsCurrentBlockDragging]);
if (!issue) return null;
const canEditIssueProperties = canEditProperties(issue.project_id);
@ -84,13 +118,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
return (
<div
ref={parentRef}
ref={issueRef}
className={cn(
"min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm",
"group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
{
"border border-custom-primary-70 hover:border-custom-primary-70":
getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"last:border-b-transparent": !getIsIssuePeeked(issue.id),
"bg-custom-background-80": isCurrentBlockDragging,
}
)}
>
@ -98,11 +133,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<div className="flex flex-grow items-center gap-3 truncate">
<div className="flex items-center gap-0.5">
<div className="flex items-center group">
<span className="size-3.5" />
<div className="flex h-4 w-4 items-center justify-center">
<DragHandle isDragging={isCurrentBlockDragging} ref={dragHandleRef} disabled={!canDrag} />
<div className="flex h-5 w-5 items-center justify-center">
{subIssuesCount > 0 && (
<button
className="flex items-center justify-center h-4 w-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
@ -146,7 +181,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<div className="block md:hidden border border-custom-border-300 rounded ">
{quickActions({
issue,
parentRef,
parentRef: issueRef,
})}
</div>
)}
@ -165,7 +200,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<div className="hidden md:block">
{quickActions({
issue,
parentRef,
parentRef: issueRef,
})}
</div>
</>

34
web/components/issues/issue-layouts/list/blocks-list.tsx
View File

@ -1,27 +1,42 @@
import { FC, MutableRefObject } from "react";
// components
import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
import { TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
// types
import { TRenderQuickActions } from "./list-view-types";
interface Props {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issueIds: TUnGroupedIssues;
issuesMap: TIssueMap;
groupId: string;
canEditProperties: (projectId: string | undefined) => boolean;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
containerRef: MutableRefObject<HTMLDivElement | null>;
isDragAllowed: boolean;
canDropOverIssue: boolean;
}
export const IssueBlocksList: FC<Props> = (props) => {
const { issueIds, issuesMap, updateIssue, quickActions, displayProperties, canEditProperties, containerRef } = props;
const {
issueIds,
issuesMap,
groupId,
updateIssue,
quickActions,
displayProperties,
canEditProperties,
containerRef,
isDragAllowed,
canDropOverIssue,
} = props;
return (
<div className="relative h-full w-full">
{issueIds && issueIds.length > 0 ? (
issueIds.map((issueId: string) => (
{issueIds &&
issueIds.length > 0 &&
issueIds.map((issueId: string, index) => (
<IssueBlockRoot
key={`${issueId}`}
issueIds={issueIds}
@ -34,11 +49,12 @@ export const IssueBlocksList: FC<Props> = (props) => {
nestingLevel={0}
spacingLeft={0}
containerRef={containerRef}
groupId={groupId}
isLastChild={index === issueIds.length - 1}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
/>
))
) : (
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
)}
))}
</div>
);
};

132
web/components/issues/issue-layouts/list/default.tsx
View File

@ -1,4 +1,6 @@
import { useRef } from "react";
import { useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
// components
import {
GroupByColumnTypes,
@ -8,20 +10,22 @@ import {
TIssueMap,
TUnGroupedIssues,
IGroupByColumn,
TIssueOrderByOptions,
TIssueGroupByOptions,
} from "@plane/types";
import { IssueBlocksList, ListQuickAddIssueForm } from "@/components/issues";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
// utils
import { getGroupByColumns, isWorkspaceLevel } from "../utils";
import { HeaderGroupByCard } from "./headers/group-by-card";
import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
import { ListGroup } from "./list-group";
import { TRenderQuickActions } from "./list-view-types";
export interface IGroupByList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
group_by: TIssueGroupByOptions | null;
orderBy: TIssueOrderByOptions | undefined;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
@ -36,6 +40,7 @@ export interface IGroupByList {
) => Promise<TIssue | undefined>;
disableIssueCreation?: boolean;
storeType: EIssuesStoreType;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
isCompletedCycle?: boolean;
@ -46,6 +51,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
issueIds,
issuesMap,
group_by,
orderBy,
updateIssue,
quickActions,
displayProperties,
@ -56,6 +62,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
viewId,
disableIssueCreation,
storeType,
handleOnDrop,
addIssuesToView,
isCompletedCycle = false,
} = props;
@ -81,46 +88,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
isWorkspaceLevel(storeType)
);
// Enable Auto Scroll for Main Kanban
useEffect(() => {
const element = containerRef.current;
if (!element) return;
return combine(
autoScrollForElements({
element,
})
);
}, [containerRef]);
if (!groups) return null;
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
const defaultState = projectState.projectStates?.find((state) => state.default);
let preloadedData: object = { state_id: defaultState?.id };
if (groupByKey === null) {
preloadedData = { ...preloadedData };
} else {
if (groupByKey === "state") {
preloadedData = { ...preloadedData, state_id: value };
} else if (groupByKey === "priority") {
preloadedData = { ...preloadedData, priority: value };
} else if (groupByKey === "labels" && value != "None") {
preloadedData = { ...preloadedData, label_ids: [value] };
} else if (groupByKey === "assignees" && value != "None") {
preloadedData = { ...preloadedData, assignee_ids: [value] };
} else if (groupByKey === "cycle" && value != "None") {
preloadedData = { ...preloadedData, cycle_id: value };
} else if (groupByKey === "module" && value != "None") {
preloadedData = { ...preloadedData, module_ids: [value] };
} else if (groupByKey === "created_by") {
preloadedData = { ...preloadedData };
} else {
preloadedData = { ...preloadedData, [groupByKey]: value };
}
}
return preloadedData;
};
const validateEmptyIssueGroups = (issues: TIssue[]) => {
const issuesCount = issues?.length || 0;
if (!showEmptyGroup && issuesCount <= 0) return false;
return true;
};
const is_list = group_by === null ? true : false;
const getGroupIndex = (groupId: string | undefined) => groups.findIndex(({ id }) => id === groupId);
const isGroupByCreatedBy = group_by === "created_by";
const is_list = group_by === null ? true : false;
return (
<div
@ -130,43 +121,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
{groups &&
groups.length > 0 &&
groups.map(
(_list: IGroupByColumn) =>
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
<div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
<HeaderGroupByCard
icon={_list.icon}
title={_list.name || ""}
count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
issuePayload={_list.payload}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
</div>
{issueIds && (
<IssueBlocksList
issueIds={is_list ? issueIds || 0 : issueIds?.[_list.id] || 0}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
canEditProperties={canEditProperties}
containerRef={containerRef}
/>
)}
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
<ListQuickAddIssueForm
prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
quickAddCallback={quickAddCallback}
viewId={viewId}
/>
</div>
)}
</div>
(group: IGroupByColumn) =>
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[group.id]) && (
<ListGroup
key={group.id}
group={group}
getGroupIndex={getGroupIndex}
issueIds={issueIds}
issuesMap={issuesMap}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
enableIssueQuickAdd={enableIssueQuickAdd}
canEditProperties={canEditProperties}
storeType={storeType}
containerRef={containerRef}
quickAddCallback={quickAddCallback}
disableIssueCreation={disableIssueCreation}
addIssuesToView={addIssuesToView}
handleOnDrop={handleOnDrop}
viewId={viewId}
isCompletedCycle={isCompletedCycle}
/>
)
)}
</div>
@ -176,7 +154,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
export interface IList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
group_by: TIssueGroupByOptions | null;
orderBy: TIssueOrderByOptions | undefined;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
@ -192,6 +171,7 @@ export interface IList {
viewId?: string;
disableIssueCreation?: boolean;
storeType: EIssuesStoreType;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
isCompletedCycle?: boolean;
}
@ -201,6 +181,7 @@ export const List: React.FC<IList> = (props) => {
issueIds,
issuesMap,
group_by,
orderBy,
updateIssue,
quickActions,
quickAddCallback,
@ -211,6 +192,7 @@ export const List: React.FC<IList> = (props) => {
canEditProperties,
disableIssueCreation,
storeType,
handleOnDrop,
addIssuesToView,
isCompletedCycle = false,
} = props;
@ -221,6 +203,7 @@ export const List: React.FC<IList> = (props) => {
issueIds={issueIds as TUnGroupedIssues}
issuesMap={issuesMap}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
@ -231,6 +214,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
storeType={storeType}
handleOnDrop={handleOnDrop}
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
/>

242
web/components/issues/issue-layouts/list/list-group.tsx Normal file
View File

@ -0,0 +1,242 @@
import { MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react";
import { cn } from "@plane/editor-core";
// plane
import {
IGroupByColumn,
IIssueDisplayProperties,
TGroupedIssues,
TIssue,
TIssueGroupByOptions,
TIssueMap,
TIssueOrderByOptions,
TUnGroupedIssues,
} from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
// constants
import { DRAG_ALLOWED_GROUPS, EIssuesStoreType } from "@/constants/issue";
// hooks
import { useProjectState } from "@/hooks/store";
// components
import { GroupDragOverlay } from "../group-drag-overlay";
import {
GroupDropLocation,
getDestinationFromDropPayload,
getIssueBlockId,
getSourceFromDropPayload,
highlightIssueOnDrop,
} from "../utils";
import { IssueBlocksList } from "./blocks-list";
import { HeaderGroupByCard } from "./headers/group-by-card";
import { TRenderQuickActions } from "./list-view-types";
import { ListQuickAddIssueForm } from "./quick-add-issue-form";
type Props = {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
group: IGroupByColumn;
issuesMap: TIssueMap;
group_by: TIssueGroupByOptions | null;
orderBy: TIssueOrderByOptions | undefined;
getGroupIndex: (groupId: string | undefined) => number;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
enableIssueQuickAdd: boolean;
canEditProperties: (projectId: string | undefined) => boolean;
storeType: EIssuesStoreType;
containerRef: MutableRefObject<HTMLDivElement | null>;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,
data: TIssue,
viewId?: string
) => Promise<TIssue | undefined>;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
disableIssueCreation?: boolean;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
isCompletedCycle?: boolean;
};
export const ListGroup = observer((props: Props) => {
const {
group,
issueIds,
group_by,
orderBy,
issuesMap,
getGroupIndex,
disableIssueCreation,
addIssuesToView,
updateIssue,
quickActions,
displayProperties,
canEditProperties,
quickAddCallback,
containerRef,
viewId,
handleOnDrop,
enableIssueQuickAdd,
isCompletedCycle,
storeType,
} = props;
const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start");
const groupRef = useRef<HTMLDivElement | null>(null);
const projectState = useProjectState();
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
const defaultState = projectState.projectStates?.find((state) => state.default);
let preloadedData: object = { state_id: defaultState?.id };
if (groupByKey === null) {
preloadedData = { ...preloadedData };
} else {
if (groupByKey === "state") {
preloadedData = { ...preloadedData, state_id: value };
} else if (groupByKey === "priority") {
preloadedData = { ...preloadedData, priority: value };
} else if (groupByKey === "labels" && value != "None") {
preloadedData = { ...preloadedData, label_ids: [value] };
} else if (groupByKey === "assignees" && value != "None") {
preloadedData = { ...preloadedData, assignee_ids: [value] };
} else if (groupByKey === "cycle" && value != "None") {
preloadedData = { ...preloadedData, cycle_id: value };
} else if (groupByKey === "module" && value != "None") {
preloadedData = { ...preloadedData, module_ids: [value] };
} else if (groupByKey === "created_by") {
preloadedData = { ...preloadedData };
} else {
preloadedData = { ...preloadedData, [groupByKey]: value };
}
}
return preloadedData;
};
useEffect(() => {
const element = groupRef.current;
if (!element) return;
return combine(
dropTargetForElements({
element,
getData: () => ({ groupId: group.id, type: "COLUMN" }),
onDragEnter: () => {
setIsDraggingOverColumn(true);
},
onDragLeave: () => {
setIsDraggingOverColumn(false);
},
onDragStart: () => {
setIsDraggingOverColumn(true);
},
onDrag: ({ source }) => {
const sourceGroupId = source?.data?.groupId as string | undefined;
const currentGroupId = group.id;
const sourceIndex = getGroupIndex(sourceGroupId);
const currentIndex = getGroupIndex(currentGroupId);
if (sourceIndex > currentIndex) {
setDragColumnOrientation("justify-end");
} else {
setDragColumnOrientation("justify-start");
}
},
onDrop: (payload) => {
setIsDraggingOverColumn(false);
const source = getSourceFromDropPayload(payload);
const destination = getDestinationFromDropPayload(payload);
if (!source || !destination) return;
if (group.isDropDisabled) {
group.dropErrorMessage &&
setToast({
type: TOAST_TYPE.WARNING,
title: "Warning!",
message: group.dropErrorMessage,
});
return;
}
handleOnDrop(source, destination);
highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order");
},
})
);
}, [groupRef?.current, group, orderBy, getGroupIndex, setDragColumnOrientation, setIsDraggingOverColumn]);
const is_list = group_by === null ? true : false;
const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
const canDropOverIssue = orderBy === "sort_order";
const issueCount: number = is_list ? issueIds?.length ?? 0 : issueIds?.[group.id]?.length ?? 0;
const isGroupByCreatedBy = group_by === "created_by";
return (
<div
ref={groupRef}
className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
"border-custom-primary-100 ": isDraggingOverColumn,
})}
>
<div className="sticky top-0 z-[3] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
<HeaderGroupByCard
icon={group.icon}
title={group.name || ""}
count={issueCount}
issuePayload={group.payload}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
</div>
{!!issueCount && (
<div className="relative">
<GroupDragOverlay
dragColumnOrientation={dragColumnOrientation}
canDropOverIssue={canDropOverIssue}
isDropDisabled={!!group.isDropDisabled}
dropErrorMessage={group.dropErrorMessage}
orderBy={orderBy}
isDraggingOverColumn={isDraggingOverColumn}
/>
{issueIds && (
<IssueBlocksList
issueIds={is_list ? issueIds : issueIds?.[group.id]}
groupId={group.id}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
canEditProperties={canEditProperties}
containerRef={containerRef}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
/>
)}
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
<ListQuickAddIssueForm
prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
quickAddCallback={quickAddCallback}
viewId={viewId}
/>
</div>
)}
</div>
)}
</div>
);
});

28
web/components/issues/issue-layouts/utils.tsx
View File

@ -1,3 +1,4 @@
import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
import clone from "lodash/clone";
import concat from "lodash/concat";
import pull from "lodash/pull";
@ -37,6 +38,7 @@ export type GroupDropLocation = {
groupId: string;
subGroupId?: string;
id: string | undefined;
canAddIssueBelow?: boolean;
};
export type IssueUpdates = {
@ -353,11 +355,15 @@ export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): G
if (!destinationColumnData?.groupId) return;
// extract instruction from destination issue
const extractedInstruction = destinationIssueData ? extractInstruction(destinationIssueData)?.type : "";
return {
groupId: destinationColumnData.groupId as string,
subGroupId: destinationColumnData.subGroupId as string,
columnId: destinationColumnData.columnId as string,
id: destinationIssueData?.id as string | undefined,
canAddIssueBelow: extractedInstruction === "reorder-below",
};
};
@ -372,17 +378,25 @@ const handleSortOrder = (
destinationIssues: string[],
destinationIssueId: string | undefined,
getIssueById: (issueId: string) => TIssue | undefined,
shouldAddIssueAtTop = false
shouldAddIssueAtTop = false,
canAddIssueBelow = false
) => {
const sortOrderDefaultValue = 65535;
let currentIssueState = {};
const destinationIndex = destinationIssueId
let destinationIndex = destinationIssueId
? destinationIssues.indexOf(destinationIssueId)
: shouldAddIssueAtTop
? 0
: destinationIssues.length;
const isDestinationLastChild = destinationIndex === destinationIssues.length - 1;
// if issue can be added below and if the destination issue is the last child, then add to the end of the list
if (canAddIssueBelow && isDestinationLastChild) {
destinationIndex = destinationIssues.length;
}
if (destinationIssues && destinationIssues.length > 0) {
if (destinationIndex === 0) {
const destinationIssueId = destinationIssues[0];
@ -428,7 +442,7 @@ const handleSortOrder = (
export const getIssueBlockId = (
issueId: string | undefined,
groupId: string | undefined,
subGroupId: string | undefined
subGroupId?: string | undefined
) => `issue_${issueId}_${groupId}_${subGroupId}`;
/**
@ -469,7 +483,13 @@ export const handleGroupDragDrop = async (
// for both horizontal and vertical dnd
updatedIssue = {
...updatedIssue,
...handleSortOrder(destinationIssues, destination.id, getIssueById, shouldAddIssueAtTop),
...handleSortOrder(
destinationIssues,
destination.id,
getIssueById,
shouldAddIssueAtTop,
!!destination.canAddIssueBelow
),
};
// update updatedIssue values based on the source and destination groupIds

3
web/components/labels/label-block/label-item-block.tsx
View File

@ -2,12 +2,11 @@ import { MutableRefObject, useRef, useState } from "react";
import { LucideIcon, X } from "lucide-react";
import { IIssueLabel } from "@plane/types";
//ui
import { CustomMenu } from "@plane/ui";
import { CustomMenu, DragHandle } from "@plane/ui";
//types
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
//hooks
//components
import { DragHandle } from "./drag-handle";
import { LabelName } from "./label-name";
//types

10
web/constants/issue.ts
View File

@ -12,6 +12,15 @@ import {
TIssueTypeFilters,
} from "@plane/types";
export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
"state",
"priority",
"assignees",
"labels",
"module",
"cycle",
];
export enum EIssuesStoreType {
GLOBAL = "GLOBAL",
PROFILE = "PROFILE",
@ -422,3 +431,4 @@ export const groupReactionEmojis = (reactions: any) => {
return groupedEmojis;
};

124
web/hooks/use-group-dragndrop.ts Normal file
View File

@ -0,0 +1,124 @@
import { useRouter } from "next/router";
import { TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
import { GroupDropLocation, handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
import { EIssuesStoreType } from "@/constants/issue";
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
import { useIssueDetail, useIssues } from "./store";
import { useIssuesActions } from "./use-issues-actions";
type DNDStoreType =
| EIssuesStoreType.PROJECT
| EIssuesStoreType.MODULE
| EIssuesStoreType.CYCLE
| EIssuesStoreType.PROJECT_VIEW
| EIssuesStoreType.DRAFT
| EIssuesStoreType.PROFILE
| EIssuesStoreType.ARCHIVED;
export const useGroupIssuesDragNDrop = (
storeType: DNDStoreType,
orderBy: TIssueOrderByOptions | undefined,
groupBy: TIssueGroupByOptions | undefined,
subGroupBy?: TIssueGroupByOptions
) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
issue: { getIssueById },
} = useIssueDetail();
const { updateIssue } = useIssuesActions(storeType);
const {
issues: { getIssueIds },
} = useIssues(storeType);
const {
issues: { addCycleToIssue, removeCycleFromIssue },
} = useIssues(EIssuesStoreType.CYCLE);
const {
issues: { changeModulesInIssue },
} = useIssues(EIssuesStoreType.MODULE);
/**
* update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
* @param projectId
* @param issueId
* @param data
* @param issueUpdates
*/
const updateIssueOnDrop = async (
projectId: string,
issueId: string,
data: Partial<TIssue>,
issueUpdates: {
[groupKey: string]: {
ADD: string[];
REMOVE: string[];
};
}
) => {
const errorToastProps = {
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Error while updating issue",
};
const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
const isModuleChanged = Object.keys(data).includes(moduleKey);
const isCycleChanged = Object.keys(data).includes(cycleKey);
if (isCycleChanged && workspaceSlug) {
if (data[cycleKey]) {
addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() =>
setToast(errorToastProps)
);
} else {
removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps));
}
delete data[cycleKey];
}
if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
changeModulesInIssue(
workspaceSlug.toString(),
projectId,
issueId,
issueUpdates[moduleKey].ADD,
issueUpdates[moduleKey].REMOVE
).catch(() => setToast(errorToastProps));
delete data[moduleKey];
}
updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
};
const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
if (
source.columnId &&
destination.columnId &&
destination.columnId === source.columnId &&
destination.id === source.id
)
return;
await handleGroupDragDrop(
source,
destination,
getIssueById,
getIssueIds,
updateIssueOnDrop,
groupBy,
subGroupBy,
orderBy !== "sort_order"
).catch((err) => {
setToast({
title: "Error!",
type: TOAST_TYPE.ERROR,
message: err?.detail ?? "Failed to perform this action",
});
});
};
return handleOnDrop;
};

21
web/store/issue/archived/issue.store.ts
View File

@ -17,6 +17,7 @@ export interface IArchivedIssues {
// computed
groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
// actions
getIssueIds: (groupId?: string) => string[] | undefined;
fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue[]>;
removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@ -84,6 +85,26 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
return issues;
}
getIssueIds = (groupId?: string) => {
const groupedIssueIds = this.groupedIssueIds;
const displayFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.displayFilters;
if (!displayFilters || !groupedIssueIds) return undefined;
const subGroupBy = displayFilters?.sub_group_by;
const groupBy = displayFilters?.group_by;
if (!groupBy && !subGroupBy) {
return groupedIssueIds as string[];
}
if (groupBy && groupId) {
return (groupedIssueIds as TGroupedIssues)?.[groupId] as string[];
}
return undefined;
};
fetchIssues = async (workspaceSlug: string, projectId: string, loadType: TLoader = "init-loader") => {
try {
this.loader = loadType;

3
web/store/issue/issue_kanban_view.store.ts
View File

@ -2,6 +2,7 @@ import { action, computed, makeObservable, observable } from "mobx";
import { computedFn } from "mobx-utils";
import { IssueRootStore } from "./root.store";
import { TIssueGroupByOptions } from "@plane/types";
import { DRAG_ALLOWED_GROUPS } from "@/constants/issue";
// types
export interface IIssueKanBanViewStore {
@ -22,8 +23,6 @@ export interface IIssueKanBanViewStore {
setIsDragging: (isDragging: boolean) => void;
}
const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = ["state", "priority", "assignees", "labels", "module", "cycle"];
export class IssueKanBanViewStore implements IIssueKanBanViewStore {
kanBanToggle: {
groupByHeaderMinMax: string[];