import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import useSWR from "swr"; import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form"; // services import issuesService from "lib/services/issues.service"; // constants import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; // hooks import useToast from "lib/hooks/useToast"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // ui import { Button } from "ui"; // icons import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { BlockedIcon } from "ui/icons"; // 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 SelectBlocked: React.FC = ({ submitChanges, issuesList, watch }) => { const [query, setQuery] = useState(""); const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); 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 { register, handleSubmit, reset, watch: watchBlocked } = useForm(); const handleClose = () => { setIsBlockedModalOpen(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; } if (!Array.isArray(data.issue_ids)) data.issue_ids = [data.issue_ids]; const newBlocked = [...watch("blocked_list"), ...data.issue_ids]; submitChanges({ blocks_list: newBlocked }); handleClose(); }; 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 >
{issuesList.length > 0 && ( <>
  • {query === "" && (

    Select blocked issues

    )}
      {issuesList.map((issue) => { if ( !watch("blocked_list").includes(issue.id) && !watch("blockers_list").includes(issue.id) ) { return ( classNames( "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}
      ); } })}
  • )}
    {query !== "" && issuesList.length === 0 && (
    )}
    ); }; export default SelectBlocked;