import { FC, MouseEvent, useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; // hooks import { useEventTracker, useCycle, useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // components import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles"; // ui import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui"; // icons import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react"; // helpers import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; // constants import { CYCLE_STATUS } from "constants/cycle"; import { EUserWorkspaceRoles } from "constants/workspace"; import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker"; //.types import { TCycleGroups } from "@plane/types"; export interface ICyclesBoardCard { workspaceSlug: string; projectId: string; cycleId: string; } export const CyclesBoardCard: FC = (props) => { const { cycleId, workspaceSlug, projectId } = props; // states const [updateModal, setUpdateModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false); // router const router = useRouter(); // store const { setTrackElement, captureEvent } = useEventTracker(); const { membership: { currentProjectRole }, } = useUser(); const { addCycleToFavorites, removeCycleFromFavorites, getCycleById } = useCycle(); // toast alert const { setToastAlert } = useToast(); // computed const cycleDetails = getCycleById(cycleId); if (!cycleDetails) return null; const cycleStatus = cycleDetails.status.toLocaleLowerCase(); const isCompleted = cycleStatus === "completed"; const endDate = new Date(cycleDetails.end_date ?? ""); const startDate = new Date(cycleDetails.start_date ?? ""); const isDateValid = cycleDetails.start_date || cycleDetails.end_date; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); const cycleTotalIssues = cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues + cycleDetails.completed_issues + cycleDetails.cancelled_issues; const completionPercentage = (cycleDetails.completed_issues / cycleTotalIssues) * 100; const issueCount = cycleDetails ? cycleTotalIssues === 0 ? "0 Issue" : cycleTotalIssues === cycleDetails.completed_issues ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}` : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues` : "0 Issue"; const handleCopyText = (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Cycle link copied to clipboard.", }); }); }; const handleAddToFavorites = (e: MouseEvent) => { e.preventDefault(); if (!workspaceSlug || !projectId) return; addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId) .then(() => { captureEvent(CYCLE_FAVORITED, { cycle_id: cycleId, element: "Grid layout", state: "SUCCESS", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't add the cycle to favorites. Please try again.", }); }); }; const handleRemoveFromFavorites = (e: MouseEvent) => { e.preventDefault(); if (!workspaceSlug || !projectId) return; removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId) .then(() => { captureEvent(CYCLE_UNFAVORITED, { cycle_id: cycleId, element: "Grid layout", state: "SUCCESS", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't add the cycle to favorites. Please try again.", }); }); }; const handleEditCycle = (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); setTrackElement("Cycles page grid layout"); setUpdateModal(true); }; const handleDeleteCycle = (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); setTrackElement("Cycles page grid layout"); setDeleteModal(true); }; const openCycleOverview = (e: MouseEvent) => { const { query } = router; e.preventDefault(); e.stopPropagation(); router.push({ pathname: router.pathname, query: { ...query, peekCycle: cycleId }, }); }; const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0; return (
setUpdateModal(false)} workspaceSlug={workspaceSlug} projectId={projectId} /> setDeleteModal(false)} workspaceSlug={workspaceSlug} projectId={projectId} />
{cycleDetails.name}
{currentCycle && ( {currentCycle.value === "current" ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left` : `${currentCycle.label}`} )}
{issueCount}
{cycleDetails.assignees.length > 0 && (
{cycleDetails.assignees.map((assignee) => ( ))}
)}
{isDateValid ? ( {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} ) : ( No due date )}
{isEditingAllowed && (cycleDetails.is_favorite ? ( ) : ( ))} {!isCompleted && isEditingAllowed && ( <> Edit cycle Delete cycle )} Copy cycle link
); };