thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

dev: implement spreadsheet navigation using cmdk

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-18 18:43:32 +05:30
parent 54c7246ad3
commit fa7a982133
2 changed files with 101 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View File

@ -7,6 +7,7 @@ import {
ListFilter, ListFilter,
MoveRight, MoveRight,
} from "lucide-react"; } from "lucide-react";
import { Command } from "cmdk";
// hooks // hooks
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
// components // components
@ -168,8 +169,9 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
<div className="h-full min-w-[8rem] w-full"> <div className="h-full min-w-[8rem] w-full">
{issues?.map((issue) => ( {issues?.map((issue) => (
<div <Command.Item
key={`${property}-${issue.id}`} 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" className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
> >
{property === "state" ? ( {property === "state" ? (
@ -243,7 +245,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
issue={issue} issue={issue}
/> />
) : null} ) : null}
</div> </Command.Item>
))} ))}
</div> </div>
</div> </div>

183
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { PlusIcon } from "lucide-react"; import { PlusIcon } from "lucide-react";
import { Command } from "cmdk";
// components // components
import { import {
SpreadsheetColumnsList, SpreadsheetColumnsList,
@ -80,66 +81,74 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
}, []); }, []);
return ( return (
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200"> <Command onKeyDown={(e) => console.log(e)}>
<div className="h-full w-full flex flex-col"> <Command.Input
<div 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"
ref={containerRef} placeholder="Enter"
className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200" autoFocus
> tabIndex={1}
{issues ? ( />
<> <Command.List>
<div className="sticky left-0 w-[28rem] z-[2]"> <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
<div <div className="h-full w-full flex flex-col">
className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]" <div
style={{ ref={containerRef}
boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "", className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
}} >
> {issues ? (
<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 && ( <div className="sticky left-0 w-[28rem] z-[2]">
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span> <div
)} className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
<span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span> 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> </div>
{issues.map((issue: IIssue, index) => ( <SpreadsheetColumnsList
<SpreadsheetIssuesColumn displayFilters={displayFilters}
key={`${issue.id}_${index}`} displayProperties={displayProperties}
issue={issue} disableUserActions={disableUserActions}
projectId={issue.project_detail.id} expandedIssues={expandedIssues}
expandedIssues={expandedIssues} handleDisplayFilterUpdate={handleDisplayFilterUpdate}
setExpandedIssues={setExpandedIssues} handleUpdateIssue={handleUpdateIssue}
properties={displayProperties} issues={issues}
handleIssueAction={handleIssueAction} members={members}
disableUserActions={disableUserActions} labels={labels}
/> states={states}
))} />
</>
) : (
<div className="grid place-items-center h-full w-full">
<Spinner />
</div> </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>
<div className="border-t border-custom-border-100"> <div className="border-t border-custom-border-100">
<div className="mb-3 z-50 sticky bottom-0 left-0"> <div className="mb-3 z-50 sticky bottom-0 left-0">
{/* <ListInlineCreateIssueForm {/* <ListInlineCreateIssueForm
isOpen={isInlineCreateIssueFormOpen} isOpen={isInlineCreateIssueFormOpen}
handleClose={() => setIsInlineCreateIssueFormOpen(false)} handleClose={() => setIsInlineCreateIssueFormOpen(false)}
prePopulatedData={{ prePopulatedData={{
@ -147,43 +156,45 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
...(moduleId && { module: moduleId.toString() }), ...(moduleId && { module: moduleId.toString() }),
}} }}
/> */} /> */}
</div> </div>
{!disableUserActions && {!disableUserActions &&
!isInlineCreateIssueFormOpen && !isInlineCreateIssueFormOpen &&
(type === "issue" ? ( (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={
<button <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" 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"
type="button" onClick={() => setIsInlineCreateIssueFormOpen(true)}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
New Issue New Issue
</button> </button>
} ) : (
optionsClassName="left-5 !w-36" <CustomMenu
noBorder className="sticky left-0 z-10"
> customButton={
<CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}> <button
Create new 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"
</CustomMenu.MenuItem> type="button"
{openIssuesListModal && ( >
<CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem> <PlusIcon className="h-4 w-4" />
)} New Issue
</CustomMenu> </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>
</div> </Command>
); );
}); });