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 issuesService from "services/issues.service"; // ui import { Button } from "components/ui"; // icons import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { BlockedIcon, LayerDiagonalIcon } from "components/icons"; // types import { IIssue } from "types"; // fetch-keys import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; type FormInput = { blocked_issue_ids: string[]; }; type Props = { submitChanges: (formData: Partial) => void; issuesList: IIssue[]; watch: UseFormWatch; }; const SelectBlocked: React.FC = ({ submitChanges, issuesList, watch }) => { const [query, setQuery] = useState(""); const [isBlockedModalOpen, setIsBlockedModalOpen] = 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 ? () => issuesService.getIssues(workspaceSlug as string, projectId as string) : null ); const { handleSubmit, reset, watch: watchBlocked, setValue, } = useForm({ defaultValues: { blocked_issue_ids: [], }, }); const handleClose = () => { setIsBlockedModalOpen(false); reset(); }; const onSubmit: SubmitHandler = (data) => { if (!data.blocked_issue_ids || data.blocked_issue_ids.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } if (!Array.isArray(data.blocked_issue_ids)) data.blocked_issue_ids = [data.blocked_issue_ids]; const newBlocked = [...watch("blocked_list"), ...data.blocked_issue_ids]; submitChanges({ blocks_list: newBlocked }); 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()) ); return (

Blocked by

{watch("blocked_list") && watch("blocked_list").length > 0 ? watch("blocked_list").map((issue) => ( { const updatedBlocked: string[] = watch("blocked_list").filter( (i) => i !== issue ); submitChanges({ blocks_list: updatedBlocked, }); }} > i.id === issue)?.id }`} > {`${ issues?.results.find((i) => i.id === issue)?.project_detail?.identifier }-${issues?.results.find((i) => i.id === issue)?.sequence_id}`} )) : null}
setQuery("")} appear >
{ console.log("Triggered"); const selectedIssues = watchBlocked("blocked_issue_ids"); if (selectedIssues.includes(val)) setValue( "blocked_issue_ids", selectedIssues.filter((i) => i !== val) ); else { const newBlocked = selectedIssues; newBlocked.push(val); setValue("blocked_issue_ids", newBlocked); } }} >
{filteredIssues.length > 0 ? (
  • {query === "" && (

    Select blocked issues

    )}
      {filteredIssues.map((issue) => { if ( !watch("blocked_list").includes(issue.id) && !watch("blockers_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-gray-900" : "" }` } >
      { issues?.results.find((i) => i.id === issue.id) ?.project_detail?.identifier } -{issue.sequence_id} {issue.name}
      ); } })}
  • ) : (

    No issues found. Create a new issue with{" "}
                                    Ctrl/Command + I
                                  
    .

    )}
    ); }; export default SelectBlocked;