import { useCallback, useState } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; import { useRouter } from "next/router"; // hooks import { usePlatformOS } from "hooks/use-platform-os"; import { ArrowRight, PanelRight, Plus } from "lucide-react"; import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui"; import { ProjectAnalyticsModal } from "components/analytics"; import { BreadcrumbLink } from "components/common"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; import { EUserProjectRoles } from "constants/project"; import { cn } from "helpers/common.helper"; import { truncateText } from "helpers/string.helper"; import { useApplication, useEventTracker, useLabel, useMember, useModule, useProject, useProjectState, useUser, useIssues, } from "hooks/store"; import { useIssuesActions } from "hooks/use-issues-actions"; import useLocalStorage from "hooks/use-local-storage"; // components // ui // icons // helpers // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types"; import { ProjectLogo } from "components/project"; // constants const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => { // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { getModuleById } = useModule(); // derived values const moduleDetail = getModuleById(moduleId); if (!moduleDetail) return null; return ( {truncateText(moduleDetail.name, 40)} ); }; export const ModuleIssuesHeader: React.FC = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; // hooks const { isMobile } = usePlatformOS(); // store hooks const { issuesFilter: { issueFilters }, } = useIssues(EIssuesStoreType.MODULE); const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE); const { projectModuleIds, getModuleById } = useModule(); const { commandPalette: { toggleCreateIssueModal }, } = useApplication(); const { setTrackElement } = useEventTracker(); const { membership: { currentProjectRole }, } = useUser(); const { currentProjectDetails } = useProject(); const { projectLabels } = useLabel(); const { projectStates } = useProjectState(); const { project: { projectMemberIds }, } = useMember(); const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false"); const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const toggleSidebar = () => { setValue(`${!isSidebarCollapsed}`); }; const activeLayout = issueFilters?.displayFilters?.layout; const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!projectId) return; updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, { layout: layout }); }, [projectId, moduleId, updateFilters] ); const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!projectId) return; const newValues = issueFilters?.filters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); }); } else { if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } updateFilters(projectId.toString(), EIssueFilterType.FILTERS, { [key]: newValues }); }, [projectId, moduleId, issueFilters, updateFilters] ); const handleDisplayFilters = useCallback( (updatedDisplayFilter: Partial) => { if (!projectId) return; updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter); }, [projectId, moduleId, updateFilters] ); const handleDisplayProperties = useCallback( (property: Partial) => { if (!projectId) return; updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property); }, [projectId, moduleId, updateFilters] ); // derived values const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined; const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); const issueCount = moduleDetails ? issueFilters?.displayFilters?.sub_issue ? moduleDetails.total_issues + moduleDetails.sub_issues : moduleDetails.total_issues : undefined; return ( <> setAnalyticsModal(false)} moduleDetails={moduleDetails ?? undefined} />
) } /> ... } /> } /> } />

{moduleDetails?.name && moduleDetails.name}

{issueCount && issueCount > 0 ? ( 1 ? "issues" : "issue" } in this module`} position="bottom" > {issueCount} ) : null}
} className="ml-1.5 flex-shrink-0" placement="bottom-start" > {projectModuleIds?.map((moduleId) => ( ))} } />
handleLayoutChange(layout)} selectedLayout={activeLayout} />
{canUserCreateIssue && ( <> )}
); });