//ui import { CustomMenu } from "@plane/ui"; import { ArrowDownWideNarrow, ArrowUpNarrowWide, CheckIcon, ChevronDownIcon, Eraser, ListFilter, MoveRight, } from "lucide-react"; //hooks import useLocalStorage from "hooks/use-local-storage"; //types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types"; //constants import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet"; interface Props { property: keyof IIssueDisplayProperties; displayFilters: IIssueDisplayFilterOptions; handleDisplayFilterUpdate: (data: Partial) => void; } export const SpreadsheetHeaderColumn = (props: Props) => { const { displayFilters, handleDisplayFilterUpdate, property } = props; const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage( "spreadsheetViewSorting", "" ); const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage( "spreadsheetViewActiveSortingProperty", "" ); const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property]; const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => { handleDisplayFilterUpdate({ order_by: order }); setSelectedMenuItem(`${order}_${itemKey}`); setActiveSortingProperty(order === "-created_at" ? "" : itemKey); }; return (
{} {propertyDetails.title}
{activeSortingProperty === property && (
)}
} placement="bottom-end" > handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
{propertyDetails.ascendingOrderTitle} {propertyDetails.descendingOrderTitle}
{selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` && }
handleOrderBy(propertyDetails.descendingOrderKey, property)}>
{propertyDetails.descendingOrderTitle} {propertyDetails.ascendingOrderTitle}
{selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` && ( )}
{selectedMenuItem && selectedMenuItem !== "" && displayFilters?.order_by !== "-created_at" && selectedMenuItem.includes(property) && ( handleOrderBy("-created_at", property)} >
Clear sorting
)}
); };