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 { Plus } from "lucide-react"; // types import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types"; import { IIssueUnGroupedStructure } from "store/issue"; // constants import { SPREADSHEET_COLUMN } from "constants/spreadsheet"; export const CycleSpreadsheetLayout: React.FC = observer(() => { const [expandedIssues, setExpandedIssues] = useState([]); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { user } = useUser(); const { projectDetails } = useProjectDetails(); const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore } = useMobxStore(); const issues = cycleIssueStore.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 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, // }} // /> ))}
{isAllowed && ( Add Issue } optionsClassName="left-5 !w-36" noBorder > { const e = new KeyboardEvent("keydown", { key: "c" }); document.dispatchEvent(e); }} > Create new {true && {}}>Add an existing issue} )}
) : ( )}
); });