import React from "react"; import { useRouter } from "next/router"; // headless ui import { Popover, Transition } from "@headlessui/react"; // hooks import useProfileIssues from "hooks/use-profile-issues"; import useEstimateOption from "hooks/use-estimate-option"; // components import { MyIssuesSelectFilters } from "components/issues"; // ui import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui"; // icons import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { checkIfArraysHaveSameElements } from "helpers/array.helper"; // types import { Properties, TIssueViewOptions } from "types"; // constants import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue"; const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [ { type: "list", Icon: FormatListBulletedOutlined, }, { type: "kanban", Icon: GridViewOutlined, }, ]; export const ProfileIssuesViewOptions: React.FC = () => { const router = useRouter(); const { workspaceSlug, userId } = router.query; const { displayFilters, setDisplayFilters, filters, displayProperties, setProperties, setFilters, } = useProfileIssues(workspaceSlug?.toString(), userId?.toString()); const { isEstimateActive } = useEstimateOption(); if ( !router.pathname.includes("assigned") && !router.pathname.includes("created") && !router.pathname.includes("subscribed") ) return null; return (
{issueViewOptions.map((option) => ( {replaceUnderscoreIfSnakeCase(option.type)} Layout } position="bottom" > ))}
{ const key = option.key as keyof typeof filters; if (key === "start_date" || key === "target_date") { const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value); setFilters({ [key]: valueExists ? null : option.value, }); } else { const valueExists = filters[key]?.includes(option.value); if (valueExists) setFilters({ [option.key]: ((filters[key] ?? []) as any[])?.filter( (val) => val !== option.value ), }); else setFilters({ [option.key]: [...((filters[key] ?? []) as any[]), option.value], }); } }} direction="left" height="rg" /> {({ open }) => ( <> Display
{displayFilters?.layout !== "calendar" && displayFilters?.layout !== "spreadsheet" && ( <>

Group by

option.key === displayFilters?.group_by )?.name ?? "Select" } className="!w-full" buttonClassName="w-full" > {GROUP_BY_OPTIONS.map((option) => { if (displayFilters?.layout === "kanban" && option.key === null) return null; if ( option.key === "state" || option.key === "created_by" || option.key === "assignees" ) return null; return ( setDisplayFilters({ group_by: option.key })} > {option.name} ); })}

Order by

option.key === displayFilters?.order_by )?.name ?? "Select" } className="!w-full" buttonClassName="w-full" > {ORDER_BY_OPTIONS.map((option) => { if ( displayFilters?.group_by === "priority" && option.key === "priority" ) return null; if (option.key === "sort_order") return null; return ( { setDisplayFilters({ order_by: option.key }); }} > {option.name} ); })}
)}

Issue type

{FILTER_ISSUE_OPTIONS.find( (option) => option.key === displayFilters?.type )?.name ?? "Select"} } className="!w-full" buttonClassName="w-full" > {FILTER_ISSUE_OPTIONS.map((option) => ( setDisplayFilters({ type: option.key, }) } > {option.name} ))}
{displayFilters?.layout !== "calendar" && displayFilters?.layout !== "spreadsheet" && ( <>

Show empty groups

setDisplayFilters({ show_empty_groups: !displayFilters?.show_empty_groups, }) } />
)}

Display Properties

{displayProperties && Object.keys(displayProperties).map((key) => { if (key === "estimate" && !isEstimateActive) return null; if ( displayFilters?.layout === "spreadsheet" && (key === "attachment_count" || key === "link" || key === "sub_issue_count") ) return null; if ( displayFilters?.layout !== "spreadsheet" && (key === "created_on" || key === "updated_on") ) return null; return ( ); })}
)}
); };