github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Virtualization like changes for spreadsheet

Browse Source
This commit is contained in:
rahulramesha 2024-02-01 18:49:58 +05:30
parent 08487fb7d4
commit ff14d037c6
3 changed files with 96 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@ -97,93 +97,90 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
return ( return (
<> <>
<tr {/* first column/ issue name and key column */}
className={cn({ <td
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id, className={cn(
})} "sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200",
{
"border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
},
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
}
)}
> >
{/* first column/ issue name and key column */} <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
<td <div
className={cn( className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
"sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200", style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
{ >
"border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id, <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
} <span
)} className={`flex items-center justify-center font-medium group-hover:opacity-0 ${
> isMenuActive ? "opacity-0" : "opacity-100"
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key"> }`}
<div >
className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0" {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}} </span>
>
<div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
<span
className={`flex items-center justify-center font-medium group-hover:opacity-0 ${
isMenuActive ? "opacity-0" : "opacity-100"
}`}
>
{getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
</span>
{canEditProperties(issueDetail.project_id) && ( {canEditProperties(issueDetail.project_id) && (
<div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}> <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
{quickActions(issueDetail, customActionButton, portalElement.current)} {quickActions(issueDetail, customActionButton, portalElement.current)}
</div>
)}
</div>
{issueDetail.sub_issues_count > 0 && (
<div className="flex h-6 w-6 items-center justify-center">
<button
className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
onClick={() => handleToggleExpand()}
>
<ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
</button>
</div> </div>
)} )}
</div> </div>
</WithDisplayPropertiesHOC>
<ControlLink {issueDetail.sub_issues_count > 0 && (
href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`} <div className="flex h-6 w-6 items-center justify-center">
target="_blank" <button
onClick={() => handleIssuePeekOverview(issueDetail)} className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" onClick={() => handleToggleExpand()}
>
<ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
</button>
</div>
)}
</div>
</WithDisplayPropertiesHOC>
<ControlLink
href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issueDetail)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
>
<div className="w-full overflow-hidden">
<Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
<div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100">
{issueDetail.name}
</div>
</Tooltip>
</div>
</ControlLink>
</td>
{/* Rest of the columns */}
{SPREADSHEET_PROPERTY_LIST.map((property) => {
const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
return (
<WithDisplayPropertiesHOC
displayProperties={displayProperties}
displayPropertyKey={property}
shouldRenderProperty={shouldRenderProperty}
> >
<div className="w-full overflow-hidden"> <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
<Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}> <Column
<div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"> issue={issueDetail}
{issueDetail.name} onChange={(issue: TIssue, data: Partial<TIssue>) =>
</div> handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
</Tooltip> }
</div> disabled={disableUserActions}
</ControlLink> />
</td> </td>
{/* Rest of the columns */} </WithDisplayPropertiesHOC>
{SPREADSHEET_PROPERTY_LIST.map((property) => { );
const { Column } = SPREADSHEET_PROPERTY_DETAILS[property]; })}
const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
return (
<WithDisplayPropertiesHOC
displayProperties={displayProperties}
displayPropertyKey={property}
shouldRenderProperty={shouldRenderProperty}
>
<td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
<Column
issue={issueDetail}
onChange={(issue: TIssue, data: Partial<TIssue>) =>
handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
}
disabled={disableUserActions}
/>
</td>
</WithDisplayPropertiesHOC>
);
})}
</tr>
{isExpanded && {isExpanded &&
subIssues && subIssues &&

28
web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
View File

@ -5,6 +5,9 @@ import { EIssueActions } from "../types";
//components //components
import { SpreadsheetIssueRow } from "./issue-row"; import { SpreadsheetIssueRow } from "./issue-row";
import { SpreadsheetHeader } from "./spreadsheet-header"; import { SpreadsheetHeader } from "./spreadsheet-header";
import { MutableRefObject, useRef } from "react";
import RenderIfVisible from "components/core/render-if-visible-HOC";
import { cn } from "helpers/common.helper";
type Props = { type Props = {
displayProperties: IIssueDisplayProperties; displayProperties: IIssueDisplayProperties;
@ -20,6 +23,7 @@ type Props = {
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>; handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
canEditProperties: (projectId: string | undefined) => boolean; canEditProperties: (projectId: string | undefined) => boolean;
portalElement: React.MutableRefObject<HTMLDivElement | null>; portalElement: React.MutableRefObject<HTMLDivElement | null>;
containerRef: MutableRefObject<HTMLTableElement | null>;
}; };
export const SpreadsheetTable = observer((props: Props) => { export const SpreadsheetTable = observer((props: Props) => {
@ -33,6 +37,7 @@ export const SpreadsheetTable = observer((props: Props) => {
quickActions, quickActions,
handleIssues, handleIssues,
canEditProperties, canEditProperties,
containerRef,
} = props; } = props;
return ( return (
@ -45,17 +50,18 @@ export const SpreadsheetTable = observer((props: Props) => {
/> />
<tbody> <tbody>
{issueIds.map((id) => ( {issueIds.map((id) => (
<SpreadsheetIssueRow <RenderIfVisible key={id} as="tr" defaultHeight={44.5} root={containerRef}>
key={id} <SpreadsheetIssueRow
issueId={id} issueId={id}
displayProperties={displayProperties} displayProperties={displayProperties}
quickActions={quickActions} quickActions={quickActions}
canEditProperties={canEditProperties} canEditProperties={canEditProperties}
nestingLevel={0} nestingLevel={0}
isEstimateEnabled={isEstimateEnabled} isEstimateEnabled={isEstimateEnabled}
handleIssues={handleIssues} handleIssues={handleIssues}
portalElement={portalElement} portalElement={portalElement}
/> />
</RenderIfVisible>
))} ))}
</tbody> </tbody>
</table> </table>

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

@ -112,6 +112,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
quickActions={quickActions} quickActions={quickActions}
handleIssues={handleIssues} handleIssues={handleIssues}
canEditProperties={canEditProperties} canEditProperties={canEditProperties}
containerRef={containerRef}
/> />
</div> </div>
<div className="border-t border-custom-border-100"> <div className="border-t border-custom-border-100">