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

refactor: spreadsheet layout components

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-18 18:39:57 +05:30
parent 2ae71b76c5
commit f82b876379
3 changed files with 163 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,7 @@ export const IssueColumn: React.FC<Props> = ({
const paddingLeft = `${nestingLevel * 54}px`; const paddingLeft = `${nestingLevel * 54}px`;
return ( return (
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100"> <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
{properties.key && ( {properties.key && (
<div <div
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]" className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"

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

@ -34,7 +34,6 @@ import {
} from "types"; } from "types";
// constants // constants
import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet"; import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
import { Command } from "cmdk";
type Props = { type Props = {
disableUserActions: boolean; disableUserActions: boolean;
@ -166,90 +165,83 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
)} )}
</CustomMenu> </CustomMenu>
</div> </div>
<div className="h-full min-w-[8rem] w-full"> <div className="h-full min-w-[8rem] w-full">
<Command.Group> {issues?.map((issue) => (
<> <div className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200">
{issues?.map((issue) => ( {property === "state" ? (
<Command.Item <SpreadsheetStateColumn
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
states={states}
/>
) : property === "priority" ? (
<SpreadsheetPriorityColumn
key={`${property}-${issue.id}`} key={`${property}-${issue.id}`}
value={`${property}-${issue.id}`} disabled={disableUserActions}
className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200" expandedIssues={expandedIssues}
> issue={issue}
{property === "state" ? ( onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
<SpreadsheetStateColumn />
disabled={disableUserActions} ) : property === "estimate" ? (
expandedIssues={expandedIssues} <SpreadsheetEstimateColumn
issue={issue} key={`${property}-${issue.id}`}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} disabled={disableUserActions}
states={states} expandedIssues={expandedIssues}
/> issue={issue}
) : property === "priority" ? ( onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
<SpreadsheetPriorityColumn />
key={`${property}-${issue.id}`} ) : property === "assignee" ? (
disabled={disableUserActions} <SpreadsheetAssigneeColumn
expandedIssues={expandedIssues} key={`${property}-${issue.id}`}
issue={issue} disabled={disableUserActions}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} expandedIssues={expandedIssues}
/> issue={issue}
) : property === "estimate" ? ( members={members}
<SpreadsheetEstimateColumn onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
key={`${property}-${issue.id}`} />
disabled={disableUserActions} ) : property === "labels" ? (
expandedIssues={expandedIssues} <SpreadsheetLabelColumn
issue={issue} key={`${property}-${issue.id}`}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} disabled={disableUserActions}
/> expandedIssues={expandedIssues}
) : property === "assignee" ? ( issue={issue}
<SpreadsheetAssigneeColumn labels={labels}
key={`${property}-${issue.id}`} onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
disabled={disableUserActions} />
expandedIssues={expandedIssues} ) : property === "start_date" ? (
issue={issue} <SpreadsheetStartDateColumn
members={members} key={`${property}-${issue.id}`}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} disabled={disableUserActions}
/> expandedIssues={expandedIssues}
) : property === "labels" ? ( issue={issue}
<SpreadsheetLabelColumn onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
key={`${property}-${issue.id}`} />
disabled={disableUserActions} ) : property === "due_date" ? (
expandedIssues={expandedIssues} <SpreadsheetDueDateColumn
issue={issue} key={`${property}-${issue.id}`}
labels={labels} disabled={disableUserActions}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} expandedIssues={expandedIssues}
/> issue={issue}
) : property === "start_date" ? ( onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
<SpreadsheetStartDateColumn />
key={`${property}-${issue.id}`} ) : property === "created_on" ? (
disabled={disableUserActions} <SpreadsheetCreatedOnColumn
expandedIssues={expandedIssues} key={`${property}-${issue.id}`}
issue={issue} expandedIssues={expandedIssues}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} issue={issue}
/> />
) : property === "due_date" ? ( ) : property === "updated_on" ? (
<SpreadsheetDueDateColumn <SpreadsheetUpdatedOnColumn
key={`${property}-${issue.id}`} key={`${property}-${issue.id}`}
disabled={disableUserActions} expandedIssues={expandedIssues}
expandedIssues={expandedIssues} issue={issue}
issue={issue} />
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)} ) : null}
/> </div>
) : property === "created_on" ? ( ))}
<SpreadsheetCreatedOnColumn
key={`${property}-${issue.id}`}
expandedIssues={expandedIssues}
issue={issue}
/>
) : property === "updated_on" ? (
<SpreadsheetUpdatedOnColumn
key={`${property}-${issue.id}`}
expandedIssues={expandedIssues}
issue={issue}
/>
) : null}
</Command.Item>
))}
</>
</Command.Group>
</div> </div>
</div> </div>
); );

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

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