import { useCallback } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; // ui import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui"; // helpers import { truncateText } from "helpers/string.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; export const ProjectViewIssuesHeader: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, viewId } = router.query; const { issueFilter: issueFilterStore, projectViewFilters: projectViewFiltersStore, project: projectStore, projectViews: projectViewsStore, } = useMobxStore(); const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined; const activeLayout = issueFilterStore.userDisplayFilters.layout; 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 || !viewId) return; const newValues = storedFilters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); }); } else { if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } projectViewFiltersStore.updateStoredFilters(viewId.toString(), { [key]: newValues, }); }, [projectViewFiltersStore, storedFilters, viewId, 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 projectDetails = workspaceSlug && projectId ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) : undefined; const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined; const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined; return (
router.back()}>

{`${projectDetails?.name ?? "Project"} Views`}

} />
{viewDetails?.name && truncateText(viewDetails.name, 40)} } className="ml-1.5" placement="bottom-start" > {viewsList?.map((view) => ( router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)} > {truncateText(view.name, 40)} ))}
handleLayoutChange(layout)} selectedLayout={activeLayout} /> m.member)} states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined} />
); });