import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react hook form import { SubmitHandler, useForm } from "react-hook-form"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // services import { IssueService } from "services/issue"; // hooks import useToast from "hooks/use-toast"; import useIssuesView from "hooks/use-issues-view"; // ui import { Button, LayersIcon } from "@plane/ui"; // icons import { Search } from "lucide-react"; // types import { IUser, IIssue } from "types"; // fetch keys import { CYCLE_DETAILS, CYCLE_ISSUES_WITH_PARAMS, MODULE_DETAILS, MODULE_ISSUES_WITH_PARAMS, PROJECT_ISSUES_LIST, PROJECT_ISSUES_LIST_WITH_PARAMS, VIEW_ISSUES, } from "constants/fetch-keys"; type FormInput = { delete_issue_ids: string[]; }; type Props = { isOpen: boolean; onClose: () => void; user: IUser | undefined; }; const issueService = new IssueService(); export const BulkDeleteIssuesModal: React.FC = (props) => { const { isOpen, onClose, user } = props; // router const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query; // 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 { displayFilters, params } = useIssuesView(); // eslint-disable-next-line @typescript-eslint/no-unused-vars const { order_by, group_by, ...viewGanttParams } = params; 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]; const ganttFetchKey = cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString()) : moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString()) : viewId ? VIEW_ISSUES(viewId.toString(), viewGanttParams) : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? ""); await issueService .bulkDeleteIssues( workspaceSlug as string, projectId as string, { issue_ids: data.delete_issue_ids, }, user ) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Issues deleted successfully!", }); if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey); else { if (cycleId) { mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)); mutate(CYCLE_DETAILS(cycleId.toString())); } else if (moduleId) { mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); mutate(MODULE_DETAILS(moduleId as string)); } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)); } handleClose(); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again.", }) ); }; const filteredIssues: IIssue[] = query === "" ? issues ?? [] : issues?.filter( (issue) => issue.name.toLowerCase().includes(query.toLowerCase()) || `${issue.project_detail.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) => ( `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${ active ? "bg-custom-background-80 text-custom-text-100" : "" }` } >
      {issue.project_detail.identifier}-{issue.sequence_id} {issue.name}
      ))}
  • ) : (

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

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