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

[WEB-1139] chore: Calendar pragmatic dnd (#4410)

Browse Source 
* replace Pragmatic DND for calendar

* remove unnecessary check
This commit is contained in:
rahulramesha 2024-05-09 15:51:49 +05:30 committed by GitHub
parent 9d2d9c59ca
commit d8ab3e0087
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 334 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -1,6 +1,5 @@
import { FC } from "react"; import { FC } from "react";
import { DragDropContext, DropResult } from "@hello-pangea/dnd"; import { observer } from "mobx-react-lite";
import { observer } from "mobx-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { TGroupedIssues } from "@plane/types"; import { TGroupedIssues } from "@plane/types";
// components // components
@ -51,67 +50,59 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues; const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
const onDragEnd = async (result: DropResult) => { const handleDragAndDrop = async (
if (!result) return; issueId: string | undefined,
sourceDate: string | undefined,
destinationDate: string | undefined
) => {
if (!issueId || !destinationDate || !sourceDate) return;
// return if not dropped on the correct place await handleDragDrop(
if (!result.destination) return; issueId,
sourceDate,
// return if dropped on the same date destinationDate,
if (result.destination.droppableId === result.source.droppableId) return; workspaceSlug?.toString(),
projectId?.toString(),
if (handleDragDrop) { updateIssue
await handleDragDrop( ).catch((err) => {
result.source, setToast({
result.destination, title: "Error!",
workspaceSlug?.toString(), type: TOAST_TYPE.ERROR,
projectId?.toString(), message: err?.detail ?? "Failed to perform this action",
issueMap,
groupedIssueIds,
updateIssue
).catch((err) => {
setToast({
title: "Error!",
type: TOAST_TYPE.ERROR,
message: err?.detail ?? "Failed to perform this action",
});
}); });
} });
}; };
return ( return (
<> <>
<div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4"> <div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
<DragDropContext onDragEnd={onDragEnd}> <CalendarChart
<CalendarChart issuesFilterStore={issuesFilter}
issuesFilterStore={issuesFilter} issues={issueMap}
issues={issueMap} groupedIssueIds={groupedIssueIds}
groupedIssueIds={groupedIssueIds} layout={displayFilters?.calendar?.layout}
layout={displayFilters?.calendar?.layout} showWeekends={displayFilters?.calendar?.show_weekends ?? false}
showWeekends={displayFilters?.calendar?.show_weekends ?? false} quickActions={({ issue, parentRef, customActionButton, placement }) => (
quickActions={({ issue, parentRef, customActionButton, placement }) => ( <QuickActions
<QuickActions parentRef={parentRef}
parentRef={parentRef} customActionButton={customActionButton}
customActionButton={customActionButton} issue={issue}
issue={issue} handleDelete={async () => removeIssue(issue.project_id, issue.id)}
handleDelete={async () => removeIssue(issue.project_id, issue.id)} handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)} handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
handleRemoveFromView={async () => handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
removeIssueFromView && removeIssueFromView(issue.project_id, issue.id) handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
} readOnly={!isEditingAllowed || isCompletedCycle}
handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)} placements={placement}
handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)} />
readOnly={!isEditingAllowed || isCompletedCycle} )}
placements={placement} addIssuesToView={addIssuesToView}
/> quickAddCallback={issues.quickAddIssue}
)} viewId={viewId}
addIssuesToView={addIssuesToView} readOnly={!isEditingAllowed || isCompletedCycle}
quickAddCallback={issues.quickAddIssue} updateFilters={updateFilters}
viewId={viewId} handleDragAndDrop={handleDragAndDrop}
readOnly={!isEditingAllowed || isCompletedCycle} />
updateFilters={updateFilters}
/>
</DragDropContext>
</div> </div>
</> </>
); );

