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, CustomSearchSelect, 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"; import useProjects from "hooks/use-projects"; 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 { projects } = useProjects(); const { issueView, setIssueView, groupByProperty, setGroupByProperty, orderBy, setOrderBy, showEmptyGroups, setShowEmptyGroups, filters, properties, setProperties, setFilters, } = useProfileIssues(workspaceSlug?.toString(), userId?.toString()); const { isEstimateActive } = useEstimateOption(); const options = projects?.map((project) => ({ value: project.id, query: project.name + " " + project.identifier, content: project.name, })); if ( !router.pathname.includes("assigned") && !router.pathname.includes("created") && !router.pathname.includes("subscribed") ) return null; // return ( // console.log(val)} // label="Filters" // options={options} // position="right" // multiple // /> // ); return (
{issueViewOptions.map((option) => ( {replaceUnderscoreIfSnakeCase(option.type)} View } 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
{issueView !== "calendar" && issueView !== "spreadsheet" && ( <>

Group by

option.key === groupByProperty )?.name ?? "Select" } className="!w-full" buttonClassName="w-full" > {GROUP_BY_OPTIONS.map((option) => { if (issueView === "kanban" && option.key === null) return null; if ( option.key === "state" || option.key === "created_by" || option.key === "assignees" ) return null; return ( setGroupByProperty(option.key)} > {option.name} ); })}

Order by

option.key === orderBy)?.name ?? "Select" } className="!w-full" buttonClassName="w-full" > {ORDER_BY_OPTIONS.map((option) => { if (groupByProperty === "priority" && option.key === "priority") return null; if (option.key === "sort_order") return null; return ( { setOrderBy(option.key); }} > {option.name} ); })}
)}

Issue type

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

Show empty states

)}

Display Properties

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