refactor: issue details page (#282)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
6f0539f01d
commit
ab0ce2f649
4 changed files with 203 additions and 281 deletions
|
|
@ -1,49 +1,88 @@
|
|||
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";
|
||||
import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
// components
|
||||
import { CustomMenu } from "components/ui";
|
||||
import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
import { IIssue, IssueResponse, UserAuth } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
export interface SubIssueListProps {
|
||||
issues: IIssue[];
|
||||
projectId: string;
|
||||
workspaceSlug: string;
|
||||
type SubIssueListProps = {
|
||||
parentIssue: IIssue;
|
||||
handleSubIssueRemove: (subIssueId: string) => void;
|
||||
userAuth: UserAuth;
|
||||
}
|
||||
};
|
||||
|
||||
export const SubIssuesList: FC<SubIssueListProps> = ({
|
||||
issues = [],
|
||||
handleSubIssueRemove,
|
||||
parentIssue,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
userAuth,
|
||||
}) => {
|
||||
export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth }) => {
|
||||
// states
|
||||
const [isIssueModalActive, setIssueModalActive] = useState(false);
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
|
||||
|
||||
const openIssueModal = () => {
|
||||
setIssueModalActive(true);
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { data: subIssues } = useSWR<IIssue[] | undefined>(
|
||||
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 handleSubIssueRemove = (issueId: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IIssue[]>(
|
||||
SUB_ISSUES(parentIssue.id ?? ""),
|
||||
(prevData) => prevData?.filter((i) => i.id !== issueId),
|
||||
false
|
||||
);
|
||||
|
||||
issuesService
|
||||
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
|
||||
.then((res) => {
|
||||
mutate(SUB_ISSUES(parentIssue.id ?? ""));
|
||||
|
||||
mutate<IssueResponse>(
|
||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IssueResponse),
|
||||
results: (prevData?.results ?? []).map((p) => {
|
||||
if (p.id === res.id)
|
||||
return {
|
||||
...p,
|
||||
...res,
|
||||
};
|
||||
|
||||
return p;
|
||||
}),
|
||||
}),
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
};
|
||||
|
||||
const closeIssueModal = () => {
|
||||
setIssueModalActive(false);
|
||||
};
|
||||
|
||||
const openSubIssueModal = () => {
|
||||
setSubIssuesListModal(true);
|
||||
};
|
||||
|
||||
const closeSubIssueModal = () => {
|
||||
setSubIssuesListModal(false);
|
||||
const handleCreateIssueModal = () => {
|
||||
setCreateIssueModal(true);
|
||||
setPreloadedData({
|
||||
parent: parentIssue.id,
|
||||
});
|
||||
};
|
||||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
|
@ -51,95 +90,106 @@ export const SubIssuesList: FC<SubIssueListProps> = ({
|
|||
return (
|
||||
<>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={isIssueModalActive}
|
||||
isOpen={createIssueModal}
|
||||
prePopulateData={{ ...preloadedData }}
|
||||
handleClose={closeIssueModal}
|
||||
handleClose={() => setCreateIssueModal(false)}
|
||||
/>
|
||||
<SubIssuesListModal
|
||||
isOpen={subIssuesListModal}
|
||||
handleClose={() => setSubIssuesListModal(false)}
|
||||
parent={parentIssue}
|
||||
/>
|
||||
<Disclosure defaultOpen={true}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
|
||||
</Disclosure.Button>
|
||||
{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-gray-100"
|
||||
onClick={() => {
|
||||
openIssueModal();
|
||||
setPreloadedData({
|
||||
parent: parentIssue.id,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Create new
|
||||
</button>
|
||||
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setSubIssuesListModal(true);
|
||||
}}
|
||||
{subIssues && subIssues.length > 0 ? (
|
||||
<Disclosure defaultOpen={true}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
|
||||
</Disclosure.Button>
|
||||
{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-gray-100"
|
||||
onClick={handleCreateIssueModal}
|
||||
>
|
||||
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">
|
||||
{issues.map((issue) => (
|
||||
<div
|
||||
key={issue.id}
|
||||
className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
|
||||
>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
|
||||
<a className="flex items-center gap-2 rounded text-xs">
|
||||
<span
|
||||
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-gray-600">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
<span className="max-w-sm break-all font-medium">{issue.name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
{!isNotAllowed && (
|
||||
<div className="opacity-0 group-hover:opacity-100">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
|
||||
Remove as sub-issue
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
)}
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Create new
|
||||
</button>
|
||||
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
|
||||
Add an existing issue
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
) : 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">
|
||||
{subIssues.map((issue) => (
|
||||
<div
|
||||
key={issue.id}
|
||||
className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
|
||||
>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
|
||||
<a className="flex items-center gap-2 rounded text-xs">
|
||||
<span
|
||||
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-gray-600">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
<span className="max-w-sm break-all font-medium">{issue.name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
{!isNotAllowed && (
|
||||
<div className="opacity-0 group-hover:opacity-100">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
|
||||
Remove as sub-issue
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
) : (
|
||||
!isNotAllowed && (
|
||||
<CustomMenu
|
||||
label={
|
||||
<>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add sub-issue
|
||||
</>
|
||||
}
|
||||
optionsPosition="left"
|
||||
noBorder
|
||||
>
|
||||
<CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
|
||||
Add an existing issue
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue