import React from "react"; import { useRouter } from "next/router"; import { Popover, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui import { ToggleSwitch } from "@plane/ui"; // icons import { Check, ChevronUp } from "lucide-react"; // types import { TCalendarLayouts } from "types"; // constants import { CALENDAR_LAYOUTS } from "constants/calendar"; export const CalendarOptionsDropdown: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore(); const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month"; const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false; const handleLayoutChange = (layout: TCalendarLayouts) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { calendar: { ...issueFilterStore.userDisplayFilters.calendar, layout, }, }, }); calendarStore.updateCalendarPayload( layout === "month" ? calendarStore.calendarFilters.activeMonthDate : calendarStore.calendarFilters.activeWeekDate ); }; const handleToggleWeekends = () => { const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false; if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { calendar: { ...issueFilterStore.userDisplayFilters.calendar, show_weekends: !showWeekends, }, }, }); }; return ( {({ open }) => { if (open) { } return ( <>
Options
{Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => ( ))}
); }}
); });