import { useCallback, useState } from "react"; import router from "next/router"; //components // icons import { Calendar, ChevronDown, Kanban, List } from "lucide-react"; import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types"; import { CustomMenu } from "@plane/ui"; // hooks // constants import { ProjectAnalyticsModal } from "@/components/analytics"; import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues"; import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue"; import { useIssues, useCycle, useProjectState, useLabel, useMember } from "@/hooks/store"; export const CycleMobileHeader = () => { const [analyticsModal, setAnalyticsModal] = useState(false); const { getCycleById } = useCycle(); const layouts = [ { key: "list", title: "List", icon: List }, { key: "kanban", title: "Kanban", icon: Kanban }, { key: "calendar", title: "Calendar", icon: Calendar }, ]; const { workspaceSlug, projectId, cycleId } = router.query; const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined; // store hooks const { issuesFilter: { issueFilters, updateFilters }, } = useIssues(EIssuesStoreType.CYCLE); const activeLayout = issueFilters?.displayFilters?.layout; const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!workspaceSlug || !projectId || !cycleId) return; updateFilters( workspaceSlug.toString(), projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, cycleId.toString() ); }, [workspaceSlug, projectId, cycleId, updateFilters] ); const { projectStates } = useProjectState(); const { projectLabels } = useLabel(); const { project: { projectMemberIds }, } = useMember(); const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !projectId || !cycleId) 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(), projectId.toString(), EIssueFilterType.FILTERS, { [key]: newValues }, cycleId.toString() ); }, [workspaceSlug, projectId, cycleId, issueFilters, updateFilters] ); const handleDisplayFilters = useCallback( (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => { if (!workspaceSlug || !projectId || !cycleId) return; updateFilters( workspaceSlug.toString(), projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, cycleId.toString() ); }, [workspaceSlug, projectId, cycleId, updateFilters] ); const handleDisplayProperties = useCallback( (property: Partial<IIssueDisplayProperties>) => { if (!workspaceSlug || !projectId || !cycleId) return; updateFilters( workspaceSlug.toString(), projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property, cycleId.toString() ); }, [workspaceSlug, projectId, cycleId, updateFilters] ); return ( <> <ProjectAnalyticsModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} cycleDetails={cycleDetails ?? undefined} /> <div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100"> <CustomMenu maxHeight={"md"} className="flex flex-grow justify-center text-custom-text-200 text-sm" placement="bottom-start" customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>} customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm" closeOnSelect > {layouts.map((layout, index) => ( <CustomMenu.MenuItem key={ISSUE_LAYOUTS[index].key} onClick={() => { handleLayoutChange(ISSUE_LAYOUTS[index].key); }} className="flex items-center gap-2" > <layout.icon className="w-3 h-3" /> <div className="text-custom-text-300">{layout.title}</div> </CustomMenu.MenuItem> ))} </CustomMenu> <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm"> <FiltersDropdown title="Filters" placement="bottom-end" menuButton={ <span className="flex items-center text-custom-text-200 text-sm"> Filters <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" /> </span> } > <FilterSelection filters={issueFilters?.filters ?? {}} handleFiltersUpdate={handleFiltersUpdate} layoutDisplayFiltersOptions={ activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined } labels={projectLabels} memberIds={projectMemberIds ?? undefined} states={projectStates} /> </FiltersDropdown> </div> <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm"> <FiltersDropdown title="Display" placement="bottom-end" menuButton={ <span className="flex items-center text-custom-text-200 text-sm"> Display <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" /> </span> } > <DisplayFiltersSelection layoutDisplayFiltersOptions={ activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined } displayFilters={issueFilters?.displayFilters ?? {}} handleDisplayFiltersUpdate={handleDisplayFilters} displayProperties={issueFilters?.displayProperties ?? {}} handleDisplayPropertiesUpdate={handleDisplayProperties} ignoreGroupedFilters={["cycle"]} /> </FiltersDropdown> </div> <span onClick={() => setAnalyticsModal(true)} className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200" > Analytics </span> </div> </> ); };