diff --git a/packages/constants/src/issue/common.ts b/packages/constants/src/issue/common.ts index a63dd110d39..cccf44b41d3 100644 --- a/packages/constants/src/issue/common.ts +++ b/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", + }, +}; diff --git a/packages/types/src/view-props.d.ts b/packages/types/src/view-props.d.ts index dca1a652c62..509ee54957f 100644 --- a/packages/types/src/view-props.d.ts +++ b/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, updates: any) => void; + disabled: boolean; +}>; diff --git a/web/ce/components/issues/issue-layouts/additional-properties.tsx b/web/ce/components/issues/issue-layouts/additional-properties.tsx new file mode 100644 index 00000000000..8f8b8ac04c1 --- /dev/null +++ b/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 = (props) => <>; diff --git a/web/ce/components/issues/issue-layouts/utils.tsx b/web/ce/components/issues/issue-layouts/utils.tsx index 48dca43bd92..1c0eed5543c 100644 --- a/web/ce/components/issues/issue-layouts/utils.tsx +++ b/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> = { + 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, +}; diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx index 6ba8a2eed3b..6194f709f7f 100644 --- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx +++ b/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 = observer((props) => { + {/* Additional Properties */} + + {/* label */} ; - }; -} = { - 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, - }, -}; - export const HeaderColumn = (props: Props) => { const { displayFilters, handleDisplayFilterUpdate, property, onClose, isEpic = false } = props; // i18n @@ -190,7 +50,7 @@ export const HeaderColumn = (props: Props) => { customButton={
- {} + {} {property === "sub_issue_count" && isEpic ? t("issue.label", { count: 2 }) : t(propertyDetails.i18n_title)}
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx index b6addcc3269..43e65fa0265 100644 --- a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx +++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx @@ -3,27 +3,12 @@ import { observer } from "mobx-react"; import { usePathname } from "next/navigation"; // types import { IIssueDisplayProperties, TIssue } from "@plane/types"; -// components -import { - SpreadsheetAssigneeColumn, - SpreadsheetAttachmentColumn, - SpreadsheetCreatedOnColumn, - SpreadsheetDueDateColumn, - SpreadsheetEstimateColumn, - SpreadsheetLabelColumn, - SpreadsheetModuleColumn, - SpreadsheetCycleColumn, - SpreadsheetLinkColumn, - SpreadsheetPriorityColumn, - SpreadsheetStartDateColumn, - SpreadsheetStateColumn, - SpreadsheetSubIssueColumn, - SpreadsheetUpdatedOnColumn, -} from "@/components/issues/issue-layouts/spreadsheet"; // hooks import { useEventTracker } from "@/hooks/store"; // components +import { SPREADSHEET_COLUMNS } from "@/plane-web/components/issues/issue-layouts/utils"; import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; +// utils type Props = { displayProperties: IIssueDisplayProperties; @@ -34,30 +19,6 @@ type Props = { isEstimateEnabled: boolean; }; -type TSpreadsheetColumn = React.FC<{ - issue: TIssue; - onClose: () => void; - onChange: (issue: TIssue, data: Partial, updates: any) => void; - disabled: boolean; -}>; - -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, -}; - export const IssueColumn = observer((props: Props) => { const { displayProperties, issueDetail, disableUserActions, property, updateIssue, isEstimateEnabled } = props; // router diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx index 230bb5a2b79..4cdb2aafe4f 100644 --- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx +++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx @@ -1,7 +1,7 @@ import React, { useRef } from "react"; import { observer } from "mobx-react"; // plane constants -import { EIssueLayoutTypes, SPREADSHEET_SELECT_GROUP } from "@plane/constants"; +import { EIssueLayoutTypes, SPREADSHEET_SELECT_GROUP, SPREADSHEET_PROPERTY_LIST } from "@plane/constants"; // types import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types"; // components @@ -18,23 +18,6 @@ import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-sta import { TRenderQuickActions } from "../list/list-view-types"; import { SpreadsheetTable } from "./spreadsheet-table"; -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", -]; - type Props = { displayProperties: IIssueDisplayProperties; displayFilters: IIssueDisplayFilterOptions; diff --git a/web/core/components/issues/issue-layouts/utils.tsx b/web/core/components/issues/issue-layouts/utils.tsx index 8f2e9b5319c..28e5f1b7cdb 100644 --- a/web/core/components/issues/issue-layouts/utils.tsx +++ b/web/core/components/issues/issue-layouts/utils.tsx @@ -1,6 +1,6 @@ "use client"; -import { CSSProperties } from "react"; +import { CSSProperties, FC } from "react"; import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; import clone from "lodash/clone"; import concat from "lodash/concat"; @@ -27,7 +27,7 @@ import { IWorkspaceView, } from "@plane/types"; // plane ui -import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui"; +import { Avatar, CycleGroupIcon, DiceIcon, ISvgIcons, PriorityIcon, StateGroupIcon } from "@plane/ui"; // components import { Logo } from "@/components/common"; // helpers @@ -36,7 +36,7 @@ import { getFileURL } from "@/helpers/file.helper"; // store import { store } from "@/lib/store-context"; // plane web store -import { getTeamProjectColumns } from "@/plane-web/components/issues/issue-layouts/utils"; +import { getTeamProjectColumns, SpreadSheetPropertyIconMap } from "@/plane-web/components/issues/issue-layouts/utils"; // store import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/base-issues.store"; @@ -708,3 +708,14 @@ export const getBlockViewDetails = ( blockStyle, }; }; + +/** + * This method returns the icon for Spreadsheet column headers + * @param iconKey + */ +export const SpreadSheetPropertyIcon: FC = (props) => { + const { iconKey } = props; + const Icon = SpreadSheetPropertyIconMap[iconKey]; + if (!Icon) return null; + return ; +};