import { ArrowDownWideNarrow, ArrowUpNarrowWide, CheckIcon, ChevronDownIcon, Eraser, ListFilter, MoveRight, } from "lucide-react"; // hooks import useLocalStorage from "hooks/use-local-storage"; // components import { SpreadsheetAssigneeColumn, SpreadsheetAttachmentColumn, SpreadsheetCreatedOnColumn, SpreadsheetDueDateColumn, SpreadsheetEstimateColumn, SpreadsheetLabelColumn, SpreadsheetLinkColumn, SpreadsheetPriorityColumn, SpreadsheetStartDateColumn, SpreadsheetStateColumn, SpreadsheetSubIssueColumn, SpreadsheetUpdatedOnColumn, } from "components/issues"; // ui import { CustomMenu } from "@plane/ui"; // types import { IIssue, IIssueDisplayFilterOptions, IIssueLabels, IStateResponse, IUserLite, TIssueOrderByOptions, } from "types"; // constants import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet"; type Props = { disableUserActions: boolean; displayFilters: IIssueDisplayFilterOptions; expandedIssues: string[]; handleDisplayFilterUpdate: (data: Partial) => void; handleUpdateIssue: (issue: IIssue, data: Partial) => void; issues: IIssue[] | undefined; property: string; members?: IUserLite[] | undefined; labels?: IIssueLabels[] | undefined; states?: IStateResponse | undefined; }; export const SpreadsheetColumn: React.FC = (props) => { const { disableUserActions, displayFilters, expandedIssues, handleDisplayFilterUpdate, handleUpdateIssue, issues, property, members, labels, states, } = props; const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage( "spreadsheetViewSorting", "" ); const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage( "spreadsheetViewActiveSortingProperty", "" ); const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => { handleDisplayFilterUpdate({ order_by: order }); setSelectedMenuItem(`${order}_${itemKey}`); setActiveSortingProperty(order === "-created_at" ? "" : itemKey); }; const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property]; return (
{activeSortingProperty === property && (
)} {propertyDetails.title}
} width="xl" 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
)}
{issues?.map((issue) => (
{property === "state" ? ( ) => handleUpdateIssue(issue, data)} states={states} /> ) : property === "priority" ? ( ) => handleUpdateIssue(issue, data)} /> ) : property === "estimate" ? ( ) => handleUpdateIssue(issue, data)} /> ) : property === "assignee" ? ( ) => handleUpdateIssue(issue, data)} /> ) : property === "labels" ? ( ) => handleUpdateIssue(issue, data)} /> ) : property === "start_date" ? ( ) => handleUpdateIssue(issue, data)} /> ) : property === "due_date" ? ( ) => handleUpdateIssue(issue, data)} /> ) : property === "created_on" ? ( ) : property === "updated_on" ? ( ) : property === "link" ? ( ) : property === "attachment_count" ? ( ) : property === "sub_issue_count" ? ( ) : null}
))}
); };