import React, { useEffect } from "react"; import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // store hooks import { useEstimate } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Button, Input, TextArea } from "@plane/ui"; // helpers import { checkDuplicates } from "helpers/array.helper"; // types import { IEstimate, IEstimateFormData } from "@plane/types"; type Props = { isOpen: boolean; handleClose: () => void; data?: IEstimate; }; const defaultValues = { name: "", description: "", value1: "", value2: "", value3: "", value4: "", value5: "", value6: "", }; type FormValues = typeof defaultValues; export const CreateUpdateEstimateModal: React.FC = observer((props) => { const { handleClose, data, isOpen } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { createEstimate, updateEstimate } = useEstimate(); // form info // toast alert const { setToastAlert } = useToast(); const { formState: { errors, isSubmitting }, handleSubmit, control, reset, } = useForm({ defaultValues, }); const onClose = () => { handleClose(); reset(); }; const handleCreateEstimate = async (payload: IEstimateFormData) => { if (!workspaceSlug || !projectId) return; await createEstimate(workspaceSlug.toString(), projectId.toString(), payload) .then(() => { onClose(); }) .catch((err) => { const error = err?.error; const errorString = Array.isArray(error) ? error[0] : error; setToastAlert({ type: "error", title: "Error!", message: errorString ?? err.status === 400 ? "Estimate with that name already exists. Please try again with another name." : "Estimate could not be created. Please try again.", }); }); }; const handleUpdateEstimate = async (payload: IEstimateFormData) => { if (!workspaceSlug || !projectId || !data) return; await updateEstimate(workspaceSlug.toString(), projectId.toString(), data.id, payload) .then(() => { onClose(); }) .catch((err) => { const error = err?.error; const errorString = Array.isArray(error) ? error[0] : error; setToastAlert({ type: "error", title: "Error!", message: errorString ?? "Estimate could not be updated. Please try again.", }); }); }; const onSubmit = async (formData: FormValues) => { if (!formData.name || formData.name === "") { setToastAlert({ type: "error", title: "Error!", message: "Estimate title cannot be empty.", }); return; } if ( formData.value1 === "" || formData.value2 === "" || formData.value3 === "" || formData.value4 === "" || formData.value5 === "" || formData.value6 === "" ) { setToastAlert({ type: "error", title: "Error!", message: "Estimate point cannot be empty.", }); return; } if ( formData.value1.length > 20 || formData.value2.length > 20 || formData.value3.length > 20 || formData.value4.length > 20 || formData.value5.length > 20 || formData.value6.length > 20 ) { setToastAlert({ type: "error", title: "Error!", message: "Estimate point cannot have more than 20 characters.", }); return; } if ( checkDuplicates([ formData.value1, formData.value2, formData.value3, formData.value4, formData.value5, formData.value6, ]) ) { setToastAlert({ type: "error", title: "Error!", message: "Estimate points cannot have duplicate values.", }); return; } const payload: IEstimateFormData = { estimate: { name: formData.name, description: formData.description, }, estimate_points: [], }; for (let i = 0; i < 6; i++) { const point = { key: i, value: formData[`value${i + 1}` as keyof FormValues], }; if (data) payload.estimate_points.push({ id: data.points[i].id, ...point, }); else payload.estimate_points.push({ ...point }); } if (data) await handleUpdateEstimate(payload); else await handleCreateEstimate(payload); }; useEffect(() => { if (data) reset({ ...defaultValues, ...data, value1: data.points[0]?.value, value2: data.points[1]?.value, value3: data.points[2]?.value, value4: data.points[3]?.value, value5: data.points[4]?.value, value6: data.points[5]?.value, }); else reset({ ...defaultValues }); }, [data, reset]); return ( <>
{data ? "Update" : "Create"} Estimate
( )} />
(