plane/apps/app/components/issues/sub-issues-list.tsx
Aaryan Khandelwal 4c2cb2368a
chore: update classnames according to the new theming structure (#1494)
* chore: store various shades of accent color

* refactor: custom theme selector

* refactor: custom theme selector

* chore: update custom theme input labels

* fix: color generator function logic

* fix: accent color preloaded data

* chore: new theming structure

* chore: update shades calculation logic

* refactor: variable names

* chore: update color scheming

* chore: new color scheming

* refactor: themes folder structure

* chore: update classnames to the new ones

* chore: update static colors

* chore: sidebar link colors

* chore: placeholder color

* chore: update border classnames
2023-07-10 12:47:00 +05:30

332 lines
12 KiB
TypeScript

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";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { ICurrentUserResponse, IIssue, ISearchIssueResponse, ISubIssueResponse } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
type Props = {
parentIssue: IIssue;
user: ICurrentUserResponse | undefined;
};
export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
// states
const [createIssueModal, setCreateIssueModal] = useState(false);
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
const { memberRole } = useProjectMyMembership();
const { data: subIssuesResponse } = useSWR<ISubIssueResponse>(
workspaceSlug && projectId && issueId ? SUB_ISSUES(issueId as string) : null,
workspaceSlug && projectId && issueId
? () =>
issuesService.subIssues(workspaceSlug as string, projectId as string, issueId as string)
: null
);
const { data: issues } = useSWR(
workspaceSlug && projectId
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
: null,
workspaceSlug && projectId
? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
: null
);
const addAsSubIssue = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
sub_issue_ids: data.map((i) => i.id),
};
await issuesService
.addSubIssues(workspaceSlug as string, projectId as string, parentIssue?.id ?? "", payload)
.then(() => {
mutate<ISubIssueResponse>(
SUB_ISSUES(parentIssue?.id ?? ""),
(prevData) => {
if (!prevData) return prevData;
let newSubIssues = prevData.sub_issues as IIssue[];
const stateDistribution = { ...prevData.state_distribution };
payload.sub_issue_ids.forEach((issueId: string) => {
const issue = issues?.find((i) => i.id === issueId);
if (issue) {
newSubIssues.push(issue);
const issueGroup = issue.state_detail.group;
stateDistribution[issueGroup] = stateDistribution[issueGroup] + 1;
}
});
newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
return {
state_distribution: stateDistribution,
sub_issues: newSubIssues,
};
},
false
);
mutate<IIssue[]>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) =>
(prevData ?? []).map((p) => {
if (payload.sub_issue_ids.includes(p.id))
return {
...p,
parent: parentIssue.id,
};
return p;
}),
false
);
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
})
.catch((err) => {
console.log(err);
});
};
const handleSubIssueRemove = (issueId: string) => {
if (!workspaceSlug || !projectId) return;
mutate<ISubIssueResponse>(
SUB_ISSUES(parentIssue.id ?? ""),
(prevData) => {
if (!prevData) return prevData;
const updatedArray = (prevData.sub_issues ?? []).filter((i) => i.id !== issueId);
const stateDistribution = { ...prevData.state_distribution };
const issueGroup = issues?.find((i) => i.id === issueId)?.state_detail.group ?? "backlog";
stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1;
return {
state_distribution: stateDistribution,
sub_issues: updatedArray,
};
},
false
);
issuesService
.patchIssue(workspaceSlug.toString(), projectId.toString(), issueId, { parent: null }, user)
.then((res) => {
mutate(SUB_ISSUES(parentIssue.id ?? ""));
mutate<IIssue[]>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === res.id)
return {
...p,
...res,
};
return p;
}),
false
);
})
.catch((e) => {
console.error(e);
});
};
const handleCreateIssueModal = () => {
setCreateIssueModal(true);
setPreloadedData({
parent: parentIssue.id,
});
};
const completedSubIssues = subIssuesResponse
? subIssuesResponse?.state_distribution.completed +
subIssuesResponse?.state_distribution.cancelled
: 0;
const totalSubIssues =
subIssuesResponse && subIssuesResponse.sub_issues ? subIssuesResponse?.sub_issues.length : 0;
const completionPercentage = (completedSubIssues / totalSubIssues) * 100;
const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
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}
/>
{subIssuesResponse &&
subIssuesResponse.sub_issues &&
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">
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-custom-background-90">
<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>
{subIssuesResponse.state_distribution && (
<div className="flex w-60 items-center gap-2 text-custom-text-100">
<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 font-medium hover:bg-custom-background-90"
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/${projectId}/issues/${issue.id}`}
>
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-100">
<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.id);
}}
>
<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
</>
}
position="left"
noBorder
noChevron
>
<CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
)
)}
</>
);
};