import React, { FC } from "react"; import { useRouter } from "next/router"; // components import { CustomMenu } from "@plane/ui"; import { ExistingIssuesListModal } from "components/core"; import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/issues"; // lucide icons import { Minimize2, Maximize2, Circle, Plus } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; import { useEventTracker } from "hooks/store"; // mobx import { observer } from "mobx-react-lite"; // types import { TIssue, ISearchIssueResponse, TIssueKanbanFilters } from "@plane/types"; import { TCreateModalStoreTypes } from "constants/issue"; interface IHeaderGroupByCard { sub_group_by: string | null; group_by: string | null; column_id: string; icon?: React.ReactNode; title: string; count: number; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: any; issuePayload: Partial; disableIssueCreation?: boolean; storeType?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; } export const HeaderGroupByCard: FC = observer((props) => { const { sub_group_by, column_id, icon, title, count, kanbanFilters, handleKanbanFilters, issuePayload, disableIssueCreation, storeType, addIssuesToView, } = props; const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id); // states const [isOpen, setIsOpen] = React.useState(false); const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false); // hooks const { setTrackElement } = useEventTracker(); // router const router = useRouter(); const { workspaceSlug, projectId, moduleId, cycleId } = router.query; const isDraftIssue = router.pathname.includes("draft-issue"); const { setToastAlert } = useToast(); const renderExistingIssueModal = moduleId || cycleId; const ExistingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true }; const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !projectId) return; const issues = data.map((i) => i.id); try { addIssuesToView && addIssuesToView(issues); } catch (error) { setToastAlert({ type: "error", title: "Error!", message: "Selected issues could not be added to the cycle. Please try again.", }); } }; return ( <> setIsOpen(false)} data={issuePayload} storeType={storeType} isDraft={isDraftIssue} /> {renderExistingIssueModal && ( setOpenExistingIssueListModal(false)} searchParams={ExistingIssuesListModalPayload} handleOnSubmit={handleAddIssuesToView} /> )}
{icon ? icon : }
{title}
{count || 0}
{sub_group_by === null && (
handleKanbanFilters("group_by", column_id)} > {verticalAlignPosition ? ( ) : ( )}
)} {!disableIssueCreation && (renderExistingIssueModal ? ( } > { setTrackElement("Kanban layout"); setIsOpen(true); }} > Create issue { setTrackElement("Kanban layout"); setOpenExistingIssueListModal(true); }} > Add an existing issue ) : (
{ setTrackElement("Kanban layout"); setIsOpen(true); }} >
))}
); });