feat: created on and updated on column added in spreadsheet view (#1454)

* feat: created on and updated on column added in spreadsheet view

* fix: build fix

* refactor: simplify logic

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

apps/app/components/core/filters/issues-view-filter.tsx

@@ -270,9 +270,16 @@ export const IssuesFilterView: React.FC = () => {
                         if (key === "estimate" && !isEstimateActive) return null;
 
                         if (
-                          (issueView === "spreadsheet" && key === "attachment_count") ||
-                          (issueView === "spreadsheet" && key === "link") ||
-                          (issueView === "spreadsheet" && key === "sub_issue_count")
+                          issueView === "spreadsheet" &&
+                          (key === "attachment_count" ||
+                            key === "link" ||
+                            key === "sub_issue_count")
+                        )
+                          return null;
+
+                        if (
+                          issueView !== "spreadsheet" &&
+                          (key === "created_on" || key === "updated_on")
                         )
                           return null;
 

apps/app/components/core/spreadsheet-view/single-issue.tsx

@@ -42,6 +42,7 @@ import {
 import { ICurrentUserResponse, IIssue, ISubIssueResponse, Properties, UserAuth } from "types";
 // helper
 import { copyTextToClipboard } from "helpers/string.helper";
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 
 type Props = {
   issue: IIssue;
@@ -345,6 +346,16 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           />
         </div>
       )}
+      {properties.created_on && (
+        <div className="flex items-center text-xs cursor-default text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+          {renderLongDetailDateFormat(issue.created_at)}
+        </div>
+      )}
+      {properties.updated_on && (
+        <div className="flex items-center text-xs cursor-default text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+          {renderLongDetailDateFormat(issue.updated_at)}
+        </div>
+      )}
     </div>
   );
 };

apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx

@@ -123,7 +123,9 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                             <Icon iconName="east" className="text-sm" />
                             <span>Z</span>
                           </>
-                        ) : col.propertyName === "due_date" ? (
+                        ) : col.propertyName === "due_date" ||
+                          col.propertyName === "created_on" ||
+                          col.propertyName === "updated_on" ? (
                           <>
                             <span className="relative flex items-center h-6 w-6">
                               <Icon

apps/app/constants/spreadsheet.ts

@@ -59,4 +59,20 @@ export const SPREADSHEET_COLUMN = [
     ascendingOrder: "estimate_point",
     descendingOrder: "-estimate_point",
   },
+  {
+    propertyName: "created_on",
+    colName: "Created On",
+    colSize: "144px",
+    icon: CalendarDaysIcon,
+    ascendingOrder: "-created_at",
+    descendingOrder: "created_at",
+  },
+  {
+    propertyName: "updated_on",
+    colName: "Updated On",
+    colSize: "144px",
+    icon: CalendarDaysIcon,
+    ascendingOrder: "-updated_at",
+    descendingOrder: "updated_at",
+  },
 ];

apps/app/helpers/date-time.helper.ts

@@ -18,6 +18,13 @@ export const renderShortNumericDateFormat = (date: string | Date) =>
     month: "short",
   });
 
+export const renderLongDetailDateFormat = (date: string | Date) =>
+  new Date(date).toLocaleDateString("en-UK", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
 export const findHowManyDaysLeft = (date: string | Date) => {
   const today = new Date();
   const eventDate = new Date(date);

apps/app/hooks/use-issue-properties.tsx

@@ -18,6 +18,8 @@ const initialValues: Properties = {
   attachment_count: false,
   link: false,
   estimate: false,
+  created_on: false,
+  updated_on: false,
 };
 
 const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
@@ -96,6 +98,8 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
     attachment_count: properties.attachment_count,
     link: properties.link,
     estimate: properties.estimate,
+    created_on: properties.created_on,
+    updated_on: properties.updated_on,
   };
 
   return [newProperties, updateIssueProperties] as const;

apps/app/hooks/use-my-issues-filter.tsx

@@ -19,6 +19,8 @@ const initialValues: Properties = {
   attachment_count: false,
   link: false,
   estimate: false,
+  created_on: false,
+  updated_on: false,
 };
 
 const useMyIssuesProperties = (workspaceSlug?: string) => {
@@ -92,6 +94,8 @@ const useMyIssuesProperties = (workspaceSlug?: string) => {
     attachment_count: properties.attachment_count,
     link: properties.link,
     estimate: properties.estimate,
+    created_on: properties.created_on,
+    updated_on: properties.updated_on,
   };
 
   return [newProperties, updateIssueProperties] as const;

apps/app/types/issues.d.ts

@@ -188,6 +188,8 @@ export type Properties = {
   link: boolean;
   attachment_count: boolean;
   estimate: boolean;
+  created_on: boolean;
+  updated_on: boolean;
 };
 
 export interface IIssueLabels {

apps/app/types/workspace.d.ts

@@ -45,6 +45,8 @@ export type Properties = {
   link: boolean;
   attachment_count: boolean;
   estimate: boolean;
+  created_on: boolean;
+  updated_on: boolean;
 };
 
 export interface IWorkspaceMember {