2024-02-19 10:13:57 +00:00
|
|
|
import { useEffect, useState } from "react";
|
2024-01-10 14:39:45 +00:00
|
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
// hooks
|
2024-03-06 13:09:14 +00:00
|
|
|
import { StateGroupIcon } from "@plane/ui";
|
2024-03-19 14:38:35 +00:00
|
|
|
import { IssueAttachmentRoot, IssueUpdateStatus } from "@/components/issues";
|
|
|
|
import { useIssueDetail, useProjectState, useUser } from "@/hooks/store";
|
|
|
|
import useReloadConfirmations from "@/hooks/use-reload-confirmation";
|
2024-01-10 14:39:45 +00:00
|
|
|
// components
|
2024-02-16 14:37:04 +00:00
|
|
|
import { IssueDescriptionInput } from "../description-input";
|
2024-01-10 14:39:45 +00:00
|
|
|
import { SubIssuesRoot } from "../sub-issues";
|
2024-03-06 13:09:14 +00:00
|
|
|
import { IssueTitleInput } from "../title-input";
|
2024-01-23 07:58:58 +00:00
|
|
|
import { IssueActivity } from "./issue-activity";
|
2024-03-06 13:09:14 +00:00
|
|
|
import { IssueParentDetail } from "./parent";
|
|
|
|
import { IssueReaction } from "./reactions";
|
2024-01-10 14:39:45 +00:00
|
|
|
// ui
|
|
|
|
// types
|
|
|
|
import { TIssueOperations } from "./root";
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
workspaceSlug: string;
|
|
|
|
projectId: string;
|
|
|
|
issueId: string;
|
|
|
|
issueOperations: TIssueOperations;
|
|
|
|
is_editable: boolean;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const IssueMainContent: React.FC<Props> = observer((props) => {
|
2024-01-24 13:20:54 +00:00
|
|
|
const { workspaceSlug, projectId, issueId, issueOperations, is_editable } = props;
|
2024-01-10 14:39:45 +00:00
|
|
|
// states
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
|
|
|
|
// hooks
|
2024-01-11 12:56:58 +00:00
|
|
|
const { currentUser } = useUser();
|
2024-01-10 14:39:45 +00:00
|
|
|
const { projectStates } = useProjectState();
|
|
|
|
const {
|
|
|
|
issue: { getIssueById },
|
|
|
|
} = useIssueDetail();
|
2024-02-19 10:13:57 +00:00
|
|
|
const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
|
2024-01-10 14:39:45 +00:00
|
|
|
|
2024-02-19 10:13:57 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (isSubmitting === "submitted") {
|
|
|
|
setShowAlert(false);
|
|
|
|
setTimeout(async () => {
|
|
|
|
setIsSubmitting("saved");
|
|
|
|
}, 2000);
|
|
|
|
} else if (isSubmitting === "submitting") {
|
|
|
|
setShowAlert(true);
|
|
|
|
}
|
|
|
|
}, [isSubmitting, setShowAlert, setIsSubmitting]);
|
|
|
|
|
|
|
|
const issue = issueId ? getIssueById(issueId) : undefined;
|
2024-01-10 14:39:45 +00:00
|
|
|
if (!issue) return <></>;
|
|
|
|
|
|
|
|
const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
|
|
|
|
|
2024-02-19 10:13:57 +00:00
|
|
|
const issueDescription =
|
|
|
|
issue.description_html !== undefined || issue.description_html !== null
|
|
|
|
? issue.description_html != ""
|
|
|
|
? issue.description_html
|
|
|
|
: "<p></p>"
|
|
|
|
: undefined;
|
|
|
|
|
2024-01-10 14:39:45 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="rounded-lg space-y-4">
|
|
|
|
{issue.parent_id && (
|
|
|
|
<IssueParentDetail
|
|
|
|
workspaceSlug={workspaceSlug}
|
|
|
|
projectId={projectId}
|
|
|
|
issueId={issueId}
|
|
|
|
issue={issue}
|
|
|
|
issueOperations={issueOperations}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<div className="mb-2.5 flex items-center">
|
|
|
|
{currentIssueState && (
|
|
|
|
<StateGroupIcon
|
|
|
|
className="mr-3 h-4 w-4"
|
|
|
|
stateGroup={currentIssueState.group}
|
|
|
|
color={currentIssueState.color}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
|
|
|
|
</div>
|
|
|
|
|
2024-02-16 14:37:04 +00:00
|
|
|
<IssueTitleInput
|
2024-01-10 14:39:45 +00:00
|
|
|
workspaceSlug={workspaceSlug}
|
2024-02-16 14:37:04 +00:00
|
|
|
projectId={issue.project_id}
|
|
|
|
issueId={issue.id}
|
2024-02-18 09:58:37 +00:00
|
|
|
isSubmitting={isSubmitting}
|
2024-01-10 14:39:45 +00:00
|
|
|
setIsSubmitting={(value) => setIsSubmitting(value)}
|
|
|
|
issueOperations={issueOperations}
|
2024-01-11 12:56:58 +00:00
|
|
|
disabled={!is_editable}
|
2024-02-16 14:37:04 +00:00
|
|
|
value={issue.name}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<IssueDescriptionInput
|
|
|
|
workspaceSlug={workspaceSlug}
|
|
|
|
projectId={issue.project_id}
|
|
|
|
issueId={issue.id}
|
2024-02-19 10:13:57 +00:00
|
|
|
value={issueDescription}
|
|
|
|
initialValue={issueDescription}
|
2024-02-16 14:37:04 +00:00
|
|
|
disabled={!is_editable}
|
2024-02-19 10:13:57 +00:00
|
|
|
issueOperations={issueOperations}
|
|
|
|
setIsSubmitting={(value) => setIsSubmitting(value)}
|
2024-01-10 14:39:45 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
{currentUser && (
|
|
|
|
<IssueReaction
|
|
|
|
workspaceSlug={workspaceSlug}
|
|
|
|
projectId={projectId}
|
|
|
|
issueId={issueId}
|
|
|
|
currentUser={currentUser}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{currentUser && (
|
|
|
|
<SubIssuesRoot
|
|
|
|
workspaceSlug={workspaceSlug}
|
|
|
|
projectId={projectId}
|
2024-01-16 07:16:03 +00:00
|
|
|
parentIssueId={issueId}
|
2024-01-10 14:39:45 +00:00
|
|
|
currentUser={currentUser}
|
2024-01-16 07:16:03 +00:00
|
|
|
disabled={!is_editable}
|
2024-01-10 14:39:45 +00:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<IssueAttachmentRoot
|
|
|
|
workspaceSlug={workspaceSlug}
|
|
|
|
projectId={projectId}
|
|
|
|
issueId={issueId}
|
2024-01-11 12:56:58 +00:00
|
|
|
disabled={!is_editable}
|
2024-01-10 14:39:45 +00:00
|
|
|
/>
|
|
|
|
|
2024-01-30 14:43:28 +00:00
|
|
|
<IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
|
2024-01-10 14:39:45 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
});
|