import React from "react"; import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { TwitterPicker } from "react-color"; import { Dialog, Popover, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // hooks import { useProjectState } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Button, CustomSelect, Input, TextArea } from "@plane/ui"; // icons import { ChevronDown } from "lucide-react"; // types import type { IState } from "@plane/types"; // constants import { GROUP_CHOICES } from "constants/project"; // types type Props = { isOpen: boolean; projectId: string; handleClose: () => void; }; const defaultValues: Partial = { name: "", description: "", color: "rgb(var(--color-text-200))", group: "backlog", }; export const CreateStateModal: React.FC = observer((props) => { const { isOpen, projectId, handleClose } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { createState } = useProjectState(); // toast alert const { setToastAlert } = useToast(); // form info const { formState: { errors, isSubmitting }, handleSubmit, watch, control, reset, } = useForm({ defaultValues, }); const onClose = () => { handleClose(); reset(defaultValues); }; const onSubmit = async (formData: IState) => { if (!workspaceSlug) return; const payload: IState = { ...formData, }; await createState(workspaceSlug.toString(), projectId.toString(), payload) .then(() => { onClose(); }) .catch((err) => { const error = err.response; if (typeof error === "object") { Object.keys(error).forEach((key) => { setToastAlert({ type: "error", title: "Error!", message: Array.isArray(error[key]) ? error[key].join(", ") : error[key], }); }); } else { setToastAlert({ type: "error", title: "Error!", message: error ?? err.status === 400 ? "Another state exists with the same name. Please try again with another name." : "State could not be created. Please try again.", }); } }); }; return (
Create State
( <> )} />
( {Object.keys(GROUP_CHOICES).map((key) => ( {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]} ))} )} />
{({ open }) => ( <> Color {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
(