-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: gantt sidebar * fix: exception error fix: file placement * refactor: not passing sidebar block as props
- Loading branch information
1 parent
79df59f
commit 34bccd7
Showing
14 changed files
with
232 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export * from "./cycle-sidebar"; | ||
| export * from "./module-sidebar"; | ||
| export * from "./sidebar"; | ||
| export * from "./project-view-sidebar"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
160 changes: 160 additions & 0 deletions
160
web/components/gantt-chart/sidebar/project-view-sidebar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| import { useRouter } from "next/router"; | ||
| import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd"; | ||
| import StrictModeDroppable from "components/dnd/StrictModeDroppable"; | ||
| import { MoreVertical } from "lucide-react"; | ||
| // hooks | ||
| import { useChart } from "components/gantt-chart/hooks"; | ||
| // ui | ||
| import { Loader } from "@plane/ui"; | ||
| // components | ||
| import { IssueGanttSidebarBlock } from "components/issues"; | ||
| // helpers | ||
| import { findTotalDaysInRange } from "helpers/date-time.helper"; | ||
| // types | ||
| import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types"; | ||
|
|
||
| type Props = { | ||
| title: string; | ||
| blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; | ||
| blocks: IGanttBlock[] | null; | ||
| enableReorder: boolean; | ||
| enableQuickIssueCreate?: boolean; | ||
| }; | ||
|
|
||
| export const ProjectViewGanttSidebar: React.FC<Props> = (props) => { | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| const { title, blockUpdateHandler, blocks, enableReorder } = props; | ||
|
|
||
| const router = useRouter(); | ||
| const { cycleId } = router.query; | ||
|
|
||
| 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 ( | ||
| <DragDropContext onDragEnd={handleOrderChange}> | ||
| <StrictModeDroppable droppableId="gantt-sidebar"> | ||
| {(droppableProvided) => ( | ||
| <div | ||
| id={`gantt-sidebar-${cycleId}`} | ||
| className="max-h-full overflow-y-auto pl-2.5 mt-3" | ||
| ref={droppableProvided.innerRef} | ||
| {...droppableProvided.droppableProps} | ||
| > | ||
| <> | ||
| {blocks ? ( | ||
| blocks.map((block, index) => { | ||
| const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true); | ||
|
|
||
| return ( | ||
| <Draggable | ||
| key={`sidebar-block-${block.id}`} | ||
| draggableId={`sidebar-block-${block.id}`} | ||
| index={index} | ||
| isDragDisabled={!enableReorder} | ||
| > | ||
| {(provided, snapshot) => ( | ||
| <div | ||
| className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`} | ||
| onMouseEnter={() => updateActiveBlock(block)} | ||
| onMouseLeave={() => updateActiveBlock(null)} | ||
| ref={provided.innerRef} | ||
| {...provided.draggableProps} | ||
| > | ||
| <div | ||
| id={`sidebar-block-${block.id}`} | ||
| className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${ | ||
| activeBlock?.id === block.id ? "bg-custom-background-80" : "" | ||
| }`} | ||
| > | ||
| {enableReorder && ( | ||
| <button | ||
| type="button" | ||
| className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100" | ||
| {...provided.dragHandleProps} | ||
| > | ||
| <MoreVertical className="h-3.5 w-3.5" /> | ||
| <MoreVertical className="h-3.5 w-3.5 -ml-5" /> | ||
| </button> | ||
| )} | ||
| <div className="flex-grow truncate h-full flex items-center justify-between gap-2"> | ||
| <div className="flex-grow truncate"> | ||
| <IssueGanttSidebarBlock data={block.data} handleIssue={blockUpdateHandler} /> | ||
| </div> | ||
| <div className="flex-shrink-0 text-sm text-custom-text-200"> | ||
| {duration} day{duration > 1 ? "s" : ""} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </Draggable> | ||
| ); | ||
| }) | ||
| ) : ( | ||
| <Loader className="pr-2 space-y-3"> | ||
| <Loader.Item height="34px" /> | ||
| <Loader.Item height="34px" /> | ||
| <Loader.Item height="34px" /> | ||
| <Loader.Item height="34px" /> | ||
| </Loader> | ||
| )} | ||
| {droppableProvided.placeholder} | ||
| </> | ||
| </div> | ||
| )} | ||
| </StrictModeDroppable> | ||
| </DragDropContext> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.