import { useCallback, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useLabel, useMember, useUser, useIssues } from "hooks/store"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues"; import { CreateUpdateWorkspaceViewModal } from "components/workspace"; import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle"; import { BreadcrumbLink } from "components/common"; // ui import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui"; // icons import { List, PlusIcon, Sheet } from "lucide-react"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types"; // constants import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; import { EUserWorkspaceRoles } from "constants/workspace"; const GLOBAL_VIEW_LAYOUTS = [ { key: "list", title: "List", link: "/workspace-views", icon: List }, { key: "spreadsheet", title: "Spreadsheet", link: "/workspace-views/all-issues", icon: Sheet }, ]; type Props = { activeLayout: "list" | "spreadsheet"; }; export const GlobalIssuesHeader: React.FC = observer((props) => { const { activeLayout } = props; // states const [createViewModal, setCreateViewModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, globalViewId } = router.query; // store hooks const { issuesFilter: { filters, updateFilters }, } = useIssues(EIssuesStoreType.GLOBAL); const { membership: { currentWorkspaceRole }, } = useUser(); const { workspaceLabels } = useLabel(); const { workspace: { workspaceMemberIds }, } = useMember(); const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined; const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !globalViewId) 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.toString(), undefined, EIssueFilterType.FILTERS, { [key]: newValues }, globalViewId.toString() ); }, [workspaceSlug, issueFilters, updateFilters, globalViewId] ); const handleDisplayFilters = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !globalViewId) return; updateFilters( workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, globalViewId.toString() ); }, [workspaceSlug, updateFilters, globalViewId] ); const handleDisplayProperties = useCallback( (property: Partial) => { if (!workspaceSlug || !globalViewId) return; updateFilters( workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_PROPERTIES, property, globalViewId.toString() ); }, [workspaceSlug, updateFilters, globalViewId] ); const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; return ( <> setCreateViewModal(false)} />
) : ( ) } /> } />
{GLOBAL_VIEW_LAYOUTS.map((layout) => (
))}
{activeLayout === "spreadsheet" && ( <> )} {isAuthorizedUser && ( )}
); });