Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/modules/gantt-chart/blocks.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// ui
+import { MODULE_STATUS } from "@plane/constants";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+import { getBlockViewDetails } from "@/components/issues/issue-layouts/utils";
+// constants
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const { message, blockStyle } = getBlockViewDetails(
+    moduleDetails,
+    MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color ?? ""
+  );
+
+  return (
+    <Tooltip
+      isMobile={isMobile}
+      tooltipContent={
+        <div className="space-y-1">
+          <h5>{moduleDetails?.name}</h5>
+          <div>{message}</div>
+        </div>
+      }
+      position="top-start"
+    >
+      <div
+        className="relative flex h-full w-full cursor-pointer items-center rounded"
+        style={blockStyle}
+        onClick={() =>
+          router.push(
+            `/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`
+          )
+        }
+      >
+        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div
+          className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
+          style={{ left: `${SIDEBAR_WIDTH}px` }}
+        >
+          {moduleDetails?.name}
+        </div>
+      </div>
+    </Tooltip>
+  );
+});
+
+export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+
+  return (
+    <Link
+      className="relative flex h-full w-full items-center gap-2"
+      href={`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
+      draggable={false}
+    >
+      <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
+    </Link>
+  );
+});

apps/web/core/components/modules/gantt-chart/index.ts

@@ -0,0 +1,2 @@
+export * from "./blocks";
+export * from "./modules-list-layout";

apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// PLane
+import type { IBlockUpdateData, IBlockUpdateDependencyData, IModule } from "@plane/types";
+// components
+import { GanttChartRoot, ModuleGanttSidebar } from "@/components/gantt-chart";
+import { ETimeLineTypeType, TimeLineTypeContext } from "@/components/gantt-chart/contexts";
+import { ModuleGanttBlock } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ModulesListGanttChartView: React.FC = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store
+  const { currentProjectDetails } = useProject();
+  const { getFilteredModuleIds, updateModuleDetails } = useModule();
+  const { currentProjectDisplayFilters: displayFilters } = useModuleFilter();
+
+  // derived values
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
+
+  const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !module) return;
+
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
+
+    await updateModuleDetails(workspaceSlug.toString(), module.project_id, module.id, payload);
+  };
+
+  const updateBlockDates = async (blockUpdates: IBlockUpdateDependencyData[]) => {
+    const blockUpdate = blockUpdates[0];
+
+    if (!blockUpdate) return;
+
+    const payload: Partial<IModule> = {};
+
+    if (blockUpdate.start_date) payload.start_date = blockUpdate.start_date;
+    if (blockUpdate.target_date) payload.target_date = blockUpdate.target_date;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), blockUpdate.id, payload);
+  };
+
+  const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
+
+  if (!filteredModuleIds) return null;
+
+  return (
+    <TimeLineTypeContext.Provider value={ETimeLineTypeType.MODULE}>
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blockIds={filteredModuleIds}
+        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
+        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
+        enableAddBlock={isAllowed}
+        updateBlockDates={updateBlockDates}
+        showAllBlocks
+      />
+    </TimeLineTypeContext.Provider>
+  );
+});