import React, { useEffect, useRef, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // components import { IssuePeekOverview, SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetQuickAddIssueForm, } from "components/issues"; import { Spinner, LayersIcon } from "@plane/ui"; // types import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState } from "@plane/types"; import { EIssueActions } from "../types"; type Props = { displayProperties: IIssueDisplayProperties; displayFilters: IIssueDisplayFilterOptions; handleDisplayFilterUpdate: (data: Partial) => void; issues: TIssue[] | undefined; labels?: IIssueLabel[] | undefined; states?: IState[] | undefined; quickActions: (issue: TIssue, customActionButton: any) => React.ReactNode; handleIssues: (issue: TIssue, action: EIssueActions) => Promise; openIssuesListModal?: (() => void) | null; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; canEditProperties: (projectId: string | undefined) => boolean; enableQuickCreateIssue?: boolean; disableIssueCreation?: boolean; }; export const SpreadsheetView: React.FC = observer((props) => { const { displayProperties, displayFilters, handleDisplayFilterUpdate, issues, labels, states, quickActions, handleIssues, quickAddCallback, viewId, canEditProperties, enableQuickCreateIssue, disableIssueCreation, } = props; // states const [expandedIssues, setExpandedIssues] = useState([]); const [isScrolled, setIsScrolled] = useState(false); // refs const containerRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, peekIssueId, peekProjectId } = router.query; const handleScroll = () => { if (!containerRef.current) return; const scrollLeft = containerRef.current.scrollLeft; setIsScrolled(scrollLeft > 0); }; useEffect(() => { const currentContainerRef = containerRef.current; if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll); return () => { if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll); }; }, []); if (!issues || issues.length === 0) return (
); return (
{issues && issues.length > 0 && ( <>
{displayProperties.key && ( #ID )} Issue
{issues.map((issue, index) => issue ? ( ) : null )}
handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)} issues={issues} labels={labels} states={states} /> )}
{/* empty div to show right most border */}
{enableQuickCreateIssue && !disableIssueCreation && ( )}
{/* {!disableUserActions && !isInlineCreateIssueFormOpen && (type === "issue" ? ( ) : ( New Issue } optionsClassName="left-5 !w-36" noBorder > setIsInlineCreateIssueFormOpen(true)}> Create new {openIssuesListModal && ( Add an existing issue )} ))} */}
{workspaceSlug && peekIssueId && peekProjectId && ( await handleIssues(issueToUpdate, EIssueActions.UPDATE)} /> )}
); });