mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Implemented nested issues in the sub issues section in issue detail page (#2233)
* feat: subissues infinte level * feat: updated UI for sub issues * feat: subissues new ui and nested sub issues in issue detail * chore: removed repeated code
This commit is contained in:
guru_sainath
GitHub
parent
60ae940d40
commit
bd077e6500
@ -35,6 +35,7 @@ type Props = {
|
|||||||
data: IIssue | null;
|
data: IIssue | null;
|
||||||
user: ICurrentUserResponse | undefined;
|
user: ICurrentUserResponse | undefined;
|
||||||
onSubmit?: () => Promise<void>;
|
onSubmit?: () => Promise<void>;
|
||||||
|
redirection?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DeleteIssueModal: React.FC<Props> = ({
|
export const DeleteIssueModal: React.FC<Props> = ({
|
||||||
@ -43,6 +44,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
|
|||||||
data,
|
data,
|
||||||
user,
|
user,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
|
redirection = true,
|
||||||
}) => {
|
}) => {
|
||||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
|
||||||
@ -132,7 +134,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
|
|||||||
message: "Issue deleted successfully",
|
message: "Issue deleted successfully",
|
||||||
});
|
});
|
||||||
|
|
||||||
if (issueId) router.back();
|
if (issueId && redirection) router.back();
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|||||||
@ -12,7 +12,6 @@ export * from "./main-content";
|
|||||||
export * from "./modal";
|
export * from "./modal";
|
||||||
export * from "./parent-issues-list-modal";
|
export * from "./parent-issues-list-modal";
|
||||||
export * from "./sidebar";
|
export * from "./sidebar";
|
||||||
export * from "./sub-issues-list";
|
|
||||||
export * from "./label";
|
export * from "./label";
|
||||||
export * from "./issue-reaction";
|
export * from "./issue-reaction";
|
||||||
export * from "./peek-overview";
|
export * from "./peek-overview";
|
||||||
|
|||||||
@ -18,9 +18,9 @@ import {
|
|||||||
IssueAttachmentUpload,
|
IssueAttachmentUpload,
|
||||||
IssueAttachments,
|
IssueAttachments,
|
||||||
IssueDescriptionForm,
|
IssueDescriptionForm,
|
||||||
SubIssuesList,
|
|
||||||
IssueReaction,
|
IssueReaction,
|
||||||
} from "components/issues";
|
} from "components/issues";
|
||||||
|
import { SubIssuesRoot } from "./sub-issues";
|
||||||
// ui
|
// ui
|
||||||
import { CustomMenu } from "components/ui";
|
import { CustomMenu } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
|
|||||||
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
|
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
|
||||||
|
|
||||||
<div className="mt-2 space-y-2">
|
<div className="mt-2 space-y-2">
|
||||||
<SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
|
<SubIssuesRoot parentIssue={issueDetails} user={user} editable={uneditable} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-3 py-3">
|
<div className="flex flex-col gap-3 py-3">
|
||||||
|
|||||||
@ -1,251 +0,0 @@
|
|||||||
import { FC, useState } from "react";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
|
|
||||||
// headless ui
|
|
||||||
import { Disclosure, Transition } from "@headlessui/react";
|
|
||||||
// services
|
|
||||||
import issuesService from "services/issues.service";
|
|
||||||
// contexts
|
|
||||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
|
||||||
// components
|
|
||||||
import { ExistingIssuesListModal } from "components/core";
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues";
|
|
||||||
// ui
|
|
||||||
import { CustomMenu } from "components/ui";
|
|
||||||
// icons
|
|
||||||
import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
|
||||||
// types
|
|
||||||
import { ICurrentUserResponse, IIssue, ISearchIssueResponse, ISubIssueResponse } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { SUB_ISSUES } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
parentIssue: IIssue;
|
|
||||||
user: ICurrentUserResponse | undefined;
|
|
||||||
disabled?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }) => {
|
|
||||||
// states
|
|
||||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
|
||||||
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
|
|
||||||
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug } = router.query;
|
|
||||||
|
|
||||||
const { memberRole } = useProjectMyMembership();
|
|
||||||
|
|
||||||
const { data: subIssuesResponse } = useSWR(
|
|
||||||
workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
|
|
||||||
workspaceSlug && parentIssue
|
|
||||||
? () => issuesService.subIssues(workspaceSlug as string, parentIssue.project, parentIssue.id)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const addAsSubIssue = async (data: ISearchIssueResponse[]) => {
|
|
||||||
if (!workspaceSlug || !parentIssue) return;
|
|
||||||
|
|
||||||
const payload = {
|
|
||||||
sub_issue_ids: data.map((i) => i.id),
|
|
||||||
};
|
|
||||||
|
|
||||||
await issuesService
|
|
||||||
.addSubIssues(workspaceSlug as string, parentIssue.project, parentIssue.id, payload)
|
|
||||||
.finally(() => mutate(SUB_ISSUES(parentIssue.id)));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubIssueRemove = (issue: IIssue) => {
|
|
||||||
if (!workspaceSlug || !parentIssue) return;
|
|
||||||
|
|
||||||
mutate<ISubIssueResponse>(
|
|
||||||
SUB_ISSUES(parentIssue.id),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
|
|
||||||
const stateDistribution = { ...prevData.state_distribution };
|
|
||||||
|
|
||||||
const issueGroup = issue.state_detail.group;
|
|
||||||
stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1;
|
|
||||||
|
|
||||||
return {
|
|
||||||
state_distribution: stateDistribution,
|
|
||||||
sub_issues: prevData.sub_issues.filter((i) => i.id !== issue.id),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
issuesService
|
|
||||||
.patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user)
|
|
||||||
.finally(() => mutate(SUB_ISSUES(parentIssue.id)));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateIssueModal = () => {
|
|
||||||
setCreateIssueModal(true);
|
|
||||||
|
|
||||||
setPreloadedData({
|
|
||||||
parent: parentIssue.id,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const completedSubIssue = subIssuesResponse?.state_distribution.completed ?? 0;
|
|
||||||
const cancelledSubIssue = subIssuesResponse?.state_distribution.cancelled ?? 0;
|
|
||||||
|
|
||||||
const totalCompletedSubIssues = completedSubIssue + cancelledSubIssue;
|
|
||||||
|
|
||||||
const totalSubIssues = subIssuesResponse ? subIssuesResponse.sub_issues.length : 0;
|
|
||||||
|
|
||||||
const completionPercentage = (totalCompletedSubIssues / totalSubIssues) * 100;
|
|
||||||
|
|
||||||
const isNotAllowed = memberRole.isGuest || memberRole.isViewer || disabled;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CreateUpdateIssueModal
|
|
||||||
isOpen={createIssueModal}
|
|
||||||
prePopulateData={{ ...preloadedData }}
|
|
||||||
handleClose={() => setCreateIssueModal(false)}
|
|
||||||
/>
|
|
||||||
<ExistingIssuesListModal
|
|
||||||
isOpen={subIssuesListModal}
|
|
||||||
handleClose={() => setSubIssuesListModal(false)}
|
|
||||||
searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
|
|
||||||
handleOnSubmit={addAsSubIssue}
|
|
||||||
workspaceLevelToggle
|
|
||||||
/>
|
|
||||||
{subIssuesResponse && subIssuesResponse.sub_issues.length > 0 ? (
|
|
||||||
<Disclosure defaultOpen={true}>
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center justify-start gap-3 text-custom-text-200">
|
|
||||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-100 hover:bg-custom-background-80">
|
|
||||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
|
||||||
Sub-issues{" "}
|
|
||||||
<span className="ml-1 text-custom-text-200">
|
|
||||||
{subIssuesResponse.sub_issues.length}
|
|
||||||
</span>
|
|
||||||
</Disclosure.Button>
|
|
||||||
<div className="flex w-60 items-center gap-2">
|
|
||||||
<div className="bar relative h-1.5 w-full rounded bg-custom-background-80">
|
|
||||||
<div
|
|
||||||
className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
|
|
||||||
style={{
|
|
||||||
width: `${
|
|
||||||
isNaN(completionPercentage)
|
|
||||||
? 0
|
|
||||||
: completionPercentage > 100
|
|
||||||
? 100
|
|
||||||
: completionPercentage.toFixed(0)
|
|
||||||
}%`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="whitespace-nowrap text-xs">
|
|
||||||
{isNaN(completionPercentage)
|
|
||||||
? 0
|
|
||||||
: completionPercentage > 100
|
|
||||||
? 100
|
|
||||||
: completionPercentage.toFixed(0)}
|
|
||||||
% Done
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{open && !isNotAllowed ? (
|
|
||||||
<div className="flex items-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80"
|
|
||||||
onClick={handleCreateIssueModal}
|
|
||||||
>
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Create new
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<CustomMenu ellipsis>
|
|
||||||
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
|
|
||||||
Add an existing issue
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<Transition
|
|
||||||
enter="transition duration-100 ease-out"
|
|
||||||
enterFrom="transform scale-95 opacity-0"
|
|
||||||
enterTo="transform scale-100 opacity-100"
|
|
||||||
leave="transition duration-75 ease-out"
|
|
||||||
leaveFrom="transform scale-100 opacity-100"
|
|
||||||
leaveTo="transform scale-95 opacity-0"
|
|
||||||
>
|
|
||||||
<Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
|
|
||||||
{subIssuesResponse.sub_issues.map((issue) => (
|
|
||||||
<Link
|
|
||||||
key={issue.id}
|
|
||||||
href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
|
|
||||||
>
|
|
||||||
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-90">
|
|
||||||
<div className="flex items-center gap-2 rounded text-xs">
|
|
||||||
<span
|
|
||||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: issue.state_detail.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span className="flex-shrink-0 text-custom-text-200">
|
|
||||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
|
||||||
</span>
|
|
||||||
<span className="max-w-sm break-words font-medium">{issue.name}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!isNotAllowed && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="cursor-pointer opacity-0 group-hover:opacity-100"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
handleSubIssueRemove(issue);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</Disclosure.Panel>
|
|
||||||
</Transition>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
) : (
|
|
||||||
!isNotAllowed && (
|
|
||||||
<CustomMenu
|
|
||||||
label={
|
|
||||||
<>
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Add sub-issue
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
buttonClassName="whitespace-nowrap"
|
|
||||||
position="left"
|
|
||||||
noBorder
|
|
||||||
noChevron
|
|
||||||
>
|
|
||||||
<CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
|
|
||||||
Add an existing issue
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
1
web/components/issues/sub-issues/index.ts
Normal file
1
web/components/issues/sub-issues/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from "./root";
|
||||||
171
web/components/issues/sub-issues/issue.tsx
Normal file
171
web/components/issues/sub-issues/issue.tsx
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
import React from "react";
|
||||||
|
// next imports
|
||||||
|
import Link from "next/link";
|
||||||
|
// lucide icons
|
||||||
|
import {
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
X,
|
||||||
|
Pencil,
|
||||||
|
Trash,
|
||||||
|
Link as LinkIcon,
|
||||||
|
Loader,
|
||||||
|
} from "lucide-react";
|
||||||
|
// components
|
||||||
|
import { SubIssuesRootList } from "./issues-list";
|
||||||
|
import { IssueProperty } from "./properties";
|
||||||
|
// ui
|
||||||
|
import { Tooltip, CustomMenu } from "components/ui";
|
||||||
|
|
||||||
|
// types
|
||||||
|
import { ICurrentUserResponse, IIssue } from "types";
|
||||||
|
|
||||||
|
export interface ISubIssues {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
parentIssue: IIssue;
|
||||||
|
issue: any;
|
||||||
|
spacingLeft?: number;
|
||||||
|
user: ICurrentUserResponse | undefined;
|
||||||
|
editable: boolean;
|
||||||
|
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
|
||||||
|
issuesVisibility: string[];
|
||||||
|
handleIssuesVisibility: (issueId: string) => void;
|
||||||
|
copyText: (text: string) => void;
|
||||||
|
handleIssueCrudOperation: (
|
||||||
|
key: "create" | "existing" | "edit" | "delete",
|
||||||
|
issueId: string,
|
||||||
|
issue?: IIssue | null
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SubIssues: React.FC<ISubIssues> = ({
|
||||||
|
workspaceSlug,
|
||||||
|
projectId,
|
||||||
|
parentIssue,
|
||||||
|
issue,
|
||||||
|
spacingLeft = 0,
|
||||||
|
user,
|
||||||
|
editable,
|
||||||
|
removeIssueFromSubIssues,
|
||||||
|
issuesVisibility,
|
||||||
|
handleIssuesVisibility,
|
||||||
|
copyText,
|
||||||
|
handleIssueCrudOperation,
|
||||||
|
}) => (
|
||||||
|
<div>
|
||||||
|
{issue && (
|
||||||
|
<div
|
||||||
|
className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
|
||||||
|
style={{ paddingLeft: `${spacingLeft}px` }}
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0 w-[22px] h-[22px]">
|
||||||
|
{issue?.sub_issues_count > 0 && (
|
||||||
|
<>
|
||||||
|
{true ? (
|
||||||
|
<div
|
||||||
|
className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
|
||||||
|
onClick={() => handleIssuesVisibility(issue?.id)}
|
||||||
|
>
|
||||||
|
{issuesVisibility && issuesVisibility.includes(issue?.id) ? (
|
||||||
|
<ChevronDown width={14} strokeWidth={2} />
|
||||||
|
) : (
|
||||||
|
<ChevronRight width={14} strokeWidth={2} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Loader width={14} strokeWidth={2} className="animate-spin" />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
||||||
|
<a className="w-full flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: issue.state_detail.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="flex-shrink-0 text-xs text-custom-text-200">
|
||||||
|
{issue.project_detail.identifier}-{issue?.sequence_id}
|
||||||
|
</div>
|
||||||
|
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
|
||||||
|
<div className="line-clamp-1 text-xs text-custom-text-100">{issue?.name}</div>
|
||||||
|
</Tooltip>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex-shrink-0 text-sm">
|
||||||
|
<IssueProperty
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
parentIssue={parentIssue}
|
||||||
|
issue={issue}
|
||||||
|
user={user}
|
||||||
|
editable={editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-shrink-0 text-sm">
|
||||||
|
<CustomMenu width="auto" ellipsis>
|
||||||
|
{editable && (
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-start gap-2">
|
||||||
|
<Pencil width={14} strokeWidth={2} />
|
||||||
|
<span>Edit issue</span>
|
||||||
|
</div>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editable && (
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-start gap-2">
|
||||||
|
<Trash width={14} strokeWidth={2} />
|
||||||
|
<span>Delete issue</span>
|
||||||
|
</div>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CustomMenu.MenuItem onClick={copyText}>
|
||||||
|
<div className="flex items-center justify-start gap-2">
|
||||||
|
<LinkIcon width={14} strokeWidth={2} />
|
||||||
|
<span>Copy issue link</span>
|
||||||
|
</div>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editable && (
|
||||||
|
<div
|
||||||
|
className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden"
|
||||||
|
onClick={() => removeIssueFromSubIssues(parentIssue?.id, issue)}
|
||||||
|
>
|
||||||
|
<X width={14} strokeWidth={2} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{issuesVisibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
|
||||||
|
<SubIssuesRootList
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
parentIssue={issue}
|
||||||
|
spacingLeft={spacingLeft + 22}
|
||||||
|
user={user}
|
||||||
|
editable={editable}
|
||||||
|
removeIssueFromSubIssues={removeIssueFromSubIssues}
|
||||||
|
issuesVisibility={issuesVisibility}
|
||||||
|
handleIssuesVisibility={handleIssuesVisibility}
|
||||||
|
copyText={copyText}
|
||||||
|
handleIssueCrudOperation={handleIssueCrudOperation}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
84
web/components/issues/sub-issues/issues-list.tsx
Normal file
84
web/components/issues/sub-issues/issues-list.tsx
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import React from "react";
|
||||||
|
// swr
|
||||||
|
import useSWR from "swr";
|
||||||
|
// components
|
||||||
|
import { SubIssues } from "./issue";
|
||||||
|
// types
|
||||||
|
import { ICurrentUserResponse, IIssue } from "types";
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
// fetch keys
|
||||||
|
import { SUB_ISSUES } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
export interface ISubIssuesRootList {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
parentIssue: IIssue;
|
||||||
|
spacingLeft?: number;
|
||||||
|
user: ICurrentUserResponse | undefined;
|
||||||
|
editable: boolean;
|
||||||
|
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
|
||||||
|
issuesVisibility: string[];
|
||||||
|
handleIssuesVisibility: (issueId: string) => void;
|
||||||
|
copyText: (text: string) => void;
|
||||||
|
handleIssueCrudOperation: (
|
||||||
|
key: "create" | "existing" | "edit" | "delete",
|
||||||
|
issueId: string,
|
||||||
|
issue?: IIssue | null
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
|
||||||
|
workspaceSlug,
|
||||||
|
projectId,
|
||||||
|
parentIssue,
|
||||||
|
spacingLeft = 10,
|
||||||
|
user,
|
||||||
|
editable,
|
||||||
|
removeIssueFromSubIssues,
|
||||||
|
issuesVisibility,
|
||||||
|
handleIssuesVisibility,
|
||||||
|
copyText,
|
||||||
|
handleIssueCrudOperation,
|
||||||
|
}) => {
|
||||||
|
const { data: issues, isLoading } = useSWR(
|
||||||
|
workspaceSlug && projectId && parentIssue && parentIssue?.id
|
||||||
|
? SUB_ISSUES(parentIssue?.id)
|
||||||
|
: null,
|
||||||
|
workspaceSlug && projectId && parentIssue && parentIssue?.id
|
||||||
|
? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
{issues &&
|
||||||
|
issues.sub_issues &&
|
||||||
|
issues.sub_issues.length > 0 &&
|
||||||
|
issues.sub_issues.map((issue: IIssue) => (
|
||||||
|
<SubIssues
|
||||||
|
key={`${issue?.id}`}
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
parentIssue={parentIssue}
|
||||||
|
issue={issue}
|
||||||
|
spacingLeft={spacingLeft}
|
||||||
|
user={user}
|
||||||
|
editable={editable}
|
||||||
|
removeIssueFromSubIssues={removeIssueFromSubIssues}
|
||||||
|
issuesVisibility={issuesVisibility}
|
||||||
|
handleIssuesVisibility={handleIssuesVisibility}
|
||||||
|
copyText={copyText}
|
||||||
|
handleIssueCrudOperation={handleIssueCrudOperation}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`absolute top-0 bottom-0 ${
|
||||||
|
spacingLeft > 10 ? `border-l border-custom-border-100` : ``
|
||||||
|
}`}
|
||||||
|
style={{ left: `${spacingLeft - 12}px` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
25
web/components/issues/sub-issues/progressbar.tsx
Normal file
25
web/components/issues/sub-issues/progressbar.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
export interface IProgressBar {
|
||||||
|
total: number;
|
||||||
|
done: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
|
||||||
|
const calPercentage = (doneValue: number, totalValue: number): string => {
|
||||||
|
if (doneValue === 0 || totalValue === 0) return (0).toFixed(0);
|
||||||
|
return ((100 * doneValue) / totalValue).toFixed(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex items-center gap-2">
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
|
||||||
|
<div
|
||||||
|
className="bg-green-500 h-[6px] rounded-full"
|
||||||
|
style={{ width: `${calPercentage(done, total)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 text-xs font-medium">{calPercentage(done, total)}% Done</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
204
web/components/issues/sub-issues/properties.tsx
Normal file
204
web/components/issues/sub-issues/properties.tsx
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
import React from "react";
|
||||||
|
// swr
|
||||||
|
import { mutate } from "swr";
|
||||||
|
// components
|
||||||
|
import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
|
||||||
|
import { MembersSelect, PrioritySelect } from "components/project";
|
||||||
|
import { StateSelect } from "components/states";
|
||||||
|
// hooks
|
||||||
|
import useIssuesProperties from "hooks/use-issue-properties";
|
||||||
|
// types
|
||||||
|
import { ICurrentUserResponse, IIssue, IState } from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { SUB_ISSUES } from "constants/fetch-keys";
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
import trackEventServices from "services/track-event.service";
|
||||||
|
|
||||||
|
export interface IIssueProperty {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
parentIssue: IIssue;
|
||||||
|
issue: IIssue;
|
||||||
|
user: ICurrentUserResponse | undefined;
|
||||||
|
editable: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const IssueProperty: React.FC<IIssueProperty> = ({
|
||||||
|
workspaceSlug,
|
||||||
|
projectId,
|
||||||
|
parentIssue,
|
||||||
|
issue,
|
||||||
|
user,
|
||||||
|
editable,
|
||||||
|
}) => {
|
||||||
|
const [properties] = useIssuesProperties(workspaceSlug, projectId);
|
||||||
|
|
||||||
|
const handlePriorityChange = (data: any) => {
|
||||||
|
partialUpdateIssue({ priority: data });
|
||||||
|
trackEventServices.trackIssuePartialPropertyUpdateEvent(
|
||||||
|
{
|
||||||
|
workspaceSlug,
|
||||||
|
workspaceId: issue.workspace,
|
||||||
|
projectId: issue.project_detail.id,
|
||||||
|
projectIdentifier: issue.project_detail.identifier,
|
||||||
|
projectName: issue.project_detail.name,
|
||||||
|
issueId: issue.id,
|
||||||
|
},
|
||||||
|
"ISSUE_PROPERTY_UPDATE_PRIORITY",
|
||||||
|
user
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleStateChange = (data: string, states: IState[] | undefined) => {
|
||||||
|
const oldState = states?.find((s) => s.id === issue.state);
|
||||||
|
const newState = states?.find((s) => s.id === data);
|
||||||
|
|
||||||
|
partialUpdateIssue({
|
||||||
|
state: data,
|
||||||
|
state_detail: newState,
|
||||||
|
});
|
||||||
|
trackEventServices.trackIssuePartialPropertyUpdateEvent(
|
||||||
|
{
|
||||||
|
workspaceSlug,
|
||||||
|
workspaceId: issue.workspace,
|
||||||
|
projectId: issue.project_detail.id,
|
||||||
|
projectIdentifier: issue.project_detail.identifier,
|
||||||
|
projectName: issue.project_detail.name,
|
||||||
|
issueId: issue.id,
|
||||||
|
},
|
||||||
|
"ISSUE_PROPERTY_UPDATE_STATE",
|
||||||
|
user
|
||||||
|
);
|
||||||
|
if (oldState?.group !== "completed" && newState?.group !== "completed") {
|
||||||
|
trackEventServices.trackIssueMarkedAsDoneEvent(
|
||||||
|
{
|
||||||
|
workspaceSlug: issue.workspace_detail.slug,
|
||||||
|
workspaceId: issue.workspace_detail.id,
|
||||||
|
projectId: issue.project_detail.id,
|
||||||
|
projectIdentifier: issue.project_detail.identifier,
|
||||||
|
projectName: issue.project_detail.name,
|
||||||
|
issueId: issue.id,
|
||||||
|
},
|
||||||
|
user
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAssigneeChange = (data: any) => {
|
||||||
|
const newData = issue.assignees ?? [];
|
||||||
|
|
||||||
|
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
|
||||||
|
else newData.push(data);
|
||||||
|
|
||||||
|
partialUpdateIssue({ assignees_list: data });
|
||||||
|
|
||||||
|
trackEventServices.trackIssuePartialPropertyUpdateEvent(
|
||||||
|
{
|
||||||
|
workspaceSlug,
|
||||||
|
workspaceId: issue.workspace,
|
||||||
|
projectId: issue.project_detail.id,
|
||||||
|
projectIdentifier: issue.project_detail.identifier,
|
||||||
|
projectName: issue.project_detail.name,
|
||||||
|
issueId: issue.id,
|
||||||
|
},
|
||||||
|
"ISSUE_PROPERTY_UPDATE_ASSIGNEE",
|
||||||
|
user
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const partialUpdateIssue = async (data: Partial<IIssue>) => {
|
||||||
|
mutate(
|
||||||
|
workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
|
||||||
|
(elements: any) => {
|
||||||
|
const _elements = { ...elements };
|
||||||
|
const _issues = _elements.sub_issues.map((element: IIssue) =>
|
||||||
|
element.id === issue.id ? { ...element, ...data } : element
|
||||||
|
);
|
||||||
|
_elements["sub_issues"] = [..._issues];
|
||||||
|
return _elements;
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
const issueResponse = await issuesService.patchIssue(
|
||||||
|
workspaceSlug as string,
|
||||||
|
issue.project,
|
||||||
|
issue.id,
|
||||||
|
data,
|
||||||
|
user
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate(
|
||||||
|
SUB_ISSUES(parentIssue.id),
|
||||||
|
(elements: any) => {
|
||||||
|
const _elements = elements.sub_issues.map((element: IIssue) =>
|
||||||
|
element.id === issue.id ? issueResponse : element
|
||||||
|
);
|
||||||
|
elements["sub_issues"] = _elements;
|
||||||
|
return elements;
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex items-center gap-1">
|
||||||
|
{properties.priority && (
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<PrioritySelect
|
||||||
|
value={issue.priority}
|
||||||
|
onChange={handlePriorityChange}
|
||||||
|
hideDropdownArrow
|
||||||
|
disabled={!editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{properties.state && (
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<StateSelect
|
||||||
|
value={issue.state_detail}
|
||||||
|
onChange={handleStateChange}
|
||||||
|
hideDropdownArrow
|
||||||
|
disabled={!editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{properties.start_date && issue.start_date && (
|
||||||
|
<div className="flex-shrink-0 w-[104px]">
|
||||||
|
<ViewStartDateSelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
user={user}
|
||||||
|
isNotAllowed={!editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{properties.due_date && issue.target_date && (
|
||||||
|
<div className="flex-shrink-0 w-[104px]">
|
||||||
|
<ViewDueDateSelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
user={user}
|
||||||
|
isNotAllowed={!editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{properties.assignee && (
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<MembersSelect
|
||||||
|
value={issue.assignees}
|
||||||
|
onChange={handleAssigneeChange}
|
||||||
|
membersDetails={issue.assignee_details}
|
||||||
|
hideDropdownArrow
|
||||||
|
disabled={!editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
283
web/components/issues/sub-issues/root.tsx
Normal file
283
web/components/issues/sub-issues/root.tsx
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
import React from "react";
|
||||||
|
// next imports
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
// swr
|
||||||
|
import useSWR, { mutate } from "swr";
|
||||||
|
// lucide icons
|
||||||
|
import { Plus, ChevronRight, ChevronDown } from "lucide-react";
|
||||||
|
// components
|
||||||
|
import { ExistingIssuesListModal } from "components/core";
|
||||||
|
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||||
|
import { SubIssuesRootList } from "./issues-list";
|
||||||
|
import { ProgressBar } from "./progressbar";
|
||||||
|
// ui
|
||||||
|
import { CustomMenu } from "components/ui";
|
||||||
|
// hooks
|
||||||
|
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||||
|
// helpers
|
||||||
|
import { copyTextToClipboard } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
// fetch keys
|
||||||
|
import { SUB_ISSUES } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
export interface ISubIssuesRoot {
|
||||||
|
parentIssue: IIssue;
|
||||||
|
|
||||||
|
user: ICurrentUserResponse | undefined;
|
||||||
|
editable: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, editable }) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
|
||||||
|
|
||||||
|
const { memberRole } = useProjectMyMembership();
|
||||||
|
|
||||||
|
const { data: issues } = useSWR(
|
||||||
|
workspaceSlug && projectId && parentIssue && parentIssue?.id
|
||||||
|
? SUB_ISSUES(parentIssue?.id)
|
||||||
|
: null,
|
||||||
|
workspaceSlug && projectId && parentIssue && parentIssue?.id
|
||||||
|
? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const [issuesVisibility, setIssuesVisibility] = React.useState<string[]>([parentIssue?.id]);
|
||||||
|
const handleIssuesVisibility = (issueId: string) => {
|
||||||
|
if (issuesVisibility.includes(issueId)) {
|
||||||
|
setIssuesVisibility(issuesVisibility.filter((i: string) => i !== issueId));
|
||||||
|
} else {
|
||||||
|
setIssuesVisibility([...issuesVisibility, issueId]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
|
||||||
|
create: { toggle: boolean; issueId: string | null };
|
||||||
|
existing: { toggle: boolean; issueId: string | null };
|
||||||
|
edit: { toggle: boolean; issueId: string | null; issue: IIssue | null };
|
||||||
|
delete: { toggle: boolean; issueId: string | null; issue: IIssue | null };
|
||||||
|
}>({
|
||||||
|
create: {
|
||||||
|
toggle: false,
|
||||||
|
issueId: null,
|
||||||
|
},
|
||||||
|
existing: {
|
||||||
|
toggle: false,
|
||||||
|
issueId: null,
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
toggle: false,
|
||||||
|
issueId: null, // parent issue id for mutation
|
||||||
|
issue: null,
|
||||||
|
},
|
||||||
|
delete: {
|
||||||
|
toggle: false,
|
||||||
|
issueId: null, // parent issue id for mutation
|
||||||
|
issue: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const handleIssueCrudOperation = (
|
||||||
|
key: "create" | "existing" | "edit" | "delete",
|
||||||
|
issueId: string | null,
|
||||||
|
issue: IIssue | null = null
|
||||||
|
) => {
|
||||||
|
setIssueCrudOperation({
|
||||||
|
...issueCrudOperation,
|
||||||
|
[key]: {
|
||||||
|
toggle: !issueCrudOperation[key].toggle,
|
||||||
|
issueId: issueId,
|
||||||
|
issue: issue,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
|
||||||
|
if (!workspaceSlug || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
|
||||||
|
const issueId = issueCrudOperation?.existing?.issueId;
|
||||||
|
const payload = {
|
||||||
|
sub_issue_ids: data.map((i) => i.id),
|
||||||
|
};
|
||||||
|
|
||||||
|
await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
|
||||||
|
if (issueId) mutate(SUB_ISSUES(issueId));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
|
||||||
|
if (!workspaceSlug || !parentIssue || !issue?.id) return;
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
|
||||||
|
.finally(() => {
|
||||||
|
if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyText = (text: string) => {
|
||||||
|
const originURL =
|
||||||
|
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||||
|
copyTextToClipboard(`${originURL}/${text}`).then(() => {
|
||||||
|
// setToastAlert({
|
||||||
|
// type: "success",
|
||||||
|
// title: "Link Copied!",
|
||||||
|
// message: "Issue link copied to clipboard.",
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isEditable = memberRole?.isGuest || memberRole?.isViewer ? false : true;
|
||||||
|
|
||||||
|
const mutateSubIssues = (parentIssueId: string | null) => {
|
||||||
|
if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full space-y-2">
|
||||||
|
{parentIssue && parentIssue?.sub_issues_count > 0 ? (
|
||||||
|
<>
|
||||||
|
{/* header */}
|
||||||
|
<div className="relative flex items-center gap-4 text-xs">
|
||||||
|
<div
|
||||||
|
className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
|
||||||
|
onClick={() => handleIssuesVisibility(parentIssue?.id)}
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
|
||||||
|
{issuesVisibility.includes(parentIssue?.id) ? (
|
||||||
|
<ChevronDown width={16} strokeWidth={2} />
|
||||||
|
) : (
|
||||||
|
<ChevronRight width={14} strokeWidth={2} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>Sub-issues</div>
|
||||||
|
<div>({parentIssue?.sub_issues_count})</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full max-w-[250px] select-none">
|
||||||
|
<ProgressBar
|
||||||
|
total={parentIssue?.sub_issues_count}
|
||||||
|
done={
|
||||||
|
(issues?.state_distribution?.cancelled || 0) +
|
||||||
|
(issues?.state_distribution?.completed || 0)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isEditable && issuesVisibility.includes(parentIssue?.id) && (
|
||||||
|
<div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
|
||||||
|
<div
|
||||||
|
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
|
||||||
|
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
|
||||||
|
>
|
||||||
|
Add sub-issue
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
|
||||||
|
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* issues */}
|
||||||
|
{issuesVisibility.includes(parentIssue?.id) && (
|
||||||
|
<div className="border border-b-0 border-custom-border-100">
|
||||||
|
<SubIssuesRootList
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
parentIssue={parentIssue}
|
||||||
|
user={undefined}
|
||||||
|
editable={isEditable}
|
||||||
|
removeIssueFromSubIssues={removeIssueFromSubIssues}
|
||||||
|
issuesVisibility={issuesVisibility}
|
||||||
|
handleIssuesVisibility={handleIssuesVisibility}
|
||||||
|
copyText={copyText}
|
||||||
|
handleIssueCrudOperation={handleIssueCrudOperation}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
isEditable && (
|
||||||
|
<div className="text-xs py-2 text-custom-text-300 font-medium">
|
||||||
|
<div className="py-3 text-center">No sub issues are available</div>
|
||||||
|
<>
|
||||||
|
<CustomMenu
|
||||||
|
label={
|
||||||
|
<>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
Add sub-issue
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
buttonClassName="whitespace-nowrap"
|
||||||
|
position="left"
|
||||||
|
noBorder
|
||||||
|
noChevron
|
||||||
|
>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
|
||||||
|
>
|
||||||
|
Create new
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
</CustomMenu>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isEditable && issueCrudOperation?.create?.toggle && (
|
||||||
|
<CreateUpdateIssueModal
|
||||||
|
isOpen={issueCrudOperation?.create?.toggle}
|
||||||
|
prePopulateData={{
|
||||||
|
parent: issueCrudOperation?.create?.issueId,
|
||||||
|
}}
|
||||||
|
handleClose={() => handleIssueCrudOperation("create", null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isEditable &&
|
||||||
|
issueCrudOperation?.existing?.toggle &&
|
||||||
|
issueCrudOperation?.existing?.issueId && (
|
||||||
|
<ExistingIssuesListModal
|
||||||
|
isOpen={issueCrudOperation?.existing?.toggle}
|
||||||
|
handleClose={() => handleIssueCrudOperation("existing", null)}
|
||||||
|
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
|
||||||
|
handleOnSubmit={addAsSubIssueFromExistingIssues}
|
||||||
|
workspaceLevelToggle
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
|
||||||
|
<CreateUpdateIssueModal
|
||||||
|
isOpen={issueCrudOperation?.edit?.toggle}
|
||||||
|
handleClose={() => {
|
||||||
|
mutateSubIssues(issueCrudOperation?.edit?.issueId);
|
||||||
|
handleIssueCrudOperation("edit", null, null);
|
||||||
|
}}
|
||||||
|
data={issueCrudOperation?.edit?.issue}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && (
|
||||||
|
<DeleteIssueModal
|
||||||
|
isOpen={issueCrudOperation?.delete?.toggle}
|
||||||
|
handleClose={() => {
|
||||||
|
mutateSubIssues(issueCrudOperation?.delete?.issueId);
|
||||||
|
handleIssueCrudOperation("delete", null, null);
|
||||||
|
}}
|
||||||
|
data={issueCrudOperation?.delete?.issue}
|
||||||
|
user={user}
|
||||||
|
redirection={false}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -82,7 +82,7 @@ export const MembersSelect: React.FC<Props> = ({
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
tooltipHeading="Assignee"
|
tooltipHeading="Assignee"
|
||||||
tooltipContent={
|
tooltipContent={
|
||||||
membersDetails.length > 0
|
membersDetails && membersDetails.length > 0
|
||||||
? membersDetails.map((assignee) => assignee?.display_name).join(", ")
|
? membersDetails.map((assignee) => assignee?.display_name).join(", ")
|
||||||
: "No Assignee"
|
: "No Assignee"
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user