forked from github/plane
ab3c3a6cf9
* dev: improve performance for cycle apis * dev: reduce module endpoints and create a new endpoint for getting issues by list * dev: remove unwanted fields from module * dev: update module endpoints * dev: optimize cycle endpoints * change module and cycle types * dev: module optimizations * dev: fix the issues check * dev: fix issues endpoint * dev: update module detail serializer * modify adding issues to modules and cycles * dev: update cycle issues * fix module links * dev: optimize issue list endpoint * fix: removing issues from the module when removing module_id from issue peekoverview * fix: updated the tooltip and ui for cycle select (#3718) * fix: updated the tooltip and ui for module select (#3716) --------- Co-authored-by: rahulramesha <rahulramesham@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com>
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import { observer } from "mobx-react-lite";
|
|
// mobx store
|
|
import { useModule, useProject } from "hooks/store";
|
|
// components
|
|
import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
|
|
import { ModuleGanttBlock } from "components/modules";
|
|
// types
|
|
import { IModule } from "@plane/types";
|
|
|
|
export const ModulesListGanttChartView: React.FC = observer(() => {
|
|
// router
|
|
const router = useRouter();
|
|
const { workspaceSlug } = router.query;
|
|
// store
|
|
const { currentProjectDetails } = useProject();
|
|
const { projectModuleIds, moduleMap, updateModuleDetails } = useModule();
|
|
|
|
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 blockFormat = (blocks: string[]) =>
|
|
blocks?.map((blockId) => {
|
|
const block = moduleMap[blockId];
|
|
return {
|
|
data: block,
|
|
id: block.id,
|
|
sort_order: block.sort_order,
|
|
start_date: block.start_date ? new Date(block.start_date) : null,
|
|
target_date: block.target_date ? new Date(block.target_date) : null,
|
|
};
|
|
});
|
|
|
|
const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
|
|
|
|
return (
|
|
<div className="h-full w-full overflow-y-auto">
|
|
<GanttChartRoot
|
|
title="Modules"
|
|
loaderTitle="Modules"
|
|
blocks={projectModuleIds ? blockFormat(projectModuleIds) : null}
|
|
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}
|
|
enableAddBlock={isAllowed}
|
|
showAllBlocks
|
|
/>
|
|
</div>
|
|
);
|
|
});
|