30
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -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"; import { observer } from "mobx-react-lite";
// types // types
import type { import type {
@ -40,6 +42,11 @@ type Props = {
layout: "month" | "week" | undefined; layout: "month" | "week" | undefined;
showWeekends: boolean; showWeekends: boolean;
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
handleDragAndDrop: (
issueId: string | undefined,
sourceDate: string | undefined,
destinationDate: string | undefined
) => Promise<void>;
quickAddCallback?: ( quickAddCallback?: (
workspaceSlug: string, workspaceSlug: string,
projectId: string, projectId: string,
@ -63,6 +70,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
groupedIssueIds, groupedIssueIds,
layout, layout,
showWeekends, showWeekends,
handleDragAndDrop,
quickActions, quickActions,
quickAddCallback, quickAddCallback,
addIssuesToView, addIssuesToView,
@ -72,6 +80,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
} = props; } = props;
// states // states
const [selectedDate, setSelectedDate] = useState<Date>(new Date()); const [selectedDate, setSelectedDate] = useState<Date>(new Date());
//refs
const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
// store hooks // store hooks
const { const {
issues: { viewFlags }, issues: { viewFlags },
@ -91,6 +101,19 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined; 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) if (!calendarPayload || !formattedDatePayload)
return ( return (
<div className="grid h-full w-full place-items-center"> <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", { className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
"vertical-scrollbar scrollbar-lg": windowWidth > 768, "vertical-scrollbar scrollbar-lg": windowWidth > 768,
})} })}
ref={scrollableContainerRef}
> >
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} /> <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
<div className="h-full w-full"> <div className="h-full w-full">
@ -123,6 +147,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
selectedDate={selectedDate} selectedDate={selectedDate}
setSelectedDate={setSelectedDate} setSelectedDate={setSelectedDate}
issuesFilterStore={issuesFilterStore} issuesFilterStore={issuesFilterStore}
handleDragAndDrop={handleDragAndDrop}
key={weekIndex} key={weekIndex}
week={week} week={week}
issues={issues} issues={issues}
@ -143,6 +168,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
selectedDate={selectedDate} selectedDate={selectedDate}
setSelectedDate={setSelectedDate} setSelectedDate={setSelectedDate}
issuesFilterStore={issuesFilterStore} issuesFilterStore={issuesFilterStore}
handleDragAndDrop={handleDragAndDrop}
week={issueCalendarView.allDaysOfActiveWeek} week={issueCalendarView.allDaysOfActiveWeek}
issues={issues} issues={issues}
groupedIssueIds={groupedIssueIds} groupedIssueIds={groupedIssueIds}
@ -175,6 +201,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
addIssuesToView={addIssuesToView} addIssuesToView={addIssuesToView}
viewId={viewId} viewId={viewId}
readOnly={readOnly} readOnly={readOnly}
isMonthLayout={false}
showAllIssues
isDragDisabled isDragDisabled
isMobileView isMobileView
/> />

