import { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import Link from "next/link"; // hooks import { useApplication, useCycle, useLabel, useMember, useProject, useProjectState, useUser, useIssues, } from "hooks/store"; 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, ContrastIcon, CustomMenu } from "@plane/ui"; // icons import { ArrowRight, Plus } from "lucide-react"; // helpers import { truncateText } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types"; // constants import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; import { EUserProjectRoles } from "constants/project"; const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => { // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { getCycleById } = useCycle(); // derived values const cycle = getCycleById(cycleId); if (!cycle) return null; return ( {truncateText(cycle.name, 40)} ); }; export const CycleIssuesHeader: React.FC = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query as { workspaceSlug: string; projectId: string; cycleId: string; }; // store hooks const { issuesFilter: { issueFilters, updateFilters }, } = useIssues(EIssuesStoreType.CYCLE); const { currentProjectCycleIds, getCycleById } = useCycle(); const { commandPalette: { toggleCreateIssueModal }, eventTracker: { setTrackElement }, } = useApplication(); const { membership: { currentProjectRole }, } = useUser(); const { currentProjectDetails } = useProject(); const { projectStates } = useProjectState(); const { project: { projectLabels }, } = useLabel(); const { project: { projectMemberIds }, } = useMember(); const activeLayout = issueFilters?.displayFilters?.layout; const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const toggleSidebar = () => { setValue(`${!isSidebarCollapsed}`); }; const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, cycleId); }, [workspaceSlug, projectId, cycleId, updateFilters] ); const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !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(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, cycleId); }, [workspaceSlug, projectId, cycleId, issueFilters, updateFilters] ); const handleDisplayFilters = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, cycleId); }, [workspaceSlug, projectId, cycleId, updateFilters] ); const handleDisplayProperties = useCallback( (property: Partial) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, cycleId); }, [workspaceSlug, projectId, cycleId, updateFilters] ); // derived values const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined; const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); return ( <> setAnalyticsModal(false)} cycleDetails={cycleDetails ?? undefined} />
{currentProjectDetails?.name.charAt(0)} ) } label={currentProjectDetails?.name ?? "Project"} link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} /> } label="Cycles" link={`/${workspaceSlug}/projects/${projectId}/cycles`} /> {cycleDetails?.name && truncateText(cycleDetails.name, 40)} } className="ml-1.5 flex-shrink-0" width="auto" placement="bottom-start" > {currentProjectCycleIds?.map((cycleId) => ( ))} } />
handleLayoutChange(layout)} selectedLayout={activeLayout} /> {canUserCreateIssue && ( <> )}
); });