import React, { useCallback, useEffect, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { mutate } from "swr"; // react-beautiful-dnd import { DraggableProvided, DraggableStateSnapshot, DraggingStyle, NotDraggingStyle, } from "react-beautiful-dnd"; // services import issuesService from "services/issues.service"; // hooks import useToast from "hooks/use-toast"; // components import { ViewAssigneeSelect, ViewDueDateSelect, ViewPrioritySelect, ViewStateSelect, } from "components/issues/view-select"; // ui import { ContextMenu, CustomMenu, Tooltip } from "components/ui"; // icons import { ClipboardDocumentCheckIcon, LinkIcon, PencilIcon, TrashIcon, } from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard, truncateText } from "helpers/string.helper"; // types import { CycleIssueResponse, IIssue, ModuleIssueResponse, NestedKeyOf, Properties, UserAuth, } from "types"; // fetch-keys import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys"; type Props = { type?: string; provided: DraggableProvided; snapshot: DraggableStateSnapshot; issue: IIssue; selectedGroup: NestedKeyOf | null; properties: Properties; editIssue: () => void; makeIssueCopy: () => void; removeIssue?: (() => void) | null; handleDeleteIssue: (issue: IIssue) => void; orderBy: NestedKeyOf | null; handleTrashBox: (isDragging: boolean) => void; userAuth: UserAuth; }; export const SingleBoardIssue: React.FC = ({ type, provided, snapshot, issue, selectedGroup, properties, editIssue, makeIssueCopy, removeIssue, handleDeleteIssue, orderBy, handleTrashBox, userAuth, }) => { // context menu const [contextMenu, setContextMenu] = useState(false); const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 }); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { setToastAlert } = useToast(); const partialUpdateIssue = useCallback( (formData: Partial) => { if (!workspaceSlug || !projectId) return; if (cycleId) mutate( CYCLE_ISSUES(cycleId as string), (prevData) => { const updatedIssues = (prevData ?? []).map((p) => { if (p.issue_detail.id === issue.id) { return { ...p, issue_detail: { ...p.issue_detail, ...formData, assignees: formData.assignees_list ?? p.issue_detail.assignees_list, }, }; } return p; }); return [...updatedIssues]; }, false ); if (moduleId) mutate( MODULE_ISSUES(moduleId as string), (prevData) => { const updatedIssues = (prevData ?? []).map((p) => { if (p.issue_detail.id === issue.id) { return { ...p, issue_detail: { ...p.issue_detail, ...formData, assignees: formData.assignees_list ?? p.issue_detail.assignees_list, }, }; } return p; }); return [...updatedIssues]; }, false ); mutate( PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === issue.id) return { ...p, ...formData, assignees: formData.assignees_list ?? p.assignees_list }; return p; }), false ); issuesService .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) .then((res) => { if (cycleId) mutate(CYCLE_ISSUES(cycleId as string)); if (moduleId) mutate(MODULE_ISSUES(moduleId as string)); mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)); }) .catch((error) => { console.log(error); }); }, [workspaceSlug, projectId, cycleId, moduleId, issue] ); const getStyle = ( style: DraggingStyle | NotDraggingStyle | undefined, snapshot: DraggableStateSnapshot ) => { if (orderBy === "sort_order") return style; if (!snapshot.isDragging) return {}; if (!snapshot.isDropAnimating) { return style; } return { ...style, transitionDuration: `0.001s`, }; }; const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard( `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}` ).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Issue link copied to clipboard.", }); }); }; useEffect(() => { if (snapshot.isDragging) handleTrashBox(snapshot.isDragging); }, [snapshot, handleTrashBox]); const isNotAllowed = userAuth.isGuest || userAuth.isViewer; return ( <> Edit issue Make a copy... handleDeleteIssue(issue)}> Delete issue Copy issue link
{ e.preventDefault(); setContextMenu(true); setContextMenuPosition({ x: e.pageX, y: e.pageY }); }} >
{!isNotAllowed && (
{type && !isNotAllowed && ( Edit issue {type !== "issue" && removeIssue && ( <>Remove from {type} )} handleDeleteIssue(issue)}> Delete issue Copy issue link )}
)} {properties.key && (
{issue.project_detail.identifier}-{issue.sequence_id}
)}
{truncateText(issue.name, 100)}
{properties.priority && ( )} {properties.state && ( )} {properties.due_date && ( )} {properties.sub_issue_count && (
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
)} {properties.labels && issue.label_details.length > 0 && (
{issue.label_details.map((label) => ( {label.name} ))}
)} {properties.assignee && ( )}
); };