From 5ada1e539784299ed6d14e3476e8e06164ed8a0d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sat, 24 Jun 2023 00:35:43 +0530
Subject: [PATCH] fix: spreadsheet view bug fixes (#1383)

* fix: due date sorting fix

* fix: update and delete sub-issue fix
---
 .../core/spreadsheet-view/single-issue.tsx    |  4 +--
 .../spreadsheet-view/spreadsheet-issues.tsx   |  4 +--
 .../components/issues/delete-issue-modal.tsx  | 28 +++++++++++++++----
 apps/app/components/issues/modal.tsx          |  1 +
 apps/app/constants/spreadsheet.ts             |  4 +--
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index f763e706c5..bae89d8bbf 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -38,7 +38,7 @@ type Props = {
   expanded: boolean;
   handleToggleExpand: (issueId: string) => void;
   properties: Properties;
-  handleEditIssue: () => void;
+  handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
   gridTemplateColumns: string;
   user: ICurrentUserResponse | undefined;
@@ -245,7 +245,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       >
         {!isNotAllowed && (
           <CustomMenu width="auto" position="left" ellipsis>
-            <CustomMenu.MenuItem onClick={handleEditIssue}>
+            <CustomMenu.MenuItem onClick={() => handleEditIssue(issue)}>
               <div className="flex items-center justify-start gap-2">
                 <PencilIcon className="h-4 w-4" />
                 <span>Edit issue</span>
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
index 8652b3a7ea..0edfbceb1c 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
@@ -59,7 +59,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
         handleToggleExpand={handleToggleExpand}
         gridTemplateColumns={gridTemplateColumns}
         properties={properties}
-        handleEditIssue={() => handleEditIssue(issue)}
+        handleEditIssue={handleEditIssue}
         handleDeleteIssue={handleDeleteIssue}
         user={user}
         userAuth={userAuth}
@@ -78,7 +78,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
             setExpandedIssues={setExpandedIssues}
             gridTemplateColumns={gridTemplateColumns}
             properties={properties}
-            handleEditIssue={() => handleEditIssue(subIssue)}
+            handleEditIssue={handleEditIssue}
             handleDeleteIssue={handleDeleteIssue}
             user={user}
             userAuth={userAuth}
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index 000b21387c..6ac9282ad9 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -18,12 +18,13 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
 import { SecondaryButton, DangerButton } from "components/ui";
 // types
-import type { IIssue, ICurrentUserResponse } from "types";
+import type { IIssue, ICurrentUserResponse, ISubIssueResponse } from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
+  SUB_ISSUES,
   VIEW_ISSUES,
 } from "constants/fetch-keys";
 
@@ -84,12 +85,27 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
             : viewId
             ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
             : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", spreadsheetParams);
+          if (data.parent) {
+            mutate<ISubIssueResponse>(
+              SUB_ISSUES(data.parent.toString()),
+              (prevData) => {
+                if (!prevData) return prevData;
+                const updatedArray = (prevData.sub_issues ?? []).filter((i) => i.id !== data.id);
 
-          mutate<IIssue[]>(
-            spreadsheetFetchKey,
-            (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
-            false
-          );
+                return {
+                  ...prevData,
+                  sub_issues: updatedArray,
+                };
+              },
+              false
+            );
+          } else {
+            mutate<IIssue[]>(
+              spreadsheetFetchKey,
+              (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
+              false
+            );
+          }
         } else {
           if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
           else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index d88ad674d3..dd5262453c 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -276,6 +276,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         } else {
           if (issueView === "calendar") mutate(calendarFetchKey);
           if (issueView === "spreadsheet") mutate(spreadsheetFetchKey);
+          if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         }
 
diff --git a/apps/app/constants/spreadsheet.ts b/apps/app/constants/spreadsheet.ts
index 8e4bdb21d5..d58ebc861a 100644
--- a/apps/app/constants/spreadsheet.ts
+++ b/apps/app/constants/spreadsheet.ts
@@ -48,8 +48,8 @@ export const SPREADSHEET_COLUMN = [
     colName: "Due Date",
     colSize: "128px",
     icon: CalendarDaysIcon,
-    ascendingOrder: "target_date",
-    descendingOrder: "-target_date",
+    ascendingOrder: "-target_date",
+    descendingOrder: "target_date",
   },
   {
     propertyName: "estimate",