import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd"; import { MoreVertical } from "lucide-react"; // hooks import { useChart } from "components/gantt-chart/hooks"; // ui import { Loader } from "@plane/ui"; // components import { ModuleGanttSidebarBlock } from "components/modules"; // helpers import { findTotalDaysInRange } from "helpers/date-time.helper"; import { cn } from "helpers/common.helper"; // types import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart"; // constants import { BLOCK_HEIGHT } from "../constants"; type Props = { title: string; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; blocks: IGanttBlock[] | null; enableReorder: boolean; }; export const ModuleGanttSidebar: React.FC = (props) => { const { blockUpdateHandler, blocks, enableReorder } = props; // chart hook const { activeBlock, dispatch } = useChart(); // 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 duration = findTotalDaysInRange(block.start_date, block.target_date); return ( {(provided, snapshot) => (
updateActiveBlock(block)} onMouseLeave={() => updateActiveBlock(null)} ref={provided.innerRef} {...provided.draggableProps} >
{enableReorder && ( )}
{duration !== undefined && (
{duration} day{duration > 1 ? "s" : ""}
)}
)}
); }) ) : ( )} {droppableProvided.placeholder}
)}
); };