// react import React, { useState } from "react"; // react-hook-form import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // ui import { Button } from "ui"; // icons import { FlagIcon, FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; // types import { IIssue } from "types"; // constants import { classNames } from "constants/common"; type FormInput = { issue_ids: string[]; }; type Props = { submitChanges: (formData: Partial) => void; issuesList: IIssue[]; watch: UseFormWatch; }; const SelectBlocker: React.FC = ({ submitChanges, issuesList, watch }) => { const [query, setQuery] = useState(""); const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false); const { activeProject, issues } = useUser(); const { setToastAlert } = useToast(); const { register, handleSubmit, reset } = useForm(); const handleClose = () => { setIsBlockerModalOpen(false); reset(); }; const onSubmit: SubmitHandler = (data) => { if (!data.issue_ids || data.issue_ids.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } const newBlockers = [...watch("blockers_list"), ...data.issue_ids]; submitChanges({ blockers_list: newBlockers }); handleClose(); }; return (

Blocking

{watch("blockers_list") && watch("blockers_list").length > 0 ? watch("blockers_list").map((issue) => ( { const updatedBlockers = watch("blockers_list").filter((i) => i !== issue); submitChanges({ blockers_list: updatedBlockers, }); }} > {`${activeProject?.identifier}-${ issues?.results.find((i) => i.id === issue)?.sequence_id }`} )) : null}
setQuery("")} appear >
{issuesList.length > 0 && ( <>
  • {query === "" && (

    Select blocker issues

    )}
      {issuesList.map((issue) => { if ( !watch("blockers_list").includes(issue.id) && !watch("blocked_list").includes(issue.id) ) { return ( classNames( "flex items-center justify-between cursor-pointer select-none rounded-md px-3 py-2", active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" ) } > {({ active }) => ( <>
      {activeProject?.identifier}-{issue.sequence_id} {issue.name}
      )}
      ); } })}
  • )}
    {query !== "" && issuesList.length === 0 && (
    )}
    ); }; export default SelectBlocker;