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

[WEB-1140] chore: Gantt pragmatic dnd (#4390)

Browse source 
* Gantt Drag and drop migration and enable Dnd in Modules and Cycles Gantt

* fix minor UI and code issues
This commit is contained in:
rahulramesha 2024-05-08 13:38:58 +05:30 • committed by GitHub
parent b8f1734738
commit 13e6a67321
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 385 additions and 433 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/components/issues/issue-layouts/kanban/block.tsx
View file

@ -6,6 +6,7 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
// hooks
import { ControlLink, DropIndicator, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
import { HIGHLIGHT_CLASS } from "@/components/issues/issue-layouts/utils";
import { cn } from "@/helpers/common.helper";
import { useApplication, useIssueDetail, useKanbanView, useProject } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@ -133,7 +134,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
const isDragAllowed = !isDragDisabled && !issue?.tempId && canEditIssueProperties;
useOutsideClickDetector(cardRef, () => {
cardRef?.current?.classList?.remove("highlight");
cardRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
});
// Make Issue block both as as Draggable and,

8
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View file

@ -13,6 +13,7 @@ import {
TIssueGroupByOptions,
TIssueOrderByOptions,
} from "@plane/types";
import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
@ -20,12 +21,7 @@ import { cn } from "@/helpers/common.helper";
import { useProjectState } from "@/hooks/store";
//components
import { TRenderQuickActions } from "../list/list-view-types";
import {
KanbanDropLocation,
getSourceFromDropPayload,
getDestinationFromDropPayload,
highlightIssueOnDrop,
} from "./utils";
import { KanbanDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload } from "./utils";
import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
interface IKanbanGroup {

16
web/components/issues/issue-layouts/kanban/utils.ts
View file

@ -1,5 +1,4 @@
import pull from "lodash/pull";
import scrollIntoView from "smooth-scroll-into-view-if-needed";
import { IPragmaticDropPayload, TIssue, TIssueGroupByOptions } from "@plane/types";
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
@ -212,18 +211,3 @@ export const handleDragDrop = async (
);
}
};
/**
* This Method finds the DOM element with elementId, scrolls to it and highlights the issue block
* @param elementId
* @param shouldScrollIntoView
*/
export const highlightIssueOnDrop = (elementId: string | undefined, shouldScrollIntoView = true) => {
setTimeout(async () => {
const sourceElementId = elementId ?? "";
const sourceElement = document.getElementById(sourceElementId);
sourceElement?.classList?.add("highlight");
if (shouldScrollIntoView && sourceElement)
await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
}, 200);
};

23
web/components/issues/issue-layouts/utils.tsx
View file

@ -1,3 +1,4 @@
import scrollIntoView from "smooth-scroll-into-view-if-needed";
import { ContrastIcon } from "lucide-react";
import { GroupByColumnTypes, IGroupByColumn, TCycleGroups } from "@plane/types";
import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
@ -16,6 +17,9 @@ import { IStateStore } from "@/store/state.store";
// constants
// types
export const HIGHLIGHT_CLASS = "highlight";
export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
export const isWorkspaceLevel = (type: EIssuesStoreType) =>
[EIssuesStoreType.PROFILE, EIssuesStoreType.GLOBAL].includes(type) ? true : false;
@ -240,3 +244,22 @@ const getCreatedByColumns = (member: IMemberRootStore) => {
};
});
};
/**
* This Method finds the DOM element with elementId, scrolls to it and highlights the issue block
* @param elementId
* @param shouldScrollIntoView
*/
export const highlightIssueOnDrop = (
elementId: string | undefined,
shouldScrollIntoView = true,
shouldHighLightWithLine = false
) => {
setTimeout(async () => {
const sourceElementId = elementId ?? "";
const sourceElement = document.getElementById(sourceElementId);
sourceElement?.classList?.add(shouldHighLightWithLine ? HIGHLIGHT_WITH_LINE : HIGHLIGHT_CLASS);
if (shouldScrollIntoView && sourceElement)
await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
}, 200);
};