feat: bulk assign sub-issues (#284)

apps/app/components/core/existing-issues-list-modal.tsx

@@ -20,7 +20,6 @@ type FormInput = {
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
-  type: string;
   issues: IIssue[];
   handleOnSubmit: any;
 };
@@ -30,7 +29,6 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   handleClose: onClose,
   issues,
   handleOnSubmit,
-  type,
 }) => {
   const [query, setQuery] = useState("");
 
@@ -132,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             <li className="p-2">
                               {query === "" && (
                                 <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                                  Select issues to add to {type}
+                                  Select issues to add
                                 </h2>
                               )}
                               <ul className="text-sm text-gray-700">
@@ -203,7 +201,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         onClick={handleSubmit(onSubmit)}
                         disabled={isSubmitting}
                       >
-                        {isSubmitting ? "Adding..." : `Add to ${type}`}
+                        {isSubmitting ? "Adding..." : "Add selected issues"}
                       </Button>
                     </div>
                   )}

apps/app/components/issues/index.ts

@@ -9,4 +9,3 @@ export * from "./my-issues-list-item";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
 export * from "./sub-issues-list";
-export * from "./sub-issues-list-modal";

apps/app/components/issues/sub-issues-list.tsx

@@ -10,11 +10,14 @@ import { Disclosure, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issues.service";
 // components
-import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
+import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal } from "components/issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
 import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue, IssueResponse, UserAuth } from "types";
 // fetch-keys
@@ -42,6 +45,65 @@ export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth })
       : null
   );
 
+  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 addAsSubIssue = async (data: { issues: string[] }) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesService
+      .addSubIssues(workspaceSlug as string, projectId as string, parentIssue?.id ?? "", {
+        sub_issue_ids: data.issues,
+      })
+      .then((res) => {
+        mutate<IIssue[]>(
+          SUB_ISSUES(parentIssue?.id ?? ""),
+          (prevData) => {
+            let newSubIssues = [...(prevData as IIssue[])];
+
+            data.issues.forEach((issueId: string) => {
+              const issue = issues?.results.find((i) => i.id === issueId);
+
+              if (issue) newSubIssues.push(issue);
+            });
+
+            newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
+
+            return newSubIssues;
+          },
+          false
+        );
+
+        mutate<IssueResponse>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((p) => {
+              if (data.issues.includes(p.id))
+                return {
+                  ...p,
+                  parent: parentIssue.id,
+                };
+
+              return p;
+            }),
+          }),
+          false
+        );
+
+        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   const handleSubIssueRemove = (issueId: string) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -94,10 +156,18 @@ export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth })
         prePopulateData={{ ...preloadedData }}
         handleClose={() => setCreateIssueModal(false)}
       />
-      <SubIssuesListModal
+      <ExistingIssuesListModal
         isOpen={subIssuesListModal}
         handleClose={() => setSubIssuesListModal(false)}
-        parent={parentIssue}
+        issues={
+          issues?.results.filter(
+            (i) =>
+              (i.parent === "" || i.parent === null) &&
+              i.id !== parentIssue?.id &&
+              i.id !== parentIssue?.parent
+          ) ?? []
+        }
+        handleOnSubmit={addAsSubIssue}
       />
       {subIssues && subIssues.length > 0 ? (
         <Disclosure defaultOpen={true}>

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -118,7 +118,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       <ExistingIssuesListModal
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
-        type="cycle"
         issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
         handleOnSubmit={handleAddIssuesToCycle}
       />

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -113,7 +113,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       <ExistingIssuesListModal
         isOpen={moduleIssuesListModal}
         handleClose={() => setModuleIssuesListModal(false)}
-        type="module"
         issues={issues?.results.filter((i) => !i.issue_module) ?? []}
         handleOnSubmit={handleAddIssuesToModule}
       />

apps/app/services/issues.service.ts

@@ -277,6 +277,22 @@ class ProjectIssuesServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addSubIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { sub_issue_ids: string[] }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectIssuesServices();