import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react"; // hooks import { useEventTracker, useModule, useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // components import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules"; // ui import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; import { renderFormattedDate } from "helpers/date-time.helper"; // constants import { MODULE_STATUS } from "constants/module"; import { EUserProjectRoles } from "constants/project"; type Props = { moduleId: string; }; export const ModuleCardItem: React.FC = observer((props) => { const { moduleId } = props; // states const [editModal, setEditModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // toast alert const { setToastAlert } = useToast(); // store hooks const { membership: { currentProjectRole }, } = useUser(); const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule(); const { setTrackElement } = useEventTracker(); // derived values const moduleDetails = getModuleById(moduleId); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; const handleAddToFavorites = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); if (!workspaceSlug || !projectId) return; addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).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; removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).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/${moduleId}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Module link copied to clipboard.", }); }); }; const handleEditModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setTrackElement("Modules page board layout"); setEditModal(true); }; const handleDeleteModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setTrackElement("Modules page board layout"); setDeleteModal(true); }; const openModuleOverview = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); const { query } = router; router.push({ pathname: router.pathname, query: { ...query, peekModule: moduleId }, }); }; if (!moduleDetails) return null; const moduleTotalIssues = moduleDetails.backlog_issues + moduleDetails.unstarted_issues + moduleDetails.started_issues + moduleDetails.completed_issues + moduleDetails.cancelled_issues; const completionPercentage = (moduleDetails.completed_issues / moduleTotalIssues) * 100; const endDate = new Date(moduleDetails.target_date ?? ""); const startDate = new Date(moduleDetails.start_date ?? ""); const isDateValid = moduleDetails.target_date || moduleDetails.start_date; // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status); const issueCount = module ? !moduleTotalIssues || moduleTotalIssues === 0 ? "0 Issue" : moduleTotalIssues === moduleDetails.completed_issues ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}` : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues` : "0 Issue"; return ( <> {workspaceSlug && projectId && ( setEditModal(false)} data={moduleDetails} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} /> )} setDeleteModal(false)} />
{moduleDetails.name}
{moduleStatus && ( {moduleStatus.label} )}
{issueCount ?? "0 Issue"}
{moduleDetails.members_detail.length > 0 && (
{moduleDetails.members_detail.map((member) => ( ))}
)}
{isDateValid ? ( <> {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} ) : ( No due date )}
{isEditingAllowed && (moduleDetails.is_favorite ? ( ) : ( ))} {isEditingAllowed && ( <> Edit module Delete module )} Copy module link
); });