import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-hook-form import { Controller, SubmitHandler, useForm } from "react-hook-form"; // hooks import { Combobox, Dialog, Transition } from "@headlessui/react"; import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline"; import useToast from "hooks/use-toast"; // services import projectService from "services/project.service"; // headless ui // ui import { Button } from "components/ui"; import { LayerDiagonalIcon } from "components/icons"; // types import { IIssue } from "types"; // fetch-keys import { PROJECT_DETAILS } from "constants/fetch-keys"; type FormInput = { issues: string[]; }; type Props = { isOpen: boolean; handleClose: () => void; type: string; issues: IIssue[]; handleOnSubmit: any; }; const ExistingIssuesListModal: React.FC = ({ isOpen, handleClose: onClose, issues, handleOnSubmit, type, }) => { const [query, setQuery] = useState(""); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: projectDetails } = useSWR( workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null ); const { setToastAlert } = useToast(); const handleClose = () => { onClose(); setQuery(""); reset(); }; const { handleSubmit, reset, control, formState: { isSubmitting }, } = useForm({ defaultValues: { issues: [], }, }); const onSubmit: SubmitHandler = async (data) => { if (!data.issues || data.issues.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } await handleOnSubmit(data); handleClose(); setToastAlert({ title: "Success", type: "success", message: `Issue${data.issues.length > 1 ? "s" : ""} added successfully`, }); }; const filteredIssues: IIssue[] = query === "" ? issues ?? [] : issues.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? []; return ( <> setQuery("")} appear>
(
{filteredIssues.length > 0 ? (
  • {query === "" && (

    Select issues to add to {type}

    )}
      {filteredIssues.map((issue) => ( `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" }` } > {({ selected }) => ( <> {projectDetails?.identifier}-{issue.sequence_id} {issue.name} )} ))}
  • ) : (

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

    )}
    {query !== "" && filteredIssues.length === 0 && (
    )}
    )} /> {filteredIssues.length > 0 && (
    )}
    ); }; export default ExistingIssuesListModal;