plane/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
rahulramesha c16a5b9b71
[WEB-626] chore: fix sentry issues and refactor issue actions logic for issue layouts (#3650)
* restructure the logic to avoid throwing error if any dat is not found

* updated files for previous commit

* fix build errors

* remove throwing error if userId is undefined

* optionally chain display_name property to fix sentry issues

* add ooptional check

* change issue action logic to increase code maintainability and make sure to send only the updated date while updating the issue

* fix issue updation bugs

* fix module issues build error

* fix runtime errors
2024-03-06 20:47:38 +05:30

86 lines
2.9 KiB
TypeScript

import React from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// hooks
import { GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "components/gantt-chart";
import { GanttQuickAddIssueForm, IssueGanttBlock } from "components/issues";
import { EUserProjectRoles } from "constants/project";
import { renderIssueBlocksStructure } from "helpers/issue.helper";
import { useIssues, useUser } from "hooks/store";
import { useIssuesActions } from "hooks/use-issues-actions";
// components
// helpers
// types
import { TIssue, TUnGroupedIssues } from "@plane/types";
// constants
import { EIssuesStoreType } from "constants/issue";
type GanttStoreType =
| EIssuesStoreType.PROJECT
| EIssuesStoreType.MODULE
| EIssuesStoreType.CYCLE
| EIssuesStoreType.PROJECT_VIEW;
interface IBaseGanttRoot {
viewId?: string;
storeType: GanttStoreType;
}
export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
const { viewId, storeType } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { issues, issuesFilter } = useIssues(storeType);
const { updateIssue } = useIssuesActions(storeType);
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const { issueMap } = useIssues();
const appliedDisplayFilters = issuesFilter.issueFilters?.displayFilters;
const issueIds = (issues.groupedIssueIds ?? []) as TUnGroupedIssues;
const { enableIssueCreation } = issues?.viewFlags || {};
const issuesArray = issueIds.map((id) => issueMap?.[id]);
const updateIssueBlockStructure = async (issue: TIssue, data: IBlockUpdateData) => {
if (!workspaceSlug) return;
const payload: any = { ...data };
if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
updateIssue && (await updateIssue(issue.project_id, issue.id, payload));
};
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
return (
<>
<div className="h-full w-full">
<GanttChartRoot
border={false}
title="Issues"
loaderTitle="Issues"
blocks={issues ? renderIssueBlocksStructure(issuesArray) : null}
blockUpdateHandler={updateIssueBlockStructure}
blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} />}
sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks />}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
enableAddBlock={isAllowed}
quickAdd={
enableIssueCreation && isAllowed ? (
<GanttQuickAddIssueForm quickAddCallback={issues.quickAddIssue} viewId={viewId} />
) : undefined
}
showAllBlocks
/>
</div>
</>
);
});