import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-hook-form import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // hooks import useToast from "hooks/use-toast"; // services import issuesServices from "services/issues.service"; // ui import { PrimaryButton, SecondaryButton } from "components/ui"; // icons import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { BlockerIcon, LayerDiagonalIcon } from "components/icons"; // types import { IIssue, UserAuth } from "types"; // fetch-keys import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; type FormInput = { blocker_issue_ids: string[]; }; type Props = { submitChanges: (formData: Partial) => void; issuesList: IIssue[]; watch: UseFormWatch; userAuth: UserAuth; }; export const SidebarBlockerSelect: React.FC = ({ submitChanges, issuesList, watch, userAuth, }) => { const [query, setQuery] = useState(""); const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false); const { setToastAlert } = useToast(); const router = useRouter(); const { workspaceSlug, projectId } = router.query; 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 { handleSubmit, reset, watch: watchBlocker, setValue, } = useForm({ defaultValues: { blocker_issue_ids: [], }, }); const handleClose = () => { setIsBlockerModalOpen(false); reset(); }; const onSubmit: SubmitHandler = (data) => { if (!data.blocker_issue_ids || data.blocker_issue_ids.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } if (!Array.isArray(data.blocker_issue_ids)) data.blocker_issue_ids = [data.blocker_issue_ids]; const newBlockers = [...watch("blockers_list"), ...data.blocker_issue_ids]; submitChanges({ blockers_list: newBlockers }); handleClose(); }; const filteredIssues: IIssue[] = query === "" ? issuesList : issuesList.filter( (issue) => issue.name.toLowerCase().includes(query.toLowerCase()) || `${issue.project_detail.identifier}-${issue.sequence_id}` .toLowerCase() .includes(query.toLowerCase()) ); const isNotAllowed = userAuth.isGuest || userAuth.isViewer; return (

Blocking

{watch("blockers_list") && watch("blockers_list").length > 0 ? watch("blockers_list").map((issue) => (
i.id === issue)?.id }`} > {`${issues?.find((i) => i.id === issue)?.project_detail?.identifier}-${ issues?.find((i) => i.id === issue)?.sequence_id }`}
)) : null}
setQuery("")} appear >
{ const selectedIssues = watchBlocker("blocker_issue_ids"); if (selectedIssues.includes(val)) setValue( "blocker_issue_ids", selectedIssues.filter((i) => i !== val) ); else setValue("blocker_issue_ids", [...selectedIssues, val]); }} >
{filteredIssues.length > 0 ? (
  • {query === "" && (

    Select blocker issues

    )}
      {filteredIssues.map((issue) => { if ( !watch("blockers_list").includes(issue.id) && !watch("blocked_list").includes(issue.id) ) return ( `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${ active ? "bg-gray-900 bg-opacity-5 text-brand-base" : "" }` } >
      { issues?.find((i) => i.id === issue.id)?.project_detail ?.identifier } -{issue.sequence_id} {issue.name}
      ); })}
  • ) : (

    No issues found. Create a new issue with{" "}
    C
    .

    )}
    {filteredIssues.length > 0 && (
    Cancel Add selected issues
    )}
    ); };