refactor: archive issue (#2628)
* dev: archived issue store * dev: archived issue layouts and store binding * dev: archived issue detail store * dev: is read only * fix: archived issue delete * fix: build error
This commit is contained in:
Dakshesh Jain
GitHub
parent
ff258c60fd
commit
ad558833af
24 changed files with 1274 additions and 328 deletions
|
|
@ -1,4 +1,6 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { IssueView } from "./view";
|
||||
|
|
@ -6,22 +8,78 @@ import { IssueView } from "./view";
|
|||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { RootStore } from "store/root";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
|
||||
interface IIssuePeekOverview {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
handleIssue: (issue: Partial<IIssue>) => void;
|
||||
isArchived?: boolean;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issueId, handleIssue, children } = props;
|
||||
const { workspaceSlug, projectId, issueId, handleIssue, children, isArchived = false } = props;
|
||||
|
||||
const { issueDetail: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
|
||||
const router = useRouter();
|
||||
const { peekIssueId } = router.query as { peekIssueId: string };
|
||||
|
||||
const {
|
||||
user: userStore,
|
||||
issue: issueStore,
|
||||
issueDetail: issueDetailStore,
|
||||
archivedIssueDetail: archivedIssueDetailStore,
|
||||
archivedIssues: archivedIssuesStore,
|
||||
project: projectStore,
|
||||
}: RootStore = useMobxStore();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
|
||||
? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
|
||||
: null,
|
||||
async () => {
|
||||
if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
|
||||
if (isArchived) await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
|
||||
else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(
|
||||
`${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${peekIssueId}`
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Issue link copied to clipboard.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const redirectToIssueDetail = () => {
|
||||
router.push({
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
|
||||
});
|
||||
};
|
||||
|
||||
const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
|
||||
const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;
|
||||
|
||||
const issueUpdate = (_data: Partial<IIssue>) => {
|
||||
handleIssue(_data);
|
||||
if (handleIssue) {
|
||||
handleIssue(_data);
|
||||
issueDetailStore.updateIssue(workspaceSlug, projectId, issueId, _data);
|
||||
}
|
||||
};
|
||||
|
||||
const issueReactionCreate = (reaction: string) =>
|
||||
|
|
@ -49,7 +107,18 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
|
||||
const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);
|
||||
|
||||
const handleDeleteIssue = () => issueDetailStore.deleteIssue(workspaceSlug, projectId, issueId);
|
||||
const handleDeleteIssue = async () => {
|
||||
if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
|
||||
else await issueStore.deleteIssue(workspaceSlug, projectId, issue!);
|
||||
const { query } = router;
|
||||
if (query.peekIssueId) {
|
||||
delete query.peekIssueId;
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const userRole = userStore.currentProjectRole ?? 5;
|
||||
|
||||
|
|
@ -58,6 +127,11 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issue={issue}
|
||||
isLoading={isLoading}
|
||||
isArchived={isArchived}
|
||||
handleCopyText={handleCopyText}
|
||||
redirectToIssueDetail={redirectToIssueDetail}
|
||||
issueUpdate={issueUpdate}
|
||||
issueReactionCreate={issueReactionCreate}
|
||||
issueReactionRemove={issueReactionRemove}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,28 @@ import { useRouter } from "next/router";
|
|||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { PeekOverviewIssueDetails } from "./issue-detail";
|
||||
import { PeekOverviewProperties } from "./properties";
|
||||
import { IssueComment } from "./activity";
|
||||
import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
|
||||
import { DeleteIssueModal } from "../delete-issue-modal";
|
||||
import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { RootStore } from "store/root";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
interface IIssueView {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
issue: IIssue | null;
|
||||
isLoading?: boolean;
|
||||
isArchived?: boolean;
|
||||
handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
redirectToIssueDetail: () => void;
|
||||
issueUpdate: (issue: Partial<IIssue>) => void;
|
||||
issueReactionCreate: (reaction: string) => void;
|
||||
issueReactionRemove: (reaction: string) => void;
|
||||
|
|
@ -64,6 +66,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
workspaceSlug,
|
||||
projectId,
|
||||
issueId,
|
||||
issue,
|
||||
isLoading,
|
||||
isArchived,
|
||||
handleCopyText,
|
||||
redirectToIssueDetail,
|
||||
issueUpdate,
|
||||
issueReactionCreate,
|
||||
issueReactionRemove,
|
||||
|
|
@ -88,20 +95,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues/${peekIssueId}`).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Issue link copied to clipboard.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const updateRoutePeekId = () => {
|
||||
if (issueId != peekIssueId) {
|
||||
const { query } = router;
|
||||
|
|
@ -122,23 +115,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
}
|
||||
};
|
||||
|
||||
const redirectToIssueDetail = () => {
|
||||
router.push({
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/issues/${issueId}`,
|
||||
});
|
||||
};
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
|
||||
? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
|
||||
: null,
|
||||
async () => {
|
||||
if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
|
||||
await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
|
||||
? `ISSUE_PEEK_OVERVIEW_SUBSCRIPTION_${workspaceSlug}_${projectId}_${peekIssueId}`
|
||||
|
|
@ -150,10 +126,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
}
|
||||
);
|
||||
|
||||
const issue = issueDetailStore.getIssue;
|
||||
const issueReactions = issueDetailStore.getIssueReactions;
|
||||
const issueComments = issueDetailStore.getIssueComments;
|
||||
const issueSubscription = issueDetailStore.getIssueSubscription;
|
||||
const issueReactions = issueDetailStore.getIssueReactions || [];
|
||||
const issueComments = issueDetailStore.getIssueComments || [];
|
||||
const issueSubscription = issueDetailStore.getIssueSubscription || [];
|
||||
|
||||
const user = userStore?.currentUser;
|
||||
|
||||
|
|
@ -161,7 +136,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{issue && (
|
||||
{issue && !isArchived && (
|
||||
<DeleteIssueModal
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
|
|
@ -169,6 +144,14 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
onSubmit={handleDeleteIssue}
|
||||
/>
|
||||
)}
|
||||
{issue && isArchived && (
|
||||
<DeleteArchivedIssueModal
|
||||
data={issue}
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
onSubmit={handleDeleteIssue}
|
||||
/>
|
||||
)}
|
||||
<div className="w-full !text-base">
|
||||
{children && (
|
||||
<div onClick={updateRoutePeekId} className="w-full cursor-pointer">
|
||||
|
|
@ -229,18 +212,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
size="sm"
|
||||
prependIcon={<Bell className="h-3 w-3" />}
|
||||
variant="outline-primary"
|
||||
onClick={() =>
|
||||
issueSubscription && issueSubscription.subscribed
|
||||
? issueSubscriptionRemove
|
||||
: issueSubscriptionCreate
|
||||
}
|
||||
>
|
||||
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</Button>
|
||||
{!isArchived && (
|
||||
<Button
|
||||
size="sm"
|
||||
prependIcon={<Bell className="h-3 w-3" />}
|
||||
variant="outline-primary"
|
||||
onClick={() =>
|
||||
issueSubscription && issueSubscription.subscribed
|
||||
? issueSubscriptionRemove
|
||||
: issueSubscriptionCreate
|
||||
}
|
||||
>
|
||||
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</Button>
|
||||
)}
|
||||
<button onClick={handleCopyText}>
|
||||
<Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
|
||||
</button>
|
||||
|
|
@ -253,8 +238,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{/* content */}
|
||||
<div className="w-full h-full overflow-hidden overflow-y-auto">
|
||||
{issueDetailStore?.loader && !issue ? (
|
||||
<div className="relative w-full h-full overflow-hidden overflow-y-auto">
|
||||
{isArchived && (
|
||||
<div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
|
||||
)}
|
||||
{isLoading && !issue ? (
|
||||
<div className="text-center py-10">Loading...</div>
|
||||
) : (
|
||||
issue && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue