import { useRouter } from "next/router"; import React from "react"; import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react"; // components import { SubIssuesRootList } from "./issues-list"; import { IssueProperty } from "./properties"; import { IssuePeekOverview } from "components/issues"; // ui import { CustomMenu, Tooltip } from "@plane/ui"; // types import { IUser, IIssue } from "types"; import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root"; import { EIssueActions } from "../issue-layouts/types"; export interface ISubIssues { workspaceSlug: string; projectId: string; parentIssue: IIssue; issue: any; spacingLeft?: number; user: IUser | undefined; editable: boolean; removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void; issuesLoader: ISubIssuesRootLoaders; handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void; copyText: (text: string) => void; handleIssueCrudOperation: ( key: "create" | "existing" | "edit" | "delete", issueId: string, issue?: IIssue | null ) => void; handleUpdateIssue: (issue: IIssue, data: Partial) => void; handleDeleteIssue: (issue: IIssue) => Promise; } export const SubIssues: React.FC = ({ workspaceSlug, projectId, parentIssue, issue, spacingLeft = 0, user, editable, removeIssueFromSubIssues, issuesLoader, handleIssuesLoader, copyText, handleIssueCrudOperation, handleUpdateIssue, handleDeleteIssue, }) => { const router = useRouter(); const { peekProjectId, peekIssueId } = router.query; const handleIssuePeekOverview = (event: React.MouseEvent) => { const { query } = router; if (event.ctrlKey || event.metaKey) { const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`; window.open(issueUrl, "_blank"); // Open link in a new tab } else { router.push({ pathname: router.pathname, query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project }, }); } }; return ( <> {workspaceSlug && peekProjectId && peekIssueId && peekIssueId === issue.id && ( { if (action === EIssueActions.UPDATE) { await handleUpdateIssue(issue, { ...issue, ...issueToUpdate }); } else if (action === EIssueActions.DELETE) { await handleDeleteIssue(issue); } }} /> )}
{issue && (
{issue?.sub_issues_count > 0 && ( <> {issuesLoader.sub_issues.includes(issue?.id) ? (
) : (
handleIssuesLoader({ key: "visibility", issueId: issue?.id })} > {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? ( ) : ( )}
)} )}
{issue.project_detail.identifier}-{issue?.sequence_id}
{issue?.name}
{editable && ( handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
Edit issue
)} {editable && ( handleIssueCrudOperation("delete", parentIssue?.id, issue)}>
Delete issue
)} copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)} >
Copy issue link
{editable && ( <> {issuesLoader.delete.includes(issue?.id) ? (
) : (
{ handleIssuesLoader({ key: "delete", issueId: issue?.id }); removeIssueFromSubIssues(parentIssue?.id, issue); }} >
)} )}
)} {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && ( )}
); };