import React from "react"; // hooks import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view"; import useLocalStorage from "hooks/use-local-storage"; // component import { CustomMenu, Icon } from "components/ui"; // icon import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline"; // types import { TIssueOrderByOptions } from "types"; type Props = { columnData: any; gridTemplateColumns: string; }; export const SpreadsheetColumns: React.FC = ({ columnData, gridTemplateColumns }) => { const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage( "spreadsheetViewSorting", "" ); const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage("spreadsheetViewActiveSortingProperty", ""); const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView(); const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => { setDisplayFilters({ order_by: order }); setSelectedMenuItem(`${order}_${itemKey}`); setActiveSortingProperty(order === "-created_at" ? "" : itemKey); }; return (
{columnData.map((col: any) => { if (col.isActive) { return (
{col.propertyName === "title" ? (
{col.colName}
) : ( {activeSortingProperty === col.propertyName && (
)} {col.icon ? (
} width="xl" > { handleOrderBy(col.ascendingOrder, col.propertyName); }} >
{col.propertyName === "assignee" || col.propertyName === "labels" ? ( <> A Z ) : col.propertyName === "due_date" || col.propertyName === "created_on" || col.propertyName === "updated_on" ? ( <> New Old ) : ( <> First Last )}
{ handleOrderBy(col.descendingOrder, col.propertyName); }} >
{col.propertyName === "assignee" || col.propertyName === "labels" ? ( <> Z A ) : col.propertyName === "due_date" ? ( <> Old New ) : ( <> Last First )}
{selectedMenuItem && selectedMenuItem !== "" && displayFilters?.order_by !== "-created_at" && selectedMenuItem.includes(col.propertyName) && ( { handleOrderBy("-created_at", col.propertyName); }} >
Clear sorting
)} )}
); } })} ); };