diff --git a/apps/web/core/components/gantt-chart/blocks/block-row-list.tsx b/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx similarity index 93% rename from apps/web/core/components/gantt-chart/blocks/block-row-list.tsx rename to apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx index 0be3bead71e..ec7e52fd123 100644 --- a/apps/web/core/components/gantt-chart/blocks/block-row-list.tsx +++ b/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx @@ -3,10 +3,10 @@ import { FC } from "react"; import type { IBlockUpdateData, IGanttBlock } from "@plane/types"; import RenderIfVisible from "@/components/core/render-if-visible-HOC"; // hooks +import { BlockRow } from "@/components/gantt-chart/blocks/block-row"; +import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants"; import { TSelectionHelper } from "@/hooks/use-multiple-select"; // types -import { BLOCK_HEIGHT } from "../constants"; -import { BlockRow } from "./block-row"; export type GanttChartBlocksProps = { blockIds: string[]; diff --git a/apps/web/core/components/gantt-chart/blocks/blocks-list.tsx b/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx similarity index 96% rename from apps/web/core/components/gantt-chart/blocks/blocks-list.tsx rename to apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx index 154a72d9f59..0c8f2a7c0b2 100644 --- a/apps/web/core/components/gantt-chart/blocks/blocks-list.tsx +++ b/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; // import type { IBlockUpdateDependencyData } from "@plane/types"; -import { GanttChartBlock } from "./block"; +import { GanttChartBlock } from "@/components/gantt-chart/blocks/block"; export type GanttChartBlocksProps = { blockIds: string[]; diff --git a/apps/web/ce/store/timeline/base-timeline.store.ts b/apps/web/ce/store/timeline/base-timeline.store.ts index c021fa93ea8..517a5700fbe 100644 --- a/apps/web/ce/store/timeline/base-timeline.store.ts +++ b/apps/web/ce/store/timeline/base-timeline.store.ts @@ -3,7 +3,13 @@ import set from "lodash/set"; import { action, makeObservable, observable, runInAction } from "mobx"; import { computedFn } from "mobx-utils"; // components -import type { ChartDataType, IBlockUpdateDependencyData, IGanttBlock, TGanttViews } from "@plane/types"; +import type { + ChartDataType, + IBlockUpdateDependencyData, + IGanttBlock, + TGanttViews, + EGanttBlockType, +} from "@plane/types"; import { renderFormattedPayloadDate } from "@plane/utils"; import { currentViewDataWithView } from "@/components/gantt-chart/data"; import { @@ -177,7 +183,7 @@ export class BaseTimeLineStore implements IBaseTimelineStore { * @param getDataById * @returns */ - updateBlocks(getDataById: (id: string) => BlockData | undefined | null) { + updateBlocks(getDataById: (id: string) => BlockData | undefined | null, type?: EGanttBlockType, index?: number) { if (!this.blockIds || !Array.isArray(this.blockIds) || this.isDragging) return true; const updatedBlockMaps: { path: string[]; value: any }[] = []; @@ -195,7 +201,11 @@ export class BaseTimeLineStore implements IBaseTimelineStore { sort_order: blockData?.sort_order ?? undefined, start_date: blockData?.start_date ?? undefined, target_date: blockData?.target_date ?? undefined, - project_id: blockData?.project_id ?? undefined, + meta: { + type, + index, + project_id: blockData?.project_id, + }, }; if (this.currentViewData && (this.currentViewData?.data?.startDate || this.currentViewData?.data?.dayWidth)) { block.position = getItemPositionWidth(this.currentViewData, block); @@ -285,7 +295,7 @@ export class BaseTimeLineStore implements IBaseTimelineStore { if (!currBlock?.position || !this.currentViewData) return []; - const updatePayload: IBlockUpdateDependencyData = { id }; + const updatePayload: IBlockUpdateDependencyData = { id, meta: currBlock.meta }; // If shouldUpdateHalfBlock or the start date is available then update start date if (shouldUpdateHalfBlock || currBlock.start_date) { diff --git a/apps/web/ce/store/timeline/index.ts b/apps/web/ce/store/timeline/index.ts index 2353f760a9e..5f423f4b720 100644 --- a/apps/web/ce/store/timeline/index.ts +++ b/apps/web/ce/store/timeline/index.ts @@ -7,17 +7,20 @@ export interface ITimelineStore { issuesTimeLineStore: IIssuesTimeLineStore; modulesTimeLineStore: IModulesTimeLineStore; projectTimeLineStore: IBaseTimelineStore; + groupedTimeLineStore: IBaseTimelineStore; } export class TimeLineStore implements ITimelineStore { issuesTimeLineStore: IIssuesTimeLineStore; modulesTimeLineStore: IModulesTimeLineStore; projectTimeLineStore: IBaseTimelineStore; + groupedTimeLineStore: IBaseTimelineStore; constructor(rootStore: RootStore) { this.issuesTimeLineStore = new IssuesTimeLineStore(rootStore); this.modulesTimeLineStore = new ModulesTimeLineStore(rootStore); // Dummy store this.projectTimeLineStore = new BaseTimeLineStore(rootStore); + this.groupedTimeLineStore = new BaseTimeLineStore(rootStore); } } diff --git a/apps/web/core/components/gantt-chart/blocks/index.ts b/apps/web/core/components/gantt-chart/blocks/index.ts deleted file mode 100644 index c99f8af3298..00000000000 --- a/apps/web/core/components/gantt-chart/blocks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./blocks-list"; diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx index 5f9fb00435c..278994b0b38 100644 --- a/apps/web/core/components/gantt-chart/chart/main-content.tsx +++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx @@ -6,23 +6,18 @@ import { ChartDataType, IBlockUpdateData, IBlockUpdateDependencyData, IGanttBloc import { cn, getDate } from "@plane/utils"; // components import { MultipleSelectGroup } from "@/components/core"; -import { - GanttChartBlocksList, - GanttChartSidebar, - MonthChartView, - QuarterChartView, - WeekChartView, -} from "@/components/gantt-chart"; +import { GanttChartSidebar, MonthChartView, QuarterChartView, WeekChartView } from "@/components/gantt-chart"; // helpers // hooks import { useTimeLineChartStore } from "@/hooks/use-timeline-chart"; // plane web components import { TimelineDependencyPaths, TimelineDraggablePath } from "@/plane-web/components/gantt-chart"; +import { GanttChartRowList } from "@/plane-web/components/gantt-chart/blocks/block-row-list"; +import { GanttChartBlocksList } from "@/plane-web/components/gantt-chart/blocks/blocks-list"; import { IssueBulkOperationsRoot } from "@/plane-web/components/issues"; // plane web hooks import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status"; // -import { GanttChartRowList } from "../blocks/block-row-list"; import { DEFAULT_BLOCK_WIDTH, GANTT_SELECT_GROUP, HEADER_HEIGHT } from "../constants"; import { getItemPositionWidth } from "../views"; import { TimelineDragHelper } from "./timeline-drag-helper"; diff --git a/apps/web/core/components/gantt-chart/contexts/index.tsx b/apps/web/core/components/gantt-chart/contexts/index.tsx index 7a7c63f8321..6d268be7e54 100644 --- a/apps/web/core/components/gantt-chart/contexts/index.tsx +++ b/apps/web/core/components/gantt-chart/contexts/index.tsx @@ -4,6 +4,7 @@ export enum ETimeLineTypeType { ISSUE = "ISSUE", MODULE = "MODULE", PROJECT = "PROJECT", + GROUPED = "GROUPED", } export const TimeLineTypeContext = createContext(undefined); diff --git a/apps/web/core/components/gantt-chart/helpers/add-block.tsx b/apps/web/core/components/gantt-chart/helpers/add-block.tsx index fed218f911b..742591a26bd 100644 --- a/apps/web/core/components/gantt-chart/helpers/add-block.tsx +++ b/apps/web/core/components/gantt-chart/helpers/add-block.tsx @@ -48,6 +48,7 @@ export const ChartAddBlock: React.FC = observer((props) => { blockUpdateHandler(block.data, { start_date: renderFormattedPayloadDate(startDate) ?? undefined, target_date: renderFormattedPayloadDate(endDate) ?? undefined, + meta: block.meta, }); }; diff --git a/apps/web/core/components/gantt-chart/helpers/draggable.tsx b/apps/web/core/components/gantt-chart/helpers/draggable.tsx index 6031f3efd94..98eda46c40f 100644 --- a/apps/web/core/components/gantt-chart/helpers/draggable.tsx +++ b/apps/web/core/components/gantt-chart/helpers/draggable.tsx @@ -53,7 +53,7 @@ export const ChartDraggable: React.FC = observer((props) => { })} onMouseDown={(e) => enableBlockMove && handleBlockDrag(e, "move")} > - {blockToRender(block.data)} + {blockToRender({ ...block.data, meta: block.meta })} {/* right resize drag handle */} = observer((props) => {
{t("common.duration")}
- + {sidebarToRender && sidebarToRender({ title, diff --git a/apps/web/core/hooks/use-timeline-chart.ts b/apps/web/core/hooks/use-timeline-chart.ts index 79862f20458..7d0564f3c43 100644 --- a/apps/web/core/hooks/use-timeline-chart.ts +++ b/apps/web/core/hooks/use-timeline-chart.ts @@ -17,6 +17,8 @@ export const useTimeLineChart = (timeLineType: ETimeLineTypeType): IBaseTimeline return context.timelineStore.modulesTimeLineStore as IBaseTimelineStore; case ETimeLineTypeType.PROJECT: return context.timelineStore.projectTimeLineStore as IBaseTimelineStore; + case ETimeLineTypeType.GROUPED: + return context.timelineStore.groupedTimeLineStore as IBaseTimelineStore; } }; diff --git a/apps/web/ee/components/gantt-chart/blocks/block-row-list.tsx b/apps/web/ee/components/gantt-chart/blocks/block-row-list.tsx new file mode 100644 index 00000000000..2d50f5e5eac --- /dev/null +++ b/apps/web/ee/components/gantt-chart/blocks/block-row-list.tsx @@ -0,0 +1 @@ +export * from "ce/components/gantt-chart/blocks/block-row-list"; diff --git a/apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx b/apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx new file mode 100644 index 00000000000..ced4c0ed2c4 --- /dev/null +++ b/apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx @@ -0,0 +1 @@ +export * from "ce/components/gantt-chart/blocks/blocks-list"; diff --git a/packages/types/src/layout/gantt.ts b/packages/types/src/layout/gantt.ts index 990ae3fc3f7..0fb54615c9c 100644 --- a/packages/types/src/layout/gantt.ts +++ b/packages/types/src/layout/gantt.ts @@ -1,3 +1,8 @@ +export enum EGanttBlockType { + EPIC = "epic", + PROJECT = "project", + ISSUE = "issue", +} export interface IGanttBlock { data: any; id: string; @@ -9,7 +14,7 @@ export interface IGanttBlock { sort_order: number | undefined; start_date: string | undefined; target_date: string | undefined; - project_id: string | undefined; + meta?: Record; } export interface IBlockUpdateData { @@ -20,13 +25,14 @@ export interface IBlockUpdateData { }; start_date?: string; target_date?: string; + meta?: Record; } export interface IBlockUpdateDependencyData { id: string; start_date?: string; target_date?: string; - project_id?: string; + meta?: Record; } export type TGanttViews = "week" | "month" | "quarter"; diff --git a/packages/utils/src/work-item/base.ts b/packages/utils/src/work-item/base.ts index 50ee3a66b76..6cef74175ab 100644 --- a/packages/utils/src/work-item/base.ts +++ b/packages/utils/src/work-item/base.ts @@ -190,7 +190,9 @@ export const getIssueBlocksStructure = (block: TIssue): IGanttBlock => ({ sort_order: block?.sort_order, start_date: block?.start_date ?? undefined, target_date: block?.target_date ?? undefined, - project_id: block?.project_id ?? undefined, + meta: { + project_id: block?.project_id ?? undefined, + }, }); export const formatTextList = (TextArray: string[]): string => {