plane/web/components/modules/gantt-chart/modules-list-layout.tsx
Dakshesh Jain 34bccd7e06
refactor: gantt sidebar (#2705)
* refactor: gantt sidebar

* fix: exception error

fix: file placement

* refactor: not passing sidebar block as props
2023-11-09 17:57:41 +05:30

58 lines
2.1 KiB
TypeScript

import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
import { ModuleGanttBlock } from "components/modules";
// types
import { IModule } from "types";
export const ModulesListGanttChartView: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const { project: projectStore, module: moduleStore } = useMobxStore();
const { currentProjectDetails } = projectStore;
const modules = moduleStore.projectModules;
const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
if (!workspaceSlug) return;
moduleStore.updateModuleGanttStructure(workspaceSlug.toString(), module.project, module, payload);
};
const blockFormat = (blocks: IModule[]) =>
blocks && blocks.length > 0
? blocks
.filter((b) => b.start_date && b.target_date && new Date(b.start_date) <= new Date(b.target_date))
.map((block) => ({
data: block,
id: block.id,
sort_order: block.sort_order,
start_date: new Date(block.start_date ?? ""),
target_date: new Date(block.target_date ?? ""),
}))
: [];
const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
return (
<div className="w-full h-full overflow-y-auto">
<GanttChartRoot
title="Modules"
loaderTitle="Modules"
blocks={modules ? blockFormat(modules) : null}
sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={isAllowed}
/>
</div>
);
});