From 3ec5dafcfb3b05bb7971f6bdb94c960bfca31abe Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 18 Aug 2023 12:24:30 +0530 Subject: [PATCH 01/22] style: gantt chart polishing --- .../gantt-chart/blocks/blocks-display.tsx | 2 +- .../components/gantt-chart/chart/month.tsx | 43 +++++++++++++------ apps/app/components/gantt-chart/data/index.ts | 2 +- 3 files changed, 32 insertions(+), 15 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index fd43c733ee3..9f81eb010ee 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -141,7 +141,7 @@ export const GanttChartBlocks: FC<{ provided={provided} >
= () => { monthBlocks.length > 0 && monthBlocks.map((block, _idxRoot) => (
-
-
+
+
{block?.title}
+
+ {block?.children && + block?.children.length > 0 && + block?.children.map((monthDay, _idx) => ( +
+
+ + {monthDay.dayData.shortTitle[0]} + {" "} + + {monthDay.day} + +
+
+ ))} +
+
{block?.children && block?.children.length > 0 && @@ -32,15 +58,6 @@ export const MonthChartView: FC = () => { className="relative flex h-full flex-col overflow-hidden whitespace-nowrap" style={{ width: `${currentViewData?.data.width}px` }} > -
-
{monthDay?.title}
-
= () => { : `` }`} > - {monthDay?.today && ( + {/* {monthDay?.today && (
- )} + )} */}
))} diff --git a/apps/app/components/gantt-chart/data/index.ts b/apps/app/components/gantt-chart/data/index.ts index 4be79999812..f166ad1beaf 100644 --- a/apps/app/components/gantt-chart/data/index.ts +++ b/apps/app/components/gantt-chart/data/index.ts @@ -109,7 +109,7 @@ export const allViewsWithData: ChartDataType[] = [ currentDate: new Date(), endDate: new Date(), approxFilterRange: 8, - width: 80, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3) + width: 55, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3) }, }, // { From 9131cca653b4e30f0880e09a56c9ef49561b2916 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 18 Aug 2023 15:12:00 +0530 Subject: [PATCH 02/22] chore: sidebar y-axis drag and drop --- .../gantt-chart/blocks/blocks-display.tsx | 8 +- .../components/gantt-chart/chart/index.tsx | 38 ++++-- .../components/gantt-chart/chart/month.tsx | 56 +++++---- apps/app/components/gantt-chart/sidebar.tsx | 118 ++++++++++++++++++ .../app/components/icons/state-group-icon.tsx | 5 + apps/app/components/issues/gantt-chart.tsx | 23 ++-- 6 files changed, 193 insertions(+), 55 deletions(-) create mode 100644 apps/app/components/gantt-chart/sidebar.tsx diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index 9f81eb010ee..372dc83e4e7 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -12,8 +12,7 @@ import { IBlockUpdateData, IGanttBlock } from "../types"; export const GanttChartBlocks: FC<{ itemsContainerWidth: number; blocks: IGanttBlock[] | null; - sidebarBlockRender: FC; - blockRender: FC; + blockRender: (data: any) => React.ReactNode; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; enableLeftDrag: boolean; enableRightDrag: boolean; @@ -21,7 +20,6 @@ export const GanttChartBlocks: FC<{ }> = ({ itemsContainerWidth, blocks, - sidebarBlockRender, blockRender, blockUpdateHandler, enableLeftDrag, @@ -146,9 +144,7 @@ export const GanttChartBlocks: FC<{ width: `${block.position?.width}px`, }} > - {blockRender({ - ...block.data, - })} + {blockRender(block.data)}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 0cc8a14eec3..cca45625608 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -30,6 +30,7 @@ import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types"; import { currentViewDataWithView } from "../data"; // context import { useChart } from "../hooks"; +import { GanttSidebar } from "../sidebar"; type ChartViewRootProps = { border: boolean; @@ -37,8 +38,8 @@ type ChartViewRootProps = { loaderTitle: string; blocks: IGanttBlock[] | null; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; - sidebarBlockRender: FC; - blockRender: FC; + sidebarBlockRender: (data: any) => React.ReactNode; + blockRender: (data: any) => React.ReactNode; enableLeftDrag: boolean; enableRightDrag: boolean; enableReorder: boolean; @@ -317,16 +318,36 @@ export const ChartViewRoot: FC = ({ {/* content */}
+
+
+ +
- {/* blocks components */} + {/* chart */} + {/* {currentView && currentView === "hours" && } */} + {/* {currentView && currentView === "day" && } */} + {/* {currentView && currentView === "week" && } */} + {/* {currentView && currentView === "bi_week" && } */} + {currentView && currentView === "month" && } + {/* {currentView && currentView === "quarter" && } */} + {/* {currentView && currentView === "year" && } */} + + {/* blocks */} {currentView && currentViewData && ( = ({ enableReorder={enableReorder} /> )} - - {/* chart */} - {/* {currentView && currentView === "hours" && } */} - {/* {currentView && currentView === "day" && } */} - {/* {currentView && currentView === "week" && } */} - {/* {currentView && currentView === "bi_week" && } */} - {currentView && currentView === "month" && } - {/* {currentView && currentView === "quarter" && } */} - {/* {currentView && currentView === "year" && } */}
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx index 72351a26ea3..f2365dc5e5d 100644 --- a/apps/app/components/gantt-chart/chart/month.tsx +++ b/apps/app/components/gantt-chart/chart/month.tsx @@ -17,36 +17,38 @@ export const MonthChartView: FC = () => { monthBlocks.length > 0 && monthBlocks.map((block, _idxRoot) => (
-
-
- {block?.title} +
+
+
+ {block?.title} +
-
-
- {block?.children && - block?.children.length > 0 && - block?.children.map((monthDay, _idx) => ( -
-
- - {monthDay.dayData.shortTitle[0]} - {" "} - - {monthDay.day} - +
+ {block?.children && + block?.children.length > 0 && + block?.children.map((monthDay, _idx) => ( +
+
+ + {monthDay.dayData.shortTitle[0]} + {" "} + + {monthDay.day} + +
-
- ))} + ))} +
diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx new file mode 100644 index 00000000000..2be887d0ad5 --- /dev/null +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -0,0 +1,118 @@ +// react-beautiful-dnd +import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd"; +// types +import { IBlockUpdateData, IGanttBlock } from "./types"; +import StrictModeDroppable from "components/dnd/StrictModeDroppable"; +import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; + +type Props = { + blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; + blocks: IGanttBlock[] | null; + sidebarBlockRender: (data: any) => React.ReactNode; + enableReorder: boolean; +}; + +export const GanttSidebar: React.FC = ({ + blockUpdateHandler, + blocks, + sidebarBlockRender, + enableReorder, +}) => { + const handleOrderChange = (result: DropResult) => { + if (!blocks) return; + + const { source, destination, draggableId } = result; + + if (!destination) return; + + if (source.index === destination.index && document) { + // const draggedBlock = document.querySelector(`#${draggableId}`) as HTMLElement; + // const blockStyles = window.getComputedStyle(draggedBlock); + + // console.log(blockStyles.marginLeft); + + return; + } + + let updatedSortOrder = blocks[source.index].sort_order; + + if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000; + else if (destination.index === blocks.length - 1) + updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000; + 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; + } + + const removedElement = blocks.splice(source.index, 1)[0]; + blocks.splice(destination.index, 0, removedElement); + + blockUpdateHandler(removedElement.data, { + sort_order: { + destinationIndex: destination.index, + newSortOrder: updatedSortOrder, + sourceIndex: source.index, + }, + }); + }; + + return ( + + + {(droppableProvided, snapshot) => ( +
+ <> + {blocks && blocks.length > 0 + ? blocks.map((block, index) => ( + + {(provided, snapshot) => ( +
+
+ +
+ {sidebarBlockRender(block.data)} +
+
+
+ )} + + )) + : "No data found"} + {droppableProvided.placeholder} + +
+ )} + + + ); +}; diff --git a/apps/app/components/icons/state-group-icon.tsx b/apps/app/components/icons/state-group-icon.tsx index b7da7136f13..522e0b9dc40 100644 --- a/apps/app/components/icons/state-group-icon.tsx +++ b/apps/app/components/icons/state-group-icon.tsx @@ -21,6 +21,7 @@ export const getStateGroupIcon = ( width={width} height={height} color={color ?? STATE_GROUP_COLORS["backlog"]} + className="flex-shrink-0" /> ); case "unstarted": @@ -29,6 +30,7 @@ export const getStateGroupIcon = ( width={width} height={height} color={color ?? STATE_GROUP_COLORS["unstarted"]} + className="flex-shrink-0" /> ); case "started": @@ -37,6 +39,7 @@ export const getStateGroupIcon = ( width={width} height={height} color={color ?? STATE_GROUP_COLORS["started"]} + className="flex-shrink-0" /> ); case "completed": @@ -45,6 +48,7 @@ export const getStateGroupIcon = ( width={width} height={height} color={color ?? STATE_GROUP_COLORS["completed"]} + className="flex-shrink-0" /> ); case "cancelled": @@ -53,6 +57,7 @@ export const getStateGroupIcon = ( width={width} height={height} color={color ?? STATE_GROUP_COLORS["cancelled"]} + className="flex-shrink-0" /> ); default: diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx index 4912183a894..335eb134425 100644 --- a/apps/app/components/issues/gantt-chart.tsx +++ b/apps/app/components/issues/gantt-chart.tsx @@ -1,4 +1,5 @@ import { useRouter } from "next/router"; +import Link from "next/link"; // hooks import useIssuesView from "hooks/use-issues-view"; @@ -11,6 +12,8 @@ import { IssueGanttBlock, renderIssueBlocksStructure, } from "components/gantt-chart"; +// icons +import { getStateGroupIcon } from "components/icons"; // types import { IIssue } from "types"; @@ -28,14 +31,16 @@ export const IssueGanttChartView = () => { ); // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ data }: any) => ( -
-
-
{data?.name}
-
+ const GanttSidebarBlockView = ({ issue }: { issue: IIssue }) => ( + + + {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)} +
+ {issue?.project_detail?.identifier} {issue?.sequence_id} +
+
{issue?.name}
+ + ); return ( @@ -48,8 +53,8 @@ export const IssueGanttChartView = () => { blockUpdateHandler={(block, payload) => updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } blockRender={(data: any) => } + sidebarBlockRender={(data: any) => } enableReorder={orderBy === "sort_order"} />
From ebd7ce1b8a15ac1cec1a0b19835bef9fbdda2819 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 18 Aug 2023 15:42:13 +0530 Subject: [PATCH 03/22] chore: remove y-axis drag and drop from the main content --- .../gantt-chart/blocks/blocks-display.tsx | 138 ++++-------------- .../components/gantt-chart/chart/index.tsx | 1 - .../gantt-chart/helpers/draggable.tsx | 7 +- 3 files changed, 27 insertions(+), 119 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index 372dc83e4e7..ef1fcc539af 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -1,8 +1,5 @@ import { FC } from "react"; -// react-beautiful-dnd -import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd"; -import StrictModeDroppable from "components/dnd/StrictModeDroppable"; // helpers import { ChartDraggable } from "../helpers/draggable"; import { renderDateFormat } from "helpers/date-time.helper"; @@ -16,7 +13,6 @@ export const GanttChartBlocks: FC<{ blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; enableLeftDrag: boolean; enableRightDrag: boolean; - enableReorder: boolean; }> = ({ itemsContainerWidth, blocks, @@ -24,7 +20,6 @@ export const GanttChartBlocks: FC<{ blockUpdateHandler, enableLeftDrag, enableRightDrag, - enableReorder, }) => { const handleChartBlockPosition = ( block: IGanttBlock, @@ -54,121 +49,38 @@ export const GanttChartBlocks: FC<{ }); }; - const handleOrderChange = (result: DropResult) => { - if (!blocks) return; - - const { source, destination, draggableId } = result; - - if (!destination) return; - - if (source.index === destination.index && document) { - // const draggedBlock = document.querySelector(`#${draggableId}`) as HTMLElement; - // const blockStyles = window.getComputedStyle(draggedBlock); - - // console.log(blockStyles.marginLeft); - - return; - } - - let updatedSortOrder = blocks[source.index].sort_order; - - if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000; - else if (destination.index === blocks.length - 1) - updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000; - 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; - } - - const removedElement = blocks.splice(source.index, 1)[0]; - blocks.splice(destination.index, 0, removedElement); - - blockUpdateHandler(removedElement.data, { - sort_order: { - destinationIndex: destination.index, - newSortOrder: updatedSortOrder, - sourceIndex: source.index, - }, - }); - }; - return (
- - - {(droppableProvided, droppableSnapshot) => ( -
- <> - {blocks && - blocks.length > 0 && - blocks.map( - (block, index: number) => - block.start_date && - block.target_date && ( - - {(provided) => ( -
- handleChartBlockPosition(block, ...args)} - enableLeftDrag={enableLeftDrag} - enableRightDrag={enableRightDrag} - provided={provided} - > -
- {blockRender(block.data)} -
- -
- )} - - ) - )} - {droppableProvided.placeholder} - -
- )} - - - - {/* sidebar */} - {/*
+
{blocks && blocks.length > 0 && - blocks.map((block: any, _idx: number) => ( -
- {sidebarBlockRender(block?.data)} -
- ))} -
*/} + blocks.map( + (block) => + block.start_date && + block.target_date && ( +
+ handleChartBlockPosition(block, ...args)} + enableLeftDrag={enableLeftDrag} + enableRightDrag={enableRightDrag} + > +
+ {blockRender(block.data)} +
+ +
+ ) + )} +
); }; diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index cca45625608..989829f7732 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -352,7 +352,6 @@ export const ChartViewRoot: FC = ({ blockUpdateHandler={blockUpdateHandler} enableLeftDrag={enableLeftDrag} enableRightDrag={enableRightDrag} - enableReorder={enableReorder} /> )}
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 320f4355fee..2934b03c58e 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -1,7 +1,6 @@ import React, { useRef, useState } from "react"; -// react-beautiful-dnd -import { DraggableProvided } from "react-beautiful-dnd"; +// hooks import { useChart } from "../hooks"; // types import { IGanttBlock } from "../types"; @@ -12,7 +11,6 @@ type Props = { handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right") => void; enableLeftDrag: boolean; enableRightDrag: boolean; - provided: DraggableProvided; }; export const ChartDraggable: React.FC = ({ @@ -21,7 +19,6 @@ export const ChartDraggable: React.FC = ({ handleBlock, enableLeftDrag = true, enableRightDrag = true, - provided, }) => { const [isLeftResizing, setIsLeftResizing] = useState(false); const [isRightResizing, setIsRightResizing] = useState(false); @@ -184,7 +181,7 @@ export const ChartDraggable: React.FC = ({ /> )} - {React.cloneElement(children, { ref: resizableRef, ...provided.dragHandleProps })} + {React.cloneElement(children, { ref: resizableRef })} {enableRightDrag && ( <>
Date: Fri, 18 Aug 2023 23:32:07 +0530 Subject: [PATCH 04/22] refactor: drop end function --- apps/app/components/gantt-chart/sidebar.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index 2be887d0ad5..531966f6992 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -21,18 +21,11 @@ export const GanttSidebar: React.FC = ({ const handleOrderChange = (result: DropResult) => { if (!blocks) return; - const { source, destination, draggableId } = result; + const { source, destination } = result; if (!destination) return; - if (source.index === destination.index && document) { - // const draggedBlock = document.querySelector(`#${draggableId}`) as HTMLElement; - // const blockStyles = window.getComputedStyle(draggedBlock); - - // console.log(blockStyles.marginLeft); - - return; - } + if (source.index === destination.index) return; let updatedSortOrder = blocks[source.index].sort_order; @@ -64,9 +57,9 @@ export const GanttSidebar: React.FC = ({ return ( - {(droppableProvided, snapshot) => ( + {(droppableProvided) => (
From 56a6f26ef1c549d8b6c5d2ba3b7bf28c36843f49 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 21 Aug 2023 12:46:18 +0530 Subject: [PATCH 05/22] refactor: resizing logic --- .../gantt-chart/blocks/blocks-display.tsx | 7 +--- .../gantt-chart/helpers/draggable.tsx | 35 +++++++++++++------ apps/app/components/gantt-chart/sidebar.tsx | 4 +-- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index ef1fcc539af..a7f0a82f1c4 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -68,12 +68,7 @@ export const GanttChartBlocks: FC<{ enableLeftDrag={enableLeftDrag} enableRightDrag={enableRightDrag} > -
+
{blockRender(block.data)}
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 2934b03c58e..fbdf2664cf2 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -23,7 +23,6 @@ export const ChartDraggable: React.FC = ({ const [isLeftResizing, setIsLeftResizing] = useState(false); const [isRightResizing, setIsRightResizing] = useState(false); - const parentDivRef = useRef(null); const resizableRef = useRef(null); const { currentViewData } = useChart(); @@ -58,11 +57,9 @@ export const ChartDraggable: React.FC = ({ }; const handleLeftDrag = () => { - if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position) - return; + if (!currentViewData || !resizableRef.current || !block.position) return; const resizableDiv = resizableRef.current; - const parentDiv = parentDivRef.current; const columnWidth = currentViewData.data.width; @@ -70,7 +67,7 @@ export const ChartDraggable: React.FC = ({ resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10); let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10); - let initialMarginLeft = parseInt(parentDiv.style.marginLeft); + let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { if (!window) return; @@ -89,7 +86,7 @@ export const ChartDraggable: React.FC = ({ if (newWidth < columnWidth) return; resizableDiv.style.width = `${newWidth}px`; - parentDiv.style.marginLeft = `${newMarginLeft}px`; + resizableDiv.style.marginLeft = `${newMarginLeft}px`; if (block.position) { block.position.width = newWidth; @@ -113,8 +110,7 @@ export const ChartDraggable: React.FC = ({ }; const handleRightDrag = () => { - if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position) - return; + if (!currentViewData || !resizableRef.current || !block.position) return; const resizableDiv = resizableRef.current; @@ -157,13 +153,32 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; + const handleDragStart = () => { + const draggedDiv = resizableRef.current; + + if (!draggedDiv) return; + + const handleMouseMove = (e: MouseEvent) => { + console.log(e.clientX, e.clientY); + }; + + const handleMouseUp = () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + }; + return (
{enableLeftDrag && ( @@ -181,7 +196,7 @@ export const ChartDraggable: React.FC = ({ /> )} - {React.cloneElement(children, { ref: resizableRef })} + {React.cloneElement(children, { onMouseDown: handleDragStart })} {enableRightDrag && ( <>
= ({ > -
+
{sidebarBlockRender(block.data)}
From 30fb1e679d1fc090c0283dec8339fdb79d354c51 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 21 Aug 2023 14:53:40 +0530 Subject: [PATCH 06/22] chore: x-axis block move --- .../gantt-chart/blocks/blocks-display.tsx | 32 +++++++------- .../components/gantt-chart/chart/month.tsx | 3 +- .../gantt-chart/helpers/draggable.tsx | 44 ++++++++++++++----- 3 files changed, 51 insertions(+), 28 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index a7f0a82f1c4..e026cbfc6ad 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -24,28 +24,26 @@ export const GanttChartBlocks: FC<{ const handleChartBlockPosition = ( block: IGanttBlock, totalBlockShifts: number, - dragDirection: "left" | "right" + dragDirection: "left" | "right" | "move" ) => { - let updatedDate = new Date(); + const originalStartDate = new Date(block.start_date); + const updatedStartDate = new Date(originalStartDate); - if (dragDirection === "left") { - const originalDate = new Date(block.start_date); + const originalTargetDate = new Date(block.target_date); + const updatedTargetDate = new Date(originalTargetDate); - const currentDay = originalDate.getDate(); - updatedDate = new Date(originalDate); - - updatedDate.setDate(currentDay - totalBlockShifts); - } else { - const originalDate = new Date(block.target_date); - - const currentDay = originalDate.getDate(); - updatedDate = new Date(originalDate); - - updatedDate.setDate(currentDay + totalBlockShifts); + if (dragDirection === "left") + updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts); + else if (dragDirection === "right") + updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts); + else if (dragDirection === "move") { + updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts); + updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts); } blockUpdateHandler(block.data, { - [dragDirection === "left" ? "start_date" : "target_date"]: renderDateFormat(updatedDate), + start_date: renderDateFormat(updatedStartDate), + target_date: renderDateFormat(updatedTargetDate), }); }; @@ -68,7 +66,7 @@ export const GanttChartBlocks: FC<{ enableLeftDrag={enableLeftDrag} enableRightDrag={enableRightDrag} > -
+
{blockRender(block.data)}
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx index f2365dc5e5d..2a4a67daf93 100644 --- a/apps/app/components/gantt-chart/chart/month.tsx +++ b/apps/app/components/gantt-chart/chart/month.tsx @@ -29,6 +29,7 @@ export const MonthChartView: FC = () => { block?.children.length > 0 && block?.children.map((monthDay, _idx) => (
@@ -56,7 +57,7 @@ export const MonthChartView: FC = () => { block?.children.length > 0 && block?.children.map((monthDay, _idx) => (
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index fbdf2664cf2..44a9d87c4b1 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -8,7 +8,7 @@ import { IGanttBlock } from "../types"; type Props = { children: any; block: IGanttBlock; - handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right") => void; + handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void; enableLeftDrag: boolean; enableRightDrag: boolean; }; @@ -56,7 +56,7 @@ export const ChartDraggable: React.FC = ({ return delWidth; }; - const handleLeftDrag = () => { + const handleBlockLeftResize = () => { if (!currentViewData || !resizableRef.current || !block.position) return; const resizableDiv = resizableRef.current; @@ -109,7 +109,7 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; - const handleRightDrag = () => { + const handleBlockRightResize = () => { if (!currentViewData || !resizableRef.current || !block.position) return; const resizableDiv = resizableRef.current; @@ -153,18 +153,42 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; - const handleDragStart = () => { - const draggedDiv = resizableRef.current; + const handleBlockMove = () => { + if (!currentViewData || !resizableRef.current || !block.position) return; + + const resizableDiv = resizableRef.current; + + const columnWidth = currentViewData.data.width; - if (!draggedDiv) return; + const blockInitialMarginLeft = + parseInt(resizableDiv.style.marginLeft) ?? parseInt(block.position.width.toString()); + + let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { - console.log(e.clientX, e.clientY); + if (!window) return; + + let delWidth = 0; + + delWidth = checkScrollEnd(e); + + // calculate new marginLeft and update the initial marginLeft using -= + const newMarginLeft = Math.round((initialMarginLeft += delWidth) / columnWidth) * columnWidth; + + resizableDiv.style.marginLeft = `${newMarginLeft}px`; + + if (block.position) block.position.marginLeft = newMarginLeft; }; const handleMouseUp = () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); + + const totalBlockShifts = Math.ceil( + (parseInt(resizableDiv.style.marginLeft) - blockInitialMarginLeft) / columnWidth + ); + + handleBlock(totalBlockShifts, "move"); }; document.addEventListener("mousemove", handleMouseMove); @@ -184,7 +208,7 @@ export const ChartDraggable: React.FC = ({ {enableLeftDrag && ( <>
setIsLeftResizing(true)} onMouseLeave={() => setIsLeftResizing(false)} className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-10 bg-brand-backdrop rounded-md cursor-col-resize" @@ -196,11 +220,11 @@ export const ChartDraggable: React.FC = ({ /> )} - {React.cloneElement(children, { onMouseDown: handleDragStart })} + {React.cloneElement(children, { onMouseDown: handleBlockMove })} {enableRightDrag && ( <>
setIsRightResizing(true)} onMouseLeave={() => setIsRightResizing(false)} className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-6 bg-brand-backdrop rounded-md cursor-col-resize" From 9faddbb65368f697ea9994ca928ad5ebbc07bf85 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 21 Aug 2023 15:16:13 +0530 Subject: [PATCH 07/22] chore: x-axis block move flag --- .../cycles/cycles-list-gantt-chart.tsx | 5 +++-- .../gantt-chart/blocks/blocks-display.tsx | 15 +++++++++------ apps/app/components/gantt-chart/chart/index.tsx | 15 +++++++++------ .../components/gantt-chart/helpers/draggable.tsx | 16 +++++++++------- apps/app/components/gantt-chart/hooks/index.tsx | 4 +--- apps/app/components/gantt-chart/root.tsx | 15 +++++++++------ 6 files changed, 40 insertions(+), 30 deletions(-) diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx index 4ad0029d830..1062e7b5ad4 100644 --- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx +++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx @@ -90,8 +90,9 @@ export const CyclesListGanttChartView: FC = ({ cycles, mutateCycles }) => blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)} sidebarBlockRender={(data: any) => } blockRender={(data: any) => } - enableLeftDrag={false} - enableRightDrag={false} + enableBlockLeftResize={false} + enableBlockRightResize={false} + enableBlockMove={false} />
); diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index e026cbfc6ad..f98719a5a1b 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -11,15 +11,17 @@ export const GanttChartBlocks: FC<{ blocks: IGanttBlock[] | null; blockRender: (data: any) => React.ReactNode; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; - enableLeftDrag: boolean; - enableRightDrag: boolean; + enableBlockLeftResize: boolean; + enableBlockRightResize: boolean; + enableBlockMove: boolean; }> = ({ itemsContainerWidth, blocks, blockRender, blockUpdateHandler, - enableLeftDrag, - enableRightDrag, + enableBlockLeftResize, + enableBlockRightResize, + enableBlockMove, }) => { const handleChartBlockPosition = ( block: IGanttBlock, @@ -63,8 +65,9 @@ export const GanttChartBlocks: FC<{ handleChartBlockPosition(block, ...args)} - enableLeftDrag={enableLeftDrag} - enableRightDrag={enableRightDrag} + enableBlockLeftResize={enableBlockLeftResize} + enableBlockRightResize={enableBlockRightResize} + enableBlockMove={enableBlockMove} >
{blockRender(block.data)} diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 989829f7732..5c8ccae45c9 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -40,8 +40,9 @@ type ChartViewRootProps = { blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; sidebarBlockRender: (data: any) => React.ReactNode; blockRender: (data: any) => React.ReactNode; - enableLeftDrag: boolean; - enableRightDrag: boolean; + enableBlockLeftResize: boolean; + enableBlockRightResize: boolean; + enableBlockMove: boolean; enableReorder: boolean; }; @@ -53,8 +54,9 @@ export const ChartViewRoot: FC = ({ blockUpdateHandler, sidebarBlockRender, blockRender, - enableLeftDrag, - enableRightDrag, + enableBlockLeftResize, + enableBlockRightResize, + enableBlockMove, enableReorder, }) => { const { currentView, currentViewData, renderView, dispatch, allViews } = useChart(); @@ -350,8 +352,9 @@ export const ChartViewRoot: FC = ({ blocks={chartBlocks} blockRender={blockRender} blockUpdateHandler={blockUpdateHandler} - enableLeftDrag={enableLeftDrag} - enableRightDrag={enableRightDrag} + enableBlockLeftResize={enableBlockLeftResize} + enableBlockRightResize={enableBlockRightResize} + enableBlockMove={enableBlockMove} /> )}
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 44a9d87c4b1..a24721e2417 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -9,16 +9,18 @@ type Props = { children: any; block: IGanttBlock; handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void; - enableLeftDrag: boolean; - enableRightDrag: boolean; + enableBlockLeftResize: boolean; + enableBlockRightResize: boolean; + enableBlockMove: boolean; }; export const ChartDraggable: React.FC = ({ children, block, handleBlock, - enableLeftDrag = true, - enableRightDrag = true, + enableBlockLeftResize, + enableBlockRightResize, + enableBlockMove, }) => { const [isLeftResizing, setIsLeftResizing] = useState(false); const [isRightResizing, setIsRightResizing] = useState(false); @@ -154,7 +156,7 @@ export const ChartDraggable: React.FC = ({ }; const handleBlockMove = () => { - if (!currentViewData || !resizableRef.current || !block.position) return; + if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return; const resizableDiv = resizableRef.current; @@ -205,7 +207,7 @@ export const ChartDraggable: React.FC = ({ width: `${block.position?.width}px`, }} > - {enableLeftDrag && ( + {enableBlockLeftResize && ( <>
= ({ )} {React.cloneElement(children, { onMouseDown: handleBlockMove })} - {enableRightDrag && ( + {enableBlockRightResize && ( <>
{ const context = useContext(ChartContext); - if (!context) { - throw new Error("useChart must be used within a GanttChart"); - } + if (!context) throw new Error("useChart must be used within a GanttChart"); return context; }; diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx index 077e8a896b7..6ab33c44884 100644 --- a/apps/app/components/gantt-chart/root.tsx +++ b/apps/app/components/gantt-chart/root.tsx @@ -14,8 +14,9 @@ type GanttChartRootProps = { blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; sidebarBlockRender: FC; blockRender: FC; - enableLeftDrag?: boolean; - enableRightDrag?: boolean; + enableBlockLeftResize?: boolean; + enableBlockRightResize?: boolean; + enableBlockMove?: boolean; enableReorder?: boolean; }; @@ -27,8 +28,9 @@ export const GanttChartRoot: FC = ({ blockUpdateHandler, sidebarBlockRender, blockRender, - enableLeftDrag = true, - enableRightDrag = true, + enableBlockLeftResize = true, + enableBlockRightResize = true, + enableBlockMove = true, enableReorder = true, }) => ( @@ -40,8 +42,9 @@ export const GanttChartRoot: FC = ({ blockUpdateHandler={blockUpdateHandler} sidebarBlockRender={sidebarBlockRender} blockRender={blockRender} - enableLeftDrag={enableLeftDrag} - enableRightDrag={enableRightDrag} + enableBlockLeftResize={enableBlockLeftResize} + enableBlockRightResize={enableBlockRightResize} + enableBlockMove={enableBlockMove} enableReorder={enableReorder} /> From ddc494921a6d3e97f3cc125d610ab033100ae593 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 21 Aug 2023 18:28:00 +0530 Subject: [PATCH 08/22] chore: update scroll end logic --- .../components/gantt-chart/blocks/block.tsx | 12 ++++----- .../components/gantt-chart/chart/index.tsx | 5 +++- .../gantt-chart/helpers/draggable.tsx | 25 ++++++++++--------- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/block.tsx b/apps/app/components/gantt-chart/blocks/block.tsx index 52fd1fe52fb..25c8221bc91 100644 --- a/apps/app/components/gantt-chart/blocks/block.tsx +++ b/apps/app/components/gantt-chart/blocks/block.tsx @@ -16,11 +16,11 @@ export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { return ( - -
+ +
@@ -33,7 +33,7 @@ export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { } position="top-left" > -
+
{issue.name}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 5c8ccae45c9..61070d7f41d 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -319,7 +319,10 @@ export const ChartViewRoot: FC = ({
{/* content */} -
+
= ({ const checkScrollEnd = (e: MouseEvent): number => { let delWidth = 0; + const ganttContainer = document.querySelector("#gantt-container") as HTMLElement; + const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLElement; + const scrollContainer = document.querySelector("#scroll-container") as HTMLElement; - const appSidebar = document.querySelector("#app-sidebar") as HTMLElement; + + if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0; const posFromLeft = e.clientX; // manually scroll to left if reached the left end while dragging - if (posFromLeft - appSidebar.clientWidth <= 70) { + if ( + posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <= + 70 + ) { if (e.movementX > 0) return 0; delWidth = -5; @@ -46,7 +53,7 @@ export const ChartDraggable: React.FC = ({ } else delWidth = e.movementX; // manually scroll to right if reached the right end while dragging - const posFromRight = window.innerWidth - e.clientX; + const posFromRight = ganttContainer.getBoundingClientRect().right - e.clientX; if (posFromRight <= 70) { if (e.movementX < 0) return 0; @@ -72,8 +79,6 @@ export const ChartDraggable: React.FC = ({ let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { - if (!window) return; - let delWidth = 0; delWidth = checkScrollEnd(e); @@ -124,8 +129,6 @@ export const ChartDraggable: React.FC = ({ let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10); const handleMouseMove = (e: MouseEvent) => { - if (!window) return; - let delWidth = 0; delWidth = checkScrollEnd(e); @@ -168,8 +171,6 @@ export const ChartDraggable: React.FC = ({ let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { - if (!window) return; - let delWidth = 0; delWidth = checkScrollEnd(e); @@ -213,7 +214,7 @@ export const ChartDraggable: React.FC = ({ onMouseDown={handleBlockLeftResize} onMouseEnter={() => setIsLeftResizing(true)} onMouseLeave={() => setIsLeftResizing(false)} - className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-10 bg-brand-backdrop rounded-md cursor-col-resize" + className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-10 rounded-md cursor-col-resize" />
= ({ onMouseDown={handleBlockRightResize} onMouseEnter={() => setIsRightResizing(true)} onMouseLeave={() => setIsRightResizing(false)} - className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-6 bg-brand-backdrop rounded-md cursor-col-resize" + className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-6 rounded-md cursor-col-resize" />
From 1ed3db625be348d67187a02d893b0c9387ba0000 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 22 Aug 2023 13:09:25 +0530 Subject: [PATCH 09/22] style: modules gantt chart --- .../components/gantt-chart/blocks/block.tsx | 12 +-- apps/app/components/gantt-chart/sidebar.tsx | 9 +- apps/app/components/issues/gantt-chart.tsx | 2 +- .../modules/modules-list-gantt-chart.tsx | 19 ++-- .../projects/[projectId]/modules/index.tsx | 95 +++++++++++-------- 5 files changed, 74 insertions(+), 63 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/block.tsx b/apps/app/components/gantt-chart/blocks/block.tsx index 25c8221bc91..f682f650bcd 100644 --- a/apps/app/components/gantt-chart/blocks/block.tsx +++ b/apps/app/components/gantt-chart/blocks/block.tsx @@ -76,11 +76,11 @@ export const ModuleGanttBlock = ({ module }: { module: IModule }) => { return ( - -
s.value === module.status)?.color }} - /> + s.value === module.status)?.color }} + > +
@@ -93,7 +93,7 @@ export const ModuleGanttBlock = ({ module }: { module: IModule }) => { } position="top-left" > -
+
{module.name}
diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index db230268eb5..5dc252d5b42 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -1,9 +1,10 @@ // react-beautiful-dnd import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd"; -// types -import { IBlockUpdateData, IGanttBlock } from "./types"; import StrictModeDroppable from "components/dnd/StrictModeDroppable"; +// icons import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; +// types +import { IBlockUpdateData, IGanttBlock } from "./types"; type Props = { blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; @@ -82,7 +83,7 @@ export const GanttSidebar: React.FC = ({ >
-
+
{sidebarBlockRender(block.data)}
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx index 335eb134425..34717ac3ef6 100644 --- a/apps/app/components/issues/gantt-chart.tsx +++ b/apps/app/components/issues/gantt-chart.tsx @@ -33,7 +33,7 @@ export const IssueGanttChartView = () => { // rendering issues on gantt sidebar const GanttSidebarBlockView = ({ issue }: { issue: IIssue }) => ( - + {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)}
{issue?.project_detail?.identifier} {issue?.sequence_id} diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx index 7dc281fb3f7..ce839e2e840 100644 --- a/apps/app/components/modules/modules-list-gantt-chart.tsx +++ b/apps/app/components/modules/modules-list-gantt-chart.tsx @@ -1,6 +1,7 @@ import { FC } from "react"; import { useRouter } from "next/router"; +import Link from "next/link"; import { KeyedMutator } from "swr"; @@ -27,16 +28,12 @@ export const ModulesListGanttChartView: FC = ({ modules, mutateModules }) const { user } = useUser(); // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ data }: any) => ( -
-
s.value === data.status)?.color, - }} - /> -
{data?.name}
-
+ const GanttSidebarBlockView = ({ module }: any) => ( + + +
{module?.name}
+ + ); const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => { @@ -98,7 +95,7 @@ export const ModulesListGanttChartView: FC = ({ modules, mutateModules }) loaderTitle="Modules" blocks={modules ? blockFormat(modules) : null} blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)} - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } blockRender={(data: any) => } />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx index 98f678d5d81..44ccf42ae0a 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx @@ -18,10 +18,10 @@ import { SingleModuleCard, } from "components/modules"; // ui -import { EmptyState, Loader, PrimaryButton } from "components/ui"; +import { EmptyState, Icon, Loader, PrimaryButton, Tooltip } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons -import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; +import { PlusIcon } from "@heroicons/react/24/outline"; // images import emptyModule from "public/empty-state/module.svg"; // types @@ -30,7 +30,18 @@ import type { NextPage } from "next"; // fetch-keys import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys"; // helper -import { truncateText } from "helpers/string.helper"; +import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper"; + +const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [ + { + type: "gantt_chart", + icon: "view_timeline", + }, + { + type: "grid", + icon: "table_rows", + }, +]; const ProjectModules: NextPage = () => { const [selectedModule, setSelectedModule] = useState(); @@ -64,6 +75,7 @@ const ProjectModules: NextPage = () => { useEffect(() => { if (createUpdateModule) return; + const timer = setTimeout(() => { setSelectedModule(undefined); clearTimeout(timer); @@ -79,16 +91,42 @@ const ProjectModules: NextPage = () => { } right={ - { - const e = new KeyboardEvent("keydown", { key: "m" }); - document.dispatchEvent(e); - }} - > - - Add Module - +
+ {moduleViewOptions.map((option) => ( + {replaceUnderscoreIfSnakeCase(option.type)} View + } + position="bottom" + > + + + ))} + { + const e = new KeyboardEvent("keydown", { key: "m" }); + document.dispatchEvent(e); + }} + > + + Add Module + +
} > { /> {modules ? ( modules.length > 0 ? ( -
-
-

Modules

-
- - -
-
+ <> {modulesView === "grid" && ( -
+
{modules.map((module) => ( { {modulesView === "gantt_chart" && ( )} -
+ ) : ( Date: Tue, 22 Aug 2023 15:17:57 +0530 Subject: [PATCH 10/22] style: block background tint --- .../components/gantt-chart/blocks/block.tsx | 4 +-- apps/app/components/issues/gantt-chart.tsx | 33 ++++++++++++------- apps/app/helpers/date-time.helper.ts | 29 ++++++++++++++++ 3 files changed, 53 insertions(+), 13 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/block.tsx b/apps/app/components/gantt-chart/blocks/block.tsx index f682f650bcd..26a65dc2ed1 100644 --- a/apps/app/components/gantt-chart/blocks/block.tsx +++ b/apps/app/components/gantt-chart/blocks/block.tsx @@ -20,7 +20,7 @@ export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { className="flex items-center relative h-full w-full shadow-sm" style={{ backgroundColor: issue.state_detail?.color }} > -
+
@@ -80,7 +80,7 @@ export const ModuleGanttBlock = ({ module }: { module: IModule }) => { className="relative flex items-center w-full h-full shadow-sm" style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color }} > -
+
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx index 34717ac3ef6..2d61f10d926 100644 --- a/apps/app/components/issues/gantt-chart.tsx +++ b/apps/app/components/issues/gantt-chart.tsx @@ -14,6 +14,8 @@ import { } from "components/gantt-chart"; // icons import { getStateGroupIcon } from "components/icons"; +// helpers +import { findTotalDaysInRange } from "helpers/date-time.helper"; // types import { IIssue } from "types"; @@ -31,17 +33,26 @@ export const IssueGanttChartView = () => { ); // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ issue }: { issue: IIssue }) => ( - - - {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)} -
- {issue?.project_detail?.identifier} {issue?.sequence_id} -
-
{issue?.name}
- - - ); + const GanttSidebarBlockView = ({ issue }: { issue: IIssue }) => { + const duration = findTotalDaysInRange(issue?.start_date ?? "", issue?.target_date ?? "", true); + + return ( + + + {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)} +
+ {issue?.project_detail?.identifier} {issue?.sequence_id} +
+
+
{issue?.name}
+ + {duration} day{duration > 1 ? "s" : ""} + +
+ + + ); + }; return (
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts index a98f08cb796..39a68bf3b32 100644 --- a/apps/app/helpers/date-time.helper.ts +++ b/apps/app/helpers/date-time.helper.ts @@ -374,3 +374,32 @@ export const getAllTimeIn30MinutesInterval = (): Array<{ { label: "11:00", value: "11:00" }, { label: "11:30", value: "11:30" }, ]; + +/** + * @returns {number} total number of days in range + * @description Returns total number of days in range + * @param {string} startDate + * @param {string} endDate + * @param {boolean} inclusive + * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8 + */ + +export const findTotalDaysInRange = ( + startDate: Date | string, + endDate: Date | string, + inclusive: boolean +): number => { + if (!startDate || !endDate) return 0; + + startDate = new Date(startDate); + endDate = new Date(endDate); + + // find number of days between startDate and endDate + const diffInTime = endDate.getTime() - startDate.getTime(); + const diffInDays = diffInTime / (1000 * 3600 * 24); + + // if inclusive is true, add 1 to diffInDays + if (inclusive) return diffInDays + 1; + + return diffInDays; +}; From 3736bf7be690ea15a61526d77586ad0c8cb45715 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 22 Aug 2023 18:13:59 +0530 Subject: [PATCH 11/22] refactor: context dispatcher types --- .../components/gantt-chart/blocks/block.tsx | 4 +- .../gantt-chart/blocks/blocks-display.tsx | 62 ++++++++++++------- .../components/gantt-chart/chart/index.tsx | 41 ++---------- .../components/gantt-chart/contexts/index.tsx | 3 + .../gantt-chart/helpers/draggable.tsx | 10 +-- apps/app/components/gantt-chart/sidebar.tsx | 23 ++++++- .../app/components/gantt-chart/types/index.ts | 22 +++++-- 7 files changed, 91 insertions(+), 74 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/block.tsx b/apps/app/components/gantt-chart/blocks/block.tsx index 26a65dc2ed1..4e74f2a574c 100644 --- a/apps/app/components/gantt-chart/blocks/block.tsx +++ b/apps/app/components/gantt-chart/blocks/block.tsx @@ -17,7 +17,7 @@ export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { return (
@@ -77,7 +77,7 @@ export const ModuleGanttBlock = ({ module }: { module: IModule }) => { return ( s.value === module.status)?.color }} >
diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index f98719a5a1b..3aad6ebc8f6 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -1,5 +1,7 @@ import { FC } from "react"; +// hooks +import { useChart } from "../hooks"; // helpers import { ChartDraggable } from "../helpers/draggable"; import { renderDateFormat } from "helpers/date-time.helper"; @@ -23,6 +25,17 @@ export const GanttChartBlocks: FC<{ enableBlockRightResize, enableBlockMove, }) => { + const { activeBlock, dispatch } = useChart(); + + const updateActiveBlock = (block: IGanttBlock | null) => { + dispatch({ + type: "PARTIAL_UPDATE", + payload: { + activeBlock: block, + }, + }); + }; + const handleChartBlockPosition = ( block: IGanttBlock, totalBlockShifts: number, @@ -54,29 +67,32 @@ export const GanttChartBlocks: FC<{ className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto" style={{ width: `${itemsContainerWidth}px` }} > -
- {blocks && - blocks.length > 0 && - blocks.map( - (block) => - block.start_date && - block.target_date && ( -
- handleChartBlockPosition(block, ...args)} - enableBlockLeftResize={enableBlockLeftResize} - enableBlockRightResize={enableBlockRightResize} - enableBlockMove={enableBlockMove} - > -
- {blockRender(block.data)} -
- -
- ) - )} -
+ {blocks && + blocks.length > 0 && + blocks.map( + (block) => + block.start_date && + block.target_date && ( +
updateActiveBlock(block)} + onMouseLeave={() => updateActiveBlock(null)} + > + handleChartBlockPosition(block, ...args)} + enableBlockLeftResize={enableBlockLeftResize} + enableBlockRightResize={enableBlockRightResize} + enableBlockMove={enableBlockMove} + > +
+ {blockRender(block.data)} +
+ +
+ ) + )}
); }; diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 61070d7f41d..71026500c72 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -3,6 +3,7 @@ import { FC, useEffect, useState } from "react"; import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid"; // components import { GanttChartBlocks } from "components/gantt-chart"; +import { GanttSidebar } from "../sidebar"; // import { HourChartView } from "./hours"; // import { DayChartView } from "./day"; // import { WeekChartView } from "./week"; @@ -25,12 +26,11 @@ import { getMonthChartItemPositionWidthInMonth, } from "../views"; // types -import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types"; +import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types"; // data import { currentViewDataWithView } from "../data"; // context import { useChart } from "../hooks"; -import { GanttSidebar } from "../sidebar"; type ChartViewRootProps = { border: boolean; @@ -83,10 +83,10 @@ export const ChartViewRoot: FC = ({ // blocks state management ends - const handleChartView = (key: string) => updateCurrentViewRenderPayload(null, key); + const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key); - const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: string) => { - const selectedCurrentView = view; + const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => { + const selectedCurrentView: TGanttViews = view; const selectedCurrentViewData: ChartDataType | undefined = selectedCurrentView && selectedCurrentView === currentViewData?.key ? currentViewData @@ -228,38 +228,8 @@ export const ChartViewRoot: FC = ({ border ? `border border-custom-border-200` : `` } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`} > - {/* chart title */} - {/*
- {title && ( -
-
{title}
-
- Gantt View Beta -
-
- )} - {blocks === null ? ( -
Loading...
- ) : ( -
- {blocks.length} {loaderTitle} -
- )} -
*/} - {/* chart header */}
- {/*
setBlocksSidebarView(() => !blocksSidebarView)} - > - {blocksSidebarView ? ( - - ) : ( - - )} -
*/} - {title && (
{title}
@@ -339,7 +309,6 @@ export const ChartViewRoot: FC = ({ className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto" id="scroll-container" > - {/* chart */} {/* {currentView && currentView === "hours" && } */} {/* {currentView && currentView === "day" && } */} {/* {currentView && currentView === "week" && } */} diff --git a/apps/app/components/gantt-chart/contexts/index.tsx b/apps/app/components/gantt-chart/contexts/index.tsx index 4f858cf336c..e8b9b4b9bf7 100644 --- a/apps/app/components/gantt-chart/contexts/index.tsx +++ b/apps/app/components/gantt-chart/contexts/index.tsx @@ -32,11 +32,14 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ currentViewData: currentViewDataWithView(initialView), renderView: [], allViews: allViewsWithData, + activeBlock: null, }); const handleDispatch = (action: ChartContextActionPayload): ChartContextData => { const newState = chartReducer(state, action); + dispatch(() => newState); + return newState; }; diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 6684f00de86..6e03c853a61 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -202,7 +202,7 @@ export const ChartDraggable: React.FC = ({
= ({ onMouseDown={handleBlockLeftResize} onMouseEnter={() => setIsLeftResizing(true)} onMouseLeave={() => setIsLeftResizing(false)} - className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-10 rounded-md cursor-col-resize" + className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" />
@@ -230,10 +230,10 @@ export const ChartDraggable: React.FC = ({ onMouseDown={handleBlockRightResize} onMouseEnter={() => setIsRightResizing(true)} onMouseLeave={() => setIsRightResizing(false)} - className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-6 rounded-md cursor-col-resize" + className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" />
diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index 5dc252d5b42..99cb1dbc500 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -1,6 +1,8 @@ // react-beautiful-dnd import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd"; import StrictModeDroppable from "components/dnd/StrictModeDroppable"; +// hooks +import { useChart } from "./hooks"; // icons import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; // types @@ -19,6 +21,17 @@ export const GanttSidebar: React.FC = ({ sidebarBlockRender, enableReorder, }) => { + const { activeBlock, dispatch } = useChart(); + + const updateActiveBlock = (block: IGanttBlock | null) => { + dispatch({ + type: "PARTIAL_UPDATE", + payload: { + activeBlock: block, + }, + }); + }; + const handleOrderChange = (result: DropResult) => { if (!blocks) return; @@ -60,7 +73,7 @@ export const GanttSidebar: React.FC = ({ {(droppableProvided) => (
@@ -75,15 +88,19 @@ export const GanttSidebar: React.FC = ({ > {(provided, snapshot) => (
updateActiveBlock(block)} + onMouseLeave={() => updateActiveBlock(null)} ref={provided.innerRef} {...provided.draggableProps} >
) )} diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 6e03c853a61..5d095e03116 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -6,8 +6,8 @@ import { useChart } from "../hooks"; import { IGanttBlock } from "../types"; type Props = { - children: any; block: IGanttBlock; + blockRender: (data: any) => React.ReactNode; handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; @@ -15,8 +15,8 @@ type Props = { }; export const ChartDraggable: React.FC = ({ - children, block, + blockRender, handleBlock, enableBlockLeftResize, enableBlockRightResize, @@ -30,6 +30,8 @@ export const ChartDraggable: React.FC = ({ const { currentViewData } = useChart(); const checkScrollEnd = (e: MouseEvent): number => { + const SCROLL_THRESHOLD = 70; + let delWidth = 0; const ganttContainer = document.querySelector("#gantt-container") as HTMLElement; @@ -43,7 +45,7 @@ export const ChartDraggable: React.FC = ({ // manually scroll to left if reached the left end while dragging if ( posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <= - 70 + SCROLL_THRESHOLD ) { if (e.movementX > 0) return 0; @@ -54,7 +56,7 @@ export const ChartDraggable: React.FC = ({ // manually scroll to right if reached the right end while dragging const posFromRight = ganttContainer.getBoundingClientRect().right - e.clientX; - if (posFromRight <= 70) { + if (posFromRight <= SCROLL_THRESHOLD) { if (e.movementX < 0) return 0; delWidth = 5; @@ -159,18 +161,20 @@ export const ChartDraggable: React.FC = ({ }; const handleBlockMove = () => { + console.log("Running..."); if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return; + console.log("Inside"); const resizableDiv = resizableRef.current; const columnWidth = currentViewData.data.width; - const blockInitialMarginLeft = - parseInt(resizableDiv.style.marginLeft) ?? parseInt(block.position.width.toString()); + const blockInitialMarginLeft = parseInt(resizableDiv.style.marginLeft); let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { + console.log("Moving..."); let delWidth = 0; delWidth = checkScrollEnd(e); @@ -184,6 +188,7 @@ export const ChartDraggable: React.FC = ({ }; const handleMouseUp = () => { + console.log("Stopping..."); document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); @@ -223,7 +228,12 @@ export const ChartDraggable: React.FC = ({ /> )} - {React.cloneElement(children, { onMouseDown: handleBlockMove })} +
+ {blockRender(block.data)} +
{enableBlockRightResize && ( <>
Date: Wed, 23 Aug 2023 11:57:46 +0530 Subject: [PATCH 13/22] chore: filters added to gantt chart --- .../core/filters/issues-view-filter.tsx | 72 +++++++++---------- .../gantt-chart/helpers/draggable.tsx | 4 +- apps/app/components/gantt-chart/sidebar.tsx | 19 ++++- apps/app/hooks/gantt-chart/issue-view.tsx | 8 ++- 4 files changed, 60 insertions(+), 43 deletions(-) diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx index 2fa80c975b3..3f31a5d10d7 100644 --- a/apps/app/components/core/filters/issues-view-filter.tsx +++ b/apps/app/components/core/filters/issues-view-filter.tsx @@ -113,46 +113,44 @@ export const IssuesFilterView: React.FC = () => { ))}
)} - {issueView !== "gantt_chart" && ( - { - const key = option.key as keyof typeof filters; + { + const key = option.key as keyof typeof filters; - if (key === "target_date") { - const valueExists = checkIfArraysHaveSameElements( - filters.target_date ?? [], - option.value - ); + if (key === "target_date") { + const valueExists = checkIfArraysHaveSameElements( + filters.target_date ?? [], + option.value + ); - setFilters({ - target_date: valueExists ? null : option.value, - }); - } else { - const valueExists = filters[key]?.includes(option.value); + setFilters({ + target_date: valueExists ? null : option.value, + }); + } else { + const valueExists = filters[key]?.includes(option.value); - if (valueExists) - setFilters( - { - [option.key]: ((filters[key] ?? []) as any[])?.filter( - (val) => val !== option.value - ), - }, - !Boolean(viewId) - ); - else - setFilters( - { - [option.key]: [...((filters[key] ?? []) as any[]), option.value], - }, - !Boolean(viewId) - ); - } - }} - direction="left" - height="rg" - /> - )} + if (valueExists) + setFilters( + { + [option.key]: ((filters[key] ?? []) as any[])?.filter( + (val) => val !== option.value + ), + }, + !Boolean(viewId) + ); + else + setFilters( + { + [option.key]: [...((filters[key] ?? []) as any[]), option.value], + }, + !Boolean(viewId) + ); + } + }} + direction="left" + height="rg" + /> {({ open }) => ( <> diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 5d095e03116..96c4650226f 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -207,7 +207,7 @@ export const ChartDraggable: React.FC = ({
= ({ className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" />
diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index 99cb1dbc500..98c16c647c6 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -3,6 +3,8 @@ import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd"; import StrictModeDroppable from "components/dnd/StrictModeDroppable"; // hooks import { useChart } from "./hooks"; +// ui +import { Loader } from "components/ui"; // icons import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; // types @@ -78,8 +80,9 @@ export const GanttSidebar: React.FC = ({ {...droppableProvided.droppableProps} > <> - {blocks && blocks.length > 0 - ? blocks.map((block, index) => ( + {blocks ? ( + blocks.length > 0 ? ( + blocks.map((block, index) => ( = ({ )} )) - : "No data found"} + ) : ( + "No data found" + ) + ) : ( + + + + + + + )} {droppableProvided.placeholder}
diff --git a/apps/app/hooks/gantt-chart/issue-view.tsx b/apps/app/hooks/gantt-chart/issue-view.tsx index c7ffa0ffea5..7e595a35876 100644 --- a/apps/app/hooks/gantt-chart/issue-view.tsx +++ b/apps/app/hooks/gantt-chart/issue-view.tsx @@ -14,7 +14,13 @@ const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: strin order_by: orderBy, type: filters?.type ? filters?.type : undefined, sub_issue: showSubIssues, - start_target_date: true, + assignees: filters?.assignees ? filters?.assignees.join(",") : undefined, + state: filters?.state ? filters?.state.join(",") : undefined, + priority: filters?.priority ? filters?.priority.join(",") : undefined, + labels: filters?.labels ? filters?.labels.join(",") : undefined, + created_by: filters?.created_by ? filters?.created_by.join(",") : undefined, + target_date: filters?.target_date ? filters?.target_date.join(",") : undefined, + start_target_date: true, // to fetch only issues with a start and target date }; // all issues under the workspace and project From b1beeb8c0645a940b7d64f0c2931898c7c40fceb Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Wed, 23 Aug 2023 12:52:07 +0530 Subject: [PATCH 14/22] refactor: folder structure --- apps/app/components/core/views/all-views.tsx | 5 +- .../components/cycles/gantt-chart/blocks.tsx | 50 +++++++++ .../cycle-issues-layout.tsx} | 27 ++--- .../cycles-list-layout.tsx} | 16 +-- .../components/cycles/gantt-chart/index.ts | 3 + apps/app/components/cycles/index.ts | 3 +- .../components/gantt-chart/blocks/block.tsx | 103 ------------------ .../components/gantt-chart/blocks/index.ts | 1 - .../components/gantt-chart/chart/index.tsx | 7 +- apps/app/components/gantt-chart/root.tsx | 4 +- apps/app/components/gantt-chart/sidebar.tsx | 6 +- .../components/issues/gantt-chart/blocks.tsx | 68 ++++++++++++ .../components/issues/gantt-chart/index.ts | 2 + .../layout.tsx} | 31 +----- .../components/modules/gantt-chart/blocks.tsx | 56 ++++++++++ .../components/modules/gantt-chart/index.ts | 3 + .../module-issues-layout.tsx} | 27 ++--- .../modules-list-layout.tsx} | 16 +-- apps/app/components/modules/index.ts | 1 - apps/app/components/views/gantt-chart.tsx | 20 +--- 20 files changed, 224 insertions(+), 225 deletions(-) create mode 100644 apps/app/components/cycles/gantt-chart/blocks.tsx rename apps/app/components/cycles/{gantt-chart.tsx => gantt-chart/cycle-issues-layout.tsx} (60%) rename apps/app/components/cycles/{cycles-list-gantt-chart.tsx => gantt-chart/cycles-list-layout.tsx} (80%) create mode 100644 apps/app/components/cycles/gantt-chart/index.ts delete mode 100644 apps/app/components/gantt-chart/blocks/block.tsx create mode 100644 apps/app/components/issues/gantt-chart/blocks.tsx create mode 100644 apps/app/components/issues/gantt-chart/index.ts rename apps/app/components/issues/{gantt-chart.tsx => gantt-chart/layout.tsx} (52%) create mode 100644 apps/app/components/modules/gantt-chart/blocks.tsx create mode 100644 apps/app/components/modules/gantt-chart/index.ts rename apps/app/components/modules/{gantt-chart.tsx => gantt-chart/module-issues-layout.tsx} (61%) rename apps/app/components/modules/{modules-list-gantt-chart.tsx => gantt-chart/modules-list-layout.tsx} (80%) diff --git a/apps/app/components/core/views/all-views.tsx b/apps/app/components/core/views/all-views.tsx index 4a757649c45..79d5d6b11f0 100644 --- a/apps/app/components/core/views/all-views.tsx +++ b/apps/app/components/core/views/all-views.tsx @@ -114,7 +114,10 @@ export const AllViews: React.FC = ({ )} {groupedIssues ? ( - !isEmpty || issueView === "kanban" || issueView === "calendar" ? ( + !isEmpty || + issueView === "kanban" || + issueView === "calendar" || + issueView === "gantt_chart" ? ( <> {issueView === "list" ? ( { + const router = useRouter(); + const { workspaceSlug } = router.query; + + return ( + + +
+ +
{cycle.name}
+
+ {renderShortDate(cycle.start_date ?? "")} to {renderShortDate(cycle.end_date ?? "")} +
+
+ } + position="top-left" + > +
+ {cycle.name} +
+ + + + ); +}; + +export const CycleGanttSidebarBlock = ({ cycle }: { cycle: ICycle }) => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + return ( + + +
{cycle?.name}
+ + + ); +}; diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx similarity index 60% rename from apps/app/components/cycles/gantt-chart.tsx rename to apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx index fe276b50dad..fb2167115ee 100644 --- a/apps/app/components/cycles/gantt-chart.tsx +++ b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx @@ -6,11 +6,8 @@ import useUser from "hooks/use-user"; import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view"; import { updateGanttIssue } from "components/gantt-chart/hooks/block-update"; // components -import { - GanttChartRoot, - IssueGanttBlock, - renderIssueBlocksStructure, -} from "components/gantt-chart"; +import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart"; +import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues"; // types import { IIssue } from "types"; @@ -28,27 +25,17 @@ export const CycleIssuesGanttChartView = () => { cycleId as string ); - // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ data }: any) => ( -
-
-
{data?.name}
-
- ); - return ( -
+
updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } blockRender={(data: any) => } enableReorder={orderBy === "sort_order"} /> diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx similarity index 80% rename from apps/app/components/cycles/cycles-list-gantt-chart.tsx rename to apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx index 1062e7b5ad4..ab2d3bc4e1b 100644 --- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx +++ b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx @@ -9,7 +9,8 @@ import cyclesService from "services/cycles.service"; // hooks import useUser from "hooks/use-user"; // components -import { CycleGanttBlock, GanttChartRoot, IBlockUpdateData } from "components/gantt-chart"; +import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart"; +import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles"; // types import { ICycle } from "types"; @@ -24,17 +25,6 @@ export const CyclesListGanttChartView: FC = ({ cycles, mutateCycles }) => const { user } = useUser(); - // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ data }: any) => ( -
-
-
{data?.name}
-
- ); - const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => { if (!workspaceSlug || !user) return; @@ -88,7 +78,7 @@ export const CyclesListGanttChartView: FC = ({ cycles, mutateCycles }) => loaderTitle="Cycles" blocks={cycles ? blockFormat(cycles) : null} blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)} - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } blockRender={(data: any) => } enableBlockLeftResize={false} enableBlockRightResize={false} diff --git a/apps/app/components/cycles/gantt-chart/index.ts b/apps/app/components/cycles/gantt-chart/index.ts new file mode 100644 index 00000000000..e4850b2e259 --- /dev/null +++ b/apps/app/components/cycles/gantt-chart/index.ts @@ -0,0 +1,3 @@ +export * from "./blocks"; +export * from "./cycle-issues-layout"; +export * from "./cycles-list-layout"; diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts index 40355d574c0..4b43b3a74db 100644 --- a/apps/app/components/cycles/index.ts +++ b/apps/app/components/cycles/index.ts @@ -1,11 +1,10 @@ export * from "./cycles-list"; export * from "./active-cycle-details"; export * from "./active-cycle-stats"; -export * from "./cycles-list-gantt-chart"; +export * from "./gantt-chart"; export * from "./cycles-view"; export * from "./delete-cycle-modal"; export * from "./form"; -export * from "./gantt-chart"; export * from "./modal"; export * from "./select"; export * from "./sidebar"; diff --git a/apps/app/components/gantt-chart/blocks/block.tsx b/apps/app/components/gantt-chart/blocks/block.tsx deleted file mode 100644 index 4e74f2a574c..00000000000 --- a/apps/app/components/gantt-chart/blocks/block.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import Link from "next/link"; -import { useRouter } from "next/router"; - -// ui -import { Tooltip } from "components/ui"; -// helpers -import { renderShortDate } from "helpers/date-time.helper"; -// types -import { ICycle, IIssue, IModule } from "types"; -// constants -import { MODULE_STATUS } from "constants/module"; - -export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { - const router = useRouter(); - const { workspaceSlug } = router.query; - - return ( - - -
- -
{issue.name}
-
- {renderShortDate(issue.start_date ?? "")} to{" "} - {renderShortDate(issue.target_date ?? "")} -
-
- } - position="top-left" - > -
- {issue.name} -
- - - - ); -}; - -export const CycleGanttBlock = ({ cycle }: { cycle: ICycle }) => { - const router = useRouter(); - const { workspaceSlug } = router.query; - - return ( - - -
- -
{cycle.name}
-
- {renderShortDate(cycle.start_date ?? "")} to {renderShortDate(cycle.end_date ?? "")} -
-
- } - position="top-left" - > -
- {cycle.name} -
- - - - ); -}; - -export const ModuleGanttBlock = ({ module }: { module: IModule }) => { - const router = useRouter(); - const { workspaceSlug } = router.query; - - return ( - - s.value === module.status)?.color }} - > -
- -
{module.name}
-
- {renderShortDate(module.start_date ?? "")} to{" "} - {renderShortDate(module.target_date ?? "")} -
-
- } - position="top-left" - > -
- {module.name} -
- - - - ); -}; diff --git a/apps/app/components/gantt-chart/blocks/index.ts b/apps/app/components/gantt-chart/blocks/index.ts index 8773b2797c4..18ca5da9e86 100644 --- a/apps/app/components/gantt-chart/blocks/index.ts +++ b/apps/app/components/gantt-chart/blocks/index.ts @@ -1,2 +1 @@ -export * from "./block"; export * from "./blocks-display"; diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 71026500c72..93925fd308f 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -34,7 +34,7 @@ import { useChart } from "../hooks"; type ChartViewRootProps = { border: boolean; - title: null | string; + title: string; loaderTitle: string; blocks: IGanttBlock[] | null; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; @@ -68,7 +68,7 @@ export const ChartViewRoot: FC = ({ // blocks state management starts const [chartBlocks, setChartBlocks] = useState(null); - const renderBlockStructure = (view: any, blocks: IGanttBlock[]) => + const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) => blocks && blocks.length > 0 ? blocks.map((block: any) => ({ ...block, @@ -77,7 +77,7 @@ export const ChartViewRoot: FC = ({ : []; useEffect(() => { - if (currentViewData && blocks && blocks.length > 0) + if (currentViewData && blocks) setChartBlocks(() => renderBlockStructure(currentViewData, blocks)); }, [currentViewData, blocks]); @@ -299,6 +299,7 @@ export const ChartViewRoot: FC = ({ >
void; @@ -22,7 +22,7 @@ type GanttChartRootProps = { export const GanttChartRoot: FC = ({ border = true, - title = null, + title, blocks, loaderTitle = "blocks", blockUpdateHandler, diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index 98c16c647c6..8e4216d3fdb 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -11,6 +11,7 @@ import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; import { IBlockUpdateData, IGanttBlock } from "./types"; type Props = { + title: string; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; blocks: IGanttBlock[] | null; sidebarBlockRender: (data: any) => React.ReactNode; @@ -18,6 +19,7 @@ type Props = { }; export const GanttSidebar: React.FC = ({ + title, blockUpdateHandler, blocks, sidebarBlockRender, @@ -122,7 +124,9 @@ export const GanttSidebar: React.FC = ({ )) ) : ( - "No data found" +
+ No {title} found +
) ) : ( diff --git a/apps/app/components/issues/gantt-chart/blocks.tsx b/apps/app/components/issues/gantt-chart/blocks.tsx new file mode 100644 index 00000000000..cfada199524 --- /dev/null +++ b/apps/app/components/issues/gantt-chart/blocks.tsx @@ -0,0 +1,68 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; + +// ui +import { Tooltip } from "components/ui"; +// icons +import { getStateGroupIcon } from "components/icons"; +// helpers +import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper"; +// types +import { IIssue } from "types"; + +export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + return ( + + +
+ +
{issue?.name}
+
+ {renderShortDate(issue?.start_date ?? "")} to{" "} + {renderShortDate(issue?.target_date ?? "")} +
+
+ } + position="top-left" + > +
+ {issue?.name} +
+ + + + ); +}; + +// rendering issues on gantt sidebar +export const IssueGanttSidebarBlock = ({ issue }: { issue: IIssue }) => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + const duration = findTotalDaysInRange(issue?.start_date ?? "", issue?.target_date ?? "", true); + + return ( + + + {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)} +
+ {issue?.project_detail?.identifier} {issue?.sequence_id} +
+
+
{issue?.name}
+ + {duration} day{duration > 1 ? "s" : ""} + +
+ + + ); +}; diff --git a/apps/app/components/issues/gantt-chart/index.ts b/apps/app/components/issues/gantt-chart/index.ts new file mode 100644 index 00000000000..7f0d162739a --- /dev/null +++ b/apps/app/components/issues/gantt-chart/index.ts @@ -0,0 +1,2 @@ +export * from "./blocks"; +export * from "./layout"; diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart/layout.tsx similarity index 52% rename from apps/app/components/issues/gantt-chart.tsx rename to apps/app/components/issues/gantt-chart/layout.tsx index 2d61f10d926..90d560b9f7a 100644 --- a/apps/app/components/issues/gantt-chart.tsx +++ b/apps/app/components/issues/gantt-chart/layout.tsx @@ -7,11 +7,8 @@ import useUser from "hooks/use-user"; import useGanttChartIssues from "hooks/gantt-chart/issue-view"; import { updateGanttIssue } from "components/gantt-chart/hooks/block-update"; // components -import { - GanttChartRoot, - IssueGanttBlock, - renderIssueBlocksStructure, -} from "components/gantt-chart"; +import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart"; +import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues"; // icons import { getStateGroupIcon } from "components/icons"; // helpers @@ -32,28 +29,6 @@ export const IssueGanttChartView = () => { projectId as string ); - // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ issue }: { issue: IIssue }) => { - const duration = findTotalDaysInRange(issue?.start_date ?? "", issue?.target_date ?? "", true); - - return ( - - - {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)} -
- {issue?.project_detail?.identifier} {issue?.sequence_id} -
-
-
{issue?.name}
- - {duration} day{duration > 1 ? "s" : ""} - -
- - - ); - }; - return (
{ updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } blockRender={(data: any) => } - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } enableReorder={orderBy === "sort_order"} />
diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx new file mode 100644 index 00000000000..aafe52f9566 --- /dev/null +++ b/apps/app/components/modules/gantt-chart/blocks.tsx @@ -0,0 +1,56 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; + +// ui +import { Tooltip } from "components/ui"; +// helpers +import { renderShortDate } from "helpers/date-time.helper"; +// types +import { IModule } from "types"; +// constants +import { MODULE_STATUS } from "constants/module"; + +export const ModuleGanttBlock = ({ module }: { module: IModule }) => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + return ( + + s.value === module?.status)?.color }} + > +
+ +
{module?.name}
+
+ {renderShortDate(module?.start_date ?? "")} to{" "} + {renderShortDate(module?.target_date ?? "")} +
+
+ } + position="top-left" + > +
+ {module?.name} +
+ + + + ); +}; + +export const ModuleGanttSidebarBlock = ({ module }: { module: IModule }) => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + return ( + + +
{module?.name}
+ + + ); +}; diff --git a/apps/app/components/modules/gantt-chart/index.ts b/apps/app/components/modules/gantt-chart/index.ts new file mode 100644 index 00000000000..301b9f8405e --- /dev/null +++ b/apps/app/components/modules/gantt-chart/index.ts @@ -0,0 +1,3 @@ +export * from "./blocks"; +export * from "./module-issues-layout"; +export * from "./modules-list-layout"; diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx similarity index 61% rename from apps/app/components/modules/gantt-chart.tsx rename to apps/app/components/modules/gantt-chart/module-issues-layout.tsx index 8ab8b60245c..cb8eda3a4e4 100644 --- a/apps/app/components/modules/gantt-chart.tsx +++ b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx @@ -8,11 +8,8 @@ import useUser from "hooks/use-user"; import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view"; import { updateGanttIssue } from "components/gantt-chart/hooks/block-update"; // components -import { - GanttChartRoot, - IssueGanttBlock, - renderIssueBlocksStructure, -} from "components/gantt-chart"; +import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart"; +import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues"; // types import { IIssue } from "types"; @@ -32,27 +29,17 @@ export const ModuleIssuesGanttChartView: FC = ({}) => { moduleId as string ); - // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ data }: any) => ( -
-
-
{data?.name}
-
- ); - return ( -
+
updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } blockRender={(data: any) => } enableReorder={orderBy === "sort_order"} /> diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx similarity index 80% rename from apps/app/components/modules/modules-list-gantt-chart.tsx rename to apps/app/components/modules/gantt-chart/modules-list-layout.tsx index ce839e2e840..fbc1b3c7bfd 100644 --- a/apps/app/components/modules/modules-list-gantt-chart.tsx +++ b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx @@ -10,11 +10,10 @@ import modulesService from "services/modules.service"; // hooks import useUser from "hooks/use-user"; // components -import { GanttChartRoot, IBlockUpdateData, ModuleGanttBlock } from "components/gantt-chart"; +import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart"; +import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules"; // types import { IModule } from "types"; -// constants -import { MODULE_STATUS } from "constants/module"; type Props = { modules: IModule[]; @@ -27,15 +26,6 @@ export const ModulesListGanttChartView: FC = ({ modules, mutateModules }) const { user } = useUser(); - // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ module }: any) => ( - - -
{module?.name}
- - - ); - const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => { if (!workspaceSlug || !user) return; @@ -95,7 +85,7 @@ export const ModulesListGanttChartView: FC = ({ modules, mutateModules }) loaderTitle="Modules" blocks={modules ? blockFormat(modules) : null} blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)} - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } blockRender={(data: any) => } />
diff --git a/apps/app/components/modules/index.ts b/apps/app/components/modules/index.ts index 5a5e2a4f147..2a7f54fb327 100644 --- a/apps/app/components/modules/index.ts +++ b/apps/app/components/modules/index.ts @@ -4,6 +4,5 @@ export * from "./delete-module-modal"; export * from "./form"; export * from "./gantt-chart"; export * from "./modal"; -export * from "./modules-list-gantt-chart"; export * from "./sidebar"; export * from "./single-module-card"; diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx index 630ffaca0eb..b60c748da67 100644 --- a/apps/app/components/views/gantt-chart.tsx +++ b/apps/app/components/views/gantt-chart.tsx @@ -7,11 +7,8 @@ import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view"; import useUser from "hooks/use-user"; import { updateGanttIssue } from "components/gantt-chart/hooks/block-update"; // components -import { - GanttChartRoot, - IssueGanttBlock, - renderIssueBlocksStructure, -} from "components/gantt-chart"; +import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart"; +import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues"; // types import { IIssue } from "types"; @@ -29,17 +26,6 @@ export const ViewIssuesGanttChartView: FC = ({}) => { viewId as string ); - // rendering issues on gantt sidebar - const GanttSidebarBlockView = ({ data }: any) => ( -
-
-
{data?.name}
-
- ); - return (
= ({}) => { blockUpdateHandler={(block, payload) => updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } + sidebarBlockRender={(data: any) => } blockRender={(data: any) => } />
From e7631bb2d9c939a4ad63ad08fadc9b20979b96f1 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Wed, 23 Aug 2023 13:15:46 +0530 Subject: [PATCH 15/22] style: cycle blocks --- .../components/cycles/gantt-chart/blocks.tsx | 51 ++++++++++++++++--- .../components/cycles/single-cycle-list.tsx | 1 + 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/apps/app/components/cycles/gantt-chart/blocks.tsx b/apps/app/components/cycles/gantt-chart/blocks.tsx index 665c05869a1..81c031d59c2 100644 --- a/apps/app/components/cycles/gantt-chart/blocks.tsx +++ b/apps/app/components/cycles/gantt-chart/blocks.tsx @@ -3,8 +3,10 @@ import { useRouter } from "next/router"; // ui import { Tooltip } from "components/ui"; +// icons +import { ContrastIcon } from "components/icons"; // helpers -import { renderShortDate } from "helpers/date-time.helper"; +import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper"; // types import { ICycle } from "types"; @@ -12,23 +14,40 @@ export const CycleGanttBlock = ({ cycle }: { cycle: ICycle }) => { const router = useRouter(); const { workspaceSlug } = router.query; + const cycleStatus = getDateRangeStatus(cycle?.start_date, cycle?.end_date); + return ( - - -
+ + +
-
{cycle.name}
+
{cycle?.name}
- {renderShortDate(cycle.start_date ?? "")} to {renderShortDate(cycle.end_date ?? "")} + {renderShortDate(cycle?.start_date ?? "")} to{" "} + {renderShortDate(cycle?.end_date ?? "")}
} position="top-left" > -
- {cycle.name} +
+ {cycle?.name}
@@ -40,9 +59,25 @@ export const CycleGanttSidebarBlock = ({ cycle }: { cycle: ICycle }) => { const router = useRouter(); const { workspaceSlug } = router.query; + const cycleStatus = getDateRangeStatus(cycle?.start_date, cycle?.end_date); + return ( +
{cycle?.name}
 diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx index 7518568edb0..ec01da9e760 100644 --- a/apps/app/components/cycles/single-cycle-list.tsx +++ b/apps/app/components/cycles/single-cycle-list.tsx @@ -106,6 +106,7 @@ function RadialProgressBar({ progress }: progress) {
); } + export const SingleCycleList: React.FC = ({ cycle, handleEditCycle, From dddf4703fbfcb8e5ab9734560b2af60aa1908837 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Wed, 23 Aug 2023 16:58:26 +0530 Subject: [PATCH 16/22] chore: move to block arrow --- .../components/cycles/gantt-chart/blocks.tsx | 4 +- .../gantt-chart/cycle-issues-layout.tsx | 1 + .../components/gantt-chart/chart/index.tsx | 27 ++-- .../components/gantt-chart/contexts/index.tsx | 10 +- apps/app/components/gantt-chart/data/index.ts | 2 +- .../gantt-chart/helpers/draggable.tsx | 134 +++++++++++------- apps/app/components/gantt-chart/root.tsx | 3 + .../app/components/gantt-chart/types/index.ts | 2 + .../components/issues/gantt-chart/layout.tsx | 1 + .../gantt-chart/module-issues-layout.tsx | 1 + apps/app/components/views/gantt-chart.tsx | 7 +- .../hooks/gantt-chart/cycle-issues-view.tsx | 8 +- .../hooks/gantt-chart/module-issues-view.tsx | 8 +- .../hooks/gantt-chart/view-issues-view.tsx | 2 +- 14 files changed, 137 insertions(+), 73 deletions(-) diff --git a/apps/app/components/cycles/gantt-chart/blocks.tsx b/apps/app/components/cycles/gantt-chart/blocks.tsx index 81c031d59c2..ce5f3a873f6 100644 --- a/apps/app/components/cycles/gantt-chart/blocks.tsx +++ b/apps/app/components/cycles/gantt-chart/blocks.tsx @@ -62,10 +62,10 @@ export const CycleGanttSidebarBlock = ({ cycle }: { cycle: ICycle }) => { const cycleStatus = getDateRangeStatus(cycle?.start_date, cycle?.end_date); return ( - + { sidebarBlockRender={(data: any) => } blockRender={(data: any) => } enableReorder={orderBy === "sort_order"} + bottomSpacing />
); diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 93925fd308f..b447a7b7c4e 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -44,6 +44,7 @@ type ChartViewRootProps = { enableBlockRightResize: boolean; enableBlockMove: boolean; enableReorder: boolean; + bottomSpacing: boolean; }; export const ChartViewRoot: FC = ({ @@ -58,16 +59,17 @@ export const ChartViewRoot: FC = ({ enableBlockRightResize, enableBlockMove, enableReorder, + bottomSpacing, }) => { - const { currentView, currentViewData, renderView, dispatch, allViews } = useChart(); - const [itemsContainerWidth, setItemsContainerWidth] = useState(0); const [fullScreenMode, setFullScreenMode] = useState(false); - const [blocksSidebarView, setBlocksSidebarView] = useState(false); // blocks state management starts const [chartBlocks, setChartBlocks] = useState(null); + const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } = + useChart(); + const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) => blocks && blocks.length > 0 ? blocks.map((block: any) => ({ @@ -198,6 +200,8 @@ export const ChartViewRoot: FC = ({ const clientVisibleWidth: number = scrollContainer?.clientWidth; const currentScrollPosition: number = scrollContainer?.scrollLeft; + updateScrollLeft(currentScrollPosition); + const approxRangeLeft: number = scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth; const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth); @@ -208,16 +212,6 @@ export const ChartViewRoot: FC = ({ updateCurrentViewRenderPayload("left", currentView); }; - useEffect(() => { - const scrollContainer = document.getElementById("scroll-container") as HTMLElement; - - scrollContainer.addEventListener("scroll", onScroll); - - return () => { - scrollContainer.removeEventListener("scroll", onScroll); - }; - }, [renderView]); - return (
= ({ {/* content */}
= ({ />
{/* {currentView && currentView === "hours" && } */} {/* {currentView && currentView === "day" && } */} diff --git a/apps/app/components/gantt-chart/contexts/index.tsx b/apps/app/components/gantt-chart/contexts/index.tsx index e8b9b4b9bf7..05dfbe67879 100644 --- a/apps/app/components/gantt-chart/contexts/index.tsx +++ b/apps/app/components/gantt-chart/contexts/index.tsx @@ -35,6 +35,8 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ activeBlock: null, }); + const [scrollLeft, setScrollLeft] = useState(0); + const handleDispatch = (action: ChartContextActionPayload): ChartContextData => { const newState = chartReducer(state, action); @@ -43,8 +45,14 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ return newState; }; + const updateScrollLeft = (scrollLeft: number) => { + setScrollLeft(scrollLeft); + }; + return ( - + {children} ); diff --git a/apps/app/components/gantt-chart/data/index.ts b/apps/app/components/gantt-chart/data/index.ts index f166ad1beaf..4e1921434ad 100644 --- a/apps/app/components/gantt-chart/data/index.ts +++ b/apps/app/components/gantt-chart/data/index.ts @@ -108,7 +108,7 @@ export const allViewsWithData: ChartDataType[] = [ startDate: new Date(), currentDate: new Date(), endDate: new Date(), - approxFilterRange: 8, + approxFilterRange: 6, width: 55, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3) }, }, diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 96c4650226f..b7416eb7b8f 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -1,5 +1,7 @@ -import React, { useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; +// icons +import { Icon } from "components/ui"; // hooks import { useChart } from "../hooks"; // types @@ -24,10 +26,11 @@ export const ChartDraggable: React.FC = ({ }) => { const [isLeftResizing, setIsLeftResizing] = useState(false); const [isRightResizing, setIsRightResizing] = useState(false); + const [isMoving, setIsMoving] = useState(false); const resizableRef = useRef(null); - const { currentViewData } = useChart(); + const { currentViewData, scrollLeft } = useChart(); const checkScrollEnd = (e: MouseEvent): number => { const SCROLL_THRESHOLD = 70; @@ -161,9 +164,11 @@ export const ChartDraggable: React.FC = ({ }; const handleBlockMove = () => { - console.log("Running..."); + // console.log("Running..."); if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return; - console.log("Inside"); + // console.log("Inside"); + + setIsMoving(true); const resizableDiv = resizableRef.current; @@ -174,7 +179,7 @@ export const ChartDraggable: React.FC = ({ let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { - console.log("Moving..."); + // console.log("Moving..."); let delWidth = 0; delWidth = checkScrollEnd(e); @@ -188,7 +193,10 @@ export const ChartDraggable: React.FC = ({ }; const handleMouseUp = () => { - console.log("Stopping..."); + // console.log("Stopping..."); + + setIsMoving(false); + document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); @@ -203,52 +211,82 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; + const handleScrollToBlock = () => { + const scrollContainer = document.querySelector("#scroll-container") as HTMLElement; + + if (!scrollContainer || !block.position) return; + + scrollContainer.scrollLeft = block.position.marginLeft - 4; + }; + + const isBlockHiddenOnLeft = + block.position?.marginLeft && + block.position?.width && + scrollLeft > block.position.marginLeft + block.position.width; + const isBlockHiddenOnRight = + block.position?.marginLeft && block.position.width && scrollLeft < block.position?.marginLeft; + return ( -
- {enableBlockLeftResize && ( - <> -
setIsLeftResizing(true)} - onMouseLeave={() => setIsLeftResizing(false)} - className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" - /> -
- + <> + {isBlockHiddenOnLeft && ( +
+ +
)} + {/* {isBlockHiddenOnRight && ( +
+ +
+ )} */}
- {blockRender(block.data)} + {enableBlockLeftResize && ( + <> +
setIsLeftResizing(true)} + onMouseLeave={() => setIsLeftResizing(false)} + className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" + /> +
+ + )} +
+ {blockRender(block.data)} +
+ {enableBlockRightResize && ( + <> +
setIsRightResizing(true)} + onMouseLeave={() => setIsRightResizing(false)} + className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" + /> +
+ + )}
- {enableBlockRightResize && ( - <> -
setIsRightResizing(true)} - onMouseLeave={() => setIsRightResizing(false)} - className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" - /> -
- - )} -
+ ); }; diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx index 0fbcd5d5da8..fd211aefdab 100644 --- a/apps/app/components/gantt-chart/root.tsx +++ b/apps/app/components/gantt-chart/root.tsx @@ -18,6 +18,7 @@ type GanttChartRootProps = { enableBlockRightResize?: boolean; enableBlockMove?: boolean; enableReorder?: boolean; + bottomSpacing?: boolean; }; export const GanttChartRoot: FC = ({ @@ -32,6 +33,7 @@ export const GanttChartRoot: FC = ({ enableBlockRightResize = true, enableBlockMove = true, enableReorder = true, + bottomSpacing = false, }) => ( = ({ enableBlockRightResize={enableBlockRightResize} enableBlockMove={enableBlockMove} enableReorder={enableReorder} + bottomSpacing={bottomSpacing} /> ); diff --git a/apps/app/components/gantt-chart/types/index.ts b/apps/app/components/gantt-chart/types/index.ts index 029aae907c1..9cab40f5cc2 100644 --- a/apps/app/components/gantt-chart/types/index.ts +++ b/apps/app/components/gantt-chart/types/index.ts @@ -52,6 +52,8 @@ export type ChartContextActionPayload = }; export interface ChartContextReducer extends ChartContextData { + scrollLeft: number; + updateScrollLeft: (scrollLeft: number) => void; dispatch: (action: ChartContextActionPayload) => void; } diff --git a/apps/app/components/issues/gantt-chart/layout.tsx b/apps/app/components/issues/gantt-chart/layout.tsx index 90d560b9f7a..efcd258b45d 100644 --- a/apps/app/components/issues/gantt-chart/layout.tsx +++ b/apps/app/components/issues/gantt-chart/layout.tsx @@ -42,6 +42,7 @@ export const IssueGanttChartView = () => { blockRender={(data: any) => } sidebarBlockRender={(data: any) => } enableReorder={orderBy === "sort_order"} + bottomSpacing />
); diff --git a/apps/app/components/modules/gantt-chart/module-issues-layout.tsx b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx index cb8eda3a4e4..c75c0801b38 100644 --- a/apps/app/components/modules/gantt-chart/module-issues-layout.tsx +++ b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx @@ -42,6 +42,7 @@ export const ModuleIssuesGanttChartView: FC = ({}) => { sidebarBlockRender={(data: any) => } blockRender={(data: any) => } enableReorder={orderBy === "sort_order"} + bottomSpacing />
); diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx index b60c748da67..2988972df83 100644 --- a/apps/app/components/views/gantt-chart.tsx +++ b/apps/app/components/views/gantt-chart.tsx @@ -27,10 +27,11 @@ export const ViewIssuesGanttChartView: FC = ({}) => { ); return ( -
+
updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) diff --git a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx index 25baf0d3e77..7ef534fb483 100644 --- a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx +++ b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx @@ -18,7 +18,13 @@ const useGanttChartCycleIssues = ( order_by: orderBy, type: filters?.type ? filters?.type : undefined, sub_issue: showSubIssues, - start_target_date: true, + assignees: filters?.assignees ? filters?.assignees.join(",") : undefined, + state: filters?.state ? filters?.state.join(",") : undefined, + priority: filters?.priority ? filters?.priority.join(",") : undefined, + labels: filters?.labels ? filters?.labels.join(",") : undefined, + created_by: filters?.created_by ? filters?.created_by.join(",") : undefined, + target_date: filters?.target_date ? filters?.target_date.join(",") : undefined, + start_target_date: true, // to fetch only issues with a start and target date }; // all issues under the workspace and project diff --git a/apps/app/hooks/gantt-chart/module-issues-view.tsx b/apps/app/hooks/gantt-chart/module-issues-view.tsx index ca686f4e0ec..54dea3e2ee8 100644 --- a/apps/app/hooks/gantt-chart/module-issues-view.tsx +++ b/apps/app/hooks/gantt-chart/module-issues-view.tsx @@ -18,7 +18,13 @@ const useGanttChartModuleIssues = ( order_by: orderBy, type: filters?.type ? filters?.type : undefined, sub_issue: showSubIssues, - start_target_date: true, + assignees: filters?.assignees ? filters?.assignees.join(",") : undefined, + state: filters?.state ? filters?.state.join(",") : undefined, + priority: filters?.priority ? filters?.priority.join(",") : undefined, + labels: filters?.labels ? filters?.labels.join(",") : undefined, + created_by: filters?.created_by ? filters?.created_by.join(",") : undefined, + target_date: filters?.target_date ? filters?.target_date.join(",") : undefined, + start_target_date: true, // to fetch only issues with a start and target date }; // all issues under the workspace and project diff --git a/apps/app/hooks/gantt-chart/view-issues-view.tsx b/apps/app/hooks/gantt-chart/view-issues-view.tsx index b66b3512806..8e0bc496b89 100644 --- a/apps/app/hooks/gantt-chart/view-issues-view.tsx +++ b/apps/app/hooks/gantt-chart/view-issues-view.tsx @@ -18,7 +18,7 @@ const useGanttChartViewIssues = ( // all issues under the view const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR( workspaceSlug && projectId && viewId - ? VIEW_ISSUES(viewId.toString(), { ...viewGanttParams, start_target_date: true }) + ? VIEW_ISSUES(viewId.toString(), { ...viewGanttParams, order_by, start_target_date: true }) : null, workspaceSlug && projectId && viewId ? () => From 2333f0b884cf978ada6ed29721f54ed1a885603e Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Wed, 23 Aug 2023 18:40:32 +0530 Subject: [PATCH 17/22] chore: move to block on the right side arrow --- .../gantt-chart/helpers/draggable.tsx | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index b7416eb7b8f..4ddc5d15d7f 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -27,6 +27,7 @@ export const ChartDraggable: React.FC = ({ const [isLeftResizing, setIsLeftResizing] = useState(false); const [isRightResizing, setIsRightResizing] = useState(false); const [isMoving, setIsMoving] = useState(false); + const [posFromLeft, setPosFromLeft] = useState(null); const resizableRef = useRef(null); @@ -219,31 +220,38 @@ export const ChartDraggable: React.FC = ({ scrollContainer.scrollLeft = block.position.marginLeft - 4; }; + useEffect(() => { + const block = resizableRef.current; + + if (!block) return; + + setPosFromLeft(block.getBoundingClientRect().left); + }, [scrollLeft]); + const isBlockHiddenOnLeft = block.position?.marginLeft && block.position?.width && scrollLeft > block.position.marginLeft + block.position.width; - const isBlockHiddenOnRight = - block.position?.marginLeft && block.position.width && scrollLeft < block.position?.marginLeft; + const isBlockHiddenOnRight = posFromLeft && window && posFromLeft > window.innerWidth; return ( <> {isBlockHiddenOnLeft && (
)} - {/* {isBlockHiddenOnRight && ( + {isBlockHiddenOnRight && (
- )} */} + )}
= ({ onMouseDown={handleBlockLeftResize} onMouseEnter={() => setIsLeftResizing(true)} onMouseLeave={() => setIsLeftResizing(false)} - className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" + className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[3] w-6 h-full rounded-md cursor-col-resize" />
= ({ /> )} -
+
{blockRender(block.data)}
{enableBlockRightResize && ( @@ -277,7 +288,7 @@ export const ChartDraggable: React.FC = ({ onMouseDown={handleBlockRightResize} onMouseEnter={() => setIsRightResizing(true)} onMouseLeave={() => setIsRightResizing(false)} - className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-full rounded-md cursor-col-resize" + className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[2] w-6 h-full rounded-md cursor-col-resize" />
Date: Wed, 23 Aug 2023 20:47:49 +0530 Subject: [PATCH 18/22] chore: added proper comments for functions --- .../gantt-chart/blocks/blocks-display.tsx | 5 +++++ .../gantt-chart/helpers/draggable.tsx | 20 ++++++++++++++----- apps/app/components/gantt-chart/sidebar.tsx | 8 ++++++++ 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index 27e8cc45648..5af5dcb7cdf 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -27,6 +27,7 @@ export const GanttChartBlocks: FC<{ }) => { const { activeBlock, dispatch } = useChart(); + // update the active block on hover const updateActiveBlock = (block: IGanttBlock | null) => { dispatch({ type: "PARTIAL_UPDATE", @@ -47,15 +48,19 @@ export const GanttChartBlocks: FC<{ const originalTargetDate = new Date(block.target_date); const updatedTargetDate = new Date(originalTargetDate); + // update the start date on left resize if (dragDirection === "left") updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts); + // update the target date on right resize else if (dragDirection === "right") updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts); + // update both the dates on x-axis move else if (dragDirection === "move") { updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts); updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts); } + // call the block update handler with the updated dates blockUpdateHandler(block.data, { start_date: renderDateFormat(updatedStartDate), target_date: renderDateFormat(updatedTargetDate), diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 4ddc5d15d7f..6883007bc69 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -33,6 +33,7 @@ export const ChartDraggable: React.FC = ({ const { currentViewData, scrollLeft } = useChart(); + // check if cursor reaches either end while resizing/dragging const checkScrollEnd = (e: MouseEvent): number => { const SCROLL_THRESHOLD = 70; @@ -71,6 +72,7 @@ export const ChartDraggable: React.FC = ({ return delWidth; }; + // handle block resize from the left end const handleBlockLeftResize = () => { if (!currentViewData || !resizableRef.current || !block.position) return; @@ -107,6 +109,7 @@ export const ChartDraggable: React.FC = ({ } }; + // remove event listeners and call block handler with the updated start date const handleMouseUp = () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); @@ -122,6 +125,7 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; + // handle block resize from the right end const handleBlockRightResize = () => { if (!currentViewData || !resizableRef.current || !block.position) return; @@ -149,6 +153,7 @@ export const ChartDraggable: React.FC = ({ if (block.position) block.position.width = Math.max(newWidth, 80); }; + // remove event listeners and call block handler with the updated target date const handleMouseUp = () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); @@ -164,10 +169,9 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; + // handle block x-axis move const handleBlockMove = () => { - // console.log("Running..."); if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return; - // console.log("Inside"); setIsMoving(true); @@ -180,7 +184,6 @@ export const ChartDraggable: React.FC = ({ let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); const handleMouseMove = (e: MouseEvent) => { - // console.log("Moving..."); let delWidth = 0; delWidth = checkScrollEnd(e); @@ -193,9 +196,8 @@ export const ChartDraggable: React.FC = ({ if (block.position) block.position.marginLeft = newMarginLeft; }; + // remove event listeners and call block handler with the updated dates const handleMouseUp = () => { - // console.log("Stopping..."); - setIsMoving(false); document.removeEventListener("mousemove", handleMouseMove); @@ -212,14 +214,17 @@ export const ChartDraggable: React.FC = ({ document.addEventListener("mouseup", handleMouseUp); }; + // scroll to a hidden block const handleScrollToBlock = () => { const scrollContainer = document.querySelector("#scroll-container") as HTMLElement; if (!scrollContainer || !block.position) return; + // update container's scroll position to the block's position scrollContainer.scrollLeft = block.position.marginLeft - 4; }; + // update block position from viewport's left end on scroll useEffect(() => { const block = resizableRef.current; @@ -228,6 +233,7 @@ export const ChartDraggable: React.FC = ({ setPosFromLeft(block.getBoundingClientRect().left); }, [scrollLeft]); + // check if block is hidden on either side const isBlockHiddenOnLeft = block.position?.marginLeft && block.position?.width && @@ -236,6 +242,7 @@ export const ChartDraggable: React.FC = ({ return ( <> + {/* move to left side hidden block button */} {isBlockHiddenOnLeft && (
= ({
)} + {/* move to right side hidden block button */} {isBlockHiddenOnRight && (
= ({ width: `${block.position?.width}px`, }} > + {/* left resize drag handle */} {enableBlockLeftResize && ( <>
= ({ > {blockRender(block.data)}
+ {/* right resize drag handle */} {enableBlockRightResize && ( <>
= ({ }) => { const { activeBlock, dispatch } = useChart(); + // update the active block on hover const updateActiveBlock = (block: IGanttBlock | null) => { dispatch({ type: "PARTIAL_UPDATE", @@ -41,15 +42,20 @@ export const GanttSidebar: React.FC = ({ 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 = @@ -60,9 +66,11 @@ export const GanttSidebar: React.FC = ({ 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, From ee7024526555a3ca8715cadf22dcc03ae1c4c537 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 28 Aug 2023 12:14:12 +0530 Subject: [PATCH 19/22] refactor: blocks render logic --- .../components/cycles/gantt-chart/blocks.tsx | 21 +++++++-------- .../gantt-chart/cycle-issues-layout.tsx | 4 +-- .../cycles/gantt-chart/cycles-list-layout.tsx | 4 +-- .../gantt-chart/blocks/blocks-display.tsx | 6 ++--- .../components/gantt-chart/chart/index.tsx | 12 ++++----- .../gantt-chart/helpers/draggable.tsx | 7 ++--- apps/app/components/gantt-chart/root.tsx | 12 ++++----- apps/app/components/gantt-chart/sidebar.tsx | 6 ++--- .../components/issues/gantt-chart/blocks.tsx | 26 +++++++++---------- .../components/issues/gantt-chart/layout.tsx | 9 ++----- .../components/modules/gantt-chart/blocks.tsx | 20 +++++++------- .../gantt-chart/module-issues-layout.tsx | 4 +-- .../gantt-chart/modules-list-layout.tsx | 4 +-- apps/app/components/views/gantt-chart.tsx | 4 +-- 14 files changed, 67 insertions(+), 72 deletions(-) diff --git a/apps/app/components/cycles/gantt-chart/blocks.tsx b/apps/app/components/cycles/gantt-chart/blocks.tsx index ce5f3a873f6..4e8328dc4c7 100644 --- a/apps/app/components/cycles/gantt-chart/blocks.tsx +++ b/apps/app/components/cycles/gantt-chart/blocks.tsx @@ -10,14 +10,14 @@ import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper"; // types import { ICycle } from "types"; -export const CycleGanttBlock = ({ cycle }: { cycle: ICycle }) => { +export const CycleGanttBlock = ({ data }: { data: ICycle }) => { const router = useRouter(); const { workspaceSlug } = router.query; - const cycleStatus = getDateRangeStatus(cycle?.start_date, cycle?.end_date); + const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date); return ( - + { -
{cycle?.name}
+
{data?.name}
- {renderShortDate(cycle?.start_date ?? "")} to{" "} - {renderShortDate(cycle?.end_date ?? "")} + {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")}
} position="top-left" >
- {cycle?.name} + {data?.name}
@@ -55,14 +54,14 @@ export const CycleGanttBlock = ({ cycle }: { cycle: ICycle }) => { ); }; -export const CycleGanttSidebarBlock = ({ cycle }: { cycle: ICycle }) => { +export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => { const router = useRouter(); const { workspaceSlug } = router.query; - const cycleStatus = getDateRangeStatus(cycle?.start_date, cycle?.end_date); + const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date); return ( - + { : "" }`} /> -
{cycle?.name}
+
{data?.name}
 ); diff --git a/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx index f889a7eda5f..7741432ceb6 100644 --- a/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx +++ b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx @@ -35,8 +35,8 @@ export const CycleIssuesGanttChartView = () => { blockUpdateHandler={(block, payload) => updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } - blockRender={(data: any) => } + SidebarBlockRender={IssueGanttSidebarBlock} + BlockRender={IssueGanttBlock} enableReorder={orderBy === "sort_order"} bottomSpacing /> diff --git a/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx index ab2d3bc4e1b..a5b576bca70 100644 --- a/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx +++ b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx @@ -78,8 +78,8 @@ export const CyclesListGanttChartView: FC = ({ cycles, mutateCycles }) => loaderTitle="Cycles" blocks={cycles ? blockFormat(cycles) : null} blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)} - sidebarBlockRender={(data: any) => } - blockRender={(data: any) => } + SidebarBlockRender={CycleGanttSidebarBlock} + BlockRender={CycleGanttBlock} enableBlockLeftResize={false} enableBlockRightResize={false} enableBlockMove={false} diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx index 5af5dcb7cdf..f0e7279be65 100644 --- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx +++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx @@ -11,7 +11,7 @@ import { IBlockUpdateData, IGanttBlock } from "../types"; export const GanttChartBlocks: FC<{ itemsContainerWidth: number; blocks: IGanttBlock[] | null; - blockRender: (data: any) => React.ReactNode; + BlockRender: React.FC; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; @@ -19,7 +19,7 @@ export const GanttChartBlocks: FC<{ }> = ({ itemsContainerWidth, blocks, - blockRender, + BlockRender, blockUpdateHandler, enableBlockLeftResize, enableBlockRightResize, @@ -86,7 +86,7 @@ export const GanttChartBlocks: FC<{ > handleChartBlockPosition(block, ...args)} enableBlockLeftResize={enableBlockLeftResize} enableBlockRightResize={enableBlockRightResize} diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index 5c5338dce53..fb2803893b5 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -38,8 +38,8 @@ type ChartViewRootProps = { loaderTitle: string; blocks: IGanttBlock[] | null; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; - sidebarBlockRender: (data: any) => React.ReactNode; - blockRender: (data: any) => React.ReactNode; + SidebarBlockRender: React.FC; + BlockRender: React.FC; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; enableBlockMove: boolean; @@ -53,8 +53,8 @@ export const ChartViewRoot: FC = ({ blocks = null, loaderTitle, blockUpdateHandler, - sidebarBlockRender, - blockRender, + SidebarBlockRender, + BlockRender, enableBlockLeftResize, enableBlockRightResize, enableBlockMove, @@ -301,7 +301,7 @@ export const ChartViewRoot: FC = ({ title={title} blockUpdateHandler={blockUpdateHandler} blocks={chartBlocks} - sidebarBlockRender={sidebarBlockRender} + SidebarBlockRender={SidebarBlockRender} enableReorder={enableReorder} />
@@ -323,7 +323,7 @@ export const ChartViewRoot: FC = ({ React.ReactNode; + BlockRender: (data: any) => React.ReactNode; handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; @@ -18,7 +18,7 @@ type Props = { export const ChartDraggable: React.FC = ({ block, - blockRender, + BlockRender, handleBlock, enableBlockLeftResize, enableBlockRightResize, @@ -289,7 +289,8 @@ export const ChartDraggable: React.FC = ({ className="relative z-[2] rounded h-8 w-full flex items-center" onMouseDown={handleBlockMove} > - {blockRender(block.data)} + {/*
Block
*/} +
{/* right resize drag handle */} {enableBlockRightResize && ( diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx index fd211aefdab..5acedd53e59 100644 --- a/apps/app/components/gantt-chart/root.tsx +++ b/apps/app/components/gantt-chart/root.tsx @@ -12,8 +12,8 @@ type GanttChartRootProps = { loaderTitle: string; blocks: IGanttBlock[] | null; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; - sidebarBlockRender: FC; - blockRender: FC; + SidebarBlockRender: FC; + BlockRender: FC; enableBlockLeftResize?: boolean; enableBlockRightResize?: boolean; enableBlockMove?: boolean; @@ -27,8 +27,8 @@ export const GanttChartRoot: FC = ({ blocks, loaderTitle = "blocks", blockUpdateHandler, - sidebarBlockRender, - blockRender, + SidebarBlockRender, + BlockRender, enableBlockLeftResize = true, enableBlockRightResize = true, enableBlockMove = true, @@ -42,8 +42,8 @@ export const GanttChartRoot: FC = ({ blocks={blocks} loaderTitle={loaderTitle} blockUpdateHandler={blockUpdateHandler} - sidebarBlockRender={sidebarBlockRender} - blockRender={blockRender} + SidebarBlockRender={SidebarBlockRender} + BlockRender={BlockRender} enableBlockLeftResize={enableBlockLeftResize} enableBlockRightResize={enableBlockRightResize} enableBlockMove={enableBlockMove} diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index a59a673b14d..324eb9c15c9 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -14,7 +14,7 @@ type Props = { title: string; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; blocks: IGanttBlock[] | null; - sidebarBlockRender: (data: any) => React.ReactNode; + SidebarBlockRender: React.FC; enableReorder: boolean; }; @@ -22,7 +22,7 @@ export const GanttSidebar: React.FC = ({ title, blockUpdateHandler, blocks, - sidebarBlockRender, + SidebarBlockRender, enableReorder, }) => { const { activeBlock, dispatch } = useChart(); @@ -124,7 +124,7 @@ export const GanttSidebar: React.FC = ({
- {sidebarBlockRender(block.data)} +
diff --git a/apps/app/components/issues/gantt-chart/blocks.tsx b/apps/app/components/issues/gantt-chart/blocks.tsx index cfada199524..41761986cf1 100644 --- a/apps/app/components/issues/gantt-chart/blocks.tsx +++ b/apps/app/components/issues/gantt-chart/blocks.tsx @@ -10,31 +10,31 @@ import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper" // types import { IIssue } from "types"; -export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { +export const IssueGanttBlock = ({ data }: { data: IIssue }) => { const router = useRouter(); const { workspaceSlug } = router.query; return ( - +
-
{issue?.name}
+
{data?.name}
- {renderShortDate(issue?.start_date ?? "")} to{" "} - {renderShortDate(issue?.target_date ?? "")} + {renderShortDate(data?.start_date ?? "")} to{" "} + {renderShortDate(data?.target_date ?? "")}
} position="top-left" >
- {issue?.name} + {data?.name}
@@ -43,21 +43,21 @@ export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => { }; // rendering issues on gantt sidebar -export const IssueGanttSidebarBlock = ({ issue }: { issue: IIssue }) => { +export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => { const router = useRouter(); const { workspaceSlug } = router.query; - const duration = findTotalDaysInRange(issue?.start_date ?? "", issue?.target_date ?? "", true); + const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true); return ( - + - {getStateGroupIcon(issue?.state_detail?.group, "14", "14", issue?.state_detail?.color)} + {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)}
- {issue?.project_detail?.identifier} {issue?.sequence_id} + {data?.project_detail?.identifier} {data?.sequence_id}
-
{issue?.name}
+
{data?.name}
{duration} day{duration > 1 ? "s" : ""} diff --git a/apps/app/components/issues/gantt-chart/layout.tsx b/apps/app/components/issues/gantt-chart/layout.tsx index efcd258b45d..a42d764d820 100644 --- a/apps/app/components/issues/gantt-chart/layout.tsx +++ b/apps/app/components/issues/gantt-chart/layout.tsx @@ -1,5 +1,4 @@ import { useRouter } from "next/router"; -import Link from "next/link"; // hooks import useIssuesView from "hooks/use-issues-view"; @@ -9,10 +8,6 @@ import { updateGanttIssue } from "components/gantt-chart/hooks/block-update"; // components import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart"; import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues"; -// icons -import { getStateGroupIcon } from "components/icons"; -// helpers -import { findTotalDaysInRange } from "helpers/date-time.helper"; // types import { IIssue } from "types"; @@ -39,8 +34,8 @@ export const IssueGanttChartView = () => { blockUpdateHandler={(block, payload) => updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - blockRender={(data: any) => } - sidebarBlockRender={(data: any) => } + BlockRender={IssueGanttBlock} + SidebarBlockRender={IssueGanttSidebarBlock} enableReorder={orderBy === "sort_order"} bottomSpacing /> diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx index aafe52f9566..cdd066cf323 100644 --- a/apps/app/components/modules/gantt-chart/blocks.tsx +++ b/apps/app/components/modules/gantt-chart/blocks.tsx @@ -10,31 +10,31 @@ import { IModule } from "types"; // constants import { MODULE_STATUS } from "constants/module"; -export const ModuleGanttBlock = ({ module }: { module: IModule }) => { +export const ModuleGanttBlock = ({ data }: { data: IModule }) => { const router = useRouter(); const { workspaceSlug } = router.query; return ( - + s.value === module?.status)?.color }} + style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }} >
-
{module?.name}
+
{data?.name}
- {renderShortDate(module?.start_date ?? "")} to{" "} - {renderShortDate(module?.target_date ?? "")} + {renderShortDate(data?.start_date ?? "")} to{" "} + {renderShortDate(data?.target_date ?? "")}
} position="top-left" >
- {module?.name} + {data?.name}
@@ -42,14 +42,14 @@ export const ModuleGanttBlock = ({ module }: { module: IModule }) => { ); }; -export const ModuleGanttSidebarBlock = ({ module }: { module: IModule }) => { +export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => { const router = useRouter(); const { workspaceSlug } = router.query; return ( - + -
{module?.name}
+
{data.name}
 ); diff --git a/apps/app/components/modules/gantt-chart/module-issues-layout.tsx b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx index c75c0801b38..9c0b05078c9 100644 --- a/apps/app/components/modules/gantt-chart/module-issues-layout.tsx +++ b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx @@ -39,8 +39,8 @@ export const ModuleIssuesGanttChartView: FC = ({}) => { blockUpdateHandler={(block, payload) => updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } - blockRender={(data: any) => } + SidebarBlockRender={IssueGanttSidebarBlock} + BlockRender={IssueGanttBlock} enableReorder={orderBy === "sort_order"} bottomSpacing /> diff --git a/apps/app/components/modules/gantt-chart/modules-list-layout.tsx b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx index fbc1b3c7bfd..70f493dde17 100644 --- a/apps/app/components/modules/gantt-chart/modules-list-layout.tsx +++ b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx @@ -85,8 +85,8 @@ export const ModulesListGanttChartView: FC = ({ modules, mutateModules }) loaderTitle="Modules" blocks={modules ? blockFormat(modules) : null} blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)} - sidebarBlockRender={(data: any) => } - blockRender={(data: any) => } + SidebarBlockRender={ModuleGanttSidebarBlock} + BlockRender={ModuleGanttBlock} />
); diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx index 2988972df83..36022f6fa4b 100644 --- a/apps/app/components/views/gantt-chart.tsx +++ b/apps/app/components/views/gantt-chart.tsx @@ -36,8 +36,8 @@ export const ViewIssuesGanttChartView: FC = ({}) => { blockUpdateHandler={(block, payload) => updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString()) } - sidebarBlockRender={(data: any) => } - blockRender={(data: any) => } + SidebarBlockRender={IssueGanttSidebarBlock} + BlockRender={IssueGanttBlock} />
); From 5526463d14baf67334fb74274dd3058960872c45 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 28 Aug 2023 12:21:05 +0530 Subject: [PATCH 20/22] fix: x-axis drag and drop --- apps/app/components/gantt-chart/helpers/draggable.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index c407ec307c1..739ec056d05 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -170,9 +170,12 @@ export const ChartDraggable: React.FC = ({ }; // handle block x-axis move - const handleBlockMove = () => { + const handleBlockMove = (e: React.MouseEvent) => { if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return; + e.preventDefault(); + e.stopPropagation(); + setIsMoving(true); const resizableDiv = resizableRef.current; From 2ca58c8dc1b51ef2629832011c68f1340ab7c181 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 28 Aug 2023 12:29:56 +0530 Subject: [PATCH 21/22] chore: minor ui fixes --- .../app/components/gantt-chart/chart/index.tsx | 10 +++++----- apps/app/components/gantt-chart/sidebar.tsx | 18 ++++++++++-------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx index fb2803893b5..aa79ae19c8e 100644 --- a/apps/app/components/gantt-chart/chart/index.tsx +++ b/apps/app/components/gantt-chart/chart/index.tsx @@ -226,13 +226,13 @@ export const ChartViewRoot: FC = ({ } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`} > {/* chart header */} -
+
{title && (
{title}
-
+ {/*
Gantt View Beta -
+
*/}
)} @@ -252,7 +252,7 @@ export const ChartViewRoot: FC = ({ allViews.map((_chatView: any, _idx: any) => (
= ({
Today diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx index 324eb9c15c9..92e7a603d9f 100644 --- a/apps/app/components/gantt-chart/sidebar.tsx +++ b/apps/app/components/gantt-chart/sidebar.tsx @@ -115,14 +115,16 @@ export const GanttSidebar: React.FC = ({ activeBlock?.id === block.id ? "bg-custom-background-80" : "" }`} > - + {enableReorder && ( + + )}
From 4828147b0cf485b593487288413024c6a599d582 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 28 Aug 2023 13:09:04 +0530 Subject: [PATCH 22/22] chore: remove link tag from blocks --- .../components/cycles/gantt-chart/blocks.tsx | 103 +++++++++--------- .../gantt-chart/helpers/draggable.tsx | 3 +- .../components/issues/gantt-chart/blocks.tsx | 73 ++++++------- .../components/modules/gantt-chart/blocks.tsx | 55 +++++----- 4 files changed, 115 insertions(+), 119 deletions(-) diff --git a/apps/app/components/cycles/gantt-chart/blocks.tsx b/apps/app/components/cycles/gantt-chart/blocks.tsx index 4e8328dc4c7..9d90c0adff8 100644 --- a/apps/app/components/cycles/gantt-chart/blocks.tsx +++ b/apps/app/components/cycles/gantt-chart/blocks.tsx @@ -1,4 +1,3 @@ -import Link from "next/link"; import { useRouter } from "next/router"; // ui @@ -17,40 +16,39 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => { const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date); return ( - - -
- -
{data?.name}
-
- {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")} -
+
router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)} + > + ); }; @@ -61,24 +59,25 @@ export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => { const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date); return ( - - - -
{data?.name}
- - +
router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)} + > + +
{data?.name}
+
); }; diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx index 739ec056d05..20423ff5905 100644 --- a/apps/app/components/gantt-chart/helpers/draggable.tsx +++ b/apps/app/components/gantt-chart/helpers/draggable.tsx @@ -9,7 +9,7 @@ import { IGanttBlock } from "../types"; type Props = { block: IGanttBlock; - BlockRender: (data: any) => React.ReactNode; + BlockRender: React.FC; handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; @@ -292,7 +292,6 @@ export const ChartDraggable: React.FC = ({ className="relative z-[2] rounded h-8 w-full flex items-center" onMouseDown={handleBlockMove} > - {/*
Block
*/}
{/* right resize drag handle */} diff --git a/apps/app/components/issues/gantt-chart/blocks.tsx b/apps/app/components/issues/gantt-chart/blocks.tsx index 41761986cf1..2ad21c49969 100644 --- a/apps/app/components/issues/gantt-chart/blocks.tsx +++ b/apps/app/components/issues/gantt-chart/blocks.tsx @@ -1,4 +1,3 @@ -import Link from "next/link"; import { useRouter } from "next/router"; // ui @@ -15,30 +14,29 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => { const { workspaceSlug } = router.query; return ( - - -
- -
{data?.name}
-
- {renderShortDate(data?.start_date ?? "")} to{" "} - {renderShortDate(data?.target_date ?? "")} -
+
router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)} + > + ); }; @@ -50,19 +48,20 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => { const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true); return ( - - - {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)} -
- {data?.project_detail?.identifier} {data?.sequence_id} -
-
-
{data?.name}
- - {duration} day{duration > 1 ? "s" : ""} - -
- - +
router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)} + > + {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)} +
+ {data?.project_detail?.identifier} {data?.sequence_id} +
+
+
{data?.name}
+ + {duration} day{duration > 1 ? "s" : ""} + +
+
); }; diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx index cdd066cf323..bcf30709890 100644 --- a/apps/app/components/modules/gantt-chart/blocks.tsx +++ b/apps/app/components/modules/gantt-chart/blocks.tsx @@ -1,4 +1,3 @@ -import Link from "next/link"; import { useRouter } from "next/router"; // ui @@ -15,30 +14,29 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => { const { workspaceSlug } = router.query; return ( - - s.value === data?.status)?.color }} - > -
- -
{data?.name}
-
- {renderShortDate(data?.start_date ?? "")} to{" "} - {renderShortDate(data?.target_date ?? "")} -
+
s.value === data?.status)?.color }} + onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)} + > + ); }; @@ -47,10 +45,11 @@ export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => { const { workspaceSlug } = router.query; return ( - - -
{data.name}
- - +
router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)} + > +
{data.name}
+
); };