import React, { useState } from "react"; // swr import useSWR from "swr"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // react hook form import { useForm, Controller, UseFormWatch } from "react-hook-form"; // services import issuesServices from "lib/services/issues.service"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // fetching keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; // commons import { copyTextToClipboard } from "constants/common"; // ui import { Input, Button, Spinner } from "ui"; import { Popover } from "@headlessui/react"; // icons import { TagIcon, ChevronDownIcon, ClipboardDocumentIcon, LinkIcon, CalendarDaysIcon, TrashIcon, PlusIcon, XMarkIcon, } from "@heroicons/react/24/outline"; // types import type { Control } from "react-hook-form"; import type { IIssue, IIssueLabels, NestedKeyOf } from "types"; import { TwitterPicker } from "react-color"; import { positionEditorElement } from "components/lexical/helpers/editor"; import SelectState from "./select-state"; import SelectPriority from "./select-priority"; import SelectParent from "./select-parent"; import SelectCycle from "./select-cycle"; import SelectAssignee from "./select-assignee"; import SelectBlocker from "./select-blocker"; import SelectBlocked from "./select-blocked"; type Props = { control: Control; submitChanges: (formData: Partial) => void; issueDetail: IIssue | undefined; watch: UseFormWatch; setDeleteIssueModal: React.Dispatch>; }; const defaultValues: Partial = { name: "", colour: "#ff0000", }; const IssueDetailSidebar: React.FC = ({ control, submitChanges, issueDetail, watch: watchIssue, setDeleteIssueModal, }) => { const [createLabelForm, setCreateLabelForm] = useState(false); const { activeWorkspace, activeProject, issues } = useUser(); const { setToastAlert } = useToast(); const { data: issueLabels, mutate: issueLabelMutate } = useSWR( activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null, activeProject && activeWorkspace ? () => issuesServices.getIssueLabels(activeWorkspace.slug, activeProject.id) : null ); const { register, handleSubmit, formState: { isSubmitting }, reset, watch, control: controlLabel, } = useForm({ defaultValues, }); const handleNewLabel = (formData: any) => { if (!activeWorkspace || !activeProject || isSubmitting) return; issuesServices .createIssueLabel(activeWorkspace.slug, activeProject.id, formData) .then((res) => { console.log(res); reset(defaultValues); issueLabelMutate((prevData) => [...(prevData ?? []), res], false); }); }; const handleCycleChange = (cycleId: string) => { if (activeWorkspace && activeProject && issueDetail) issuesServices.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, { issue: issueDetail.id, }); }; console.log(issueDetail); return ( <>

{activeProject?.identifier}-{issueDetail?.sequence_id}

i.id !== issueDetail?.id && i.id !== issueDetail?.parent && i.parent !== issueDetail?.id ) ?? [] } customDisplay={ issueDetail?.parent_detail ? ( ) : (
No parent selected
) } watch={watchIssue} /> i.id !== issueDetail?.id) ?? []} watch={watchIssue} /> i.id !== issueDetail?.id) ?? []} watch={watchIssue} />

Due date

( { submitChanges({ target_date: e.target.value }); onChange(e.target.value); }} className="hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 w-full" /> )} />

Label

{issueDetail?.label_details.map((label) => ( { const updatedLabels = issueDetail?.labels.filter((l) => l !== label.id); submitChanges({ labels_list: updatedLabels, }); }} > {label.name} ))} ( submitChanges({ labels_list: val })} className="flex-shrink-0" > {({ open }) => ( <> Label
Select Label
{issueLabels ? ( issueLabels.length > 0 ? ( issueLabels.map((label: IIssueLabels) => ( `${ active || selected ? "bg-indigo-50" : "" } flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 truncate` } value={label.id} > {label.name} )) ) : (
No labels found
) ) : ( )}
)}
)} />
{createLabelForm && (
{({ open }) => ( <> {watch("colour") && watch("colour") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
)}
); }; export default IssueDetailSidebar;