import { useState, useEffect, Fragment, FC, ChangeEvent } from "react"; import { useForm, Controller } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // icons import { X } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; import useToast from "hooks/use-toast"; import { useWorkspaceMyMembership } from "contexts/workspace-member.context"; // ui import { Button, CustomSelect, Input, TextArea } from "@plane/ui"; // components import { WorkspaceMemberSelect } from "components/workspace"; import { ImagePickerPopover } from "components/core"; import EmojiIconPicker from "components/emoji-icon-picker"; // helpers import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper"; // types import { IWorkspaceMember } from "types"; // constants import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project"; // track events import { trackEvent } from "helpers/event-tracker.helper"; type Props = { isOpen: boolean; onClose: () => void; setToFavorite?: boolean; workspaceSlug: string; }; interface IIsGuestCondition { onClose: () => void; } const IsGuestCondition: FC = ({ onClose }) => { const { setToastAlert } = useToast(); useEffect(() => { onClose(); setToastAlert({ title: "Error", type: "error", message: "You don't have permission to create project.", }); }, [onClose, setToastAlert]); return null; }; export interface ICreateProjectForm { name: string; identifier: string; description: string; emoji_and_icon: string; network: number; project_lead_member: string; project_lead: string; cover_image: string; icon_prop: any; emoji: string; } export const CreateProjectModal: FC = observer((props) => { const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props; // store const { project: projectStore, workspaceMember: { workspaceMembers }, } = useMobxStore(); // states const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true); // toast const { setToastAlert } = useToast(); // form info const cover_image = PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)]; const { formState: { errors, isSubmitting }, handleSubmit, reset, control, watch, setValue, } = useForm({ defaultValues: { cover_image, description: "", emoji_and_icon: getRandomEmoji(), identifier: "", name: "", network: 2, project_lead: undefined, }, reValidateMode: "onChange", }); const { memberDetails } = useWorkspaceMyMembership(); const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network")); if (memberDetails && isOpen) if (memberDetails.role <= 10) return ; const handleClose = () => { onClose(); setIsChangeInIdentifierRequired(true); reset(); }; const handleAddToFavorites = (projectId: string) => { if (!workspaceSlug) return; projectStore.addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }); }); }; const onSubmit = async (formData: ICreateProjectForm) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const { emoji_and_icon, project_lead_member, ...payload } = formData; if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon; else payload.emoji = formData.emoji_and_icon; payload.project_lead = formData.project_lead_member; return projectStore .createProject(workspaceSlug.toString(), payload) .then((res) => { const newPayload = { ...payload, id: res.id } trackEvent( "CREATE_PROJECT", newPayload, ) setToastAlert({ type: "success", title: "Success!", message: "Project created successfully.", }); if (setToFavorite) { handleAddToFavorites(res.id); } handleClose(); }) .catch((err) => { Object.keys(err.data).map((key) => setToastAlert({ type: "error", title: "Error!", message: err.data[key], }) ); }); }; const handleNameChange = (onChange: any) => (e: ChangeEvent) => { if (!isChangeInIdentifierRequired) { onChange(e); return; } if (e.target.value === "") setValue("identifier", ""); else setValue( "identifier", e.target.value .replace(/[^a-zA-Z0-9]/g, "") .toUpperCase() .substring(0, 5) ); onChange(e); }; const handleIdentifierChange = (onChange: any) => (e: ChangeEvent) => { const { value } = e.target; const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, ""); setIsChangeInIdentifierRequired(false); onChange(alphanumericValue.toUpperCase()); }; return (
{watch("cover_image") !== null && ( Cover Image )}
{ setValue("cover_image", image); }} control={control} value={watch("cover_image")} />
( {value ? renderEmoji(value) : "Icon"}
} onChange={onChange} value={value} /> )} />
( )} /> {errors?.name?.message}
/^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.", minLength: { value: 1, message: "Identifier must at least be of 1 character", }, maxLength: { value: 12, message: "Identifier must at most be of 12 characters", }, }} render={({ field: { value, onChange } }) => ( )} /> {errors?.identifier?.message}
(