import { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useLocalStorage from "hooks/use-local-storage"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; import { ProjectAnalyticsModal } from "components/analytics"; // ui import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui"; // icons import { ArrowRight, ContrastIcon, Plus } from "lucide-react"; // helpers import { truncateText } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; export const ModuleIssuesHeader: React.FC = observer(() => { const [analyticsModal, setAnalyticsModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; const { issueFilter: issueFilterStore, module: moduleStore, moduleFilter: moduleFilterStore, project: projectStore, projectState: projectStateStore, commandPalette: commandPaletteStore, } = useMobxStore(); const activeLayout = issueFilterStore.userDisplayFilters.layout; const { currentProjectDetails } = projectStore; const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false"); const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const toggleSidebar = () => { setValue(`${!isSidebarCollapsed}`); }; const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { layout, }, }); }, [issueFilterStore, projectId, workspaceSlug] ); const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !projectId || !moduleId) return; const newValues = moduleFilterStore.moduleFilters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); }); } else { if (moduleFilterStore.moduleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { [key]: newValues, }); }, [moduleId, moduleFilterStore, projectId, workspaceSlug] ); const handleDisplayFiltersUpdate = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { ...updatedDisplayFilter, }, }); }, [issueFilterStore, projectId, workspaceSlug] ); const handleDisplayPropertiesUpdate = useCallback( (property: Partial) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property); }, [issueFilterStore, projectId, workspaceSlug] ); const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined; const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined; return ( <> setAnalyticsModal(false)} moduleDetails={moduleDetails ?? undefined} />
{currentProjectDetails?.name.charAt(0)} ) } label={currentProjectDetails?.name ?? "Project"} link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} /> } label="Modules" link={`/${workspaceSlug}/projects/${projectId}/modules`} /> {moduleDetails?.name && truncateText(moduleDetails.name, 40)} } className="ml-1.5 flex-shrink-0" width="auto" placement="bottom-start" > {modulesList?.map((module) => ( router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)} > {truncateText(module.name, 40)} ))} } />
handleLayoutChange(layout)} selectedLayout={activeLayout} /> m.member)} states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined} />
); });