import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react"; // hooks import { useModule, useUser, useEventTracker, useMember } from "hooks/store"; import useToast from "hooks/use-toast"; // components import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules"; // ui import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, 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"; import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "constants/event-tracker"; type Props = { moduleId: string; }; export const ModuleListItem: 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 { getUserDetails } = useMember(); const { setTrackElement, captureEvent } = 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) .then(() => { captureEvent(MODULE_FAVORITED, { module_id: moduleId, element: "Grid layout", state: "SUCCESS", }); }) .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) .then(() => { captureEvent(MODULE_UNFAVORITED, { module_id: moduleId, element: "Grid layout", state: "SUCCESS", }); }) .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 list layout"); setEditModal(true); }; const handleDeleteModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setTrackElement("Modules page list 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 completionPercentage = ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100; const endDate = new Date(moduleDetails.target_date ?? ""); const startDate = new Date(moduleDetails.start_date ?? ""); const renderDate = moduleDetails.start_date || moduleDetails.target_date; // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status); const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); const completedModuleCheck = moduleDetails.status === "completed"; return ( <> {workspaceSlug && projectId && ( setEditModal(false)} data={moduleDetails} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} /> )} setDeleteModal(false)} />
{completedModuleCheck ? ( progress === 100 ? ( ) : ( {`!`} ) ) : progress === 100 ? ( ) : ( {`${progress}%`} )} {moduleDetails.name}
{moduleStatus && ( {moduleStatus.label} )}
{renderDate && ( {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} )}
{moduleDetails.member_ids.length > 0 ? ( {moduleDetails.member_ids.map((member_id) => { const member = getUserDetails(member_id); return ; })} ) : ( )}
{isEditingAllowed && (moduleDetails.is_favorite ? ( ) : ( ))} {isEditingAllowed && ( <> Edit module Delete module )} Copy module link
); });