fix: drag and drop function (#815)

* fix: kanban drag and drop * fix: kanban board issue dnd mutation
2023-04-13 19:09:55 +05:30 · 2023-04-13 19:09:55 +05:30 · 3fa6185b63
commit 3fa6185b63
parent 6de94efc7d
6 changed files with 123 additions and 44 deletions
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@ -108,7 +108,9 @@ export const SingleBoard: React.FC<Props> = ({
                    key={issue.id}
                    draggableId={issue.id}
                    index={index}
-                    isDragDisabled={isNotAllowed || selectedGroup === "created_by"}
+                    isDragDisabled={
+                      isNotAllowed || selectedGroup === "created_by" || selectedGroup === "labels"
+                    }
                  >
                    {(provided, snapshot) => (
                      <SingleBoardIssue
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@ -50,7 +50,6 @@ import {
  MODULE_ISSUES_WITH_PARAMS,
  PROJECT_ISSUES_LIST_WITH_PARAMS,
 } from "constants/fetch-keys";
-import useEstimateOption from "hooks/use-estimate-option";

 type Props = {
  type?: string;
@ -93,8 +92,6 @@ export const SingleBoardIssue: React.FC<Props> = ({

  const { orderBy, params } = useIssuesView();

-  const { estimateValue } = useEstimateOption(issue.estimate_point);
-
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;

@ -113,7 +110,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
        >(
          CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
          (prevData) =>
-            handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData),
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
          false
        );
      else if (moduleId)
@ -125,10 +129,17 @@ export const SingleBoardIssue: React.FC<Props> = ({
        >(
          MODULE_ISSUES_WITH_PARAMS(moduleId as string),
          (prevData) =>
-            handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData),
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
          false
        );
-      else
+      else {
        mutate<
          | {
              [key: string]: IIssue[];
@ -136,10 +147,21 @@ export const SingleBoardIssue: React.FC<Props> = ({
          | IIssue[]
        >(
          PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
-          (prevData) =>
-            handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData),
+          (prevData) => {
+            if (!prevData) return prevData;
+
+            return handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            );
+          },
          false
        );
+      }

      issuesService
        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
@ -156,7 +178,18 @@ export const SingleBoardIssue: React.FC<Props> = ({
          console.log(error);
        });
    },
-    [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup, params]
+    [
+      workspaceSlug,
+      projectId,
+      cycleId,
+      moduleId,
+      issue,
+      groupTitle,
+      index,
+      selectedGroup,
+      orderBy,
+      params,
+    ]
  );

  const getStyle = (
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@ -48,6 +48,7 @@ import {
 } from "constants/fetch-keys";
 // image
 import emptyCycle from "public/empty-state/empty-cycle.svg";
+import { orderArrayBy } from "helpers/array.helper";

 type Props = {
  type?: "issue" | "cycle" | "module";
@ -208,8 +209,8 @@ export const IssuesView: React.FC<Props> = ({

              return {
                ...prevData,
-                [sourceGroup]: sourceGroupArray,
-                [destinationGroup]: destinationGroupArray,
+                [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
+                [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
              };
            },
            false
@ -230,8 +231,8 @@ export const IssuesView: React.FC<Props> = ({

              return {
                ...prevData,
-                [sourceGroup]: sourceGroupArray,
-                [destinationGroup]: destinationGroupArray,
+                [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
+                [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
              };
            },
            false
@ -250,8 +251,8 @@ export const IssuesView: React.FC<Props> = ({

              return {
                ...prevData,
-                [sourceGroup]: sourceGroupArray,
-                [destinationGroup]: destinationGroupArray,
+                [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
+                [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
              };
            },
            false
@ -482,24 +483,24 @@ export const IssuesView: React.FC<Props> = ({
            <>
              {isCompleted && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
              {issueView === "list" ? (
-                  <AllLists
-                    type={type}
-                    states={states}
-                    addIssueToState={addIssueToState}
-                    makeIssueCopy={makeIssueCopy}
-                    handleEditIssue={handleEditIssue}
-                    handleDeleteIssue={handleDeleteIssue}
-                    openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
-                    removeIssue={
-                      type === "cycle"
-                        ? removeIssueFromCycle
-                        : type === "module"
-                        ? removeIssueFromModule
-                        : null
-                    }
-                    isCompleted={isCompleted}
-                    userAuth={memberRole}
-                  />
+                <AllLists
+                  type={type}
+                  states={states}
+                  addIssueToState={addIssueToState}
+                  makeIssueCopy={makeIssueCopy}
+                  handleEditIssue={handleEditIssue}
+                  handleDeleteIssue={handleDeleteIssue}
+                  openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                  removeIssue={
+                    type === "cycle"
+                      ? removeIssueFromCycle
+                      : type === "module"
+                      ? removeIssueFromModule
+                      : null
+                  }
+                  isCompleted={isCompleted}
+                  userAuth={memberRole}
+                />
              ) : issueView === "kanban" ? (
                <AllBoards
                  type={type}
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@ -29,7 +29,7 @@ import {
  TrashIcon,
  XMarkIcon,
  ArrowTopRightOnSquareIcon,
-  PaperClipIcon
+  PaperClipIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -82,7 +82,7 @@ export const SingleListIssue: React.FC<Props> = ({

  const { setToastAlert } = useToast();

-  const { groupByProperty: selectedGroup, params } = useIssueView();
+  const { groupByProperty: selectedGroup, orderBy, params } = useIssueView();

  const partialUpdateIssue = useCallback(
    (formData: Partial<IIssue>) => {
@ -97,7 +97,14 @@ export const SingleListIssue: React.FC<Props> = ({
        >(
          CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
          (prevData) =>
-            handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData),
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
          false
        );

@ -110,7 +117,14 @@ export const SingleListIssue: React.FC<Props> = ({
        >(
          MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
          (prevData) =>
-            handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData),
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
          false
        );

@ -122,7 +136,7 @@ export const SingleListIssue: React.FC<Props> = ({
      >(
        PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
        (prevData) =>
-          handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData),
+          handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, orderBy, prevData),
        false
      );

@ -138,7 +152,18 @@ export const SingleListIssue: React.FC<Props> = ({
          } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
        });
    },
-    [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup, params]
+    [
+      workspaceSlug,
+      projectId,
+      cycleId,
+      moduleId,
+      issue,
+      groupTitle,
+      index,
+      selectedGroup,
+      orderBy,
+      params,
+    ]
  );

  const handleCopyText = () => {