import React, { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useUser from "hooks/use-user"; import useProjectDetails from "hooks/use-project-details"; // components // import { SpreadsheetColumns, SpreadsheetIssues } from "components/core"; import { IssuePeekOverview } from "components/issues"; // ui import { CustomMenu } from "components/ui"; import { Spinner } from "@plane/ui"; // icon import { PlusIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types"; import { IIssueUnGroupedStructure } from "store/issue"; // constants import { SPREADSHEET_COLUMN } from "constants/spreadsheet"; export const SpreadsheetLayout: React.FC = observer(() => { const [expandedIssues, setExpandedIssues] = useState([]); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { user } = useUser(); const { projectDetails } = useProjectDetails(); const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore(); const issues = issueStore.getIssues; const issueDisplayProperties = issueFilterStore.userDisplayProperties; const handleDisplayFiltersUpdate = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { ...updatedDisplayFilter, }, }); }, [issueFilterStore, projectId, workspaceSlug] ); const type = cycleId ? "cycle" : moduleId ? "module" : "issue"; const columnData = SPREADSHEET_COLUMN.map((column) => ({ ...column, isActive: issueDisplayProperties ? column.propertyName === "labels" ? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties] : column.propertyName === "title" ? true : issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties] : false, })); const gridTemplateColumns = columnData .filter((column) => column.isActive) .map((column) => column.colSize) .join(" "); const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15; return ( <>
{/* */}
{/* {issues ? (
{(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => ( {}} disableUserActions={!isAllowed} user={user} userAuth={{ isViewer: projectDetails?.member_role === 5, isGuest: projectDetails?.member_role === 10, isMember: projectDetails?.member_role === 15, isOwner: projectDetails?.member_role === 20, }} /> ))}
{type === "issue" ? ( ) : ( isAllowed && ( Add Issue } position="left" optionsClassName="left-5 !w-36" noBorder > { const e = new KeyboardEvent("keydown", { key: "c" }); document.dispatchEvent(e); }} > Create new {true && {}}>Add an existing issue} ) )}
) : ( )} */}
); });