binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: drag and drop implementation in calendar layout and kanban layout (#2921)

Browse source 
* fix profile issue filters and kanban

* chore: calendar drag and drop

* chore: kanban drag and drop

* dev: remove issue from the kanban layout and resolved build errors

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>
This commit is contained in:
guru_sainath 2023-11-28 19:17:38 +05:30 • committed by sriram veeraghanta
parent e16e468b8f
commit 011db50da6
18 changed files with 480 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

38
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file

@ -1,5 +1,5 @@
import { FC, useCallback, useState } from "react";
import { DragDropContext } from "@hello-pangea/dnd";
import { DragDropContext, Droppable } from "@hello-pangea/dnd";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
@ -29,6 +29,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "./swimlanes";
import { EProjectStore } from "store/command-palette.store";
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
export interface IBaseKanBanLayout {
issueStore:
@ -54,6 +55,14 @@ export interface IBaseKanBanLayout {
showLoader?: boolean;
viewId?: string;
currentStore?: EProjectStore;
handleDragDrop?: (
source: any,
destination: any,
subGroupBy: string | null,
groupBy: string | null,
issues: any,
issueWithIds: any
) => void;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
@ -67,6 +76,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
showLoader,
viewId,
currentStore,
handleDragDrop,
addIssuesToView,
} = props;
@ -93,9 +103,9 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const currentKanBanView: "swimlanes" | "default" = sub_group_by ? "swimlanes" : "default";
const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
const onDragStart = () => {
setIsDragStarted(true);
};
@ -115,9 +125,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
)
return;
currentKanBanView === "default"
? kanbanViewStore?.handleDragDrop(result.source, result.destination)
: kanbanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
if (handleDragDrop) handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds);
};
const handleIssues = useCallback(
@ -147,6 +155,24 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
<div className={`fixed left-1/2 -translate-x-1/2 z-40 w-72 top-3 flex items-center justify-center mx-3`}>
<Droppable droppableId="issue-trash-box" isDropDisabled={!isDragStarted}>
{(provided, snapshot) => (
<div
className={`${
isDragStarted ? `opacity-100` : `opacity-0`
} w-full flex items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
} transition duration-300`}
ref={provided.innerRef}
{...provided.droppableProps}
>
Drop here to delete the issue.
</div>
)}
</Droppable>
</div>
{currentKanBanView === "default" ? (
<KanBan
issues={issues}