From 4b0d48b290dd41abd551c321974226b1ed193ee5 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Fri, 12 Jan 2024 13:52:04 +0530 Subject: [PATCH] enable peekoverview for spreadsheet and minor refactor for faster opening of the peekoverview component (#3361) Co-authored-by: Rahul R --- .../spreadsheet/base-spreadsheet-root.tsx | 14 +++-- .../issue-layouts/spreadsheet/issue-row.tsx | 39 ++++++------ .../spreadsheet/spreadsheet-table.tsx | 63 +++++++++++++++++++ .../spreadsheet/spreadsheet-view.tsx | 38 ++++------- 4 files changed, 105 insertions(+), 49 deletions(-) create mode 100644 web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx index 31c27e729..9ffc7c641 100644 --- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx @@ -45,12 +45,16 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => { // user role validation const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; - const canEditProperties = (projectId: string | undefined) => { - const isEditingAllowedBasedOnProject = - canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed; + const canEditProperties = useCallback( + (projectId: string | undefined) => { + const isEditingAllowedBasedOnProject = + canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed; + + return enableInlineEditing && isEditingAllowedBasedOnProject; + }, + [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed] + ); - return enableInlineEditing && isEditingAllowedBasedOnProject; - }; const issueIds = (issueStore.groupedIssueIds ?? []) as TUnGroupedIssues; diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx index 60847ec54..602c1a842 100644 --- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx @@ -8,7 +8,7 @@ import { SPREADSHEET_PROPERTY_DETAILS, SPREADSHEET_PROPERTY_LIST } from "constan // components import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; // ui -import { Tooltip } from "@plane/ui"; +import { ControlLink, Tooltip } from "@plane/ui"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; import { useIssueDetail, useProject } from "hooks/store"; @@ -42,12 +42,13 @@ export const SpreadsheetIssueRow = observer((props: Props) => { quickActions, canEditProperties, } = props; + // router const router = useRouter(); - const { workspaceSlug } = router.query; - + //hooks const { getProjectById } = useProject(); + const { setPeekIssue } = useIssueDetail(); // states const [isMenuActive, setIsMenuActive] = useState(false); const [isExpanded, setExpanded] = useState(false); @@ -55,12 +56,8 @@ export const SpreadsheetIssueRow = observer((props: Props) => { const menuActionRef = useRef(null); const handleIssuePeekOverview = (issue: TIssue) => { - const { query } = router; - - router.push({ - pathname: router.pathname, - query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id }, - }); + if (workspaceSlug && issue && issue.project_id && issue.id) + setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); }; const { subIssues: subIssuesStore, issue } = useIssueDetail(); @@ -134,16 +131,20 @@ export const SpreadsheetIssueRow = observer((props: Props) => { )} -
- -
handleIssuePeekOverview(issueDetail)} - > - {issueDetail.name} -
- -
+ handleIssuePeekOverview(issueDetail)} + className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" + > +
+ +
+ {issueDetail.name} +
+ +
+ {/* Rest of the columns */} {SPREADSHEET_PROPERTY_LIST.map((property) => { diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx new file mode 100644 index 000000000..6355a3a31 --- /dev/null +++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx @@ -0,0 +1,63 @@ +import { observer } from "mobx-react-lite"; +//types +import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types"; +import { EIssueActions } from "../types"; +//components +import { SpreadsheetIssueRow } from "./issue-row"; +import { SpreadsheetHeader } from "./spreadsheet-header"; + +type Props = { + displayProperties: IIssueDisplayProperties; + displayFilters: IIssueDisplayFilterOptions; + handleDisplayFilterUpdate: (data: Partial) => void; + issues: TIssue[]; + isEstimateEnabled: boolean; + quickActions: ( + issue: TIssue, + customActionButton?: React.ReactElement, + portalElement?: HTMLDivElement | null + ) => React.ReactNode; + handleIssues: (issue: TIssue, action: EIssueActions) => Promise; + canEditProperties: (projectId: string | undefined) => boolean; + portalElement: React.MutableRefObject; +}; + +export const SpreadsheetTable = observer((props: Props) => { + const { + displayProperties, + displayFilters, + handleDisplayFilterUpdate, + issues, + isEstimateEnabled, + portalElement, + quickActions, + handleIssues, + canEditProperties, + } = props; + + return ( + + + + {issues.map(({ id }) => ( + + ))} + +
+ ); +}); diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx index 89926f281..ad6e0e25a 100644 --- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx @@ -3,12 +3,12 @@ import { observer } from "mobx-react-lite"; // components import { Spinner } from "@plane/ui"; import { SpreadsheetQuickAddIssueForm } from "components/issues"; +import { SpreadsheetTable } from "./spreadsheet-table"; // types import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types"; import { EIssueActions } from "../types"; +//hooks import { useProject } from "hooks/store"; -import { SpreadsheetHeader } from "./spreadsheet-header"; -import { SpreadsheetIssueRow } from "./issue-row"; type Props = { displayProperties: IIssueDisplayProperties; @@ -102,29 +102,17 @@ export const SpreadsheetView: React.FC = observer((props) => {
- - - - {issues.map(({ id }) => ( - - ))} - -
+