chore: added missing columns to the spreadsheet layout (#2640)

web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};

web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx

@@ -142,6 +142,39 @@ export const SpreadsheetColumnsList: React.FC<Props> = observer((props) => {
           property="updated_on"
         />
       )}
+      {displayProperties.link && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="link"
+        />
+      )}
+      {displayProperties.attachment_count && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="attachment_count"
+        />
+      )}
+      {displayProperties.sub_issue_count && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="sub_issue_count"
+        />
+      )}
     </>
   );
 });

web/components/issues/issue-layouts/spreadsheet/columns/index.ts

@@ -1,11 +1,14 @@
 export * from "./issue";
 export * from "./assignee-column";
+export * from "./attachment-column";
 export * from "./columns-list";
 export * from "./created-on-column";
 export * from "./due-date-column";
 export * from "./estimate-column";
 export * from "./label-column";
+export * from "./link-column";
 export * from "./priority-column";
 export * from "./start-date-column";
 export * from "./state-column";
+export * from "./sub-issue-column";
 export * from "./updated-on-column";

web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {issue.link_count} {issue.link_count === 1 ? "link" : "links"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};

web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};

web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx

@@ -12,13 +12,16 @@ 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
@@ -178,7 +181,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               />
             ) : property === "priority" ? (
               <SpreadsheetPriorityColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
@@ -186,7 +188,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               />
             ) : property === "estimate" ? (
               <SpreadsheetEstimateColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
@@ -194,7 +195,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               />
             ) : property === "assignee" ? (
               <SpreadsheetAssigneeColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
@@ -203,7 +203,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               />
             ) : property === "labels" ? (
               <SpreadsheetLabelColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
@@ -212,7 +211,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               />
             ) : property === "start_date" ? (
               <SpreadsheetStartDateColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
@@ -220,24 +218,21 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               />
             ) : property === "due_date" ? (
               <SpreadsheetDueDateColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
             ) : property === "created_on" ? (
-              <SpreadsheetCreatedOnColumn
+              <SpreadsheetCreatedOnColumn expandedIssues={expandedIssues} issue={issue} />
-                key={`${property}-${issue.id}`}
-                expandedIssues={expandedIssues}
-                issue={issue}
-              />
             ) : property === "updated_on" ? (
-              <SpreadsheetUpdatedOnColumn
+              <SpreadsheetUpdatedOnColumn expandedIssues={expandedIssues} issue={issue} />
-                key={`${property}-${issue.id}`}
+            ) : property === "link" ? (
-                expandedIssues={expandedIssues}
+              <SpreadsheetLinkColumn expandedIssues={expandedIssues} issue={issue} />
-                issue={issue}
+            ) : property === "attachment_count" ? (
-              />
+              <SpreadsheetAttachmentColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "sub_issue_count" ? (
+              <SpreadsheetSubIssueColumn expandedIssues={expandedIssues} issue={issue} />
             ) : null}
           </div>
         ))}

web/constants/spreadsheet.ts

@@ -72,4 +72,25 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     descendingOrderKey: "updated_at",
     descendingOrderTitle: "Old",
   },
+  link: {
+    title: "Link",
+    ascendingOrderKey: "-link_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "link_count",
+    descendingOrderTitle: "Least",
+  },
+  attachment_count: {
+    title: "Attachment",
+    ascendingOrderKey: "-attachment_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "attachment_count",
+    descendingOrderTitle: "Least",
+  },
+  sub_issue_count: {
+    title: "Sub-issue",
+    ascendingOrderKey: "-sub_issues_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "sub_issues_count",
+    descendingOrderTitle: "Least",
+  },
 };

web/types/view-props.d.ts

@@ -30,7 +30,13 @@ export type TIssueOrderByOptions =
   | "estimate_point"
   | "-estimate_point"
   | "start_date"
-  | "-start_date";
+  | "-start_date"
+  | "link_count"
+  | "-link_count"
+  | "attachment_count"
+  | "-attachment_count"
+  | "sub_issues_count"
+  | "-sub_issues_count";
 
 export type TIssueTypeFilters = "active" | "backlog" | null;