import { FC, MouseEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; // stores import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // components import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles"; // ui import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar } from "@plane/ui"; // icons import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react"; // helpers import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; // types import { ICycle, TCycleGroups } from "types"; // constants import { CYCLE_STATUS } from "constants/cycle"; import { EUserWorkspaceRoles } from "constants/workspace"; type TCyclesListItem = { cycle: ICycle; handleEditCycle?: () => void; handleDeleteCycle?: () => void; handleAddToFavorites?: () => void; handleRemoveFromFavorites?: () => void; workspaceSlug: string; projectId: string; }; export const CyclesListItem: FC = (props) => { const { cycle, workspaceSlug, projectId } = props; // store const { cycle: cycleStore, trackEvent: { setTrackElement }, user: userStore, } = useMobxStore(); // toast const { setToastAlert } = useToast(); // states const [updateModal, setUpdateModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false); // computed const cycleStatus = cycle.status.toLocaleLowerCase() as TCycleGroups; const isCompleted = cycleStatus === "completed"; const endDate = new Date(cycle.end_date ?? ""); const startDate = new Date(cycle.start_date ?? ""); const { currentProjectRole } = userStore; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; const router = useRouter(); const cycleTotalIssues = cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues + cycle.completed_issues + cycle.cancelled_issues; const renderDate = cycle.start_date || cycle.end_date; const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100; const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); 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/${cycle.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Cycle link copied to clipboard.", }); }); }; const handleAddToFavorites = (e: MouseEvent) => { e.preventDefault(); if (!workspaceSlug || !projectId) return; cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).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; cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).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(); setUpdateModal(true); }; const handleDeleteCycle = (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); setDeleteModal(true); setTrackElement("CYCLE_PAGE_LIST_LAYOUT"); }; const openCycleOverview = (e: MouseEvent) => { const { query } = router; e.preventDefault(); e.stopPropagation(); router.push({ pathname: router.pathname, query: { ...query, peekCycle: cycle.id }, }); }; return ( <> setUpdateModal(false)} workspaceSlug={workspaceSlug} projectId={projectId} /> setDeleteModal(false)} workspaceSlug={workspaceSlug} projectId={projectId} />
{isCompleted ? ( progress === 100 ? ( ) : ( {`!`} ) ) : progress === 100 ? ( ) : ( {`${progress}%`} )}
{cycle.name}
{currentCycle && ( {currentCycle.value === "current" ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}` : `${currentCycle.label}`} )}
{renderDate && ( {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} )}
{cycle.assignees.length > 0 ? ( {cycle.assignees.map((assignee) => ( ))} ) : ( )}
{isEditingAllowed && (cycle.is_favorite ? ( ) : ( ))} {!isCompleted && isEditingAllowed && ( <> Edit cycle Delete cycle )} Copy cycle link
); };