import React, { useState } from "react"; // next import { useRouter } from "next/router"; // components import { SpreadsheetColumns, SpreadsheetIssues, ListInlineCreateIssueForm } from "components/core"; import { CustomMenu, Spinner } from "components/ui"; import { IssuePeekOverview } from "components/issues"; // hooks import useIssuesProperties from "hooks/use-issue-properties"; import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view"; // types import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types"; // constants import { SPREADSHEET_COLUMN } from "constants/spreadsheet"; // icon import { PlusIcon } from "@heroicons/react/24/outline"; type Props = { handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void; openIssuesListModal?: (() => void) | null; disableUserActions: boolean; user: ICurrentUserResponse | undefined; userAuth: UserAuth; }; export const SpreadsheetView: React.FC = ({ handleIssueAction, openIssuesListModal, disableUserActions, user, userAuth, }) => { const [expandedIssues, setExpandedIssues] = useState([]); const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const type = cycleId ? "cycle" : moduleId ? "module" : "issue"; const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView(); const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string); const columnData = SPREADSHEET_COLUMN.map((column) => ({ ...column, isActive: properties ? column.propertyName === "labels" ? properties[column.propertyName as keyof Properties] : column.propertyName === "title" ? true : properties[column.propertyName as keyof Properties] : false, })); const gridTemplateColumns = columnData .filter((column) => column.isActive) .map((column) => column.colSize) .join(" "); return ( <> mutateIssues()} projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} readOnly={disableUserActions} />
{spreadsheetIssues ? (
{spreadsheetIssues.map((issue: IIssue, index) => ( ))}
) : ( )}
setIsInlineCreateIssueFormOpen(false)} prePopulatedData={{ ...(cycleId && { cycle: cycleId.toString() }), ...(moduleId && { module: moduleId.toString() }), }} /> {type === "issue" ? !disableUserActions && !isInlineCreateIssueFormOpen && ( ) : !disableUserActions && !isInlineCreateIssueFormOpen && ( Add Issue } position="left" verticalPosition="top" optionsClassName="left-5 !w-36" noBorder > setIsInlineCreateIssueFormOpen(true)}> Create new {openIssuesListModal && ( Add an existing issue )} )}
); };