112
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -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"; import { observer } from "mobx-react-lite";
// types // types
import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types"; import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
// components // components
import { CalendarIssueBlocks, ICalendarDate } from "@/components/issues"; import { CalendarIssueBlocks, ICalendarDate } from "@/components/issues";
// constants import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
// helpers
import { MONTHS_LIST } from "@/constants/calendar"; import { MONTHS_LIST } from "@/constants/calendar";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
@ -24,6 +27,11 @@ type Props = {
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
enableQuickIssueCreate?: boolean; enableQuickIssueCreate?: boolean;
disableIssueCreation?: boolean; disableIssueCreation?: boolean;
handleDragAndDrop: (
issueId: string | undefined,
sourceDate: string | undefined,
destinationDate: string | undefined
) => Promise<void>;
quickAddCallback?: ( quickAddCallback?: (
workspaceSlug: string, workspaceSlug: string,
projectId: string, projectId: string,
@ -51,12 +59,46 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
viewId, viewId,
readOnly = false, readOnly = false,
selectedDate, selectedDate,
handleDragAndDrop,
setSelectedDate, setSelectedDate,
} = props; } = props;
const [isDraggingOver, setIsDraggingOver] = useState(false);
const [showAllIssues, setShowAllIssues] = useState(false);
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month"; const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
const formattedDatePayload = renderFormattedPayloadDate(date.date); 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; if (!formattedDatePayload) return null;
const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : 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 isToday = date.date.toDateString() === new Date().toDateString();
const isSelectedDate = date.date.toDateString() == selectedDate.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 ( 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 */} {/* header */}
<div <div
className={`hidden flex-shrink-0 items-center justify-end px-2 py-1.5 text-right text-xs md:flex ${ 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 ? date.is_current_month
? "font-medium" ? "font-medium"
: "text-custom-text-300" : "text-custom-text-300"
@ -93,44 +141,38 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
</div> </div>
{/* content */} {/* content */}
<div className="hidden h-full w-full md:block"> <div className="h-full w-full hidden md:block">
<Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}> <div
{(provided, snapshot) => ( className={`h-full w-full select-none ${
<div isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground
className={`h-full w-full select-none ${ } ${isMonthLayout ? "min-h-[5rem]" : ""}`}
snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6 >
? "bg-custom-background-90" <CalendarIssueBlocks
: "bg-custom-background-100" date={date.date}
} ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`} issues={issues}
{...provided.droppableProps} issueIdList={issueIdList}
ref={provided.innerRef} showAllIssues={showAllIssues}
> setShowAllIssues={setShowAllIssues}
<CalendarIssueBlocks quickActions={quickActions}
date={date.date} isDragDisabled={readOnly}
issues={issues} addIssuesToView={addIssuesToView}
issueIdList={issueIdList} disableIssueCreation={disableIssueCreation}
quickActions={quickActions} enableQuickIssueCreate={enableQuickIssueCreate}
isDragDisabled={readOnly} quickAddCallback={quickAddCallback}
addIssuesToView={addIssuesToView} viewId={viewId}
disableIssueCreation={disableIssueCreation} readOnly={readOnly}
enableQuickIssueCreate={enableQuickIssueCreate} isMonthLayout={isMonthLayout}
quickAddCallback={quickAddCallback} />
viewId={viewId} </div>
readOnly={readOnly}
/>
{provided.placeholder}
</div>
)}
</Droppable>
</div> </div>
{/* Mobile view content */} {/* Mobile view content */}
<div <div
onClick={() => setSelectedDate(date.date)} onClick={() => setSelectedDate(date.date)}
className={cn( 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,
} }
)} )}
> >

41
web/components/issues/issue-layouts/calendar/issue-block-root.tsx
View File

@ -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 // components
import { TIssueMap } from "@plane/types"; import { TIssueMap } from "@plane/types";
import { CalendarIssueBlock } from "@/components/issues"; import { CalendarIssueBlock } from "@/components/issues";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import { TRenderQuickActions } from "../list/list-view-types"; import { TRenderQuickActions } from "../list/list-view-types";
import { HIGHLIGHT_CLASS } from "../utils";
// types // types
type Props = { type Props = {
issues: TIssueMap | undefined; issues: TIssueMap | undefined;
issueId: string; issueId: string;
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
isDragging?: boolean; isDragDisabled: boolean;
}; };
export const CalendarIssueBlockRoot: React.FC<Props> = (props) => { 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]; 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} />;
}; };

192
web/components/issues/issue-layouts/calendar/issue-block.tsx
View File

@ -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 { observer } from "mobx-react";
import { MoreHorizontal } from "lucide-react"; import { MoreHorizontal } from "lucide-react";
import { TIssue } from "@plane/types"; import { TIssue } from "@plane/types";
@ -19,106 +20,111 @@ type Props = {
isDragging?: boolean; isDragging?: boolean;
}; };
export const CalendarIssueBlock: React.FC<Props> = observer((props) => { export const CalendarIssueBlock = observer(
const { issue, quickActions, isDragging = false } = props; forwardRef<HTMLAnchorElement, Props>((props, ref) => {
// states const { issue, quickActions, isDragging = false } = props;
const [isMenuActive, setIsMenuActive] = useState(false); // states
// refs const [isMenuActive, setIsMenuActive] = useState(false);
const blockRef = useRef(null); // refs
const menuActionRef = useRef<HTMLDivElement | null>(null); const blockRef = useRef(null);
// hooks const menuActionRef = useRef<HTMLDivElement | null>(null);
const { workspaceSlug, projectId } = useAppRouter(); // hooks
const { getProjectIdentifierById } = useProject(); const { workspaceSlug, projectId } = useAppRouter();
const { getProjectStates } = useProjectState(); const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { getProjectStates } = useProjectState();
const { isMobile } = usePlatformOS(); 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) => const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug && workspaceSlug &&
issue && issue &&
issue.project_id && issue.project_id &&
issue.id && issue.id &&
!getIsIssuePeeked(issue.id) && !getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
const customActionButton = ( const customActionButton = (
<div <div
ref={menuActionRef} ref={menuActionRef}
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${ 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" isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
}`} }`}
onClick={() => setIsMenuActive(!isMenuActive)} onClick={() => setIsMenuActive(!isMenuActive)}
> >
<MoreHorizontal className="h-3.5 w-3.5" /> <MoreHorizontal className="h-3.5 w-3.5" />
</div> </div>
); );
const isMenuActionRefAboveScreenBottom = const isMenuActionRefAboveScreenBottom =
menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220; menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end"; const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
return ( return (
<ControlLink <ControlLink
id={`issue-${issue.id}`} id={`issue-${issue.id}`}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
target="_blank" target="_blank"
onClick={() => handleIssuePeekOverview(issue)} onClick={() => handleIssuePeekOverview(issue)}
className="w-full cursor-pointer text-sm text-custom-text-100" 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} 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" /> {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),
}
)} )}
>
<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 <div
className={`h-5 w-5 flex-shrink-0 group-hover/calendar-block:block md:hidden ${ ref={blockRef}
isMenuActive ? "!block" : "" 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 ",
onClick={(e) => { {
e.preventDefault(); "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
e.stopPropagation(); "bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
}} "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
}
)}
> >
{quickActions({ <div className="flex h-full items-center gap-1.5 truncate">
issue, <span
parentRef: blockRef, className="h-full w-0.5 flex-shrink-0 rounded"
customActionButton, style={{
placement, 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>
</div> </>
</> </ControlLink>
</ControlLink> );
); })
}); );
CalendarIssueBlock.displayName = "CalendarIssueBlock";

