plane/web/components/issues/issue-modal/draft-issue-layout.tsx

119 lines
3.3 KiB
TypeScript
Raw Normal View History

2024-01-04 10:59:18 +00:00
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
2024-01-04 10:59:18 +00:00
// hooks
import { TOAST_TYPE, setToast } from "@plane/ui";
import { ConfirmIssueDiscard } from "components/issues";
import { IssueFormRoot } from "components/issues/issue-modal/form";
import { useEventTracker } from "hooks/store";
2024-01-04 10:59:18 +00:00
// services
import { IssueDraftService } from "services/issue";
// ui
2024-01-04 10:59:18 +00:00
// components
// types
import type { TIssue } from "@plane/types";
export interface DraftIssueProps {
changesMade: Partial<TIssue> | null;
data?: Partial<TIssue>;
isCreateMoreToggleEnabled: boolean;
onCreateMoreToggleChange: (value: boolean) => void;
2024-01-04 10:59:18 +00:00
onChange: (formData: Partial<TIssue> | null) => void;
onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
onSubmit: (formData: Partial<TIssue>) => Promise<void>;
projectId: string;
isDraft: boolean;
2024-01-04 10:59:18 +00:00
}
const issueDraftService = new IssueDraftService();
export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
const {
changesMade,
data,
onChange,
onClose,
onSubmit,
projectId,
isCreateMoreToggleEnabled,
onCreateMoreToggleChange,
isDraft,
} = props;
2024-01-04 10:59:18 +00:00
// states
const [issueDiscardModal, setIssueDiscardModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const { captureIssueEvent } = useEventTracker();
2024-01-04 10:59:18 +00:00
const handleClose = () => {
if (changesMade) setIssueDiscardModal(true);
else onClose(false);
};
const handleCreateDraftIssue = async () => {
if (!changesMade || !workspaceSlug || !projectId) return;
const payload = {
...changesMade,
name: changesMade.name?.trim() === "" ? "Untitled" : changesMade.name?.trim(),
};
2024-01-04 10:59:18 +00:00
await issueDraftService
.createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
.then((res) => {
setToast({
type: TOAST_TYPE.SUCCESS,
2024-01-04 10:59:18 +00:00
title: "Success!",
message: "Draft Issue created successfully.",
});
captureIssueEvent({
eventName: "Draft issue created",
payload: { ...res, state: "SUCCESS" },
path: router.asPath,
});
2024-01-04 10:59:18 +00:00
onChange(null);
setIssueDiscardModal(false);
onClose(false);
})
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
2024-01-04 10:59:18 +00:00
title: "Error!",
message: "Issue could not be created. Please try again.",
});
captureIssueEvent({
eventName: "Draft issue created",
payload: { ...payload, state: "FAILED" },
path: router.asPath,
});
});
2024-01-04 10:59:18 +00:00
};
return (
<>
<ConfirmIssueDiscard
isOpen={issueDiscardModal}
handleClose={() => setIssueDiscardModal(false)}
onConfirm={handleCreateDraftIssue}
onDiscard={() => {
onChange(null);
setIssueDiscardModal(false);
onClose(false);
}}
/>
<IssueFormRoot
isCreateMoreToggleEnabled={isCreateMoreToggleEnabled}
onCreateMoreToggleChange={onCreateMoreToggleChange}
data={data}
onChange={onChange}
onClose={handleClose}
onSubmit={onSubmit}
projectId={projectId}
isDraft={isDraft}
/>
2024-01-04 10:59:18 +00:00
</>
);
});