forked from github/plane
[WEB-1139] chore: Calendar pragmatic dnd (#4410)
* replace Pragmatic DND for calendar * remove unnecessary check
This commit is contained in:
rahulramesha
GitHub
parent
9d2d9c59ca
commit
d8ab3e0087
@ -1,6 +1,5 @@
|
||||
import { FC } from "react";
|
||||
import { DragDropContext, DropResult } from "@hello-pangea/dnd";
|
||||
import { observer } from "mobx-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { TGroupedIssues } from "@plane/types";
|
||||
// components
|
||||
@ -51,67 +50,59 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
|
||||
const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
|
||||
|
||||
const onDragEnd = async (result: DropResult) => {
|
||||
if (!result) return;
|
||||
const handleDragAndDrop = async (
|
||||
issueId: string | undefined,
|
||||
sourceDate: string | undefined,
|
||||
destinationDate: string | undefined
|
||||
) => {
|
||||
if (!issueId || !destinationDate || !sourceDate) return;
|
||||
|
||||
// return if not dropped on the correct place
|
||||
if (!result.destination) return;
|
||||
|
||||
// return if dropped on the same date
|
||||
if (result.destination.droppableId === result.source.droppableId) return;
|
||||
|
||||
if (handleDragDrop) {
|
||||
await handleDragDrop(
|
||||
result.source,
|
||||
result.destination,
|
||||
workspaceSlug?.toString(),
|
||||
projectId?.toString(),
|
||||
issueMap,
|
||||
groupedIssueIds,
|
||||
updateIssue
|
||||
).catch((err) => {
|
||||
setToast({
|
||||
title: "Error!",
|
||||
type: TOAST_TYPE.ERROR,
|
||||
message: err?.detail ?? "Failed to perform this action",
|
||||
});
|
||||
await handleDragDrop(
|
||||
issueId,
|
||||
sourceDate,
|
||||
destinationDate,
|
||||
workspaceSlug?.toString(),
|
||||
projectId?.toString(),
|
||||
updateIssue
|
||||
).catch((err) => {
|
||||
setToast({
|
||||
title: "Error!",
|
||||
type: TOAST_TYPE.ERROR,
|
||||
message: err?.detail ?? "Failed to perform this action",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<CalendarChart
|
||||
issuesFilterStore={issuesFilter}
|
||||
issues={issueMap}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
layout={displayFilters?.calendar?.layout}
|
||||
showWeekends={displayFilters?.calendar?.show_weekends ?? false}
|
||||
quickActions={({ issue, parentRef, customActionButton, placement }) => (
|
||||
<QuickActions
|
||||
parentRef={parentRef}
|
||||
customActionButton={customActionButton}
|
||||
issue={issue}
|
||||
handleDelete={async () => removeIssue(issue.project_id, issue.id)}
|
||||
handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
|
||||
handleRemoveFromView={async () =>
|
||||
removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)
|
||||
}
|
||||
handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
|
||||
handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
placements={placement}
|
||||
/>
|
||||
)}
|
||||
addIssuesToView={addIssuesToView}
|
||||
quickAddCallback={issues.quickAddIssue}
|
||||
viewId={viewId}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
updateFilters={updateFilters}
|
||||
/>
|
||||
</DragDropContext>
|
||||
<CalendarChart
|
||||
issuesFilterStore={issuesFilter}
|
||||
issues={issueMap}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
layout={displayFilters?.calendar?.layout}
|
||||
showWeekends={displayFilters?.calendar?.show_weekends ?? false}
|
||||
quickActions={({ issue, parentRef, customActionButton, placement }) => (
|
||||
<QuickActions
|
||||
parentRef={parentRef}
|
||||
customActionButton={customActionButton}
|
||||
issue={issue}
|
||||
handleDelete={async () => removeIssue(issue.project_id, issue.id)}
|
||||
handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
|
||||
handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
|
||||
handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
|
||||
handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
placements={placement}
|
||||
/>
|
||||
)}
|
||||
addIssuesToView={addIssuesToView}
|
||||
quickAddCallback={issues.quickAddIssue}
|
||||
viewId={viewId}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
updateFilters={updateFilters}
|
||||
handleDragAndDrop={handleDragAndDrop}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// types
|
||||
import type {
|
||||
@ -40,6 +42,11 @@ type Props = {
|
||||
layout: "month" | "week" | undefined;
|
||||
showWeekends: boolean;
|
||||
quickActions: TRenderQuickActions;
|
||||
handleDragAndDrop: (
|
||||
issueId: string | undefined,
|
||||
sourceDate: string | undefined,
|
||||
destinationDate: string | undefined
|
||||
) => Promise<void>;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
@ -63,6 +70,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
groupedIssueIds,
|
||||
layout,
|
||||
showWeekends,
|
||||
handleDragAndDrop,
|
||||
quickActions,
|
||||
quickAddCallback,
|
||||
addIssuesToView,
|
||||
@ -72,6 +80,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
} = props;
|
||||
// states
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
//refs
|
||||
const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
// store hooks
|
||||
const {
|
||||
issues: { viewFlags },
|
||||
@ -91,6 +101,19 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
|
||||
const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
|
||||
|
||||
// Enable Auto Scroll for calendar
|
||||
useEffect(() => {
|
||||
const element = scrollableContainerRef.current;
|
||||
|
||||
if (!element) return;
|
||||
|
||||
return combine(
|
||||
autoScrollForElements({
|
||||
element,
|
||||
})
|
||||
);
|
||||
}, [scrollableContainerRef?.current]);
|
||||
|
||||
if (!calendarPayload || !formattedDatePayload)
|
||||
return (
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
@ -112,6 +135,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
|
||||
"vertical-scrollbar scrollbar-lg": windowWidth > 768,
|
||||
})}
|
||||
ref={scrollableContainerRef}
|
||||
>
|
||||
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
|
||||
<div className="h-full w-full">
|
||||
@ -123,6 +147,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
selectedDate={selectedDate}
|
||||
setSelectedDate={setSelectedDate}
|
||||
issuesFilterStore={issuesFilterStore}
|
||||
handleDragAndDrop={handleDragAndDrop}
|
||||
key={weekIndex}
|
||||
week={week}
|
||||
issues={issues}
|
||||
@ -143,6 +168,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
selectedDate={selectedDate}
|
||||
setSelectedDate={setSelectedDate}
|
||||
issuesFilterStore={issuesFilterStore}
|
||||
handleDragAndDrop={handleDragAndDrop}
|
||||
week={issueCalendarView.allDaysOfActiveWeek}
|
||||
issues={issues}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
@ -175,6 +201,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
addIssuesToView={addIssuesToView}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
isMonthLayout={false}
|
||||
showAllIssues
|
||||
isDragDisabled
|
||||
isMobileView
|
||||
/>
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { Droppable } from "@hello-pangea/dnd";
|
||||
import { 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-lite";
|
||||
// types
|
||||
import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
|
||||
// components
|
||||
import { CalendarIssueBlocks, ICalendarDate } from "@/components/issues";
|
||||
// constants
|
||||
import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
|
||||
// helpers
|
||||
import { MONTHS_LIST } from "@/constants/calendar";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
@ -24,6 +27,11 @@ type Props = {
|
||||
quickActions: TRenderQuickActions;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
disableIssueCreation?: boolean;
|
||||
handleDragAndDrop: (
|
||||
issueId: string | undefined,
|
||||
sourceDate: string | undefined,
|
||||
destinationDate: string | undefined
|
||||
) => Promise<void>;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
@ -51,12 +59,46 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
viewId,
|
||||
readOnly = false,
|
||||
selectedDate,
|
||||
handleDragAndDrop,
|
||||
setSelectedDate,
|
||||
} = props;
|
||||
|
||||
const [isDraggingOver, setIsDraggingOver] = useState(false);
|
||||
const [showAllIssues, setShowAllIssues] = useState(false);
|
||||
|
||||
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
|
||||
|
||||
const formattedDatePayload = renderFormattedPayloadDate(date.date);
|
||||
|
||||
const dayTileRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const element = dayTileRef.current;
|
||||
|
||||
if (!element) return;
|
||||
|
||||
return combine(
|
||||
dropTargetForElements({
|
||||
element,
|
||||
getData: () => ({ date: formattedDatePayload }),
|
||||
onDragEnter: () => {
|
||||
setIsDraggingOver(true);
|
||||
},
|
||||
onDragLeave: () => {
|
||||
setIsDraggingOver(false);
|
||||
},
|
||||
onDrop: ({ source, self }) => {
|
||||
setIsDraggingOver(false);
|
||||
const sourceData = source?.data as { id: string; date: string } | undefined;
|
||||
const destinationData = self?.data as { date: string } | undefined;
|
||||
handleDragAndDrop(sourceData?.id, sourceData?.date, destinationData?.date);
|
||||
setShowAllIssues(true);
|
||||
highlightIssueOnDrop(source?.element?.id, false);
|
||||
},
|
||||
})
|
||||
);
|
||||
}, [dayTileRef?.current, formattedDatePayload]);
|
||||
|
||||
if (!formattedDatePayload) return null;
|
||||
const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
|
||||
|
||||
@ -65,13 +107,19 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
const isToday = date.date.toDateString() === new Date().toDateString();
|
||||
const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
|
||||
|
||||
const isWeekend = date.date.getDay() === 0 || date.date.getDay() === 6;
|
||||
const isMonthLayout = calendarLayout === "month";
|
||||
|
||||
const normalBackground = isWeekend ? "bg-custom-background-90" : "bg-custom-background-100";
|
||||
const draggingOverBackground = isWeekend ? "bg-custom-background-80" : "bg-custom-background-90";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="group relative flex h-full w-full flex-col bg-custom-background-90">
|
||||
<div ref={dayTileRef} className="group relative flex h-full w-full flex-col bg-custom-background-90">
|
||||
{/* header */}
|
||||
<div
|
||||
className={`hidden flex-shrink-0 items-center justify-end px-2 py-1.5 text-right text-xs md:flex ${
|
||||
calendarLayout === "month" // if month layout, highlight current month days
|
||||
isMonthLayout // if month layout, highlight current month days
|
||||
? date.is_current_month
|
||||
? "font-medium"
|
||||
: "text-custom-text-300"
|
||||
@ -93,44 +141,38 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
|
||||
{/* content */}
|
||||
<div className="hidden h-full w-full md:block">
|
||||
<Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-full w-full select-none ${
|
||||
snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
|
||||
? "bg-custom-background-90"
|
||||
: "bg-custom-background-100"
|
||||
} ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
<CalendarIssueBlocks
|
||||
date={date.date}
|
||||
issues={issues}
|
||||
issueIdList={issueIdList}
|
||||
quickActions={quickActions}
|
||||
isDragDisabled={readOnly}
|
||||
addIssuesToView={addIssuesToView}
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
quickAddCallback={quickAddCallback}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
<div className="h-full w-full hidden md:block">
|
||||
<div
|
||||
className={`h-full w-full select-none ${
|
||||
isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground
|
||||
} ${isMonthLayout ? "min-h-[5rem]" : ""}`}
|
||||
>
|
||||
<CalendarIssueBlocks
|
||||
date={date.date}
|
||||
issues={issues}
|
||||
issueIdList={issueIdList}
|
||||
showAllIssues={showAllIssues}
|
||||
setShowAllIssues={setShowAllIssues}
|
||||
quickActions={quickActions}
|
||||
isDragDisabled={readOnly}
|
||||
addIssuesToView={addIssuesToView}
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
quickAddCallback={quickAddCallback}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
isMonthLayout={isMonthLayout}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile view content */}
|
||||
<div
|
||||
onClick={() => setSelectedDate(date.date)}
|
||||
className={cn(
|
||||
"mx-auto flex h-full w-full cursor-pointer flex-col items-center justify-start py-2.5 text-sm font-medium md:hidden",
|
||||
"text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer opacity-80",
|
||||
{
|
||||
"bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
|
||||
"bg-custom-background-100": !isWeekend,
|
||||
}
|
||||
)}
|
||||
>
|
||||
|
||||
@ -1,23 +1,54 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
// components
|
||||
import { TIssueMap } from "@plane/types";
|
||||
import { CalendarIssueBlock } from "@/components/issues";
|
||||
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
|
||||
import { TRenderQuickActions } from "../list/list-view-types";
|
||||
import { HIGHLIGHT_CLASS } from "../utils";
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
issues: TIssueMap | undefined;
|
||||
issueId: string;
|
||||
quickActions: TRenderQuickActions;
|
||||
isDragging?: boolean;
|
||||
isDragDisabled: boolean;
|
||||
};
|
||||
|
||||
export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
|
||||
const { issues, issueId, quickActions, isDragging } = props;
|
||||
const { issues, issueId, quickActions, isDragDisabled } = props;
|
||||
|
||||
if (!issues?.[issueId]) return null;
|
||||
const issueRef = useRef<HTMLAnchorElement | null>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const issue = issues?.[issueId];
|
||||
|
||||
return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} />;
|
||||
useEffect(() => {
|
||||
const element = issueRef.current;
|
||||
|
||||
if (!element) return;
|
||||
|
||||
return combine(
|
||||
draggable({
|
||||
element,
|
||||
canDrag: () => !isDragDisabled,
|
||||
getInitialData: () => ({ id: issue?.id, date: issue?.target_date }),
|
||||
onDragStart: () => {
|
||||
setIsDragging(true);
|
||||
},
|
||||
onDrop: () => {
|
||||
setIsDragging(false);
|
||||
},
|
||||
})
|
||||
);
|
||||
}, [issueRef?.current, issue]);
|
||||
|
||||
useOutsideClickDetector(issueRef, () => {
|
||||
issueRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
|
||||
});
|
||||
|
||||
if (!issue) return null;
|
||||
|
||||
return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} ref={issueRef} />;
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useState, useRef } from "react";
|
||||
/* eslint-disable react/display-name */
|
||||
import { useState, useRef, forwardRef } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { MoreHorizontal } from "lucide-react";
|
||||
import { TIssue } from "@plane/types";
|
||||
@ -19,106 +20,111 @@ type Props = {
|
||||
isDragging?: boolean;
|
||||
};
|
||||
|
||||
export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
|
||||
const { issue, quickActions, isDragging = false } = props;
|
||||
// states
|
||||
const [isMenuActive, setIsMenuActive] = useState(false);
|
||||
// refs
|
||||
const blockRef = useRef(null);
|
||||
const menuActionRef = useRef<HTMLDivElement | null>(null);
|
||||
// hooks
|
||||
const { workspaceSlug, projectId } = useAppRouter();
|
||||
const { getProjectIdentifierById } = useProject();
|
||||
const { getProjectStates } = useProjectState();
|
||||
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
|
||||
const { isMobile } = usePlatformOS();
|
||||
export const CalendarIssueBlock = observer(
|
||||
forwardRef<HTMLAnchorElement, Props>((props, ref) => {
|
||||
const { issue, quickActions, isDragging = false } = props;
|
||||
// states
|
||||
const [isMenuActive, setIsMenuActive] = useState(false);
|
||||
// refs
|
||||
const blockRef = useRef(null);
|
||||
const menuActionRef = useRef<HTMLDivElement | null>(null);
|
||||
// hooks
|
||||
const { workspaceSlug, projectId } = useAppRouter();
|
||||
const { getProjectIdentifierById } = useProject();
|
||||
const { getProjectStates } = useProjectState();
|
||||
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
|
||||
const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
|
||||
|
||||
const handleIssuePeekOverview = (issue: TIssue) =>
|
||||
workspaceSlug &&
|
||||
issue &&
|
||||
issue.project_id &&
|
||||
issue.id &&
|
||||
!getIsIssuePeeked(issue.id) &&
|
||||
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
|
||||
const handleIssuePeekOverview = (issue: TIssue) =>
|
||||
workspaceSlug &&
|
||||
issue &&
|
||||
issue.project_id &&
|
||||
issue.id &&
|
||||
!getIsIssuePeeked(issue.id) &&
|
||||
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
|
||||
|
||||
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
|
||||
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
|
||||
|
||||
const customActionButton = (
|
||||
<div
|
||||
ref={menuActionRef}
|
||||
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
|
||||
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
onClick={() => setIsMenuActive(!isMenuActive)}
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
);
|
||||
const customActionButton = (
|
||||
<div
|
||||
ref={menuActionRef}
|
||||
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
|
||||
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
onClick={() => setIsMenuActive(!isMenuActive)}
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const isMenuActionRefAboveScreenBottom =
|
||||
menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
|
||||
const isMenuActionRefAboveScreenBottom =
|
||||
menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
|
||||
|
||||
const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
|
||||
const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
|
||||
|
||||
return (
|
||||
<ControlLink
|
||||
id={`issue-${issue.id}`}
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
|
||||
target="_blank"
|
||||
onClick={() => handleIssuePeekOverview(issue)}
|
||||
className="w-full cursor-pointer text-sm text-custom-text-100"
|
||||
disabled={!!issue?.tempId}
|
||||
>
|
||||
<>
|
||||
{issue?.tempId !== undefined && (
|
||||
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={blockRef}
|
||||
className={cn(
|
||||
"group/calendar-block flex h-10 w-full items-center justify-between gap-1.5 rounded border-b border-custom-border-200 px-4 py-1.5 hover:border-custom-border-400 md:h-8 md:border-[0.5px] md:px-1 ",
|
||||
{
|
||||
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
|
||||
"bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
|
||||
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
|
||||
}
|
||||
return (
|
||||
<ControlLink
|
||||
id={`issue-${issue.id}`}
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
|
||||
target="_blank"
|
||||
onClick={() => handleIssuePeekOverview(issue)}
|
||||
className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
|
||||
disabled={!!issue?.tempId}
|
||||
ref={ref}
|
||||
>
|
||||
<>
|
||||
{issue?.tempId !== undefined && (
|
||||
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
|
||||
)}
|
||||
>
|
||||
<div className="flex h-full items-center gap-1.5 truncate">
|
||||
<span
|
||||
className="h-full w-0.5 flex-shrink-0 rounded"
|
||||
style={{
|
||||
backgroundColor: stateColor,
|
||||
}}
|
||||
/>
|
||||
<div className="flex-shrink-0 text-sm text-custom-text-300 md:text-xs">
|
||||
{getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
|
||||
</div>
|
||||
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
|
||||
<div className="truncate text-sm font-medium md:text-xs md:font-normal">{issue.name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`h-5 w-5 flex-shrink-0 group-hover/calendar-block:block md:hidden ${
|
||||
isMenuActive ? "!block" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
ref={blockRef}
|
||||
className={cn(
|
||||
"group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 ",
|
||||
{
|
||||
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
|
||||
"bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
|
||||
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
|
||||
}
|
||||
)}
|
||||
>
|
||||
{quickActions({
|
||||
issue,
|
||||
parentRef: blockRef,
|
||||
customActionButton,
|
||||
placement,
|
||||
})}
|
||||
<div className="flex h-full items-center gap-1.5 truncate">
|
||||
<span
|
||||
className="h-full w-0.5 flex-shrink-0 rounded"
|
||||
style={{
|
||||
backgroundColor: stateColor,
|
||||
}}
|
||||
/>
|
||||
<div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
|
||||
{getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
|
||||
</div>
|
||||
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
|
||||
<div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
|
||||
isMenuActive ? "!block" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{quickActions({
|
||||
issue,
|
||||
parentRef: blockRef,
|
||||
customActionButton,
|
||||
placement,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</ControlLink>
|
||||
);
|
||||
});
|
||||
</>
|
||||
</ControlLink>
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
CalendarIssueBlock.displayName = "CalendarIssueBlock";
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { Draggable } from "@hello-pangea/dnd";
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// types
|
||||
import { TIssue, TIssueMap } from "@plane/types";
|
||||
@ -14,6 +13,9 @@ type Props = {
|
||||
date: Date;
|
||||
issues: TIssueMap | undefined;
|
||||
issueIdList: string[] | null;
|
||||
showAllIssues: boolean;
|
||||
setShowAllIssues?: Dispatch<SetStateAction<boolean>>;
|
||||
isMonthLayout: boolean;
|
||||
quickActions: TRenderQuickActions;
|
||||
isDragDisabled?: boolean;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
@ -35,6 +37,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
||||
date,
|
||||
issues,
|
||||
issueIdList,
|
||||
showAllIssues,
|
||||
setShowAllIssues,
|
||||
quickActions,
|
||||
isDragDisabled = false,
|
||||
enableQuickIssueCreate,
|
||||
@ -43,10 +47,9 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
||||
addIssuesToView,
|
||||
viewId,
|
||||
readOnly,
|
||||
isMonthLayout,
|
||||
isMobileView = false,
|
||||
} = props;
|
||||
// states
|
||||
const [showAllIssues, setShowAllIssues] = useState(false);
|
||||
|
||||
const formattedDatePayload = renderFormattedPayloadDate(date);
|
||||
const totalIssues = issueIdList?.length ?? 0;
|
||||
@ -55,30 +58,27 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{issueIdList?.slice(0, showAllIssues || isMobileView ? issueIdList.length : 4).map((issueId, index) =>
|
||||
!isMobileView ? (
|
||||
<Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="relative cursor-pointer p-1 px-2"
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
<CalendarIssueBlockRoot
|
||||
issues={issues}
|
||||
issueId={issueId}
|
||||
quickActions={quickActions}
|
||||
isDragging={snapshot.isDragging}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
) : (
|
||||
<CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
|
||||
)
|
||||
{issueIdList?.slice(0, showAllIssues || !isMonthLayout ? issueIdList.length : 4).map((issueId) => (
|
||||
<div key={issueId} className="relative cursor-pointer p-1 px-2">
|
||||
<CalendarIssueBlockRoot
|
||||
issues={issues}
|
||||
issueId={issueId}
|
||||
quickActions={quickActions}
|
||||
isDragDisabled={isDragDisabled || isMobileView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{totalIssues > 4 && isMonthLayout && (
|
||||
<div className="hidden items-center px-2.5 py-1 md:flex">
|
||||
<button
|
||||
type="button"
|
||||
className="w-min whitespace-nowrap rounded px-1.5 py-1 text-xs font-medium text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-300"
|
||||
onClick={() => setShowAllIssues && setShowAllIssues(!showAllIssues)}
|
||||
>
|
||||
{showAllIssues ? "Hide" : totalIssues - 4 + " more"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
|
||||
<div className="border-b border-custom-border-200 px-1 py-1 md:border-none md:px-2">
|
||||
<CalendarQuickAddIssueForm
|
||||
@ -90,21 +90,10 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
||||
quickAddCallback={quickAddCallback}
|
||||
addIssuesToView={addIssuesToView}
|
||||
viewId={viewId}
|
||||
onOpen={() => setShowAllIssues(true)}
|
||||
onOpen={() => setShowAllIssues && setShowAllIssues(true)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{totalIssues > 4 && (
|
||||
<div className="hidden items-center px-2.5 py-1 md:flex">
|
||||
<button
|
||||
type="button"
|
||||
className="w-min whitespace-nowrap rounded px-1.5 py-1 text-xs font-medium text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-300"
|
||||
onClick={() => setShowAllIssues(!showAllIssues)}
|
||||
>
|
||||
{showAllIssues ? "Hide" : totalIssues - 4 + " more"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,36 +1,21 @@
|
||||
import { DraggableLocation } from "@hello-pangea/dnd";
|
||||
import { TGroupedIssues, IIssueMap, TIssue } from "@plane/types";
|
||||
import { TIssue } from "@plane/types";
|
||||
|
||||
export const handleDragDrop = async (
|
||||
source: DraggableLocation,
|
||||
destination: DraggableLocation,
|
||||
issueId: string,
|
||||
sourceDate: string,
|
||||
destinationDate: string,
|
||||
workspaceSlug: string | undefined,
|
||||
projectId: string | undefined,
|
||||
issueMap: IIssueMap,
|
||||
issueWithIds: TGroupedIssues,
|
||||
updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>
|
||||
) => {
|
||||
if (!issueMap || !issueWithIds || !workspaceSlug || !projectId || !updateIssue) return;
|
||||
if (!workspaceSlug || !projectId || !updateIssue) return;
|
||||
|
||||
const sourceColumnId = source?.droppableId || null;
|
||||
const destinationColumnId = destination?.droppableId || null;
|
||||
if (sourceDate === destinationDate) return;
|
||||
|
||||
if (!workspaceSlug || !projectId || !sourceColumnId || !destinationColumnId) return;
|
||||
const updatedIssue = {
|
||||
id: issueId,
|
||||
target_date: destinationDate,
|
||||
};
|
||||
|
||||
if (sourceColumnId === destinationColumnId) return;
|
||||
|
||||
// horizontal
|
||||
if (sourceColumnId != destinationColumnId) {
|
||||
const sourceIssues = issueWithIds[sourceColumnId] || [];
|
||||
|
||||
const [removed] = sourceIssues.splice(source.index, 1);
|
||||
const removedIssueDetail = issueMap[removed];
|
||||
|
||||
const updatedIssue = {
|
||||
id: removedIssueDetail?.id,
|
||||
target_date: destinationColumnId,
|
||||
};
|
||||
|
||||
return await updateIssue(projectId, updatedIssue.id, updatedIssue);
|
||||
}
|
||||
return await updateIssue(projectId, updatedIssue.id, updatedIssue);
|
||||
};
|
||||
|
||||
@ -20,6 +20,11 @@ type Props = {
|
||||
quickActions: TRenderQuickActions;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
disableIssueCreation?: boolean;
|
||||
handleDragAndDrop: (
|
||||
issueId: string | undefined,
|
||||
sourceDate: string | undefined,
|
||||
destinationDate: string | undefined
|
||||
) => Promise<void>;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
@ -38,6 +43,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
issuesFilterStore,
|
||||
issues,
|
||||
groupedIssueIds,
|
||||
handleDragAndDrop,
|
||||
week,
|
||||
quickActions,
|
||||
enableQuickIssueCreate,
|
||||
@ -80,6 +86,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
addIssuesToView={addIssuesToView}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
handleDragAndDrop={handleDragAndDrop}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const useDraggableInPortal = () => {
|
||||
const self = useRef<Element>();
|
||||
|
||||
useEffect(() => {
|
||||
const div = document.createElement("div");
|
||||
div.style.position = "absolute";
|
||||
div.style.pointerEvents = "none";
|
||||
div.style.top = "0";
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
self.current = div;
|
||||
document.body.appendChild(div);
|
||||
return () => {
|
||||
document.body.removeChild(div);
|
||||
};
|
||||
}, [self.current]);
|
||||
|
||||
return (render: any) => (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
|
||||
const element = render(provided, snapshot);
|
||||
if (self.current && snapshot?.isDragging) {
|
||||
return createPortal(element, self.current);
|
||||
}
|
||||
return element;
|
||||
};
|
||||
};
|
||||
|
||||
export default useDraggableInPortal;
|
||||
Loading…
Reference in New Issue
Block a user