import { useEffect, useState, useRef, FC } from "react"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; import { PlusIcon } from "lucide-react"; // hooks import { useEventTracker, useProject } from "hooks/store"; import useToast from "hooks/use-toast"; import useKeypress from "hooks/use-keypress"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; // helpers import { renderFormattedPayloadDate } from "helpers/date-time.helper"; import { createIssuePayload } from "helpers/issue.helper"; // types import { IProject, TIssue } from "@plane/types"; interface IInputProps { formKey: string; register: any; setFocus: any; projectDetail: IProject | null; } const Inputs: FC = (props) => { const { formKey, register, setFocus, projectDetail } = props; useEffect(() => { setFocus(formKey); }, [formKey, setFocus]); return (
{projectDetail?.identifier ?? "..."}
); }; type IGanttQuickAddIssueForm = { prePopulatedData?: Partial; onSuccess?: (data: TIssue) => Promise | void; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; }; const defaultValues: Partial = { name: "", }; export const GanttQuickAddIssueForm: React.FC = observer((props) => { const { prePopulatedData, quickAddCallback, viewId } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // hooks const { getProjectById } = useProject(); const { captureIssueEvent } = useEventTracker(); const { setToastAlert } = useToast(); const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined; const ref = useRef(null); const [isOpen, setIsOpen] = useState(false); const handleClose = () => setIsOpen(false); useKeypress("Escape", handleClose); useOutsideClickDetector(ref, handleClose); // form info const { reset, handleSubmit, setFocus, register, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); useEffect(() => { if (!isOpen) reset({ ...defaultValues }); }, [isOpen, reset]); const onSubmitHandler = async (formData: TIssue) => { if (isSubmitting || !workspaceSlug || !projectId) return; reset({ ...defaultValues }); const targetDate = new Date(); targetDate.setDate(targetDate.getDate() + 1); const payload = createIssuePayload(projectId.toString(), { ...(prePopulatedData ?? {}), ...formData, start_date: renderFormattedPayloadDate(new Date()), target_date: renderFormattedPayloadDate(targetDate), }); try { quickAddCallback && (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => { captureIssueEvent({ eventName: "Issue created", payload: { ...res, state: "SUCCESS", element: "Gantt quick add" }, path: router.asPath, }); })); setToastAlert({ type: "success", title: "Success!", message: "Issue created successfully.", }); } catch (err: any) { captureIssueEvent({ eventName: "Issue created", payload: { ...payload, state: "FAILED", element: "Gantt quick add" }, path: router.asPath, }); setToastAlert({ type: "error", title: "Error!", message: err?.message || "Some error occurred. Please try again.", }); } }; return ( <>
{isOpen ? (
{`Press 'Enter' to add another issue`}
) : (
setIsOpen(true)} > New Issue
)}
); });