import { observer } from "mobx-react"; import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd"; import { MoreVertical } from "lucide-react"; // hooks import { useChart } from "components/gantt-chart/hooks"; import { useIssueDetail } from "hooks/store"; // ui import { Loader } from "@plane/ui"; // components import { GanttQuickAddIssueForm, IssueGanttSidebarBlock } from "components/issues"; // helpers import { findTotalDaysInRange } from "helpers/date-time.helper"; import { cn } from "helpers/common.helper"; // types import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types"; import { TIssue } from "@plane/types"; import { BLOCK_HEIGHT } from "../constants"; type Props = { blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; blocks: IGanttBlock[] | null; enableReorder: boolean; enableQuickIssueCreate?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; showAllBlocks?: boolean; }; export const IssueGanttSidebar: React.FC = observer((props) => { const { blockUpdateHandler, blocks, enableReorder, enableQuickIssueCreate, quickAddCallback, viewId, disableIssueCreation, showAllBlocks = false, } = props; const { activeBlock, dispatch } = useChart(); const { peekIssue } = useIssueDetail(); // update the active block on hover const updateActiveBlock = (block: IGanttBlock | null) => { dispatch({ type: "PARTIAL_UPDATE", payload: { activeBlock: block, }, }); }; const handleOrderChange = (result: DropResult) => { if (!blocks) return; const { source, destination } = result; // return if dropped outside the list if (!destination) return; // return if dropped on the same index if (source.index === destination.index) return; let updatedSortOrder = blocks[source.index].sort_order; // update the sort order to the lowest if dropped at the top if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000; // update the sort order to the highest if dropped at the bottom else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000; // update the sort order to the average of the two adjacent blocks if dropped in between else { const destinationSortingOrder = blocks[destination.index].sort_order; const relativeDestinationSortingOrder = source.index < destination.index ? blocks[destination.index + 1].sort_order : blocks[destination.index - 1].sort_order; updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2; } // extract the element from the source index and insert it at the destination index without updating the entire array const removedElement = blocks.splice(source.index, 1)[0]; blocks.splice(destination.index, 0, removedElement); // call the block update handler with the updated sort order, new and old index blockUpdateHandler(removedElement.data, { sort_order: { destinationIndex: destination.index, newSortOrder: updatedSortOrder, sourceIndex: source.index, }, }); }; return ( <> {(droppableProvided) => (
<> {blocks ? ( blocks.map((block, index) => { const isBlockVisibleOnSidebar = block.start_date && block.target_date; // hide the block if it doesn't have start and target dates and showAllBlocks is false if (!showAllBlocks && !isBlockVisibleOnSidebar) return; const duration = !block.start_date || !block.target_date ? null : findTotalDaysInRange(block.start_date, block.target_date); return ( {(provided, snapshot) => (
updateActiveBlock(block)} onMouseLeave={() => updateActiveBlock(null)} ref={provided.innerRef} {...provided.draggableProps} >
{enableReorder && ( )}
{duration && (
{duration} day{duration > 1 ? "s" : ""}
)}
)}
); }) ) : ( )} {droppableProvided.placeholder}
)}
{enableQuickIssueCreate && !disableIssueCreation && ( )} ); });