import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { useForm, Controller, UseFormWatch, Control } from "react-hook-form"; import { TwitterPicker } from "react-color"; // services import { Popover, Listbox, Transition } from "@headlessui/react"; import { TagIcon, ChevronDownIcon, LinkIcon, CalendarDaysIcon, TrashIcon, PlusIcon, XMarkIcon, } from "@heroicons/react/24/outline"; // hooks import useToast from "hooks/use-toast"; // services import issuesServices from "services/issues.service"; // components import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; import SelectState from "components/project/issues/issue-detail/issue-detail-sidebar/select-state"; import SelectPriority from "components/project/issues/issue-detail/issue-detail-sidebar/select-priority"; import SelectParent from "components/project/issues/issue-detail/issue-detail-sidebar/select-parent"; import SelectCycle from "components/project/issues/issue-detail/issue-detail-sidebar/select-cycle"; import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee"; import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker"; import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked"; // headless ui // ui import { Input, Button, Spinner } from "components/ui"; // icons // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import type { ICycle, IIssue, IIssueLabels } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys"; type Props = { control: Control; submitChanges: (formData: Partial) => void; issueDetail: IIssue | undefined; watch: UseFormWatch; }; const defaultValues: Partial = { name: "", colour: "#ff0000", }; const IssueDetailSidebar: React.FC = ({ control, submitChanges, issueDetail, watch: watchIssue, }) => { const [createLabelForm, setCreateLabelForm] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { setToastAlert } = useToast(); const { data: issues } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null, workspaceSlug && projectId ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string) : null ); const { data: issueLabels, mutate: issueLabelMutate } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, workspaceSlug && projectId ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string) : null ); const { register, handleSubmit, formState: { isSubmitting }, reset, watch, control: controlLabel, } = useForm({ defaultValues, }); const handleNewLabel = (formData: any) => { if (!workspaceSlug || !projectId || isSubmitting) return; issuesServices .createIssueLabel(workspaceSlug as string, projectId as string, formData) .then((res) => { reset(defaultValues); issueLabelMutate((prevData) => [...(prevData ?? []), res], false); submitChanges({ labels_list: [...(issueDetail?.labels ?? []), res.id] }); setCreateLabelForm(false); }); }; const handleCycleChange = (cycleDetail: ICycle) => { if (!workspaceSlug || !projectId || !issueDetail) return; issuesServices .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, { issues: [issueDetail.id], }) .then((res) => { mutate(ISSUE_DETAILS(issueId as string)); }); }; return ( <> setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueDetail} />

{issueDetail?.project_detail?.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="w-full cursor-pointer rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} />

Label

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