import React, { FC } from "react"; import { useRouter } from "next/router"; // services import { ModuleService } from "services/module.service"; import { IssueService } from "services/issue"; // components import { CustomMenu } from "@plane/ui"; import { CreateUpdateIssueModal } from "components/issues/modal"; import { ExistingIssuesListModal } from "components/core"; // lucide icons import { Minimize2, Maximize2, Circle, Plus } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; // mobx import { observer } from "mobx-react-lite"; // types import { IIssue, ISearchIssueResponse } from "types"; interface IHeaderGroupByCard { sub_group_by: string | null; group_by: string | null; column_id: string; icon?: React.ReactNode; title: string; count: number; kanBanToggle: any; handleKanBanToggle: any; issuePayload: Partial; } const moduleService = new ModuleService(); const issueService = new IssueService(); export const HeaderGroupByCard: FC = observer((props) => { const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle, issuePayload } = props; const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id); const [isOpen, setIsOpen] = React.useState(false); const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false); const router = useRouter(); const { workspaceSlug, projectId, moduleId, cycleId } = router.query; const { setToastAlert } = useToast(); const renderExistingIssueModal = moduleId || cycleId; const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true }; const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !projectId) return; const payload = { issues: data.map((i) => i.id), }; await moduleService .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Selected issues could not be added to the module. Please try again.", }) ); }; const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !projectId) return; const payload = { issues: data.map((i) => i.id), }; await issueService .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Selected issues could not be added to the cycle. Please try again.", }); }); }; return ( <> setIsOpen(false)} prePopulateData={issuePayload} /> {renderExistingIssueModal && ( setOpenExistingIssueListModal(false)} searchParams={ExistingIssuesListModalPayload} handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle} /> )}
{icon ? icon : }
{title}
{count || 0}
{sub_group_by === null && (
handleKanBanToggle("groupByHeaderMinMax", column_id)} > {verticalAlignPosition ? ( ) : ( )}
)} {renderExistingIssueModal ? ( } > setIsOpen(true)}> Create issue setOpenExistingIssueListModal(true)}> Add an existing issue ) : (
setIsOpen(true)} >
)}
); });