[WEB-3504]chore: issue properties refactor

packages/constants/src/issue/common.ts

@@ -1,8 +1,4 @@
-import {
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  IIssueDisplayProperties,
-} from "@plane/types";
+import { TIssueGroupByOptions, TIssueOrderByOptions, IIssueDisplayProperties } from "@plane/types";
 
 export const ALL_ISSUES = "All Issues";
 
@@ -149,25 +145,24 @@ export const ISSUE_ORDER_BY_OPTIONS: {
   { key: "-priority", titleTranslationKey: "common.priority" },
 ];
 
-export const ISSUE_DISPLAY_PROPERTIES_KEYS: (keyof IIssueDisplayProperties)[] =
-  [
-    "assignee",
-    "start_date",
-    "due_date",
-    "labels",
-    "key",
-    "priority",
-    "state",
-    "sub_issue_count",
-    "link",
-    "attachment_count",
-    "estimate",
-    "created_on",
-    "updated_on",
-    "modules",
-    "cycle",
-    "issue_type",
-  ];
+export const ISSUE_DISPLAY_PROPERTIES_KEYS: (keyof IIssueDisplayProperties)[] = [
+  "assignee",
+  "start_date",
+  "due_date",
+  "labels",
+  "key",
+  "priority",
+  "state",
+  "sub_issue_count",
+  "link",
+  "attachment_count",
+  "estimate",
+  "created_on",
+  "updated_on",
+  "modules",
+  "cycle",
+  "issue_type",
+];
 
 export const ISSUE_DISPLAY_PROPERTIES: {
   key: keyof IIssueDisplayProperties;
@@ -215,3 +210,144 @@ export const ISSUE_DISPLAY_PROPERTIES: {
   { key: "modules", titleTranslationKey: "common.module" },
   { key: "cycle", titleTranslationKey: "common.cycle" },
 ];
+
+export const SPREADSHEET_PROPERTY_LIST: (keyof IIssueDisplayProperties)[] = [
+  "state",
+  "priority",
+  "assignee",
+  "labels",
+  "modules",
+  "cycle",
+  "start_date",
+  "due_date",
+  "estimate",
+  "created_on",
+  "updated_on",
+  "link",
+  "attachment_count",
+  "sub_issue_count",
+];
+
+export const SPREADSHEET_PROPERTY_DETAILS: {
+  [key in keyof IIssueDisplayProperties]: {
+    i18n_title: string;
+    ascendingOrderKey: TIssueOrderByOptions;
+    ascendingOrderTitle: string;
+    descendingOrderKey: TIssueOrderByOptions;
+    descendingOrderTitle: string;
+    icon: string;
+  };
+} = {
+  assignee: {
+    i18n_title: "common.assignees",
+    ascendingOrderKey: "assignees__first_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-assignees__first_name",
+    descendingOrderTitle: "Z",
+    icon: "Users",
+  },
+  created_on: {
+    i18n_title: "common.sort.created_on",
+    ascendingOrderKey: "-created_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "created_at",
+    descendingOrderTitle: "Old",
+    icon: "CalendarDays",
+  },
+  due_date: {
+    i18n_title: "common.order_by.due_date",
+    ascendingOrderKey: "-target_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "target_date",
+    descendingOrderTitle: "Old",
+    icon: "CalendarCheck2",
+  },
+  estimate: {
+    i18n_title: "common.estimate",
+    ascendingOrderKey: "estimate_point__key",
+    ascendingOrderTitle: "Low",
+    descendingOrderKey: "-estimate_point__key",
+    descendingOrderTitle: "High",
+    icon: "Triangle",
+  },
+  labels: {
+    i18n_title: "common.labels",
+    ascendingOrderKey: "labels__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-labels__name",
+    descendingOrderTitle: "Z",
+    icon: "Tag",
+  },
+  modules: {
+    i18n_title: "common.modules",
+    ascendingOrderKey: "issue_module__module__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-issue_module__module__name",
+    descendingOrderTitle: "Z",
+    icon: "DiceIcon",
+  },
+  cycle: {
+    i18n_title: "common.cycle",
+    ascendingOrderKey: "issue_cycle__cycle__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-issue_cycle__cycle__name",
+    descendingOrderTitle: "Z",
+    icon: "ContrastIcon",
+  },
+  priority: {
+    i18n_title: "common.priority",
+    ascendingOrderKey: "priority",
+    ascendingOrderTitle: "None",
+    descendingOrderKey: "-priority",
+    descendingOrderTitle: "Urgent",
+    icon: "Signal",
+  },
+  start_date: {
+    i18n_title: "common.order_by.start_date",
+    ascendingOrderKey: "-start_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "start_date",
+    descendingOrderTitle: "Old",
+    icon: "CalendarClock",
+  },
+  state: {
+    i18n_title: "common.state",
+    ascendingOrderKey: "state__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-state__name",
+    descendingOrderTitle: "Z",
+    icon: "DoubleCircleIcon",
+  },
+  updated_on: {
+    i18n_title: "common.sort.updated_on",
+    ascendingOrderKey: "-updated_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "updated_at",
+    descendingOrderTitle: "Old",
+    icon: "CalendarDays",
+  },
+  link: {
+    i18n_title: "common.link",
+    ascendingOrderKey: "-link_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "link_count",
+    descendingOrderTitle: "Least",
+    icon: "Link2",
+  },
+  attachment_count: {
+    i18n_title: "common.attachment",
+    ascendingOrderKey: "-attachment_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "attachment_count",
+    descendingOrderTitle: "Least",
+    icon: "Paperclip",
+  },
+  sub_issue_count: {
+    i18n_title: "issue.display.properties.sub_issue",
+    ascendingOrderKey: "-sub_issues_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "sub_issues_count",
+    descendingOrderTitle: "Least",
+    icon: "LayersIcon",
+  },
+};

packages/types/src/view-props.d.ts

@@ -1,9 +1,6 @@
-export type TIssueLayouts =
-  | "list"
-  | "kanban"
-  | "calendar"
-  | "spreadsheet"
-  | "gantt_chart";
+import { TIssue } from "./issues/issue";
+
+export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
 
 export type TIssueGroupByOptions =
   | "state"
@@ -211,3 +208,10 @@ export interface IssuePaginationOptions {
   subGroupedBy?: TIssueGroupByOptions;
   orderBy?: TIssueOrderByOptions;
 }
+
+export type TSpreadsheetColumn = React.FC<{
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+}>;

web/ce/components/issues/issue-layouts/additional-properties.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from "react";
+import { IIssueDisplayProperties, TIssue } from "@plane/types";
+
+export type TWorkItemLayoutAdditionalProperties = {
+  displayProperties: IIssueDisplayProperties;
+  issue: TIssue;
+};
+
+export const WorkItemLayoutAdditionalProperties: FC<TWorkItemLayoutAdditionalProperties> = (props) => <></>;

web/ce/components/issues/issue-layouts/utils.tsx

@@ -1,4 +1,69 @@
+import { FC } from "react";
+import {
+  CalendarCheck2,
+  CalendarClock,
+  CalendarDays,
+  ContrastIcon,
+  LayersIcon,
+  Link2,
+  Paperclip,
+  Signal,
+  Tag,
+  Triangle,
+  Users,
+} from "lucide-react";
 // types
-import { IGroupByColumn } from "@plane/types";
+import { IGroupByColumn, IIssueDisplayProperties, TSpreadsheetColumn } from "@plane/types";
+import { DiceIcon, DoubleCircleIcon, ISvgIcons } from "@plane/ui";
+// components
+import {
+  SpreadsheetAssigneeColumn,
+  SpreadsheetAttachmentColumn,
+  SpreadsheetCreatedOnColumn,
+  SpreadsheetDueDateColumn,
+  SpreadsheetEstimateColumn,
+  SpreadsheetLabelColumn,
+  SpreadsheetModuleColumn,
+  SpreadsheetCycleColumn,
+  SpreadsheetLinkColumn,
+  SpreadsheetPriorityColumn,
+  SpreadsheetStartDateColumn,
+  SpreadsheetStateColumn,
+  SpreadsheetSubIssueColumn,
+  SpreadsheetUpdatedOnColumn,
+} from "@/components/issues/issue-layouts/spreadsheet";
 
 export const getTeamProjectColumns = (): IGroupByColumn[] | undefined => undefined;
+
+export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
+  Users: Users,
+  CalenderDays: CalendarDays,
+  CalenderCheck2: CalendarCheck2,
+  Triangle: Triangle,
+  Tag: Tag,
+  DiceIcon: DiceIcon,
+  ContrastIcon: ContrastIcon,
+  Signal: Signal,
+  CalendarClock: CalendarClock,
+  DoubleCircleIcon: DoubleCircleIcon,
+  Link2: Link2,
+  Paperclip: Paperclip,
+  LayersIcon: LayersIcon,
+};
+
+export const SPREADSHEET_COLUMNS: { [key in keyof IIssueDisplayProperties]: TSpreadsheetColumn } = {
+  assignee: SpreadsheetAssigneeColumn,
+  created_on: SpreadsheetCreatedOnColumn,
+  due_date: SpreadsheetDueDateColumn,
+  estimate: SpreadsheetEstimateColumn,
+  labels: SpreadsheetLabelColumn,
+  modules: SpreadsheetModuleColumn,
+  cycle: SpreadsheetCycleColumn,
+  link: SpreadsheetLinkColumn,
+  priority: SpreadsheetPriorityColumn,
+  start_date: SpreadsheetStartDateColumn,
+  state: SpreadsheetStateColumn,
+  sub_issue_count: SpreadsheetSubIssueColumn,
+  updated_on: SpreadsheetUpdatedOnColumn,
+  attachment_count: SpreadsheetAttachmentColumn,
+};

web/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -33,6 +33,8 @@ import { useEventTracker, useLabel, useIssues, useProjectState, useProject, useP
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web components
+import { IssueAdditionalProperties } from "@/plane-web/components/issues/issue-layouts/additional-properties";
 // local components
 import { IssuePropertyLabels } from "./labels";
 import { WithDisplayPropertiesHOC } from "./with-display-properties-HOC";
@@ -508,6 +510,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         </Tooltip>
       </WithDisplayPropertiesHOC>
 
+      {/* Additional Properties */}
+      <IssueAdditionalProperties displayProperties={displayProperties} issue={issue} />
+
       {/* label */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
         <IssuePropertyLabels