forked from github/plane
enable peekoverview for spreadsheet and minor refactor for faster opening of the peekoverview component (#3361)
Co-authored-by: Rahul R <rahulr@Rahuls-MacBook-Pro.local>
This commit is contained in:
rahulramesha
sriram veeraghanta
parent
9789068880
commit
4b0d48b290
@ -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;
|
||||
|
||||
|
||||
@ -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<boolean>(false);
|
||||
@ -55,12 +56,8 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
|
||||
const menuActionRef = useRef<HTMLDivElement | null>(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) => {
|
||||
)}
|
||||
</div>
|
||||
</WithDisplayPropertiesHOC>
|
||||
<div className="w-full overflow-hidden">
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
|
||||
<div
|
||||
className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
|
||||
onClick={() => handleIssuePeekOverview(issueDetail)}
|
||||
>
|
||||
{issueDetail.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<ControlLink
|
||||
href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
|
||||
target="_blank"
|
||||
onClick={() => handleIssuePeekOverview(issueDetail)}
|
||||
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
|
||||
>
|
||||
<div className="w-full overflow-hidden">
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
|
||||
<div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100">
|
||||
{issueDetail.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</ControlLink>
|
||||
</td>
|
||||
{/* Rest of the columns */}
|
||||
{SPREADSHEET_PROPERTY_LIST.map((property) => {
|
||||
|
||||
@ -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<IIssueDisplayFilterOptions>) => void;
|
||||
issues: TIssue[];
|
||||
isEstimateEnabled: boolean;
|
||||
quickActions: (
|
||||
issue: TIssue,
|
||||
customActionButton?: React.ReactElement,
|
||||
portalElement?: HTMLDivElement | null
|
||||
) => React.ReactNode;
|
||||
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
portalElement: React.MutableRefObject<HTMLDivElement | null>;
|
||||
};
|
||||
|
||||
export const SpreadsheetTable = observer((props: Props) => {
|
||||
const {
|
||||
displayProperties,
|
||||
displayFilters,
|
||||
handleDisplayFilterUpdate,
|
||||
issues,
|
||||
isEstimateEnabled,
|
||||
portalElement,
|
||||
quickActions,
|
||||
handleIssues,
|
||||
canEditProperties,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<table className="divide-x-[0.5px] divide-custom-border-200 overflow-y-auto">
|
||||
<SpreadsheetHeader
|
||||
displayProperties={displayProperties}
|
||||
displayFilters={displayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
isEstimateEnabled={isEstimateEnabled}
|
||||
/>
|
||||
<tbody>
|
||||
{issues.map(({ id }) => (
|
||||
<SpreadsheetIssueRow
|
||||
key={id}
|
||||
issueId={id}
|
||||
displayProperties={displayProperties}
|
||||
quickActions={quickActions}
|
||||
canEditProperties={canEditProperties}
|
||||
nestingLevel={0}
|
||||
isEstimateEnabled={isEstimateEnabled}
|
||||
handleIssues={handleIssues}
|
||||
portalElement={portalElement}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
@ -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<Props> = observer((props) => {
|
||||
<div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
|
||||
<div ref={portalRef} className="spreadsheet-menu-portal" />
|
||||
<div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
|
||||
<table className="divide-x-[0.5px] divide-custom-border-200 overflow-y-auto">
|
||||
<SpreadsheetHeader
|
||||
displayProperties={displayProperties}
|
||||
displayFilters={displayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
isEstimateEnabled={isEstimateEnabled}
|
||||
/>
|
||||
<tbody>
|
||||
{issues.map(({ id }) => (
|
||||
<SpreadsheetIssueRow
|
||||
key={id}
|
||||
issueId={id}
|
||||
displayProperties={displayProperties}
|
||||
quickActions={quickActions}
|
||||
canEditProperties={canEditProperties}
|
||||
nestingLevel={0}
|
||||
isEstimateEnabled={isEstimateEnabled}
|
||||
handleIssues={handleIssues}
|
||||
portalElement={portalRef}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<SpreadsheetTable
|
||||
displayProperties={displayProperties}
|
||||
displayFilters={displayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
issues={issues}
|
||||
isEstimateEnabled={isEstimateEnabled}
|
||||
portalElement={portalRef}
|
||||
quickActions={quickActions}
|
||||
handleIssues={handleIssues}
|
||||
canEditProperties={canEditProperties}
|
||||
/>
|
||||
</div>
|
||||
<div className="border-t border-custom-border-100">
|
||||
<div className="z-5 sticky bottom-0 left-0 mb-3">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user