67
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -1,5 +1,4 @@
import { useState } from "react"; import { Dispatch, SetStateAction } from "react";
import { Draggable } from "@hello-pangea/dnd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// types // types
import { TIssue, TIssueMap } from "@plane/types"; import { TIssue, TIssueMap } from "@plane/types";
@ -14,6 +13,9 @@ type Props = {
date: Date; date: Date;
issues: TIssueMap | undefined; issues: TIssueMap | undefined;
issueIdList: string[] | null; issueIdList: string[] | null;
showAllIssues: boolean;
setShowAllIssues?: Dispatch<SetStateAction<boolean>>;
isMonthLayout: boolean;
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
isDragDisabled?: boolean; isDragDisabled?: boolean;
enableQuickIssueCreate?: boolean; enableQuickIssueCreate?: boolean;
@ -35,6 +37,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
date, date,
issues, issues,
issueIdList, issueIdList,
showAllIssues,
setShowAllIssues,
quickActions, quickActions,
isDragDisabled = false, isDragDisabled = false,
enableQuickIssueCreate, enableQuickIssueCreate,
@ -43,10 +47,9 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
addIssuesToView, addIssuesToView,
viewId, viewId,
readOnly, readOnly,
isMonthLayout,
isMobileView = false, isMobileView = false,
} = props; } = props;
// states
const [showAllIssues, setShowAllIssues] = useState(false);
const formattedDatePayload = renderFormattedPayloadDate(date); const formattedDatePayload = renderFormattedPayloadDate(date);
const totalIssues = issueIdList?.length ?? 0; const totalIssues = issueIdList?.length ?? 0;
@ -55,30 +58,27 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
return ( return (
<> <>
{issueIdList?.slice(0, showAllIssues || isMobileView ? issueIdList.length : 4).map((issueId, index) => {issueIdList?.slice(0, showAllIssues || !isMonthLayout ? issueIdList.length : 4).map((issueId) => (
!isMobileView ? ( <div key={issueId} className="relative cursor-pointer p-1 px-2">
<Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}> <CalendarIssueBlockRoot
{(provided, snapshot) => ( issues={issues}
<div issueId={issueId}
className="relative cursor-pointer p-1 px-2" quickActions={quickActions}
{...provided.draggableProps} isDragDisabled={isDragDisabled || isMobileView}
{...provided.dragHandleProps} />
ref={provided.innerRef} </div>
> ))}
<CalendarIssueBlockRoot {totalIssues > 4 && isMonthLayout && (
issues={issues} <div className="hidden items-center px-2.5 py-1 md:flex">
issueId={issueId} <button
quickActions={quickActions} type="button"
isDragging={snapshot.isDragging} 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)}
</div> >
)} {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
</Draggable> </button>
) : ( </div>
<CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
)
)} )}
{enableQuickIssueCreate && !disableIssueCreation && !readOnly && ( {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
<div className="border-b border-custom-border-200 px-1 py-1 md:border-none md:px-2"> <div className="border-b border-custom-border-200 px-1 py-1 md:border-none md:px-2">
<CalendarQuickAddIssueForm <CalendarQuickAddIssueForm
@ -90,21 +90,10 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
quickAddCallback={quickAddCallback} quickAddCallback={quickAddCallback}
addIssuesToView={addIssuesToView} addIssuesToView={addIssuesToView}
viewId={viewId} viewId={viewId}
onOpen={() => setShowAllIssues(true)} onOpen={() => setShowAllIssues && setShowAllIssues(true)}
/> />
</div> </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>
)}
</> </>
); );
}); });

