// react import React, { useState } from "react"; // react-hook-form import { Controller, SubmitHandler, useForm } from "react-hook-form"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // ui import { Button } from "ui"; // services import issuesServices from "lib/services/issues.service"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // icons import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IssueResponse } from "types"; // constants import { classNames } from "constants/common"; import { mutate } from "swr"; import { CYCLE_ISSUES } from "constants/fetch-keys"; type Props = { isOpen: boolean; handleClose: () => void; issues: IssueResponse | undefined; cycleId: string; }; type FormInput = { issue_ids: string[]; }; const CycleIssuesListModal: React.FC = ({ isOpen, handleClose: onClose, issues, cycleId, }) => { const [query, setQuery] = useState(""); const { activeWorkspace, activeProject } = useUser(); const { setToastAlert } = useToast(); const handleClose = () => { onClose(); setQuery(""); reset(); }; const { handleSubmit, reset, control, formState: { isSubmitting }, } = useForm({ defaultValues: { issue_ids: [], }, }); const handleAddToCycle: SubmitHandler = (data) => { if (!data.issue_ids || data.issue_ids.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } if (activeWorkspace && activeProject) { issuesServices .bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data) .then((res) => { console.log(res); mutate(CYCLE_ISSUES(cycleId)); handleClose(); }) .catch((e) => { console.log(e); }); } }; const filteredIssues: IIssue[] = query === "" ? issues?.results ?? [] : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? []; return ( <> setQuery("")} appear>
(
{filteredIssues.length > 0 && (
  • {query === "" && (

    Select issues to add to cycle

    )}
      {filteredIssues.map((issue) => { if (!issue.issue_cycle) return ( classNames( "flex items-center gap-2 cursor-pointer select-none w-full rounded-md px-3 py-2", active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" ) } > {({ selected }) => ( <> {activeProject?.identifier}-{issue.sequence_id} {issue.name} )} ); })}
  • )}
    {query !== "" && filteredIssues.length === 0 && (
    )}
    )} />
    ); }; export default CycleIssuesListModal;