[WEB-1040] chore: list layout sub issue nesting implementation (#4404)

This commit is contained in:
Anmol Singh Bhatia 2024-05-08 14:39:27 +05:30 committed by GitHub
parent f09dd3d782
commit 2aaf0a1637
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 166 additions and 38 deletions

View File

@ -0,0 +1,89 @@
import React, { FC, MutableRefObject, useState } from "react";
import { observer } from "mobx-react";
import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
// components
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
import { IssueBlock } from "@/components/issues/issue-layouts/list";
// hooks
import { useIssueDetail } from "@/hooks/store";
// types
import { TRenderQuickActions } from "./list-view-types";
type Props = {
issueIds: string[];
issueId: string;
issuesMap: TIssueMap;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
canEditProperties: (projectId: string | undefined) => boolean;
displayProperties: IIssueDisplayProperties | undefined;
nestingLevel: number;
spacingLeft?: number;
containerRef: MutableRefObject<HTMLDivElement | null>;
};
export const IssueBlockRoot: FC<Props> = observer((props) => {
const {
issueIds,
issueId,
issuesMap,
updateIssue,
quickActions,
canEditProperties,
displayProperties,
nestingLevel,
spacingLeft = 14,
containerRef,
} = props;
// states
const [isExpanded, setExpanded] = useState<boolean>(false);
// store hooks
const { subIssues: subIssuesStore } = useIssueDetail();
if (!issueId) return null;
const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
return (
<>
<RenderIfVisible
key={`${issueId}`}
defaultHeight="3rem"
root={containerRef}
classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
changingReference={issueIds}
>
<IssueBlock
issueId={issueId}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
displayProperties={displayProperties}
isExpanded={isExpanded}
setExpanded={setExpanded}
nestingLevel={nestingLevel}
spacingLeft={spacingLeft}
/>
</RenderIfVisible>
{isExpanded &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssueId: string) => (
<IssueBlockRoot
key={`${subIssueId}`}
issueIds={issueIds}
issueId={subIssueId}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
displayProperties={displayProperties}
nestingLevel={nestingLevel + 1}
spacingLeft={spacingLeft + (displayProperties?.key ? 19 : 0)}
containerRef={containerRef}
/>
))}
</>
);
});

View File

@ -1,15 +1,18 @@
import { useRef } from "react";
import { Dispatch, MouseEvent, SetStateAction, useRef } from "react";
import { observer } from "mobx-react-lite";
import { ChevronRight } from "lucide-react";
// types
import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
// ui
import { Spinner, Tooltip, ControlLink } from "@plane/ui";
// components
import { IssueProperties } from "@/components/issues/issue-layouts/properties";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// types
import { IssueProperties } from "../properties/all-properties";
import { TRenderQuickActions } from "./list-view-types";
interface IssueBlockProps {
@ -19,18 +22,35 @@ interface IssueBlockProps {
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
canEditProperties: (projectId: string | undefined) => boolean;
nestingLevel: number;
spacingLeft?: number;
isExpanded: boolean;
setExpanded: Dispatch<SetStateAction<boolean>>;
}
export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
const { issuesMap, issueId, updateIssue, quickActions, displayProperties, canEditProperties } = props;
const {
issuesMap,
issueId,
updateIssue,
quickActions,
displayProperties,
canEditProperties,
nestingLevel,
spacingLeft = 14,
isExpanded,
setExpanded,
} = props;
// refs
const parentRef = useRef(null);
// hooks
const {
router: { workspaceSlug },
} = useApplication();
// store hooks
const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
const { getIsIssuePeeked, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug &&
@ -47,19 +67,42 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
const canEditIssueProperties = canEditProperties(issue.project_id);
const projectIdentifier = getProjectIdentifierById(issue.project_id);
const paddingLeft = `${spacingLeft}px`;
const handleToggleExpand = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
e.preventDefault();
if (nestingLevel >= 3) {
handleIssuePeekOverview(issue);
} else {
setExpanded((prevState) => {
if (!prevState && workspaceSlug && issue)
subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issue.project_id, issue.id);
return !prevState;
});
}
};
return (
<div
ref={parentRef}
className={cn(
"min-h-[52px] relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
"min-h-[52px] relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-8 text-sm",
{
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
"last:border-b-transparent": !getIsIssuePeeked(issue.id),
}
)}
>
<div className="flex w-full truncate">
<div className="flex w-full truncate" style={issue.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}>
<div className="flex flex-grow items-center gap-3 truncate">
<div className="flex items-center gap-1.5">
<button
className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
</button>
{displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{projectIdentifier}-{issue.sequence_id}
@ -69,6 +112,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
</div>
{issue?.is_draft ? (
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>

View File

@ -1,10 +1,9 @@
import { FC, MutableRefObject } from "react";
// components
import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
import { IssueBlock } from "@/components/issues";
import { TRenderQuickActions } from "./list-view-types";
import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
// types
import { TRenderQuickActions } from "./list-view-types";
interface Props {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
@ -22,27 +21,21 @@ export const IssueBlocksList: FC<Props> = (props) => {
return (
<div className="relative h-full w-full">
{issueIds && issueIds.length > 0 ? (
issueIds.map((issueId: string) => {
if (!issueId) return null;
return (
<RenderIfVisible
issueIds.map((issueId: string) => (
<IssueBlockRoot
key={`${issueId}`}
defaultHeight="3rem"
root={containerRef}
classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
changingReference={issueIds}
>
<IssueBlock
issueIds={issueIds}
issueId={issueId}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
displayProperties={displayProperties}
nestingLevel={0}
spacingLeft={0}
containerRef={containerRef}
/>
</RenderIfVisible>
);
})
))
) : (
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
)}

View File

@ -1,4 +1,5 @@
export * from "./roots";
export * from "./block-root";
export * from "./block";
export * from "./roots";
export * from "./blocks-list";

View File

@ -1 +1,2 @@
export * from "./labels";
export * from "./all-properties";