37
web/components/issues/issue-layouts/calendar/utils.ts
View File

@ -1,36 +1,21 @@
import { DraggableLocation } from "@hello-pangea/dnd"; import { TIssue } from "@plane/types";
import { TGroupedIssues, IIssueMap, TIssue } from "@plane/types";
export const handleDragDrop = async ( export const handleDragDrop = async (
source: DraggableLocation, issueId: string,
destination: DraggableLocation, sourceDate: string,
destinationDate: string,
workspaceSlug: string | undefined, workspaceSlug: string | undefined,
projectId: string | undefined, projectId: string | undefined,
issueMap: IIssueMap,
issueWithIds: TGroupedIssues,
updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void> 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; if (sourceDate === destinationDate) return;
const destinationColumnId = destination?.droppableId || null;
if (!workspaceSlug || !projectId || !sourceColumnId || !destinationColumnId) return; const updatedIssue = {
id: issueId,
target_date: destinationDate,
};
if (sourceColumnId === destinationColumnId) return; return await updateIssue(projectId, updatedIssue.id, updatedIssue);
// 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);
}
}; };

7
web/components/issues/issue-layouts/calendar/week-days.tsx
View File

@ -20,6 +20,11 @@ type Props = {
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
enableQuickIssueCreate?: boolean; enableQuickIssueCreate?: boolean;
disableIssueCreation?: boolean; disableIssueCreation?: boolean;
handleDragAndDrop: (
issueId: string | undefined,
sourceDate: string | undefined,
destinationDate: string | undefined
) => Promise<void>;
quickAddCallback?: ( quickAddCallback?: (
workspaceSlug: string, workspaceSlug: string,
projectId: string, projectId: string,
@ -38,6 +43,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
issuesFilterStore, issuesFilterStore,
issues, issues,
groupedIssueIds, groupedIssueIds,
handleDragAndDrop,
week, week,
quickActions, quickActions,
enableQuickIssueCreate, enableQuickIssueCreate,
@ -80,6 +86,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
addIssuesToView={addIssuesToView} addIssuesToView={addIssuesToView}
viewId={viewId} viewId={viewId}
readOnly={readOnly} readOnly={readOnly}
handleDragAndDrop={handleDragAndDrop}
/> />
); );
})} })}

31
web/hooks/use-draggable-portal.ts
View File

@ -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;