From fa7a9821339c25ea574d3b4c21fb7402d0909745 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 18 Oct 2023 18:43:32 +0530
Subject: [PATCH] dev: implement spreadsheet navigation using cmdk

---
 .../spreadsheet/spreadsheet-column.tsx        |   6 +-
 .../spreadsheet/spreadsheet-view.tsx          | 183 ++++++++++--------
 2 files changed, 101 insertions(+), 88 deletions(-)

diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
index 994f1c212..1f5bf43a6 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -7,6 +7,7 @@ import {
   ListFilter,
   MoveRight,
 } from "lucide-react";
+import { Command } from "cmdk";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -168,8 +169,9 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
 
       <div className="h-full min-w-[8rem] w-full">
         {issues?.map((issue) => (
-          <div
+          <Command.Item
             key={`${property}-${issue.id}`}
+            value={`${property}-${issue.id}`}
             className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
           >
             {property === "state" ? (
@@ -243,7 +245,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
               />
             ) : null}
-          </div>
+          </Command.Item>
         ))}
       </div>
     </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 2be3a927e..183e6812f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
+import { Command } from "cmdk";
 // components
 import {
   SpreadsheetColumnsList,
@@ -80,66 +81,74 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   }, []);
 
   return (
-    <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
-      <div className="h-full w-full flex flex-col">
-        <div
-          ref={containerRef}
-          className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
-        >
-          {issues ? (
-            <>
-              <div className="sticky left-0 w-[28rem] z-[2]">
-                <div
-                  className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
-                  style={{
-                    boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
-                  }}
-                >
-                  <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-                    {displayProperties.key && (
-                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
-                    )}
-                    <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+    <Command onKeyDown={(e) => console.log(e)}>
+      <Command.Input
+        className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
+        placeholder="Enter"
+        autoFocus
+        tabIndex={1}
+      />
+      <Command.List>
+        <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
+          <div className="h-full w-full flex flex-col">
+            <div
+              ref={containerRef}
+              className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
+            >
+              {issues ? (
+                <>
+                  <div className="sticky left-0 w-[28rem] z-[2]">
+                    <div
+                      className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+                      style={{
+                        boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
+                      }}
+                    >
+                      <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
+                        {displayProperties.key && (
+                          <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
+                        )}
+                        <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+                      </div>
+
+                      {issues.map((issue: IIssue, index) => (
+                        <SpreadsheetIssuesColumn
+                          key={`${issue.id}_${index}`}
+                          issue={issue}
+                          projectId={issue.project_detail.id}
+                          expandedIssues={expandedIssues}
+                          setExpandedIssues={setExpandedIssues}
+                          properties={displayProperties}
+                          handleIssueAction={handleIssueAction}
+                          disableUserActions={disableUserActions}
+                        />
+                      ))}
+                    </div>
                   </div>
 
-                  {issues.map((issue: IIssue, index) => (
-                    <SpreadsheetIssuesColumn
-                      key={`${issue.id}_${index}`}
-                      issue={issue}
-                      projectId={issue.project_detail.id}
-                      expandedIssues={expandedIssues}
-                      setExpandedIssues={setExpandedIssues}
-                      properties={displayProperties}
-                      handleIssueAction={handleIssueAction}
-                      disableUserActions={disableUserActions}
-                    />
-                  ))}
+                  <SpreadsheetColumnsList
+                    displayFilters={displayFilters}
+                    displayProperties={displayProperties}
+                    disableUserActions={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issues={issues}
+                    members={members}
+                    labels={labels}
+                    states={states}
+                  />
+                </>
+              ) : (
+                <div className="grid place-items-center h-full w-full">
+                  <Spinner />
                 </div>
-              </div>
-
-              <SpreadsheetColumnsList
-                displayFilters={displayFilters}
-                displayProperties={displayProperties}
-                disableUserActions={disableUserActions}
-                expandedIssues={expandedIssues}
-                handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-                handleUpdateIssue={handleUpdateIssue}
-                issues={issues}
-                members={members}
-                labels={labels}
-                states={states}
-              />
-            </>
-          ) : (
-            <div className="grid place-items-center h-full w-full">
-              <Spinner />
+              )}
             </div>
-          )}
-        </div>
 
-        <div className="border-t border-custom-border-100">
-          <div className="mb-3 z-50 sticky bottom-0 left-0">
-            {/* <ListInlineCreateIssueForm
+            <div className="border-t border-custom-border-100">
+              <div className="mb-3 z-50 sticky bottom-0 left-0">
+                {/* <ListInlineCreateIssueForm
                 isOpen={isInlineCreateIssueFormOpen}
                 handleClose={() => setIsInlineCreateIssueFormOpen(false)}
                 prePopulatedData={{
@@ -147,43 +156,45 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
               /> */}
-          </div>
+              </div>
 
-          {!disableUserActions &&
-            !isInlineCreateIssueFormOpen &&
-            (type === "issue" ? (
-              <button
-                className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
-                onClick={() => setIsInlineCreateIssueFormOpen(true)}
-              >
-                <PlusIcon className="h-4 w-4" />
-                New Issue
-              </button>
-            ) : (
-              <CustomMenu
-                className="sticky left-0 z-10"
-                customButton={
+              {!disableUserActions &&
+                !isInlineCreateIssueFormOpen &&
+                (type === "issue" ? (
                   <button
-                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
-                    type="button"
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
+                    onClick={() => setIsInlineCreateIssueFormOpen(true)}
                   >
                     <PlusIcon className="h-4 w-4" />
                     New Issue
                   </button>
-                }
-                optionsClassName="left-5 !w-36"
-                noBorder
-              >
-                <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
-                  Create new
-                </CustomMenu.MenuItem>
-                {openIssuesListModal && (
-                  <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-            ))}
+                ) : (
+                  <CustomMenu
+                    className="sticky left-0 z-10"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        New Issue
+                      </button>
+                    }
+                    optionsClassName="left-5 !w-36"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                      Create new
+                    </CustomMenu.MenuItem>
+                    {openIssuesListModal && (
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                ))}
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </Command.List>
+    </Command>
   );
 });