mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
[WEB-1138] feat: List lssue Layout Drag and Drop (#4536)
* 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
GitHub
parent
0f5294c5e2
commit
afc2ca65cf
@ -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" />
|
||||
@ -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
61
web/components/issues/issue-layouts/group-drag-overlay.tsx
Normal 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} />
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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} />
|
||||
<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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
});
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
242
web/components/issues/issue-layouts/list/list-group.tsx
Normal 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>
|
||||
);
|
||||
});
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
124
web/hooks/use-group-dragndrop.ts
Normal 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;
|
||||
};
|
||||
@ -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;
|
||||
|
||||
@ -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[];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user