import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // components import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules"; // ui import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui"; // icons import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"; // types import { IModule } from "types"; // constants import { MODULE_STATUS } from "constants/module"; type Props = { module: IModule; }; export const ModuleListItem: React.FC = observer((props) => { const { module } = props; const [editModal, setEditModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { module: moduleStore } = useMobxStore(); const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100; const endDate = new Date(module.target_date ?? ""); const startDate = new Date(module.start_date ?? ""); const renderDate = module.start_date || module.target_date; const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status); const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); const completedModuleCheck = module.status === "completed"; const handleAddToFavorites = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); if (!workspaceSlug || !projectId) return; moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't add the module to favorites. Please try again.", }); }); }; const handleRemoveFromFavorites = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); if (!workspaceSlug || !projectId) return; moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the module from favorites. Please try again.", }); }); }; const handleCopyText = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Module link copied to clipboard.", }); }); }; const handleEditModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setEditModal(true); }; const handleDeleteModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setDeleteModal(true); }; const openModuleOverview = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); const { query } = router; router.push({ pathname: router.pathname, query: { ...query, peekModule: module.id }, }); }; return ( <> {workspaceSlug && projectId && ( setEditModal(false)} data={module} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} /> )} setDeleteModal(false)} />
{completedModuleCheck ? ( progress === 100 ? ( ) : ( {`!`} ) ) : progress === 100 ? ( ) : ( {`${progress}%`} )} {module.name}
{moduleStatus && ( {moduleStatus.label} )}
{renderDate && ( {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} {" - "} {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} )}
{module.members_detail.length > 0 ? ( {module.members_detail.map((member) => ( ))} ) : ( )}
{module.is_favorite ? ( ) : ( )} Edit module Delete module Copy module link
); });