import { ChangeEvent, FC, useState, useEffect } from "react"; import Link from "next/link"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // components import { IssueAssigneeSelect, IssueLabelSelect, IssueParentSelect, IssuePrioritySelect, IssueProjectSelect, IssueStateSelect, } from "components/issues/select"; import { CycleSelect as IssueCycleSelect } from "components/cycles/select"; import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal"; import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal"; // ui import { Button, CustomMenu, Input, Loader } from "components/ui"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; // helpers import { cosineSimilarity } from "helpers/string.helper"; // types import type { IIssue } from "types"; // rich-text-editor const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false, loading: () => ( ), }); const defaultValues: Partial = { project: "", name: "", description: "", description_html: "

", state: "", cycle: null, priority: null, labels_list: [], }; export interface IssueFormProps { handleFormSubmit: (values: Partial) => void; initialData?: Partial; issues: IIssue[]; projectId: string; setActiveProject: React.Dispatch>; createMore: boolean; setCreateMore: React.Dispatch>; handleClose: () => void; status: boolean; } export const IssueForm: FC = ({ handleFormSubmit, initialData, issues = [], projectId, setActiveProject, createMore, setCreateMore, handleClose, status, }) => { // states const [mostSimilarIssue, setMostSimilarIssue] = useState(); const [cycleModal, setCycleModal] = useState(false); const [stateModal, setStateModal] = useState(false); const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { register, formState: { errors, isSubmitting }, handleSubmit, reset, watch, control, setValue, } = useForm({ defaultValues, mode: "all", reValidateMode: "onChange", }); const handleTitleChange = (e: ChangeEvent) => { const value = e.target.value; const similarIssue = issues?.find((i: IIssue) => cosineSimilarity(i.name, value) > 0.7); setMostSimilarIssue(similarIssue); }; const handleDiscard = () => { reset({ ...defaultValues, project: projectId }); handleClose(); }; const handleCreateUpdateIssue = async (formData: Partial) => { await handleFormSubmit(formData); reset({ ...defaultValues, project: projectId, }); }; useEffect(() => { reset({ ...defaultValues, ...watch(), project: projectId, ...initialData, }); }, [initialData, reset, watch, projectId]); return ( <> {projectId && ( <> setStateModal(false)} projectId={projectId} /> )}
( )} />

{status ? "Update" : "Create"} Issue

{watch("parent") && watch("parent") !== "" ? (
i.id === watch("parent"))?.state_detail .color, }} /> {/* {projects?.find((p) => p.id === projectId)?.identifier}- */} {issues.find((i) => i.id === watch("parent"))?.sequence_id} {issues.find((i) => i.id === watch("parent"))?.name.substring(0, 50)} setValue("parent", null)} />
) : null}
( { setValue("description", jsonValue); setValue("description_html", htmlValue); }} placeholder="Enter Your Text..." /> )} />
( )} /> ( )} /> ( )} /> ( )} /> ( )} /> ( { onChange(e.target.value); }} className="cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} /> {watch("parent") && watch("parent") !== "" ? ( <> setParentIssueListModalOpen(true)} > Change parent issue setValue("parent", null)} > Remove parent issue ) : ( setParentIssueListModalOpen(true)} > Select Parent Issue )}
setCreateMore((prevData) => !prevData)} > Create more
); };