chore: implemented drag and drop between dates for project issues, cycle, module, and project views for calendar layout (#2535)

web/store/project-view/index.ts

@@ -1,3 +1,5 @@
 export * from "./project_view_filters.store";
 export * from "./project_view_issues.store";
 export * from "./project_views.store";
+
+export * from "./project_view_issue_calendar_view.store";

web/store/project-view/project_view_issue_calendar_view.store.ts

@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./project_view_issues.store";
+
+export interface IProjectViewIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ProjectViewIssueCalendarViewStore implements IProjectViewIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const viewId = this.rootStore?.projectViews?.viewId;
+    const issueType: IIssueType | null = this.rootStore?.projectViewIssues?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.projectViewIssues.getIssues;
+
+    if (workspaceSlug && projectId && viewId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source.droppableId;
+      const droppableDestinationColumnId = destination.droppableId;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.projectViewIssues.viewIssues,
+        [viewId]: {
+          ...this.rootStore?.projectViewIssues.viewIssues?.[viewId],
+          [issueType]: {
+            ...this.rootStore?.projectViewIssues.viewIssues?.[viewId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.projectViewIssues.viewIssues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}

web/store/project-view/project_view_issues.store.ts

@@ -6,10 +6,18 @@ import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
 import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
 // types
 import { RootStore } from "../root";
-import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store/issue";
 import { IIssue, IIssueFilterOptions } from "types";
 import { IBlockUpdateData } from "components/gantt-chart";
 
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
 export interface IProjectViewIssuesStore {
   // states
   loader: boolean;
@@ -37,6 +45,7 @@ export interface IProjectViewIssuesStore {
 
   // computed
   getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  getIssueType: IIssueType | null;
 }
 
 export class ProjectViewIssuesStore implements IProjectViewIssuesStore {
@@ -75,6 +84,7 @@ export class ProjectViewIssuesStore implements IProjectViewIssuesStore {
       fetchViewIssues: action,
 
       // computed
+      getIssueType: computed,
       getIssues: computed,
     });
 
@@ -108,6 +118,26 @@ export class ProjectViewIssuesStore implements IProjectViewIssuesStore {
     return computedFilters;
   };
 
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
   get getIssues() {
     const viewId: string | null = this.rootStore.projectViews.viewId;
     const issueType = this.rootStore.issue.getIssueType;