import { useCallback, useState } from "react"; import { observer } from "mobx-react"; import router from "next/router"; // icons import { Calendar, ChevronDown, Kanban, List } from "lucide-react"; import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types"; // ui import { CustomMenu } from "@plane/ui"; // components import { ProjectAnalyticsModal } from "@/components/analytics"; import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues"; // hooks import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue"; import { useIssues, useLabel, useMember, useModule, useProjectState } from "@/hooks/store"; // types // constants export const ModuleMobileHeader = observer(() => { const [analyticsModal, setAnalyticsModal] = useState(false); const { getModuleById } = useModule(); const layouts = [ { key: "list", title: "List", icon: List }, { key: "kanban", title: "Kanban", icon: Kanban }, { key: "calendar", title: "Calendar", icon: Calendar }, ]; const { workspaceSlug, projectId, moduleId } = router.query as { workspaceSlug: string; projectId: string; moduleId: string; }; const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined; const { issuesFilter: { issueFilters, updateFilters }, } = useIssues(EIssuesStoreType.MODULE); const activeLayout = issueFilters?.displayFilters?.layout; const { projectStates } = useProjectState(); const { projectLabels } = useLabel(); const { project: { projectMemberIds }, } = useMember(); const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, moduleId); }, [workspaceSlug, projectId, moduleId, 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 }, moduleId); }, [workspaceSlug, projectId, moduleId, issueFilters, updateFilters] ); const handleDisplayFilters = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, moduleId); }, [workspaceSlug, projectId, moduleId, updateFilters] ); const handleDisplayProperties = useCallback( (property: Partial) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, moduleId); }, [workspaceSlug, projectId, moduleId, updateFilters] ); return (
setAnalyticsModal(false)} moduleDetails={moduleDetails ?? undefined} />
Layout} customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm" closeOnSelect > {layouts.map((layout, index) => ( { handleLayoutChange(ISSUE_LAYOUTS[index].key); }} className="flex items-center gap-2" >
{layout.title}
))}
Filters } >
Display } >
); });