import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; // components import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules"; // ui import { DateSelect } from "components/ui"; import { Button, Input, TextArea } from "@plane/ui"; // types import { IModule } from "types"; import { IssueProjectSelect } from "components/issues/select"; type Props = { handleFormSubmit: (values: Partial) => Promise; handleClose: () => void; status: boolean; projectId: string; setActiveProject: React.Dispatch>; data?: IModule; }; const defaultValues: Partial = { name: "", description: "", status: "backlog", lead: null, members: [], }; export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, status, projectId, setActiveProject, data, }) => { const { formState: { errors, isSubmitting }, handleSubmit, watch, control, reset, } = useForm({ defaultValues: { project: projectId, name: data?.name || "", description: data?.description || "", status: data?.status || "backlog", lead: data?.lead || null, members: data?.members || [], }, }); const handleCreateUpdateModule = async (formData: Partial) => { await handleFormSubmit(formData); reset({ ...defaultValues, }); }; useEffect(() => { reset({ ...defaultValues, ...data, }); }, [data, reset]); const startDate = watch("start_date"); const targetDate = watch("target_date"); const minDate = startDate ? new Date(startDate) : null; minDate?.setDate(minDate.getDate()); const maxDate = targetDate ? new Date(targetDate) : null; maxDate?.setDate(maxDate.getDate()); return (
( { onChange(val); setActiveProject(val); }} /> )} />

{status ? "Update" : "New"} Module

( )} />
(