dev: spreadsheet layout implementation using MobX (#2306)

* dev: implement spreadsheet view using mobx

* refactor: remove console logs and props

web/components/core/views/all-views.tsx

@@ -6,7 +6,7 @@ import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CalendarLayout, GanttLayout, KanBanLayout } from "components/issues";
+import { CalendarLayout, GanttLayout, KanBanLayout, SpreadsheetLayout } from "components/issues";
 
 export const AllViews: React.FC = observer(() => {
   const router = useRouter();
@@ -41,6 +41,8 @@ export const AllViews: React.FC = observer(() => {
         <CalendarLayout />
       ) : activeLayout === "gantt_chart" ? (
         <GanttLayout />
+      ) : activeLayout === "spreadsheet" ? (
+        <SpreadsheetLayout />
       ) : null}
     </div>
   );

web/components/core/views/spreadsheet-view/single-issue.tsx

@@ -1,38 +1,27 @@
 import React, { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
+import { Popover2 } from "@blueprintjs/popover2";
 
+// icons
+import { Icon } from "components/ui";
+import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issue.service";
+import trackEventServices from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
 // components
 import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
 import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
-import { Popover2 } from "@blueprintjs/popover2";
+// helpers
-// icons
-import { Icon } from "components/ui";
-import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-// hooks
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-import useToast from "hooks/use-toast";
-// services
-import issuesService from "services/issue.service";
-import trackEventServices from "services/track_event.service";
-// constant
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-// types
-import { ICurrentUserResponse, IIssue, IState, ISubIssueResponse, Properties, TIssuePriorities, UserAuth } from "types";
-// helper
 import { copyTextToClipboard } from "helpers/string.helper";
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+// types
+import { ICurrentUserResponse, IIssue, IState, Properties, TIssuePriorities, UserAuth } from "types";
+// constant
+import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;
@@ -67,9 +56,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   const router = useRouter();
 
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const { params } = useSpreadsheetIssuesView();
 
   const { setToastAlert } = useToast();
 
@@ -77,59 +64,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
     (formData: Partial<IIssue>, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
 
-      const fetchKey = cycleId
-        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-        : moduleId
-        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-        : viewId
-        ? VIEW_ISSUES(viewId.toString(), params)
-        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
-
-      if (issue.parent)
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      else
-        mutate<IIssue[]>(
-          fetchKey,
-          (prevData) =>
-            (prevData ?? []).map((p) => {
-              if (p.id === issue.id) {
-                return {
-                  ...p,
-                  ...formData,
-                };
-              }
-              return p;
-            }),
-          false
-        );
-
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issue.id as string, formData, user)
         .then(() => {
           if (issue.parent) {
             mutate(SUB_ISSUES(issue.parent as string));
           } else {
-            mutate(fetchKey);
-
             if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
             if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
           }
@@ -138,7 +78,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           console.log(error);
         });
     },
-    [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
+    [workspaceSlug, projectId, cycleId, moduleId, user]
   );
 
   const openPeekOverview = () => {

web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx

@@ -1,48 +1,46 @@
 import React from "react";
 // hooks
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useLocalStorage from "hooks/use-local-storage";
 // component
 import { CustomMenu, Icon } from "components/ui";
 // icon
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
-import { TIssueOrderByOptions } from "types";
+import { IIssueDisplayFilterOptions, TIssueOrderByOptions } from "types";
 
 type Props = {
   columnData: any;
+  displayFilters: IIssueDisplayFilterOptions;
   gridTemplateColumns: string;
+  handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
 };
 
-export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateColumns }) => {
+export const SpreadsheetColumns: React.FC<Props> = (props) => {
+  const { columnData, displayFilters, gridTemplateColumns, handleDisplayFiltersUpdate } = props;
+
   const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
     "spreadsheetViewSorting",
     ""
   );
-  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
-    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
+    "spreadsheetViewActiveSortingProperty",
-
+    ""
-  const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
+  );
 
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    setDisplayFilters({ order_by: order });
+    handleDisplayFiltersUpdate({ order_by: order });
     setSelectedMenuItem(`${order}_${itemKey}`);
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
   };
 
   return (
-    <div
+    <div className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`} style={{ gridTemplateColumns }}>
-      className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`}
-      style={{ gridTemplateColumns }}
-    >
       {columnData.map((col: any) => {
         if (col.isActive) {
           return (
             <div
               className={`bg-custom-background-90 w-full ${
-                col.propertyName === "title"
+                col.propertyName === "title" ? "sticky left-0 z-20 bg-custom-background-90 pl-24" : ""
-                  ? "sticky left-0 z-20 bg-custom-background-90 pl-24"
-                  : ""
               }`}
             >
               {col.propertyName === "title" ? (
@@ -108,10 +106,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                         {col.propertyName === "assignee" || col.propertyName === "labels" ? (
                           <>
                             <span className="relative flex items-center h-6 w-6">
-                              <Icon
+                              <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
-                                iconName="east"
-                                className="absolute left-0 rotate-90 text-xs leading-3"
-                              />
                               <Icon iconName="sort" className="absolute right-0 text-sm" />
                             </span>
                             <span>A</span>
@@ -123,10 +118,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                           col.propertyName === "updated_on" ? (
                           <>
                             <span className="relative flex items-center h-6 w-6">
-                              <Icon
+                              <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
-                                iconName="east"
-                                className="absolute left-0 rotate-90 text-xs leading-3"
-                              />
                               <Icon iconName="sort" className="absolute right-0 text-sm" />
                             </span>
                             <span>New</span>
@@ -136,10 +128,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                         ) : (
                           <>
                             <span className="relative flex items-center h-6 w-6">
-                              <Icon
+                              <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
-                                iconName="east"
-                                className="absolute left-0 rotate-90 text-xs leading-3"
-                              />
                               <Icon iconName="sort" className="absolute right-0 text-sm" />
                             </span>
                             <span>First</span>
@@ -151,18 +140,14 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
 
                       <CheckIcon
                         className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                          selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
+                          selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}` ? "opacity-100" : ""
-                            ? "opacity-100"
-                            : ""
                         }`}
                       />
                     </div>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem
                     className={`mt-0.5 ${
-                      selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
+                      selectedMenuItem === `${col.descendingOrder}_${col.propertyName}` ? "bg-custom-background-80" : ""
-                        ? "bg-custom-background-80"
-                        : ""
                     }`}
                     key={col.property}
                     onClick={() => {
@@ -180,10 +165,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                         {col.propertyName === "assignee" || col.propertyName === "labels" ? (
                           <>
                             <span className="relative flex items-center h-6 w-6">
-                              <Icon
+                              <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
-                                iconName="east"
-                                className="absolute left-0 -rotate-90 text-xs leading-3"
-                              />
                               <Icon
                                 iconName="sort"
                                 className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
@@ -196,10 +178,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                         ) : col.propertyName === "due_date" ? (
                           <>
                             <span className="relative flex items-center h-6 w-6">
-                              <Icon
+                              <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
-                                iconName="east"
-                                className="absolute left-0 -rotate-90 text-xs leading-3"
-                              />
                               <Icon
                                 iconName="sort"
                                 className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
@@ -212,10 +191,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                         ) : (
                           <>
                             <span className="relative flex items-center h-6 w-6">
-                              <Icon
+                              <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
-                                iconName="east"
-                                className="absolute left-0 -rotate-90 text-xs leading-3"
-                              />
                               <Icon
                                 iconName="sort"
                                 className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
@@ -230,9 +206,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
 
                       <CheckIcon
                         className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                          selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
+                          selectedMenuItem === `${col.descendingOrder}_${col.propertyName}` ? "opacity-100" : ""
-                            ? "opacity-100"
-                            : ""
                         }`}
                       />
                     </div>
@@ -243,9 +217,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                     selectedMenuItem.includes(col.propertyName) && (
                       <CustomMenu.MenuItem
                         className={`mt-0.5${
-                          selectedMenuItem === `-created_at_${col.propertyName}`
+                          selectedMenuItem === `-created_at_${col.propertyName}` ? "bg-custom-background-80" : ""
-                            ? "bg-custom-background-80"
-                            : ""
                         }`}
                         key={col.property}
                         onClick={() => {

web/components/core/views/spreadsheet-view/spreadsheet-issues.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 // components
 import { SingleSpreadsheetIssue } from "components/core";

web/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -9,7 +9,6 @@ import { CustomMenu, Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 // types
 import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
 // constants
@@ -39,8 +38,6 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
-  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
-
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const columnData = SPREADSHEET_COLUMN.map((column) => ({
@@ -59,89 +56,89 @@ export const SpreadsheetView: React.FC<Props> = ({
     .map((column) => column.colSize)
     .join(" ");
 
-  return (
+  return null;
-    <>
+
-      <IssuePeekOverview
+  // return (
-        handleMutation={() => mutateIssues()}
+  //   <>
-        projectId={projectId?.toString() ?? ""}
+  //     <IssuePeekOverview
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
+  //       handleMutation={() => mutateIssues()}
-        readOnly={disableUserActions}
+  //       projectId={projectId?.toString() ?? ""}
-      />
+  //       workspaceSlug={workspaceSlug?.toString() ?? ""}
-      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+  //       readOnly={disableUserActions}
-        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+  //     />
-          <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
+  //     <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
-        </div>
+  //       <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
-        {spreadsheetIssues ? (
+  //         <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
-          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+  //       </div>
-            {spreadsheetIssues.map((issue: IIssue, index) => (
+  //       {spreadsheetIssues ? (
-              <SpreadsheetIssues
+  //         <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
-                key={`${issue.id}_${index}`}
+  //           {spreadsheetIssues.map((issue: IIssue, index) => (
-                index={index}
+  //             <SpreadsheetIssues
-                issue={issue}
+  //               key={`${issue.id}_${index}`}
-                expandedIssues={expandedIssues}
+  //               index={index}
-                setExpandedIssues={setExpandedIssues}
+  //               issue={issue}
-                gridTemplateColumns={gridTemplateColumns}
+  //               expandedIssues={expandedIssues}
-                properties={properties}
+  //               setExpandedIssues={setExpandedIssues}
-                handleIssueAction={handleIssueAction}
+  //               gridTemplateColumns={gridTemplateColumns}
-                disableUserActions={disableUserActions}
+  //               properties={properties}
-                user={user}
+  //               handleIssueAction={handleIssueAction}
-                userAuth={userAuth}
+  //               disableUserActions={disableUserActions}
-              />
+  //               user={user}
-            ))}
+  //               userAuth={userAuth}
-            <div
+  //             />
-              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+  //           ))}
-              style={{ gridTemplateColumns }}
+  //           <div
-            >
+  //             className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
-              {type === "issue" ? (
+  //             style={{ gridTemplateColumns }}
-                <button
+  //           >
-                  className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+  //             {type === "issue" ? (
-                  onClick={() => {
+  //               <button
-                    const e = new KeyboardEvent("keydown", { key: "c" });
+  //                 className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
-                    document.dispatchEvent(e);
+  //                 onClick={() => {
-                  }}
+  //                   const e = new KeyboardEvent("keydown", { key: "c" });
-                >
+  //                   document.dispatchEvent(e);
-                  <PlusIcon className="h-4 w-4" />
+  //                 }}
-                  Add Issue
+  //               >
-                </button>
+  //                 <PlusIcon className="h-4 w-4" />
-              ) : (
+  //                 Add Issue
-                !disableUserActions && (
+  //               </button>
-                  <CustomMenu
+  //             ) : (
-                    className="sticky left-0 z-[1]"
+  //               !disableUserActions && (
-                    customButton={
+  //                 <CustomMenu
-                      <button
+  //                   className="sticky left-0 z-[1]"
-                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+  //                   customButton={
-                        type="button"
+  //                     <button
-                      >
+  //                       className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
-                        <PlusIcon className="h-4 w-4" />
+  //                       type="button"
-                        Add Issue
+  //                     >
-                      </button>
+  //                       <PlusIcon className="h-4 w-4" />
-                    }
+  //                       Add Issue
-                    position="left"
+  //                     </button>
-                    optionsClassName="left-5 !w-36"
+  //                   }
-                    noBorder
+  //                   position="left"
-                  >
+  //                   optionsClassName="left-5 !w-36"
-                    <CustomMenu.MenuItem
+  //                   noBorder
-                      onClick={() => {
+  //                 >
-                        const e = new KeyboardEvent("keydown", { key: "c" });
+  //                   <CustomMenu.MenuItem
-                        document.dispatchEvent(e);
+  //                     onClick={() => {
-                      }}
+  //                       const e = new KeyboardEvent("keydown", { key: "c" });
-                    >
+  //                       document.dispatchEvent(e);
-                      Create new
+  //                     }}
-                    </CustomMenu.MenuItem>
+  //                   >
-                    {openIssuesListModal && (
+  //                     Create new
-                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
+  //                   </CustomMenu.MenuItem>
-                        Add an existing issue
+  //                   {openIssuesListModal && (
-                      </CustomMenu.MenuItem>
+  //                     <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
-                    )}
+  //                   )}
-                  </CustomMenu>
+  //                 </CustomMenu>
-                )
+  //               )
-              )}
+  //             )}
-            </div>
+  //           </div>
-          </div>
+  //         </div>
-        ) : (
+  //       ) : (
-          <Spinner />
+  //         <Spinner />
-        )}
+  //       )}
-      </div>
+  //     </div>
-    </>
+  //   </>
-  );
+  // );
 };

web/components/issues/delete-issue-modal.tsx

@@ -12,7 +12,6 @@ import issueServices from "services/issue.service";
 import useIssuesView from "hooks/use-issues-view";
 import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
@@ -54,7 +53,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
 
   const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
   const { setToastAlert } = useToast();
 
@@ -86,13 +84,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
 
           mutate<IIssue[]>(calendarFetchKey, (prevData) => (prevData ?? []).filter((p) => p.id !== data.id), false);
         } else if (displayFilters.layout === "spreadsheet") {
-          const spreadsheetFetchKey = cycleId
-            ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
-            : moduleId
-            ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
-            : viewId
-            ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-            : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, spreadsheetParams);
           if (data.parent) {
             mutate<ISubIssueResponse>(
               SUB_ISSUES(data.parent.toString()),
@@ -107,13 +98,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
               },
               false
             );
-            mutate<IIssue[]>(spreadsheetFetchKey);
-          } 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));

web/components/issues/draft-issue-modal.tsx

@@ -13,7 +13,6 @@ import useUser from "hooks/use-user";
 import useIssuesView from "hooks/use-issues-view";
 import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useLocalStorage from "hooks/use-local-storage";
 import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
@@ -81,7 +80,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
   const { ...viewGanttParams } = params;
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
   const { user } = useUser();
   const { projects } = useProjects();
@@ -156,14 +154,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
     ? VIEW_ISSUES(viewId.toString(), calendarParams)
     : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
 
-  const spreadsheetFetchKey = cycleId
-    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
-    : moduleId
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
-
   const ganttFetchKey = cycleId
     ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
     : moduleId
@@ -187,7 +177,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
             start_target_date: true,
             order_by: "sort_order",
           });
-        if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
         if (groupedIssues) mutateMyIssues();
 
         setToastAlert({
@@ -222,7 +211,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
           if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
           mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
@@ -308,7 +296,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
             start_target_date: true,
             order_by: "sort_order",
           });
-        if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
         if (groupedIssues) mutateMyIssues();
 
         setToastAlert({

web/components/issues/issue-layouts/gantt/root.tsx

@@ -25,9 +25,6 @@ export const GanttLayout: React.FC = observer(() => {
 
   const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
 
-  console.log("issues", issues);
-  console.log("appliedFilters", issueFilterStore.appliedFilters);
-
   return (
     <>
       <IssuePeekOverview
@@ -51,7 +48,6 @@ export const GanttLayout: React.FC = observer(() => {
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
           enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
-          bottomSpacing
         />
       </div>
     </>

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

@@ -2,3 +2,4 @@ export * from "./calendar";
 export * from "./gantt";
 export * from "./header";
 export * from "./kanban";
+export * from "./spreadsheet";

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

@@ -0,0 +1 @@
+export * from "./root";

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

@@ -0,0 +1,160 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
+import { IssuePeekOverview } from "components/issues";
+// ui
+import { CustomMenu, Spinner } from "components/ui";
+// icon
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
+// constants
+import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
+
+export const SpreadsheetLayout: React.FC = observer(() => {
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const issues = issueStore.getIssues;
+  const issueDisplayProperties = issueFilterStore.userDisplayProperties;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
+
+  const columnData = SPREADSHEET_COLUMN.map((column) => ({
+    ...column,
+    isActive: issueDisplayProperties
+      ? column.propertyName === "labels"
+        ? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+        : column.propertyName === "title"
+        ? true
+        : issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+      : false,
+  }));
+
+  const gridTemplateColumns = columnData
+    .filter((column) => column.isActive)
+    .map((column) => column.colSize)
+    .join(" ");
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+          <SpreadsheetColumns
+            columnData={columnData}
+            displayFilters={issueFilterStore.userDisplayFilters}
+            gridTemplateColumns={gridTemplateColumns}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          />
+        </div>
+        {issues ? (
+          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+            {(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => (
+              <SpreadsheetIssues
+                key={`${issue.id}_${index}`}
+                index={index}
+                issue={issue}
+                expandedIssues={expandedIssues}
+                setExpandedIssues={setExpandedIssues}
+                gridTemplateColumns={gridTemplateColumns}
+                properties={issueDisplayProperties}
+                handleIssueAction={() => {}}
+                disableUserActions={!isAllowed}
+                user={user}
+                userAuth={{
+                  isViewer: projectDetails?.member_role === 5,
+                  isGuest: projectDetails?.member_role === 10,
+                  isMember: projectDetails?.member_role === 15,
+                  isOwner: projectDetails?.member_role === 20,
+                }}
+              />
+            ))}
+            <div
+              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+              style={{ gridTemplateColumns }}
+            >
+              {type === "issue" ? (
+                <button
+                  className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", { key: "c" });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  Add Issue
+                </button>
+              ) : (
+                isAllowed && (
+                  <CustomMenu
+                    className="sticky left-0 z-[1]"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        Add Issue
+                      </button>
+                    }
+                    position="left"
+                    optionsClassName="left-5 !w-36"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        const e = new KeyboardEvent("keydown", { key: "c" });
+                        document.dispatchEvent(e);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    {true && <CustomMenu.MenuItem onClick={() => {}}>Add an existing issue</CustomMenu.MenuItem>}
+                  </CustomMenu>
+                )
+              )}
+            </div>
+          </div>
+        ) : (
+          <Spinner />
+        )}
+      </div>
+    </>
+  );
+});

web/components/issues/modal.tsx

@@ -16,7 +16,6 @@ import useIssuesView from "hooks/use-issues-view";
 import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
 import useInboxView from "hooks/use-inbox-view";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useLocalStorage from "hooks/use-local-storage";
@@ -87,7 +86,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const { params: calendarParams } = useCalendarIssuesView();
   const { ...viewGanttParams } = params;
   const { params: inboxParams } = useInboxView();
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
   const { user } = useUser();
   const { projects } = useProjects();
@@ -280,14 +278,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     ? VIEW_ISSUES(viewId.toString(), calendarParams)
     : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
 
-  const spreadsheetFetchKey = cycleId
-    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
-    : moduleId
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
-
   const ganttFetchKey = cycleId
     ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
     : moduleId
@@ -314,7 +304,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
               start_target_date: true,
               order_by: "sort_order",
             });
-          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (groupedIssues) mutateMyIssues();
 
           setToastAlert({
@@ -387,7 +376,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
           if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         }

web/hooks/gantt-chart/issue-view.tsx

@@ -1,41 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issue.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
-  const { displayFilters, filters } = useIssuesView();
-
-  const params: any = {
-    order_by: displayFilters.order_by,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-    sub_issue: displayFilters.sub_issue,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartIssues;

web/hooks/use-spreadsheet-issues-view.tsx

@@ -1,116 +0,0 @@
-import { useContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { issueViewContext } from "contexts/issue-view.context";
-// services
-import issuesService from "services/issue.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-const useSpreadsheetIssuesView = () => {
-  const {
-    display_filters: displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useContext(issueViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const params: any = {
-    order_by: displayFilters?.order_by,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    sub_issue: "false",
-  };
-
-  const { data: projectSpreadsheetIssues, mutate: mutateProjectSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const { data: cycleSpreadsheetIssues, mutate: mutateCycleSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: moduleSpreadsheetIssues, mutate: mutateModuleSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params) : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: viewSpreadsheetIssues, mutate: mutateViewSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
-    workspaceSlug && projectId && viewId && params
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const spreadsheetIssues = cycleId
-    ? (cycleSpreadsheetIssues as IIssue[])
-    : moduleId
-    ? (moduleSpreadsheetIssues as IIssue[])
-    : viewId
-    ? (viewSpreadsheetIssues as IIssue[])
-    : (projectSpreadsheetIssues as IIssue[]);
-
-  return {
-    displayFilters,
-    setDisplayFilters,
-    mutateIssues: cycleId
-      ? mutateCycleSpreadsheetIssues
-      : moduleId
-      ? mutateModuleSpreadsheetIssues
-      : viewId
-      ? mutateViewSpreadsheetIssues
-      : mutateProjectSpreadsheetIssues,
-    spreadsheetIssues: spreadsheetIssues ?? [],
-    filters,
-    setFilters,
-    params,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } as const;
-};
-
-export default useSpreadsheetIssuesView;