import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { Controller, useForm } from "react-hook-form"; import { TwitterPicker } from "react-color"; // headless ui import { Popover, Transition } from "@headlessui/react"; // services import { IssueLabelService } from "services/issue"; // hooks import useUser from "hooks/use-user"; // ui import { Input } from "@plane/ui"; import { IssueLabelSelect } from "../select"; // icons import { Plus, X } from "lucide-react"; // types import { IIssue, IIssueLabel } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; import useToast from "hooks/use-toast"; type Props = { issueDetails: IIssue | undefined; labelList: string[]; submitChanges: (formData: any) => void; isNotAllowed: boolean; uneditable: boolean; }; const defaultValues: Partial = { name: "", color: "#ff0000", }; const issueLabelService = new IssueLabelService(); export const SidebarLabelSelect: React.FC = ({ issueDetails, labelList, submitChanges, isNotAllowed, uneditable, }) => { const [createLabelForm, setCreateLabelForm] = useState(false); const router = useRouter(); const { setToastAlert } = useToast(); const { workspaceSlug, projectId } = router.query; const { handleSubmit, formState: { errors, isSubmitting }, reset, watch, control, setFocus, } = useForm>({ defaultValues, }); const { user } = useUser(); const { data: issueLabels, mutate: issueLabelMutate } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, workspaceSlug && projectId ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string) : null ); const handleNewLabel = async (formData: Partial) => { if (!workspaceSlug || !projectId || isSubmitting) return; await issueLabelService .createIssueLabel(workspaceSlug as string, projectId as string, formData, user) .then((res) => { reset(defaultValues); issueLabelMutate((prevData: any) => [...(prevData ?? []), res], false); submitChanges({ labels: [...(issueDetails?.labels ?? []), res.id] }); setCreateLabelForm(false); }) .catch((error) => { setToastAlert({ title: "Oops!", type: "error", message: error?.error ?? "Error while adding the label", }); reset(formData); }); }; useEffect(() => { if (!createLabelForm) return; setFocus("name"); reset(); }, [createLabelForm, reset, setFocus]); return (
{labelList?.map((labelId) => { const label = issueLabels?.find((l) => l.id === labelId); if (label) return ( { const updatedLabels = labelList?.filter((l) => l !== labelId); submitChanges({ labels: updatedLabels, }); }} > {label.name} ); })} submitChanges({ labels: val })} projectId={issueDetails?.project_detail.id ?? ""} label={ Select Label } /> {!isNotAllowed && ( )}
{createLabelForm && (
<> {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} />
( )} /> )}
); };