import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; import { SubmitHandler, useForm } from "react-hook-form"; import { Combobox, Dialog, Transition } from "@headlessui/react"; // services import { IssueService } from "services/issue"; // hooks import useToast from "hooks/use-toast"; // ui import { Button, LayersIcon } from "@plane/ui"; // icons import { Search } from "lucide-react"; // types import { IUser, TIssue } from "@plane/types"; // fetch keys import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; // store hooks import { useIssues, useProject } from "hooks/store"; // components import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item"; // constants import { EIssuesStoreType } from "constants/issue"; type FormInput = { delete_issue_ids: string[]; }; type Props = { isOpen: boolean; onClose: () => void; user: IUser | undefined; }; const issueService = new IssueService(); export const BulkDeleteIssuesModal: React.FC = observer((props) => { const { isOpen, onClose } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // hooks const { getProjectById } = useProject(); const { issues: { removeBulkIssues }, } = useIssues(EIssuesStoreType.PROJECT); // states const [query, setQuery] = useState(""); // fetching project issues. const { data: issues } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null, workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null ); const { setToastAlert } = useToast(); const { handleSubmit, watch, reset, setValue, formState: { isSubmitting }, } = useForm({ defaultValues: { delete_issue_ids: [], }, }); const handleClose = () => { setQuery(""); reset(); onClose(); }; const handleDelete: SubmitHandler = async (data) => { if (!workspaceSlug || !projectId) return; if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) { setToastAlert({ type: "error", title: "Error!", message: "Please select at least one issue.", }); return; } if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids]; await removeBulkIssues(workspaceSlug as string, projectId as string, data.delete_issue_ids) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Issues deleted successfully!", }); handleClose(); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again.", }) ); }; const projectDetails = getProjectById(projectId as string); const filteredIssues: TIssue[] = query === "" ? Object.values(issues ?? {}) : Object.values(issues ?? {})?.filter( (issue) => issue.name.toLowerCase().includes(query.toLowerCase()) || `${projectDetails?.identifier}-${issue.sequence_id}`.toLowerCase().includes(query.toLowerCase()) ) ?? []; return ( setQuery("")} appear>
{ const selectedIssues = watch("delete_issue_ids"); if (selectedIssues.includes(val)) setValue( "delete_issue_ids", selectedIssues.filter((i) => i !== val) ); else setValue("delete_issue_ids", [...selectedIssues, val]); }} >
{filteredIssues.length > 0 ? (
  • {query === "" && (

    Select issues to delete

    )}
      {filteredIssues.map((issue) => ( ))}
  • ) : (

    No issues found. Create a new issue with{" "}
    C
    .

    )}
    {filteredIssues.length > 0 && (
    )}
    ); });