import { FC } from "react"; import { Controller, useForm } from "react-hook-form"; // components import EmojiIconPicker from "components/emoji-icon-picker"; import { ImagePickerPopover } from "components/core"; import { CustomSelect } from "components/ui"; import { Button, Input, TextArea } from "@plane/ui"; // types import { IProject, IWorkspace } from "types"; // helpers import { renderEmoji } from "helpers/emoji.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; // constants import { NETWORK_CHOICES } from "constants/project"; // services import { ProjectService } from "services/project"; // hooks import useToast from "hooks/use-toast"; import { useMobxStore } from "lib/mobx/store-provider"; export interface IProjectDetailsForm { project: IProject; workspaceSlug: string; isAdmin: boolean; } const projectService = new ProjectService(); export const ProjectDetailsForm: FC = (props) => { const { project, workspaceSlug, isAdmin } = props; // store const { project: projectStore } = useMobxStore(); // toast const { setToastAlert } = useToast(); // form data const { handleSubmit, watch, control, setValue, setError, formState: { errors, isSubmitting }, } = useForm({ defaultValues: { ...project, emoji_and_icon: project.emoji ?? project.icon_prop, workspace: (project.workspace as IWorkspace).id, }, }); const handleIdentifierChange = (event: React.ChangeEvent) => { const { value } = event.target; const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, ""); const formattedValue = alphanumericValue.toUpperCase(); setValue("identifier", formattedValue); }; const updateProject = async (payload: Partial) => { if (!workspaceSlug || !project) return; return projectStore .updateProject(workspaceSlug.toString(), project.id, payload) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Project updated successfully", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Project could not be updated. Please try again.", }); }); }; const onSubmit = async (formData: IProject) => { if (!workspaceSlug) return; const payload: Partial = { name: formData.name, network: formData.network, identifier: formData.identifier, description: formData.description, cover_image: formData.cover_image, }; if (typeof formData.emoji_and_icon === "object") { payload.emoji = null; payload.icon_prop = formData.emoji_and_icon; } else { payload.emoji = formData.emoji_and_icon; payload.icon_prop = null; } if (project.identifier !== formData.identifier) await projectService .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "") .then(async (res) => { if (res.exists) setError("identifier", { message: "Identifier already exists" }); else await updateProject(payload); }); else await updateProject(payload); }; const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network); const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network")); return (
{watch("cover_image")!}
( )} />
{watch("name")} {watch("identifier")} . {currentNetwork?.label}
( )} />

Project Name

( )} />

Description

(