import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-hook-form import { Controller, UseFormWatch, useForm } from "react-hook-form"; // react-color import { TwitterPicker } from "react-color"; // headless ui import { Listbox, Popover, Transition } from "@headlessui/react"; // services import issuesService from "services/issues.service"; // hooks import useUser from "hooks/use-user"; // ui import { Input, Spinner } from "components/ui"; // icons import { ChevronDownIcon, PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon, } from "@heroicons/react/24/outline"; // types import { IIssue, IIssueLabels } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; type Props = { issueDetails: IIssue | undefined; issueControl: any; watchIssue: UseFormWatch; submitChanges: (formData: any) => void; isNotAllowed: boolean; uneditable: boolean; }; const defaultValues: Partial = { name: "", color: "#ff0000", }; export const SidebarLabelSelect: React.FC = ({ issueDetails, issueControl, watchIssue, submitChanges, isNotAllowed, uneditable, }) => { const [createLabelForm, setCreateLabelForm] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { register, handleSubmit, formState: { isSubmitting }, reset, watch, control: labelControl, setFocus, } = useForm>({ defaultValues, }); const { user } = useUser(); const { data: issueLabels, mutate: issueLabelMutate } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, workspaceSlug && projectId ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) : null ); const handleNewLabel = async (formData: Partial) => { if (!workspaceSlug || !projectId || isSubmitting) return; await issuesService .createIssueLabel(workspaceSlug as string, projectId as string, formData, user) .then((res) => { reset(defaultValues); issueLabelMutate((prevData) => [...(prevData ?? []), res], false); submitChanges({ labels_list: [...(issueDetails?.labels ?? []), res.id] }); setCreateLabelForm(false); }); }; useEffect(() => { if (!createLabelForm) return; setFocus("name"); reset(); }, [createLabelForm, reset, setFocus]); return (

Label

{watchIssue("labels_list")?.map((labelId) => { const label = issueLabels?.find((l) => l.id === labelId); if (label) return ( { const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== labelId); submitChanges({ labels_list: updatedLabels, }); }} > {label.name} ); })} ( submitChanges({ labels_list: val })} className="flex-shrink-0" multiple disabled={isNotAllowed || uneditable} > {({ open }) => (
Select Label
{issueLabels ? ( issueLabels.length > 0 ? ( issueLabels.map((label: IIssueLabels) => { const children = issueLabels?.filter( (l) => l.parent === label.id ); if (children.length === 0) { if (!label.parent) return ( `${ active || selected ? "bg-custom-background-90" : "" } ${ selected ? "" : "text-custom-text-200" } flex cursor-pointer select-none items-center gap-2 truncate p-2` } value={label.id} > {label.name} ); } else return (
{label.name}
{children.map((child) => ( `${ active || selected ? "bg-custom-background-100" : "" } ${ selected ? "" : "text-custom-text-200" } flex cursor-pointer select-none items-center gap-2 truncate p-2` } value={child.id} > {child.name} ))}
); }) ) : (
No labels found
) ) : ( )}
)}
)} /> {!isNotAllowed && ( )}
{createLabelForm && (
{({ open }) => ( <> {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
)}
); };