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, CustomMenu, LayersIcon, Tooltip } from "@plane/ui"; // icons import { Info, LinkIcon, Pencil, Star, Trash2 } 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 ModuleCardItem: 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 moduleTotalIssues = module.backlog_issues + module.unstarted_issues + module.started_issues + module.completed_issues + module.cancelled_issues; const completionPercentage = (module.completed_issues / moduleTotalIssues) * 100; const endDate = new Date(module.target_date ?? ""); const startDate = new Date(module.start_date ?? ""); const isDateValid = module.target_date || module.start_date; const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status); const issueCount = module ? !moduleTotalIssues || moduleTotalIssues === 0 ? "0 Issue" : moduleTotalIssues === module.completed_issues ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}` : `${module.completed_issues}/${moduleTotalIssues} Issues` : "0 Issue"; 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)} />
{module.name}
{moduleStatus && ( {moduleStatus.label} )}